SPA refresh to login about vue-auth

[websanova]

What version are you using?

On Sep 16, 2016 07:54, "Luuk Hoeben" [email protected] wrote:

Hey,

Got a question, everytime I log in on my SPA (where I use your package) I
go to the protected redirect route and then I can do everything I
want/need, but then when I refresh it refreshes the token and sends me back
to the login screen..

Can you help me with that? (if I need to give aditional information or
something just tell me what you need)

Thanks in advance :)

• Luuk

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#24, or mute the thread
https://github.com/notifications/unsubscribe-auth/ABkcy4yQnt-TCYzM5fvR_kCYNuiNfh4jks5qqoNlgaJpZM4J-3J5
.

[luukhoeben]

oh sorry.. forgot to tell you that. I'm using 1.0.9-dev. I installed using npm install @websanova/vue-auth so I guess I just got the newest version, right?

[websanova]

Ok, when you refresh, do you see any requests being made, to fetch a user or anything like that?

I'm suspecting there is an issue with the tokens from the server being invalid, which would then kick you back to the login

[luukhoeben]

Ehm yeah I see the refresh request but no additional user request.. I use the laravel tymonsdesigns/jwt-auth plugin..

Also when I login (without the refresh, so I can get to everything still) the $auth.user() is undefined.

I just return a json response with the user for the user route, as for the refresh route, It is in the headers but I also return it as json { token: 'very_long_token_string' }

edit: When I refresh, I get a token back, when I look in my localstorage, the token also updated there.

[websanova]

Hmm, so when do the login, you get a token right. So can you try taking that token (from the response) and do the call manually through a REST client directly to the api.

Also note that I have a demo server up that uses Laravel and the same plugin here that might help if the issue is on the api end.

https://github.com/websanova/laravel-api-demo

[luukhoeben]

I think theres something wrong on the api side.. Tho I was looking at the refresh function in your api..

It doesn't refresh the token, or does it?

public function refresh()
{
    return response([
         'status' => 'success'
    ]);
}

[luukhoeben]

I gave a different response back, that's fixed now.. I can fetch the user correctly now, only thing is the refresh still kicks me back to the login page.. just implemented it the same way as you did in the example.

( It refreshes it in the localstorage still, and I get a different one back then I sent but somehow still invalid or something)

edit: this is what I currently have in the refresh route:

$oldToken = JWTAuth::getToken();
$token = JWTAuth::refresh($oldToken);
return response([
    'status' => 'success'
])->header('Authorization', $token);

[websanova]

Ya, so the vue-auth module has some hooks to auto detect anytime a proper header a return parameter is set, so you can actually inject a token at any time during one of the auth calls and it would pick it up.

However in your case it seems the tokens are getting invalidated. You should really be testing outside the plugin manually. For instance it just happens to be the refresh that kicks you because that is the first thing that is getting called, but I would assume any call to the server with that token would return an invalid response.

On a side note, you may also want to check the JWT settings, I remember having some weird issues on that end as well. I think I had to set blacklist_enabled to false.

In config/jwt.php:

'secret' => env('JWT_SECRET', 'somekeyhere'),
'blacklist_enabled' => env('JWT_BLACKLIST_ENABLED', true),

In .env:

JWT_SECRET=somekeyhere=
JWT_BLACKLIST_ENABLED=false

[luukhoeben]

I'll try that and I'll try to test it outside of the plugin. Thanks for the help and patience so far 😄

I'll let you know what it was when I find it!

[luukhoeben]

I don't get it, I just installed your example server, changed all the endpoints to match and it still did exactly the same thing..

Do you have any idea what I can do to debug or fix this?

.. sorry bit of a newbie on JWT auth as you can tell 😞

[websanova]

Well what does the response say when the refresh occurs?

On Sep 16, 2016 13:26, "Luuk Hoeben" [email protected] wrote:

I don't get it, I just installed your example server, changed all the
endpoints to match and it still did exactly the same thing..

Do you have any idea what I can do to debug or fix this?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#24 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABkcy0qdCVjyQW4x5HeUJKPzS8B2Z4ZSks5qqtEygaJpZM4J-3J5
.

[luukhoeben]

I've got this:

Route::get('/auth/refresh', function (Request $request) {
    return response([
        'status' => 'success'
    ]);
})->middleware('jwt.refresh');

in my routes file just like in your example.. In the middleware everything is okay so it returns { status: "success" } with the Authorization header. for example:

Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjQsImlzcyI6Imh0dHA6XC9cL3JtaS5kZXZcL2FwaVwvYXV0aFwvcmVmcmVzaCIsImlhdCI6MTQ3NDA1MDU3MSwiZXhwIjoxNDc0MDU0MTcyLCJuYmYiOjE0NzQwNTA1NzIsImp0aSI6ImI3YjVjYjJiMTEzYWQxYWMyZWZhNGZjOTBhMzE5NWU3In0.OXgU7XolW9GspKVnTSxHPHfNUcBAeT2FSVPJgNO-3Qk
Cache-Control:no-cache
Connection:Keep-Alive
Content-Length:20
Content-Type:application/json
Date:Fri, 16 Sep 2016 18:29:32 GMT
Keep-Alive:timeout=5, max=98
Server:Apache/2.4.12 (Win32) OpenSSL/1.0.1l PHP/5.6.8
Vary:Authorization
X-Powered-By:PHP/5.6.8
X-RateLimit-Limit:60
X-RateLimit-Remaining:58

When I then look in my localstorage there's this default-auth-token and the token has updated to this new one. Although everything seems okay, it kicks me to the login page.

[websanova]

Ok, sonic you take that token and make a request it works?

On Sep 16, 2016 14:30, "Luuk Hoeben" [email protected] wrote:

I've got this:

Route::get('/auth/refresh', function (Request $request) {
return response([
'status' => 'success'
]);
})->middleware('jwt.refresh');

in my routes file just like in your example.. In the middleware everything
is okay so it returns { status: "success" } with the Authorization
header. for example:
Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.
eyJzdWIiOjQsImlzcyI6Imh0dHA6XC9cL3JtaS5kZXZcL2FwaVwvYXV0aFwv
cmVmcmVzaCIsImlhdCI6MTQ3NDA1MDU3MSwiZXhwIjoxNDc0MDU0MTcyLCJu
YmYiOjE0NzQwNTA1NzIsImp0aSI6ImI3YjVjYjJiMTEzYWQxYWMyZWZhNGZj
OTBhMzE5NWU3In0.OXgU7XolW9GspKVnTSxHPHfNUcBAeT2FSVPJgNO-3Qk

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#24 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABkcyxuL1oecLqme6sYMiOy3pEf2r09Yks5qquAygaJpZM4J-3J5
.

[luukhoeben]

You mean if I manually paste it in httpie to the refresh route for example, if I get a success status and a new one back?

That I do. I just get a new one and the success message described in the route.

[websanova]

Ok, so can you try taking that same token and make a few different requests
manually, like an auth, or whatever, see if they all work with that same
token.

On Sep 17, 2016 05:11, "Luuk Hoeben" [email protected] wrote:

You mean if I manually paste it in httpie to the refresh for example, if I
get a success status and a new one back?

That I do. I just get a new one and the success message described in the
route.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#24 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABkcy-lJ63dAZOCwTTz9k6L9KgkARWhvks5qq66xgaJpZM4J-3J5
.

[luukhoeben]

Yes I can, If I take the refreshed token and I make a get request to the /user page (so I should get the user information) I get a 200:OK and just the success status and the user. then if I remove 1 letter it says: { "error": "token_invalid" } as it should.

edit: also if I take the token I got at login, it also says { "error": "token_invalid" } then if I take the refreshed one again, it works. If I then refresh the token for a second time the 1st and 2nd token don't work, and the 3rd one does.

[websanova]

Hmm, do you think you could zip up your code and send it to me...

On Sep 17, 2016 07:48, "Luuk Hoeben" [email protected] wrote:

Yes I can, If I take the refresh token and I make a get request to the
/user page (so I should get the user information) I get a 200:OK and just
the success status and the user. then if I remove 1 letter it says: {
"error": "token_invalid" } as it should.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#24 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABkcy5Zi3eHym_8h9kRMqclJJG0rD3p1ks5qq9OkgaJpZM4J-3J5
.

[luukhoeben]

Sure, I've sent it to your email.

[websanova]

[email protected]

On Sep 17, 2016 12:21, "Luuk Hoeben" [email protected] wrote:

Sure, to your email or what method of sending do you prefer?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#24 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABkcy13_1miQ1oUEW-uPf8HBhTsWu-wGks5qrBOigaJpZM4J-3J5
.

[luukhoeben]

Okay, I've sent it to [email protected] :)

[luukhoeben]

I've cleaned up some now in my application, set the http root just like in your example but it still doesn't work (not that I expected that). I have a question tho, I saw these context properties in every view, and the fact that you named your routes, do you think that could have effect on this issue?

[websanova]

Well it could, not sure how tour routes are setup.

On Sep 19, 2016 10:02 PM, "Luuk Hoeben" [email protected] wrote:

I've cleaned up some now in my application, set the http root just like in
your example but it still doesn't work (not that I expected that). I have a
question tho, I saw these context properties in every view, and the fact
that you named your routes, do you think that could have effect on this
issue?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#24 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABkcy0SjQ-PKf6j39YCWZAMYr5BaeMguks5qrqO5gaJpZM4J-3J5
.

[luukhoeben]

What does the context property do in your example tho? just for the console log?

[websanova]

It's just demo, to make sure funds are getting proper context from calling
components

On Sep 20, 2016 01:09, "Luuk Hoeben" [email protected] wrote:

What does the context property do in your example tho? just for the
console log?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#24 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABkcywjmWcmxxMGRv1dnGDxAUlJtIZ_nks5qrs_XgaJpZM4J-3J5
.

[luukhoeben]

hmm, when I try your demo app and set it to my test api, it says:
XMLHttpRequest cannot load http://rmi.dev/api/auth/login. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8000' is therefore not allowed access.

with my electron app it works to login but not to refresh, is it possible this only works the way I want over https?

[websanova]

Yes, could be, usually https is required for this party api. But depends
how it's all set up.

On Sep 20, 2016 2:18 AM, "Luuk Hoeben" [email protected] wrote:

hmm, when I try your demo app and set it to my test api, it says:
XMLHttpRequest cannot load http://rmi.dev/api/auth/login. Response to
preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://127.0.0.1:8000' is therefore not allowed access.

with my electron app it works to login but not to refresh, is it possible
this only works the way I want over https?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#24 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABkcy7Yvy6tI3oUgQJczB1sYbk89zLWyks5qrt_rgaJpZM4J-3J5
.

[luukhoeben]

So how can I set if up to work using http for now? Because I'm working locally to test the api aswell.

[websanova]

I would think that has nothing to do with plugin.

On Sep 20, 2016 13:31, "Luuk Hoeben" [email protected] wrote:

So how can I set if up to work using http for now? Because I'm working
locally to test the api aswell.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#24 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABkcyxgkk1COqH06R7asgHxdAdkHXqBFks5qr32jgaJpZM4J-3J5
.

[luukhoeben]

true, I'll try to push it up to my server for testing and hopefully it works with https. If it doesn't I'll let you know.

edit: no.. even on https it doesn't work, kicks me right back to the login page with a new token. But when I try to make a request with another client the tokens still work so I think there is still something wrong.. It's weird because I think I have everything the same as you now in my client, except you have an App.vue and I have just put the content of that in my index.html, could that be it or do you think it's something else?

[websanova]

Really not sure without seeing some code.

[luukhoeben]

Haven't you got the code I sent you? I've sent it to the e-mail address you gave me, maybe in your spamfolder?

[websanova]

Nope, didn't get anything.

[luukhoeben]

I'll send it again :)

[websanova]

Ok, got it now, will take a look.

[luukhoeben]

Thanks! Have you found anything wrong?

[websanova]

lol, did you zip up the entire node_modules folder? There is like thousand files in there...

Anyway, this thread is quite old and there have been updates made. I suggest you make sure all your vue packages are all fully updated first.

If you still want to send a sample of your code just put something up on GH for me instead please.

[luukhoeben]

haha no I didn't include the node_modules.. but there are 2 projects in that folder (the API and the frontend electron app). I'll try to update when I get home and I'll update you on what it does then :).

[websanova]

Any luck? btw the package is at v1.3.0-beta now, so you can also try updating to that which may fix some of your issues.

[luukhoeben]

Oh hey I'm sorry, I've kind of forgotten about this project for a bit because I got frustrated that I couldn't get it to work, but I'll pick it back up then :) I've updated the package to v1.3.0-beta but that doesn't change anything, I will upload the project to github today so you will be able to take a look at it if you want 😄

[luukhoeben]

API: https://github.com/luukhoeben/rmi-app-api
Electron Client: https://github.com/luukhoeben/rmi-app-electron

[luukhoeben]

Hey,

Have you had a chance to look at it yet? I'm curious to what I do wrong.

Thanks! 😄

[neronmoon]

bump!

Just wondered why vue-auth does not use fresh token, that received from /refresh endpoint in /user request. It uses old (blacklisted) token instead. Probably, bug here.

[neontuna]

More than likely your /user request went out before the /refresh request and/or response was received. I thought it was a bug too but then realized it really ought to be on the API to allow old tokens some grace period incase a refresh is pending when other requests come in.

[neronmoon]

yeah, but, if my tab is a bit stale, and then i click cmd+R -- i got 401 on /user request, because of the stale token. Click cmd+R again -- and all is OK!
That's not what i expected.

I think the solution is to wait for /refresh response and use right token

[neontuna]

When vue-auth launches it fires a refresh request, immediately followed by your user request, so that's the issue. I do agree that it would probably make sense for the app to wait for its refresh request to complete before allowing other requests to fire but I'm not sure of the amount of work required for that.

[neronmoon]

Just override routerBeforeEach callback.
Solved by this code:

routerBeforeEach: function(cb) {
        function ccb() {
            var token = window.localStorage.getItem('default-' + this.options.tokenName);
            if (this.watch.authenticated === null && token) {
                if ( ! document.cookie.match(/rememberMe/)) {
                    this.options.logoutProcess.call(this, null, {});
                    this.watch.loaded = true
                    return cb.call(this);
                }
                this.watch.authenticated = false
                this.options.fetchPerform.call(this, {success: cb, error: cb});
            } else {
                this.watch.loaded = true;
                return cb.call(this);
            }
        }
        if (this.options.tokenExpired.call(this)) {
            this.options.refreshPerform.call(this, {success: ccb});
        } else {
            ccb();
        }
  }

Will @websanova approve pr if i'll create one?

[websanova]

Are you using the $auth.ready() method?

On Nov 23, 2016 00:51, "Vitaliy Krasnoperov" [email protected]
wrote:

Solved by this code:

routerBeforeEach: function(cb) {
function ccb() {
var token = window.localStorage.getItem('default-' + this.options.tokenName);
if (this.watch.authenticated === null && token) {
if ( ! document.cookie.match(/rememberMe/)) {
this.options.logoutProcess.call(this, null, {});
this.watch.loaded = true
return cb.call(this);
}
this.watch.authenticated = false
this.options.fetchPerform.call(this, {success: cb, error: cb});
} else {
this.watch.loaded = true;
return cb.call(this);
}
}
if (this.options.tokenExpired.call(this)) {
this.options.refreshPerform.call(this, {success: ccb});
} else {
ccb();
}
}

Will @websanova https://github.com/websanova approve pr if i'll create
one?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#24 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABkcy9JL8WoFy_yu5ZfaAka4_Nie3BJ4ks5rAxuxgaJpZM4J-3J5
.

[websanova]

Also the thing with the refresh/user firing at same time is because stale
tokens should work for some time. The refresh plugin is ready to swap the
token at any time during any request.

You just happen to see it with the fetch user, but even running them in
sync does not remove the stale token problem on the server and it can still
kick your app at any time if a token is swamped right at the moment the app
fires off more then one request.

We could say the app will only refresh the token once at the beginning but
some people will be refreshing the token on each request.

I think one couple options here are to allow it to allow the user call to
be disabled and then run manually with some call on auth ready.

Another option would be to have a flag to run it in sync. But this also
means slowing the app down on boot due to two calls to the server. So I
don't think I would make it default behavior.

On Nov 23, 2016 16:13, "Rob" [email protected] wrote:

Are you using the $auth.ready() method?

On Nov 23, 2016 00:51, "Vitaliy Krasnoperov" [email protected]
wrote:

Solved by this code:

routerBeforeEach: function(cb) {
function ccb() {
var token = window.localStorage.getItem('default-' + this.options.tokenName);
if (this.watch.authenticated === null && token) {
if ( ! document.cookie.match(/rememberMe/)) {
this.options.logoutProcess.call(this, null, {});
this.watch.loaded = true
return cb.call(this);
}
this.watch.authenticated = false
this.options.fetchPerform.call(this, {success: cb, error: cb});
} else {
this.watch.loaded = true;
return cb.call(this);
}
}
if (this.options.tokenExpired.call(this)) {
this.options.refreshPerform.call(this, {success: ccb});
} else {
ccb();
}
}

Will @websanova https://github.com/websanova approve pr if i'll create
one?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#24 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABkcy9JL8WoFy_yu5ZfaAka4_Nie3BJ4ks5rAxuxgaJpZM4J-3J5
.

[websanova]

Any updates here? If not will close this off.

[websanova]

Are you using the latest version?

…

On Jan 15, 2017 6:19 AM, "Roman" ***@***.***> wrote: @websanova <https://github.com/websanova> Same here for me. I use SPA and when I reload the web page /refresh and /user requests are sent but /user request fails(token_invalid) Because of /user request was sent with the token blacklisted before. Why this isn't happens with demo app? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#24 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABkcy6nadlqM35Me60l3PgWDOFPpNwsrks5rSVf1gaJpZM4J-3J5> .

[tachigami]

@websanova Thank you for answer. Yes, I used the latest version. I solved my issue by using beta version of tymon/jwt-auth plugin which adds blacklist_grace period.

[websanova]

You can also read my notes in the docs about this. https://github.com/websanova/vue-auth/blob/master/README.md#token-refresh

…

On Jan 15, 2017 8:45 AM, "Roman" ***@***.***> wrote: @websanova <https://github.com/websanova> Thank you for answer. Yes, I used the latest version. I solved my issue by using beta version of tymon/jwt-auth plugin which adds blacklist_grace period. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#24 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABkcy9MqKchmn1AWHFZZGlnxKWh0Pvsvks5rSXo8gaJpZM4J-3J5> .