Angular 15 Login | API | Interceptor | JWT Tokens | Complete Authentication & Authorization

welcome back to Learning Partner so in this video we are going to continue the same what we have seen in the last video in the last video we have seen how we can perform the login and the signup process using local storage in this video we will be integrating with the real API okay so let me show you the API so this is my locally run API project okay here you can see I have on one API that is API slash account okay here I have to pass the email ID and password okay let's try it out if I send the correct email ID and password I will get the token in response let's check that okay this is the user I have already presented in my database if we click on execute okay so in the response you can see we have got the token okay so we have to send this token across all the apis after this okay if we don't say in this token in the headers we won't get the response from the API side stating that it is unauthorized okay let's see we have one more API that is gate all customer if I try to execute it you can see I'm good I'm getting unauthorized error because I am not I am not logged in okay so this same process we are going to see and on in our angular project so first we will integrate this post account API to make the user login [Music] okay and then we will implement the Interceptor so Interceptor is kind of a thing by which we can send the tokens to all the API calls okay so let's start I will show you the login component which is already there okay so this is a login component I have created one service for the account okay here we will create that API call function on login okay so this dot HTTP dot post because we are going to hit the post API then first parameter will be URL and second parameter will be object which we will get from the function parameter oh here we will get the object from the component okay the URL will be you can see this is my local URL from localhost40392 this will be over here and whatever the object we will get now this function is going to return the data type of observable so after the function specifier colon observable any okay after post also we have to specify okay so this is the function by which we will be actually integrating the API okay now this function we have to call in our login so if you have seen the previous video on the login component on the login function we have just find the data from the local storage now instead of this we will be integrating our actual API so let me remove this we have to create the object of our service account okay then in this function let's remove the original code now on this function we have to call our API function this dot account service dot on login we have to pass the object this Dot Login object dot subscribe we have to see also like in login object What fields we have let's say the fields we have in our login object and the object we need for the API okay so here we have username and password but in our API we need email ID and password these two fields because objects should match okay now let's bind that to the HTML template also in NG model we have to change it foreign object we are binding okay so next thing let's integrate let's try to store the whatever the once we hit this API we will get the tokens from that response okay we are going to store that into the local storage let's add a debugger and let's store the data into the local storage whatever the tech one we get we will store that into the local storage let's say token and comma result dot token res dot token if you see the Swagger scroll down yeah so here you can see we are getting the object inside that object we have one field that is token so we will storing we'll be storing that into the local storage okay so let's just add a debugger and let's see in this once we vacate the API response we will get the execution point over here okay so let's see now click on login let's provide the username and details admin gmail.com let's open the console to enable the debugger on click of login we should see one network call okay so here you can see you know if you see the login object we have we have got the email ID and the password what we have typed in the text box okay that we are sending to the API call function let's click on continue let's say continue let's check the network tab okay it is getting coarse error let me check the API this is an API issue let me check that okay so that issue was because I didn't added course origin on the my API side so you can see on line number 19 I have added that so now we can hit the API from the front-end side okay so let's run let's read on the project okay now let's try it again if we click on login we get the component function then we will go to the service okay so you can see in the we have got the response if you see in the result we have got the token now this same token we are going to store into the local storage okay so once the user is logged in we have to redirected it to some another component okay so let's just redirect that okay in the local storage you can see the token let's do the redirect thing so this is my existing project so let's say any component to redirect let's go to the routing file okay so once user is successfully login we will just redirect to the dashboard page okay so for that we have to create the router service so once user is successfully logged in we are getting a response from the API we have to redirect it okay so for that we have to create the router service object in the Constructor then using navigate this Dot router.navigate by URL we can navigate to that particular route navigated by URL and pass the particular route name in the Stream format dashboard okay let's see like after the successful API all we should be redirected to the dashboard let's go back and again click on login foreign once we get the response continue okay so see once we have got the response we are redirecting it to the login page so you can see once uh after we have got the response we have redirected to the dashboard page foreign okay so you can see if I'm logged in I am getting redirected to the dashboard page now one more API was there let's go to the Swagger okay one more API was there that was let me minimize this get all customer okay so this API is this API is authenticated means unless user is user is not passing the token with this API you won't get the data so now we have to indicate integrate this API in our at that angular project in the dashboard component in the account service let's create one more service call let me create it okay so I have created this function get your get customer function is there which is going to hit this API slash Master get all customer this is the gate API okay now I have used this function into my dashboard component on the page load I have called this function you can see but before this we have to send the token also along with this API call so for that we need to create Interceptor so let's create the Interceptor on the service NG the comma we have a command to create the Interceptor that is MGA generate Interceptor then let's name our Interceptor as custom once we click on enter it will generate the intro so now Interceptor is created let's see how it yeah so once we create the Interceptor it will look like this let me close this okay so this is the basic Interceptor which will look like it is okay now from here what we have to do we just have to pass the token along with this so when uh when we make any APA call that is the HTTP vehicle after from the service it will came here it will come here then we will inject our token into the current request so for that okay so we have to whatever the incoming request is there we have to modify that using request.clone so if you can see first I have read the data which we have stored once the user was logged in from the local storage then I am passing that to the Clone so now it is a bearer token so we have to you can say request dot header and authorization then Bearer and then our token we are sending okay so this is how we are sending the token once we create the Interceptor this entry should be added into the app model as well so let's go to the app module in the provider section we have to add that in the object format okay so this is the object we have to add in the provider in the app module okay so for this we need the Imports so for HTTP Interceptor it will be again from the angular common slash HTTP and this is our class okay the Interceptor we have created okay so this is the second step after creating the Interceptor now let's check it let's add a debugger in Interceptor as well so you will see let's add the debugger in service as well yeah here also we will add it then in interceptor this intercept method okay so you will see like how the application flows goes okay so let's reload that's me let me enable the debugger okay let's reload okay so first is like let's continue so I have so many debuggers so I will explain you the important one okay so let's check it now so when the component load on the engine in it we have make that function call okay let's connect it load okay so now we are in the service so once we once this point execute then it will go to the Interceptor let's continue now you can see we have come to the Interceptor so after where wherever we write the API call now after that it will come to the Interceptor now if we see the request so you can see this was the gate request whatever the request thing was there now we are just loading that request and adding a header to that request okay so let's have 10 let's see the token so in the token you can see we have got the token whatever token we have got on the login API that we are adding in the request one more time F10 okay so now if you see the request so in the headers let's expand the header you can see in the headers we will add that okay so it will not be visible once we continue in the network tab we will get to say let's continue let's go to the network tab okay let's Let It reload now continue continue okay let's check the network app here you can see in the request header you can see authorization VR token we have passed okay so we have got the response as well this request headers here you can see we have passed the token okay so with Interceptor we can change the headers of the outgoing request okay so this is what we have done and we have got the response as well okay so now if we don't send the response if we don't send the token let's clear the token and if I again refresh that API will give us an authorized error continue okay so in console you can see it is unauthorized because user is not logged in so we have not sent the token so it will give us unauthorized error right so this is the way how all our API authentication and login thing work first we have to implement the login page okay so basic our login page was there I will just repeat the steps once again this was our login page in the login page we have hit that over login API once we get the response from that login API we will get the token in your case API might be response can be anything but you will get a token okay that token you can store it in the local storage okay then in dashboard component we have just redirected this to the dashboard component from dashboard component again we have use another API that is get all customer with get our customer we are sending we have implemented the Interceptor so it will go to that interceptor in Interceptor we are modifying the incoming request okay and adding the authorization token that is BR token and reading the data from the local storage whatever the token we have got from the login API okay so then we will get the risk response if we don't send the token or if that token is invalid or the session timeout is there then we will get the response error as unauthorized okay that you can see but if you are sending the proper token then you will get the response so this is how we have to implement the login and authentication with Interceptor and sending the token with all the request after login okay so that's it with the current video please do like and subscribe

Channel: LEARNING PARTNER

Views: 18,610

Keywords: Angular 14 tutorials, angular tutorials, Data Binding in angular, angular 12 tutorial, how to implement login page angular, login page in angular, login functionality in angular, login angular, angular tutorial, angular tutorial for beginners, angular login page angular 14, angular 14, angular interview questions and answers, login, angular interceptor, jwt token in headers angular, send token with api angular, angular token based login, angular 14 interceptor, angular 15

Id: BSU3bIXU85k

Length: 17min 26sec (1046 seconds)

Published: Mon Oct 31 2022