🔑 JWT Authorization | Angular Router Guards | Token Refresh 

After trying whole day , taking examples from different websites, at last I found the video. Now all the issues are resolved. Thanks for sharing such a nice video. Keep it up ❤❤👌👌✔✔

¡Gracias desde México!

Thanks , It is good tutorial. Is there any way to refresh expired token instead of error 401 response.

Thank you!

Great! 🚀

pls can u tell me how to logout when refresh token is expired

Thank you very much! 😊 I will have an article for it with sources soon!

Great! Check wsa.dev 💪

The idea is to remove the token from the local storage, so that the requests will not be authorized after logout.

@@DevAcademyCom pls can u tell me how to logout when refresh token is expired

Welcome!

Thanks! Be sure to check out the new podcast :)

Hi, join me on Monday and let's talk about it: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-p34F1qGAxBQ.html

@@DevAcademyCom Ok. Thank you! :)

Same doubt here

Hi, what would you like to do then?

@@DevAcademyCom redirect user to login page

@@bennythazhutha did u find out how can u do that ?

It looks like I had conflict with the code in the part token.jwt, in my api it is token.access_token not token.jwt

Hi, did you follow the code from the tutorial?

@@DevAcademyCom Yes, I did, the problem was that I use a different API, it takes the old token to refresh itself and it doesn't need sprate token for refresh purpose only like in your example.

@@mahmoud-kassem You can always join our slack channel and provide your code snippets :) Somebody will try to help you.

Yes, you can access it by using the browser console but only on your own computer. The same happens to cookie session-id (even if stored in a cookie you can look up the contents with Dev Tools).

@@DevAcademyCom i have the same question, what happen if hacker attack by csrf (Cross-site Request Forgery) or XSS (Cross-site scripting) ?

@@phucnguyenvan4129 He could read both local storage or cookie I guess, so you are fuck*d anyway

To make it safer, you can place tokens in HttpOnly cookie.

Refresh tokens can have much longer validity time, so you don't have to refresh them every time.

but does this mean, that I would need to store an "expires date" for the refresh-token? In this case in-memory, but otherwise in a database...and in addition to the equals condition I would need a date-check in the 'refresh' function.. right?

you don't want to let your token live for too long, do you ?

Token will live as long as unauthorized error status is returned. Isn't? Either way it continues to next.handle(req,header).

@@saimonldable with token refresh we can have expiration time very less for tokens as you don't want it to live it for too long and at the same time shouldn't ask users to login again in every 4 minutes . So that's why we need to implement refresh tokens

@@heisenbergsk21 I am not refering to the refresh token implementation itself, my doubt is with this handles401error where there are 2 paths. the first one leads to refresh token and the second one is implemented in case of having multiple requests/queries. My doubt is: Is it really necessary to implement this second path (else block instruction) where I am using a Behavior Subject object (the refreshTokenSubject)?.

Yes, it will not be deleted. You could have a scheduler on your backend side that periodically removes outdated refresh tokens.

@@DevAcademyCom Thanks for the reply. The idea of implementing a scheduler is good, but I have the following suggestion: 1- if refreshtoken OR auth token is not correct/expired/has been tempered with, then sign out the user by clearing the LS without sending a request to /logout route. 2- in my MySQL DB I made a table for refreshtoken with corresponding userId in it (to link the logged in user with that refreshtoken). Also I don't care about auth token as it has short life time. 3- now that I have linked refreshtoken with a specific user, when the user logs in again I check whether that user had a refreshtoken linked to him/her. 4- if yes, I delete that token from DB and then give the user a new one and save that one in DB. So my question to you now is, is there any problem with this implementation (security problem or something), or is it Ok to implement?

@@Alexmanyo1That sounds good. The only concern is in point 1. Why would you perform this procedure if auth token expires? This case should trigger a regular refresh. As far I understand you want to deal with the situation when there is "phantom" refresh token due to user tempering with auth/refresh token.

@@DevAcademyCom Because I use the expired token to get, for example, the user ID to check it against the user ID linked to the refresh token in the DB. If that token has been tempered with (not expired as I said above, sorry about that) then I can't check whether the user is linked to that refresh token. Also because of this, is it better to store user ID in client and send it like that instead of using expired token to extract that info? In case a hacker steals the expired token with the refreshtoken for example.

Thank you for such a nice comment! I am planning to be more consistent and frequent with content creation! 😊 Have we met on Slack? :-)

@@DevAcademyCom Nope I'm afraid I don't really use Slack :( I did run into an issue with my angular Auth. And I would like to ask you for some advice. What happens if the refresh token times out as well? I am not sure how to handle that. Please help.

Because in that place we are inside of the `pipe()` and we need a RxJS operator. How would you place `return` statement there? :)

@@DevAcademyCom Many thanks

🤡👍

Not really. I explained that in more detail here: dev-academy.com/angular-user-login-and-registration-guide-cookies-and-jwt/

@@DevAcademyCom gotcha, yeah httponly cookies would do the trick perfectly!

Basically yes, but refreshToken can be revoked on the server. Tokens are like passwords, should be kept secure and secret.

Another way to prevent this situation is Refresh Token Rotation. It basically means every time you refresh (let's say every 10 minutes), you generate a new Refresh Token and the old one becomes invalid.

@@DevAcademyCom what if someone steal refresh token and he also know how to rotate refresh token before expires, how to handle this situation?

@@mrtraveller2679 How can someone know how to rotate?

You are right! Thanks for your catchy eye!

Removing from local storage is good enough, because rest services you don't create session on server side.

I think we have to call the logout service, because the way this api is designed, the refresh token needs to be deleted from the server.

Yes! Soon!

Then we should log out the user.

and how? how do we know it's refreshToken request failed?

@@user-yt7rd9fq7q this is my solution. token.interceptor.ts : return next.handle(request).pipe( catchError(error => { if ( error instanceof HttpErrorResponse && error.status === 401 && error.error.refreshToken ) { this.authService.logout().subscribe(success => { if (success) { this.router.navigate(['/login']); } }); return throwError(error); } else if (error instanceof HttpErrorResponse && error.status === 401) { return this.handle401Error(request, next); } else { return throwError(error); } }) ); server side, index.js app.post('/refresh', function(req, res) { const refreshToken = req.body.refreshToken; if (refreshToken in refreshTokens) { const user = { username: refreshTokens[refreshToken], role: 'admin' }; const token = jwt.sign(user, SECRET, { expiresIn: 600 }); res.json({ jwt: token }); } else { res.status(401).json({ refreshToken: true }); } });

@@DevAcademyCom please give an answer to it.... catchError is not working for that pipe...... Pls how to logout pls reply

Great! Did you implement it in your project? :)

@Dev Academy Yes. Already and extended it to as per my requirement.

Hey, it should be fixed now. Does it work for you?

@@DevAcademyCom your link for invite to stack have been expired

@@shubhamsharma5226 Check the new link on the website.

Hahaha! My mistake! 🤣

Yes, that is correct. Who said that this cannot be bypassed? I think you missed the point here. 😋 You can even download the whole JS bundle from the server and read it and stick a "HACKER" on your forehead... 😂

@@DevAcademyCom angular guards its a shit🤣🤣😂

It's mainly for UX :-)

No problem bro 💪

If the attacker has the access token that does not give them the refresh token. To minimise the impact of an attacker gaining the access token you can set the access token to be extremely short lived, e.g access token expires every 60 seconds. No auth system will ever be infallible, but using access/refresh tokens along with ssl/tls certs is one of the most secure methods available. Since the access token is nearly impossible to be stolen via man in the middle attacks, and that it is only stored in the clients memory, it is incredibly unlikely that it'll be stolen unless there is a very directed and purposeful attack on one specific user. A more advanced system to deal with that unlikely scenario would be to have some sort of heuristic algorithm that detects unusual behaviour, e.g requests coming from locations the user has never logged in from before along with other metrics. That topic is well out of the scope of what most small web apps will ever need to implement.

Thanks for response. That sounds logical. I only don't understand have jwtToken && refreshToken saved in localStorage both.

@@MrZajic_ yeah saving in local storage is a bad idea, the access token shouldn't stored at all, and the refresh token should be in a Http-Only cookie, this stops it being accessible through scripts. Another option for web apps is the implicit flow, which is another topic entirely 😊

@@MrZajic_ do you suggest any other options which is more secure for client side storage for accesstoken and refresh token

If your application has an XSS vulnerability, then yes. Everything has its pros and cons. The thing is to be aware of them. You can learn here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-fIaJDU-jGrA.html

@@DevAcademyCom besides the localstorage, what would be the best to store jwt access and refresh tokens?

@@Justaszz in memory

@@DevAcademyCom and if user refreshes page, how to keep him logged in?

You can always mute the whole video.