Angular 17 Login with JWT token | With API | Angular Interceptor

welcome back to Learning Partner so in this video we are going to see Interceptor implementation with the login means login page then Interceptor getting the token from the API and sending the token along with the API so whole how do we Implement Interceptor with the angular 17 since angular 17 is released some of the things are changed now right so whatever you may have implemented before angular 17 the implementation can change now in case of angular 17 and again so many changes are there right now in the previous video I have explained now how do we Implement login page in the angular 17 the video link you will find it in the description but I will explain the code one more time so you can see this is the login page by default I get the login page if I don't have anything in url still I'm getting the login page right now once we do the login in the loog on the login button we have integrated the so this is one of the email ID I'm passing let's try the wrong password first if I click on login you can see I'm getting the error like username and password is wrong now let's enter the correct password that is like 1 13322 on click of login you can see login success message is coming and it it is redirecting to the dashboard page now right after if I click on the log up button I'm again coming back to the login page now let me just show you the code what we have done so first thing like I have created three components dashboard layout and the login layout is just a component which we are going to need once user is logged in and in the layout page we are going to have that now bar right along with the log off and all the navigation link then in the app component we don't have anything just the router Outlet now the main part is routing so this is the routing see this is the first route which is default route so if you can see over here here the path is empty means if we don't have in the if we don't have anything in the URL it will redirect to the login right so login component it will Reed to the login path and login component will load so if we are not logged in app component will act as a parent component so this router Outlet will be activated right now and as I told you like after login we will have layout as a parent component and there we will have a now bar and again we will have a router Outlet so that's why we have one more path the path is empty but the component is layout component and for this layout component we have children so whatever the components you are going to have after the login that all needs to be part of the children of this component right like this now in the login component so simply I have just created a class with the properties I need in my particular object then I have created the object with login object this object I have binded with the form with NG models to use NG model in the login component.ts we have to use the forms module then uh in Constructor I have created HTTP object because we have to make the AP call router also because we are going to navigate now on click of login we have make this AP called HTTP dopost this is the URL and we have to send the object once we get the login we are showing the alert box and we are successfully navigating to the dashboard this is what I have done in the first video now next part of this let me just show you the network call once more time once we hit the API we are getting a token okay so 1 1 3322 now just pay attention to the network tab once we click on the login continue in the login AP response we are getting a token so in data you can see in token property we are getting a token now this is nothing but a JWT token which I'm generating in the API side that I'm returning back to the front end now so these are some apis like gate all user this is the API which we cannot execute unless we pass the token So currently you can see it is saying unauthorized 4 not1 let's try this in the another tab also right so this it is saying like this page not work HTTP 41 41 means basically unauthorized now so to access this API we need to pass the token along with the request right now so we have sto we uh on the API call we are getting the response right in the response we are getting the token that token we need to store into the local storage so let's do that code so once we get the response this is the block is getting going to execute so here local storage do set item and I'm going to store the token so let's say angular 17 token this is my key and the value I have to store is r. data dot let's check the API response inside token property I have the token so in the local storage I'm storing my token in this property name angular 17 token so let's just save this and let's check if we are successfully storing the token or not let's log off let's enter the password currently let's check the local storage in the application local storage let's clear this also now if I click on login login is Success now here in the local storage you can see we have successfully stored the token now next step is like we have to implement the Interceptor let's go to the angular project I have created a service folder in this service folder I will be opening a new terminal and here we have to create the Interceptor so NG generate Interceptor and let's name my ctor as custom enter so this will create two file one is the Interceptor file and another is a testing file so let's run it right so you can see over here it has created two file let's expand that so in angular 1 you get Interceptor something like this this is nothing but an arrow function right pre before angular 1 you used to get something like something else but from now on in angular 17 you would get pipe also will you will get like this everything will get changed so this is the basic Interceptor we get now if you remember in Ang before angular versions also whenever we create intercept we used to register that in our app module but now we don't have the app module so still we have to register it right because Interceptor is like what do we say this should be applicable on the global all the APA calls are going to be through the Interceptor so we have app config do app config dots so here we have to resister that Interceptor so that will be again provide HTTP client and inside that with Interceptor and we have to Pro now here with provide Interceptor you can see an array is there right as we can have many as many as Interceptor we wish right so that's why we have to pass array over here inside the r bracket and here we need to pass our Interceptor name our Interceptor name is custom Interceptor so let's copy it let's paste it over here let's add it input so two things we have done with this command we have created Interceptor after interor is created we have to register that to our app config dots instead of app module we have app conf so here we have to register that like this in provide HTTP client and with Interceptor and inside array we have to pass an Interceptor name and the import also next thing let's create another service which will be responsible to get uh like not required to create the service but in dashboard component let's try to get the AP call data so here Constructor the AP call which is restricted unless you pass the token you won't get the data so here private HTTP colon HTTP client on anytime implementing because on the page load I'm going to make the AP calls so Implement on init NG on in it let's create a separate function that will be gate all users we have not done anything code to send the token but first I need to show you like how uh API will throw the error if we don't pass the token so this do http.get let's copy the URL what we have from the Swagger This is My URL so let's paste it over here let's subscribe to the response now this function we have to call on the page load so that's NG on in it this dot like this and whatever the response we get that we need to store it also right so let users call any so whatever the response we get that will that we will store it over here users is equal to r. data so normally we write this only but else cat block also should be there so error because now the cash block will be error block will be necessary so here I am just going to show the error with API error from API right so let's just see if we are making this API call on the dashboard page what is the error uh we get so you can see error from API so if we go to the uh Network call you can see 41 API is proper API URL is proper but it is saying unauthorized because we haven't send the token jwd token we have we have to send because this API is restricted if we send the API token then only it will get us the data otherwise it will say unauthorized now so we have implemented the Interceptor let's just try to add a debugger over here and let's say if uh the Interceptor is working fine or not now after the component let me just add a debugger over here also so that you can see the flow how it works console yeah so it is disabled let's reload one more time so now you can see the first debugger which is activated is from dashboard component once I continue it from here see it is going to the Interceptor means our Interceptor is working properly so Interceptor has is having two parameter request whatever the request we have created from the component that is we have got over here URL and everything and the next is nothing but an object now here we need to modify the incoming request and we have to push some headers into it so let's create that headers into custom interceptor me just zoom a little bit now in request this is nothing but an incoming request whatever the request we have created from the component now that request we need to modify so how do we do that so we just need to create another variable first uh we need to read the local storage variable so let's read cre the token my token is equal to local storage do gate item so while storing the token into uh local storage we have we have stored that into particular key let's get that key so this was my key so this key we are going to put it over here so by this we are reading the token whatever we have in my local storage once we do the login we get the token that token we are storing so that only token we are reading after the token we need to clone the request constant clone request is equal to request dot clone whatever the request in means what currently the HTTP object right whatever the URL parameter object whatever it is there we are just cloning that and while cloning we have to just add new headers to it so set headers is the method we have to use so insert headers again object and the property is authorization authorization and value we have to send is be error token because my API token is be error if you are working on actual industry project or in a company you need to ask your AP team like what what kind of a token you have they will tell you like it is a be Tok or something else or identity so you need to ask your ating in which property you need to send the token that you need to ask them just in my my AP I had to send the token in the authorization along with the beer so in my to my token variable I have got the token so that I will intercept that I have to pass it over here so I will use template l over here so let's get the build sign and here I have to use my token right now whatever the request I have got using that I have created a new clone request and while now instead of the original request what we have got now we have to execute the newly clone request so here we have to pass the newly clone request so let now with this code with every request after the login we are going to send the API so let's save and check now we should get the API response continue now here our code will work so first is like from local storage we are reading the data so you can see here we have got the token whatever we have stored now we have modified our request whatever we have got let's continue now in network tab you can see we have got 200 means let's let me show you the tokens where the token was there so in request headers here authorization be error and the token whatever the token we have got that we have send so now we have got the response now if I remove this token from my local storage and let's refresh one more time now token is not there so again you will get unauthorized error because token is not present over here see token is not present so this this is the token based authentication whenever you do the login you get the token that token you uh store it either in a S Storage local storage or in cookie but after login API whatever the API call you make in all the API call you need to send the token so that's why we implement the Interceptor and in Interceptor we write we pass the headers into the request so that is the use of Interceptor so many uh an Interceptor like in a single point you can show all the errors also uh mock data also you can create right so so many advantages of there in in case of using Interceptor this was this video was mainly focused to how to use that in angular 17 you might already know how you you have done it with the previous version but this is the newly implementation what we have to do so after creating Interceptor this code was almost same just in app config you need to resistant Interceptor like this that's it with the current video I hope you are liing liking my videos please do like and subscribe

Channel: LEARNING PARTNER

Views: 5,832

Keywords: angular 17 login with interceptor, angular 17 interceptor, interceptor in angular 17, angular 17 login page, angular 17 login with api, angular login and authentication, angular login with JWT token, Angular 17 Login with JWT token, send token with api in angular, how to send tojen with api in angular, angular send token with api, send token in header angular, login page in angular, angular login page, authentication in angular, Authorization in angular

Id: mWERmpulRIw

Length: 17min 39sec (1059 seconds)

Published: Tue Jan 23 2024