Angular 17 Authentication and Authorization

in this video we will do [Laughter] [Music] this in this video we will protect our routes we will integrate the apis and we will send the tokens when we click on the log out button okay so that also we will do let's go to the vs code first so you can see when I click on the SRC folder in app folder I have created basic structure okay components folder constant model pages and the services folder I have created in the pages you can see the dashboard and login two pages I have I have created models folder and in this models folder I have this file you can see I have added some interfaces okay users login login response now you can see in a components folder I have a header component in which I have created a header okay so this we will uh add a condition here based on routing based on the authentication okay so in the services folder we will create some services in the login also you can see all the things I have created and also I have add the validation also so you can see the reactive form I have used for creating this form and uh you can see the dashboard also we have nothing much we have in this only we need to Route this page and also I have added the routes here okay so first what we need we need to do we need to take the data from the form so what I will do I need to add one console here this Lo in form value okay so when I will go to this form let's see admin at example.com 1 2 3 4 5 6 okay so you can see the data is coming okay you can see I have created a one uh API in a njs so this is the data right when I click on this send so this token we have Okay so this API we will integrate in our application now we need to create a services so I need to go terminal first services and uh in Services folder we need to create one all service second this token okay so now in this ser Services also one more thing that I that I want to show you uh you can see I have import the HTTP client module in a app.config file okay now in the All Service First of all we need to create some functions in the token Services okay so in the token Services we will add those functions in which we will store the token value use okay so first of all what we need to do we need to create this one is authentication Flag by which we will use in a oath guards right in all the files where we required this one okay so this I need to import R xjx Behavior subject we are taking and now some functions I need to create first of all for getting and setting the token okay so you can see and one more for update the token also okay so what I have done here so you can see so one function I have created for set the token in which I am passing update token as a true so based on the status the authentication value will be changed okay one more function I have created for get the token and in the local storage from the local storage I'm getting the data so this constants also I need to be import here okay and one more thing we need to remove the token also so one more function I need to add here this one okay so when we when we want to remove the token then we need to use this function okay now one more thing uh we need to add this services in a old service okay so private token service token service now here I need to add one more thing private HTTP HTTP client okay so now I want to add one function for the login okay so when I want to log in then this function I need to use let me import this model this model also I need to import so token Services already we have so okay API and points also I need to be import okay so this will be the response so this is the map function from the rxtx we need to import that's it okay now you can see the post sttp requests I have added and the EPI and uh sorry the endpoint also I have added here so you can see what we have in this this login and the logout to API URL I have added here okay so now using the pipe I am getting using the pipe I am getting all the responses and I have uh called this token Services set token function by which I am setting the token okay now this API I want to integrate in a login component so here first of all I need to import this service private o service o service okay so now here this all service on login I need to pass the login form do value And subscribe I need to add here next value okay and one more thing after success this I want to redirect on the dashboard page so private router t. r navigate dashboard okay so we need to check admin at example 2 3 4 5 6 okay when I click on the submit button you can see the login is successfully message I have got in the response right and this is related to the dashboard page so this is working fine but one more thing we have if I open this in a incog mode directly I can go on a dashboard page so this is also we need to be prevent for this I need to create two guards so first of all I will create uh NG NG G God CS o c I need to create and one more guest okay the two Gods I have in a old God what I need to do is first of all I need to import inject token service and J from the core yes right token service okay router also I need to add that's it token service say I want to call is authentication x value if if this is not uh true then I need to navigate on the blank page oh sorry login page okay and the same thing we need to do but in a guest component sorry in guest route but the condition will be different like this it should be and it should be uh redir to the dashboard page right suppose if we have the login already uh then we need and user want to access the login page again then we need to redirect to the dashboard page okay yeah that's it and now one more thing I need to add this in a routes okay so here I want to add can activate yes here I need to add a guest route guest guard and here I want to add oath guard okay this extra comma I need to remove now we can see right so let me see something we have I need to delete this one first now if I go to the dashboard page this is uh redirect to the login page okay okay because now the guard we have been added okay so now one more thing if I log in at example.com when I click on the submit button you can see the dashboard page is coming right so if I copy again this one and in konut mode you can see this is red to the login page okay now one more thing if I want to add access the login page also oh this is working okay let me check something is not right okay in the guest route I think uh guest route I'm sorry guest guard let me check once router subscribe value router navigate to dashboard page if we have the value ah one more thing I I think uh in the token I need to add something in the Constructor because if we have if we are already logged in then why it should be it should be redirect to the dashboard page okay so in the Constructor what I need to do is constant const token and this get token I need to get the token and I need to check if the token is available then this update token should be true right that also I need to do okay now the dashboard is coming if I again want to yeah I can't access the login page now okay this is also working now we if we already log in then log in uh this button shouldn't come here so this is also we need to do in header I will create one variable uh is is authenticated like this dollar I need to add okay Constructor in Constructor we need to call uh private token service token service okay this is to this token service is authentication [Music] mhm and yeah now I need to come here okay I need to convert it in a Dev Dev that also I need to be change Dev here I need to add uh the cursor pointer the talin I'm using okay and one click function also I need to add for log out okay we can do later but now we can add okay this click function I have added okay now what we are doing uh we need to add this authenticated uh based on condition we need to display these links okay so yes I need to add if condition here and I need to use the pipe as sync async pipe I need to use this is not work out okay yeah one more thing common model uh module we need to add here then it will be work out okay fine now uh and else also I need to add else and it should become in this okay that also fine now we can see what we have so dashboard and log out only these two things we have now log out functionality also we need to be work out okay so we need to open this all services and here we need to create one function for log out okay so I need to copy paste here I have the code already so H so I need to add the HTTP headers token Services also I need okay token service okay I think the name should be token service it should be like this spelling mistake okay so what I have done here so I have created one header and in header I have added the authorization and I am adding this token from the token services and this header I have updated in this request okay so when we click on the log log out Buton so token also we need to be sent out right then it will be work so and then also after success we are removing the token from the storage okay so that's that also we are doing let's check ah one more thing we need to add this service uh on a harder component so I need to add here private H service all service out service and I need to be uh log out log out here yeah on log out this I need to be access h next value this router Router also I need to add private router it should be rated to on the login page okay so that also I have done now we need to check okay when I click on the log out okay you can see 404 oh this is not a correct API I think we have yes I need to use this uh so I need to go here not here uh here okay this I need to add okay let's check once so when I click on the log out again you can see success I am getting and this is related to the login page right and now if I want to access this one I can't access okay so both are working fine if you like this video please hit the like button and please comment me and subscribe to my channel thank you for watching

Channel: WDCODERS

Views: 3,528

Keywords: angular authentication, angular tutorial, angular, angular web development tutorial, angular authentication tutorial, angular tutorial for beginners, learn angular, angular crash course, angular 17 authentication and authorization, angular login, angular jwt authentication, angular login authentication, angular tutorials, programming, angular authorization, angular authentication and authorization, angular 17, angular17, angular 17 authentication

Id: bwIPR7njQyY

Length: 19min 33sec (1173 seconds)

Published: Fri Dec 08 2023