Angular Login App with JWT token authentication | Interceptor | Angular Login

welcome back to Learning Partner in this video we are going to do a login page but with the jwd authentication right so if you know if you search just directly JWT or token right so you can say like Json web token so JWT token is used when we do the authentication let's say we have an API right when we login AP is there when we hit that login API with the credential we get a token after that right after all the login API whatever the data we are going to retri we need to pass that token in the header section right so this is the basic implementation for that so let's I will just create a project uh project is already created but login page and everything I will do the setup apis are over here so in mini project pre api. mini project.com you can you can check the API so login API is there and get all user is API is there okay so the basic project I have created now we we have to implement the login base so before that we will create some folders so in app folder I will create a com Pages folder inside that Pages folder I will create login component and a layout component so when we first create a angular project right so app component is our parent component so after that I'm creating NG generate login component I will create one more component I will be needing that will be layout or home that will be responsible to show the now bar right so once we do the login that will be our parent component so for that this is the first component I have created second component will be layout this will be responsible to keep our now bar over there then we have to create route section also just let it complete now one more thing if you go to the angular properly site now they have specified like uh default route right so first your actual route should be there after that one empty path should be there which will be let say you don't have anything in the routing I mean on the URL you don't have anything so it will redirect to this component and lastly you should have the Wild Card route so this should because route will have first come first first come first Ser basis right whatever the ma route it matches for the first time it will execute that right so that's why Wild Card route should be at the end before that you can add a default route this is a default route and then your actual routes right so like that we will create so two components are created after that one more extra component I will create that will be dashboard just to navigate somewhere after login so this is not the main focus of our video main focus Focus will be how we send the token using Interceptor right now in the route I will create the route first so first route path route name will be login comma component I will open is login component only just like that second will be dashboard okay I will explain the dashboard later so route is done login path is done after that I will need empty path right if it is empty I will redirect to login only and path must strategy we need to provide that will be full right then we will have again one empty route will be there this is just uh one extra route will be there because once we if we do the login now all the remaining component will be a parent to someone right so for that I'm keeping path as empty or we have to move this at the end let it be at the top we will check path will be empty then for this path component will be layout component the extra component which we have created then for this layout component we will have children run means whatever the component you want to render once user is logged in that all route should be created as a children of this okay this will be array and here just I have one component after login that is dashboard so I will create that path empty dashboard and component will be dashboard component only right and then last we can have our Wild Card route so if we don't have anything we are simply we can simply redirect to login page but in normal application we will have some component which say like part doesn't exist or something we can say right so these are the various routes I have created let me just zoom a little bit right so first path was login then we had a empty path then again empty path is there but for this empty path we have a component that is layout component and for this path we will have children like what are the component you are going to render once user logged in all those component should be rendered over here because for this component our parent component will be layout component right so this is the routes you should have when you are implementing a login page right first part is done routing is done after that let me just run the application also so that we can see which compon component is getting loaded first NGS we need a login template so let's search that login template HTML and CSS so freef font.com site is there I will try to use any login page this is also there this is also there this I have used so yeah so let's try this so you get everything over here so you just have to click on demo and code so implementing login page is not a big thing right so what I need I need to copy main de whatever we have inside the body that I need to copy paste it in the HTML right then I will need the CSS also so CSS are mentioned over here so I will just copy paste everything and put it in the CSS file but if you mention if you provide attention over here we don't have body right because that example was with HTML file so just extra thing you need to do Above This you need to create one more de that is parent okay just a parent de I'm creating and I will add this whatever the classes we had for the body that we will add it to the parent de so instead of this body we just need to make it a class that's it so let's save all let's see if our login page is visible or not Locus 42 by default angular application yes login page is there but you cannot see that right because yeah it is here because in your layout compon app component we have this right so we need to remove that with router Outlet let's save right if I remove this is so still my login page is coming visible right now so first part is done we have created route implemented login template also and an app component we have just added router Outlet so that is the benefit of this you are getting the login page by default some Shadow is there let me see why let's see some p or something will be there ping is zero let's try pading zero nothing making difference okay so some margin was there so let me just add this margin on the body I'll just write it over here style it okay so now our page is full screen only next thing let me close all now coming back to API side so if you if you visit this particular domain you will get to see so many apis in in that user you have to check so we have a login API over here right if I show you cre all user currently it won't but let's let me just create one user try it out uh user I will be creating is Rahul let's try cricket players [Music] sein [Music] R um okay so username was not provided here but let it be I will just add it or existing user is there let's use that so this is an existing user I have right so if this is a login API for this login API we need to send an object with two parameter email ID and the password right so if I execute this in response I get the token you can see token I'm getting now this token this is an a JWT token this we have to pass it once whatever the request we have going to make after the login so if you see this gate all user now if I try to execute currently I'm getting 41 means unauthorized right because in Swagger I have not provided the token so we need to provide token in the header section right so first we will integrate this login API so I will just copy this object now we need to make an API call but before API call some imports need to be added and we are going to design a template form also so in app module you need to add forms module right this is very basic thing then we need the HTTP client module also over here that will come from common SL HTTP and here it will be HTTP client module right and this will go in the import section so in app model you need two Imports right that we have done let's close this now in login component first we need to copy the object this was the object so let's create that login obj colon any equal to object let's make it empty right so in the login object we have two Fields after that Constructor we have to create and inside Constructor we have to create object of HTTP client so HTTP colon client right so let's create now object is there now we need to bind this object to our form so this was a sign up form and this was a login form so square bracket NG model is equal to double codes object dot our username so that is email ID copy and paste it over here and password right since our input elements are inside the form tag so we need this name attribute okay whenever you do the uh template form if you are form if your elements are inside the form tag make sure you need you should have name attribute also over here password right so that's done so we have created object and we have binded that object with our form then next thing on button click we need to call event so on login this function we will create now ints right so here we need to write this do HTTP do Post API is going to be there so post double codes then URL so this is the URL right let me copy let's paste it over here so post API will require two parameter first is the URL and second is the object object is nothing but this do login object right then we need to subscribe the result whatever we get from the API Arrow function that's it so here you can see in the response I'm going to get the object in that object we have message result and data so result is the property let me show you if I provide something wrong email over here now and try to execute you will get result as false and you will get the message also so by observing the result property you will get to know like API is success or not so that Al that check you can add it over here result dot result if it is true we can say alert login success right in else if login is not success means we have provided the wrong credential then we have to show the error error also we are getting from the API side only that is under message property right if user is successfully logged in we need to navigate also right so to navigate we need to create routing router service object router on router right so router service we have created then we need to navigate so once we do the successful login so this do router. navigate by URL method we have to use and we have to pass router name uh wherever we have to redirect so after login we are going to navigate to the dashboard so this route will go over here and the response in logging API we are going to get the response in response we are going to get the token let me just if we click on execute right in the response in data token we are going to get the token that token we need to store in the local storage so local storage do set item right set item had two pro two parameter key and the value so key will be login token and value will be result do data do token inside result we will have object inside data we will have property token right once we have stored the token then we are navigating to the dashboard so let's check if this is working fine or not let's just add a debugger so whenever you are writing the code for the first time always try to add the debugger check like if everything is is working fine or not so this is our login now Chan gmail.com password admin let's try wrong email ID first we should get the error from the API right so now if I click on login our function will get triggered right now in the login object you can see whatever the data we have filled in that textb that we have got it over here let's continue let me just add a debugger on line number 22 continue right so now in the result you can see result is result property we have got false and the message also we have got so it will go to the else block and in alss Block we have showed the message in the alert box right let's try the correct email ID now this is the correct email ID let's click on login now now in the login object you can see the updated data continue now in the result you can see result is true and in the data also token we have got right alert we have shown then we are storing the data let me show you the local storage first let me just clear So currently in the local storage we don't have anything but once this line run right let's check it now so you can see in login token we have got the data right and once we do that continue you can see dashboard it is successfully navigated to the dashboard right now uh sorry in the layout we don't have that uh let's add nowbar bootstrap W3 so that it will look proper now bar let me just copy this in layout you will have a nowar and below nowar you will have router Outlet because once you navigate to the layout page now this will be the router Outlet activated right now since we have used this we need the map file also so for now just to save the time I'm copying the CDN link and putting it in the index.html but you don't have to do like that you can install and add the link in M angular.js right now if you see yes so now nowar is there nowar is gray only but we need black so let's just add this class so that it will look proper instead of BG light we will have dark nowar now right so you can see dashboard component is working now right so in dashboard component now we will try to make that API call second API call that is gate all user this API call we have to make I will just copy this now in dashboard component let's login component is done again Interceptor is remaining but I first I will show you the er error what do we get if we don't pass the token so in login component I will create Constructor private HTTP client right a function I will create load users this. HTTP do gpn for G API we just need to send one par parameter that is URL do subscribe colon any Arrow function that's it and whatever the data we get we can store that in the variable this do users rs. data index data you will get the array right now this function I will call in the Constructor just for the timing I'm calling it over here but normally we Implement NG on it and do call there right so let's save and check now in the network we can see the API call but it is saying 41 right means it is not un unauthorized means we have this API is protected by jwd token unless you send the JWT token you cannot get the API response right so now we are successfully logged in we have got the token also but see after that also we are not going to get the data because we are not sending that token in the headers so if you see the network this is an AP call so here you can see response header is there just like the response header request header is also there so here while making the APO call we need to send the token that is our token is authorization and the beer and the whatever the token we have stored in the local storage this we need to send along with the API call so to do that angular has provided Interceptor so in after in app folder I will create Services folder and here I will create an Interceptor now we have to create the Interceptor so we have an angular CLI command NG generate PT Interceptor and I'm naming it as a custom okay Enter so this will create an Interceptor let's just wait for some time so once you create the Interceptor this is the default code you get let me just add a debugger over here so that you will understand how does Interceptor work and in Interceptor intercept is the by default method which will be implemented right so now in pages I will add a debugger in the API call here I will add the debugger and here also we have added now just observe the sequence of file get executed right so first debugger we have got in the dashboard component once I continue from here okay we have got sorry one more thing we have left after installing the Interceptor you need to import that in the app module you need to register that in the provider section right so normally when we create the service we don't have to register those right but when you create Interceptor and oard so you need to register them so you need to register them in the provider section right so in the provider section you need to create an object First Property like provide and provide in provide you have to pass httpcore Interceptor yeah you can see first input you are getting once you C click input will be added over here comma right use class we need to say which class is the Interceptor so our Interceptor name is custom Interceptor this class name we have to provide over here then we need to PR the input also then one more property that is multi true right these are the syntax when you add Interceptor in your app module right this is the second thing you need to do after installing Interceptor now let me save now we won't have the error so now pay attention first first debugger we have got in the use your dashboard component before making API call so from here we are actually triggering the API call but if I continue see after that it will it will came here currently no API call is there but once I will continue from here now then you can see the API call see so you will get whenever you make the all the API call Interceptor sits with between your application and the backend application all the request you make from your application will go through the Interceptor once you get the response from the API that will come to Interceptor first then it will send it back to the your service and then component right so Interceptor will act as a uh it will monitor all the incoming and outgoing request that is just the theoretical definition we have for the Interceptor now let's try to modify the tokens header right so now in intercept currently you can see we are getting 41 because we are not sending token now in Interceptor whatever the request is there now let me show you the request Also let's reload one more time so now in the request in The Intercept function we have got request so you can see in the request whatever the API call we have done now method URL right whatever we have done that whole API call you can see in the request now we just have to modify this request and say create a new one right by cloning it so here I will create constant new clone request is equal to right what I'm doing to what I'm going to do is I'm going to clone this request request do clone right round bracket curly bracket enter and here I need to set headers so you can see all the methods are already there colon object and what I need to pass authorization so authorization is the key and for that key I need to provide the value so that will be beor this is the way how we pass the bror token you have to consult to your API team like in which format you need to pass the API in my and this is a net API I have implemented so I need to send the be token now after b error I need to pass the token but token is in my local storage inside this property so I will just copy this while loging we have stored that so in intercept method I will read the token token is equal to local storage dot gate item and to gate item I need to pass the actual key and this token I will pass it over here right so let's use template literal binding sorry here also we need to use tilt sign tilt sign and here we can pass this okay uh or if you don't want to use the template R you can use just uh concatenation method also double quote and inside that double plus that will also work so we have created a clone of the request we have got and instead of this original request now we will send the Clone request that's it so now if we save currently If You observe we were not sending the token in the header right but now see first we have read the data from the local storage that we have got into this variable you can see in token we have got then we have made the Clone added the headers now if you see this in headers where do we have that we don't get to see your what let's just see then continue now in the network tab you can see request is successful 200 now if you see in the request header see authorization beor and the token whatever we had in the local storage that we have sent along with the API C let's just remove the token if I remove the token and again refresh you won't get the API call data uh API call response see again 4 not1 because in this we haven't send the token right so that is how the Interceptor Works let's try to login again and this was admin login now AP login AP call is there once we get the data we are storing the local uh token we have got in the local storage and navigating to dashboard right we have got we have come to the dashboard component on the page load we have called the API call right continue now we have got the token right so now in the network you can see successfully a call is there this is the third API call after login right so this is how you implement the JWT authentication with API right let me just revise what things we have done with empty project we have created three component login layout and the dashboard right then we have created route also route is first login then empty path and again empty path the for layout component and all the login component after once we do the login after the all the component will be registered over here as the childrens's and a wild card R right then we have created Interceptor so Interceptor we have created inside that Interceptor we have implemented this code to read the local storage and modify the add the headers like this in the login component we have stored this uh token whatever we got from the API and in dashboard we have made the API code so if we are successfully logged in and we have stored the Lo token into the local storage then we will get the data otherwise we will get 41 that is unauthorized so this is how you do the JWT login implementation with angular right so you can use this API for your practice purpose right inside free API Min project.com you can find login API is there use this credential only otherwise I will just uh add password field over here currently I don't have I haven't updated but you can create your user also by using this API and gate all user is the API for which you need the API so you can see if you don't pass the token you won't get the response right so hope this videos are helpful to you please do like and subscribe

Channel: LEARNING PARTNER

Views: 14,069

Keywords: angular login, angular login with jwt, angular login with api, angular login page, login in angular, angular with JWT token, angular JWT token, login with api in angular, angular interceptor, how to implement login in angular, login signup in angular, login functionality in angular, angular interview questions and answers, Login Register Angular, Angular Login and Signup, angular tutorial for beginners, angular tutorials, login page in angular, angular 16, angular, angular 15

Id: PhzxED19FVA

Length: 30min 42sec (1842 seconds)

Published: Mon Oct 23 2023