Angular 17 Login Refresh Token using interceptor | Angular Login | Jwt Token

In this Video I have explained Angular 17 Login with API integration with JWT token Plus Interceptor passing token in Headers.
Plus How to get refresh token once token Expires
Angular 17 Login with JWT Token.
Angular 17 login with JWT Token with Refresh Token Functionality .
Angular Login.
Guard In Angular 17.
Authentication in Angular 17.
Authentication and Authorization in Angular 17.
How to Protect Route in Angular 17.
Learn From me
angularacademy.in
Connect With Me
chat.whatsapp....
API Used in video
freeapi.gerasi...
All code will be at
github.com/voi...
Visit Our Mini Project Ideas Portal where you can find So many project
ideas you can try to implement
miniprojectide...
Follow & Connect me on LinkedIn
/ chetan-jogi-a87148ba
#angular17
#angularlogin
#angulartutorial

[@sambasivarao3392]

Very Nice video, thanks for helping with nice videos.

[@frankoppermann1877]

Good explanation. For the refresh token, I think its better to store it in a http-only cookie. Its secure -> no access for attackers via javascript. With the refresh call the refresh token is automatically sent to the backend. Holding the refresh token in the angular app / browser is not necessary and insecure. Stealing the refresh token give attackers long access to the system. Acces tokens normally have a short lifetime 5 minutes for example.

[@LearningPartnerDigital]

Correct.

[@sravankumar4619]

superb vedio bro thanks

[@user-bx7yg7kd8q]

Good explanation. its better that, If share as video the APIs generation , for full stack knowledge

[@LearningPartnerDigital]

Ok will try in next video

[@vilaskiran266]

Very innovative

[@LearningPartnerDigital]

Thanks

[@tubepankajyou]

Thank you Very much for the detailed explanation. Hi Sir, I am using Google IDP with implicit flow, How can I get a refresh token? silent-renew is not working.

[@gvstv_]

Great tutorial

[@AnandRaj-hq4zv]

Very nice sir

[@nitinsawant]

great video +1 like

[@LearningPartnerDigital]

Thanks

[@ramunis4e]

What's the point of using a refresh_token if it's next to an access_token? In this case, if the access token leaks, then along with the refresh token.

[@mahdiandalib186]

plz teach angular and nestJs togehter

[@codewithraj9517]

when multiple api request at the same time and in one api request token is expired how to implement in this senerio refresh token and jwt token .

[@Truth_Taken]

cool

[@abhishekagarwal3370]

if we use subjects n every component then when we emit its value all the components will subscribe it and calls unnecessary api's for eg i have 2 component dasboard and profile when i go to dashboard my api's give 401 then i call my refresh token and emit the subject value then my profile component will also subscribe it and calls the api which is not necessary and if i perform some action on button click and that api return 401 then how we will handle it

[@LearningPartnerDigital]

No at a time whatever component is loaded in dom that's subject subscribe will execute

[@codewithraj9517]

is it best practice to return the refresh token in the response ?

[@DoItWithMe001]

after implementation of interceptor, login api will also need token right? currently i am getting error for this so how can we avoid login api to go through interceptor cause its showing error that Cannot read properties of undefined (reading 'token')

[@tincho_mnj2429]

If you have a stand alone based application in angular 17 you don't have an app.module, how do you configure the interceptor then?

[@evcoXXDxz]

in the imports from app.component.ts

[@mikeweed1754]

Don't you need a Guard for your "Dashboard" route? How do you prevent an unauthenticated user from deep linking directly to it?

[@LearningPartnerDigital]

Yes. This video was mainly focused on refresh token. Releasing another video for guard

[@suryaguthula6531]

thanks alot for the excellent content. Keep it up.

[@LearningPartnerDigital]

Welcome keep watching

[@sanket6543]

Is this the same approach normally industry follow means using interceptor

[@LearningPartnerDigital]

Yes interceptor is the best way to handle this

[@papputarun]

very nice sir can you please share api for this app?

[@LearningPartnerDigital]

freeapi.miniprojectideas.com/index.html

[@vikashbanoriya142]

Sir the same way we can implement Jwt, refresh token in realtime project also

[@LearningPartnerDigital]

Yes

[@Truth_Taken]

please add oauth2 in angular.

[@LearningPartnerDigital]

Yes will soon create this one too

[@Truth_Taken]

@@LearningPartnerDigital thanks

[@mahdiandalib186]

thx man

[@AnkitTiwari-qt5ds]

Have you implemented this in your project and it's working fine??

[@mahdiandalib186]

not yet@@AnkitTiwari-qt5ds

[@seloaneronald2462]

can you share your jwt refresh and token api source code? I created mine but isn't returning an object like yours....wanna see if am in a right directions.

[@LearningPartnerDigital]

Please connect on LinkedIn

[@user-im4vp7jp1z]

Sir, could you please provide api code user in this video?

[@chandreshkumar9046]

onLogin and refreshToken api giving cors error.

[@LearningPartnerDigital]

Please run angular project on 3006 port

[@vikashbanoriya142]

onLogin api showing (Cors issue)

[@LearningPartnerDigital]

run project on 3005 port

[@vikashbanoriya142]

@@LearningPartnerDigital
Sir instead of 4200 I need to run on 3005

[@vikashbanoriya142]

@@LearningPartnerDigital thank you sir

[@LearningPartnerDigital]

@@vikashbanoriya142 on 3005 you should get response. It's allowed on same port make sure url is correct

[@phuccute7465]

Hi sir at 34:00 video when i use router to navigate link to one component it success but when i reload page in that component (example: your component 'localhost:3005/dashboard') it error pages loading not show api not show error message hope you can help me.

[@LearningPartnerDigital]

Sorry but not clear.
Can u connect on LinkedIn n share error image