Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SPA refresh to login #24

Closed
luukhoeben opened this issue Sep 16, 2016 · 52 comments
Closed

SPA refresh to login #24

luukhoeben opened this issue Sep 16, 2016 · 52 comments

Comments

@luukhoeben
Copy link

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
@websanova
Copy link
Owner

What version are you using?

On Sep 16, 2016 07:54, "Luuk Hoeben" notifications@github.com 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
Copy link
Author

luukhoeben commented Sep 16, 2016

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
Copy link
Owner

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
Copy link
Author

luukhoeben commented Sep 16, 2016

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
Copy link
Owner

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
Copy link
Author

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
Copy link
Author

luukhoeben commented Sep 16, 2016

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
Copy link
Owner

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
Copy link
Author

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
Copy link
Author

luukhoeben commented Sep 16, 2016

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
Copy link
Owner

Well what does the response say when the refresh occurs?

On Sep 16, 2016 13:26, "Luuk Hoeben" notifications@github.com 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
Copy link
Author

luukhoeben commented Sep 16, 2016

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
Copy link
Owner

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

On Sep 16, 2016 14:30, "Luuk Hoeben" notifications@github.com 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
Copy link
Author

luukhoeben commented Sep 17, 2016

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
Copy link
Owner

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" notifications@github.com 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
Copy link
Author

luukhoeben commented Sep 17, 2016

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
Copy link
Owner

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

On Sep 17, 2016 07:48, "Luuk Hoeben" notifications@github.com 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
Copy link
Author

luukhoeben commented Sep 17, 2016

Sure, I've sent it to your email.

@websanova
Copy link
Owner

rob@websanova.com

On Sep 17, 2016 12:21, "Luuk Hoeben" notifications@github.com 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
Copy link
Author

Okay, I've sent it to rob@websanova.com :)

@luukhoeben
Copy link
Author

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
Copy link
Owner

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

On Sep 19, 2016 10:02 PM, "Luuk Hoeben" notifications@github.com 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
Copy link
Author

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

@websanova
Copy link
Owner

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

On Sep 20, 2016 01:09, "Luuk Hoeben" notifications@github.com 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
Copy link
Author

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
Copy link
Owner

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" notifications@github.com 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
Copy link
Author

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

@websanova
Copy link
Owner

I would think that has nothing to do with plugin.

On Sep 20, 2016 13:31, "Luuk Hoeben" notifications@github.com 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
Copy link
Author

luukhoeben commented Sep 20, 2016

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
Copy link
Owner

Really not sure without seeing some code.

@luukhoeben
Copy link
Author

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
Copy link
Owner

Nope, didn't get anything.

@luukhoeben
Copy link
Author

I'll send it again :)

@websanova
Copy link
Owner

Ok, got it now, will take a look.

@luukhoeben
Copy link
Author

Thanks! Have you found anything wrong?

@websanova
Copy link
Owner

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
Copy link
Author

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
Copy link
Owner

websanova commented Oct 19, 2016

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
Copy link
Author

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
Copy link
Author

luukhoeben commented Oct 19, 2016

@luukhoeben
Copy link
Author

Hey,

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

Thanks! 😄

@neronmoon
Copy link

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
Copy link

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
Copy link

neronmoon commented Nov 22, 2016

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
Copy link

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
Copy link

neronmoon commented Nov 22, 2016

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
Copy link
Owner

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

On Nov 23, 2016 00:51, "Vitaliy Krasnoperov" notifications@github.com
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
Copy link
Owner

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" rob@websanova.com wrote:

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

On Nov 23, 2016 00:51, "Vitaliy Krasnoperov" notifications@github.com
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
Copy link
Owner

Any updates here? If not will close this off.

@websanova
Copy link
Owner

websanova commented Jan 15, 2017 via email

@tachigami
Copy link

tachigami commented Jan 15, 2017

@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
Copy link
Owner

websanova commented Jan 15, 2017 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants