Angular JWT Authentication

in this tutorial we will create an authentication system using angular so here we are at the home page where we show you are not logged in we have a login form here to login and register form so let's register i'll create a user here and the password is test when we submit we'll redirect to the login page now let's use the user that we just registered so test at test.com the password is test sign in and here we display height test so test is a name that we just registered now the login and register are removed with logout button when we click logout we will show login and register again and we are logged out so this is the app that we will build before building the app i would like to remind you that this video is meant to be combined with other videos so if you want to use angular with laravel django deno nsjs or go i provided some links in the description below in case you don't want to build a backend don't worry i have a solution for you also make sure to check scalab scripts.com now i will show you how to build a backend without actually building it so if you already built the backend you can skip this part if you don't want to build it then first before i explain this repository download docker so go to docker.com products docker desktop and download the right version for your machine i already did it and i have here an icon on top so in order to build a backend you have to install docker now this repository is just a simple dockercompose.yaml file you can copy this file you can download the code you can do anything in my case i will just copy the code and i will do a git clone so i will open my terminal and i will write git clone this repository so now that is downloaded let's go to the folder auth api is called and you have docker installed run docker compose app and now docker will pull all the images and download all the files and it will build the backend for you now let's wait till this completed now is completed so we are almost finished now i will type ctrl c command c to close the containers and we need one last command so first i will do a docker compose up but minus d so we don't want to see the logs here so with this command now we don't see anything so we can clear it it doesn't show anything and let's run this last command this will build the database so everything is built now we can access localhost port 8000 and this is our backend running on port 8000 now we will consume this api by building our app now let's start creating our angular app go to cli.tangular.io and here you need to install the angular cli i already did it so let's create an angular project ng new i'll call the project angular off i'll add the flag here skip git because the git will color our files when we change them so i don't want that i'll add out angular routing i'll pick css here and let's wait till it's completed so everything is installed now let's open the project with my ide i'm using webstorm here so you can use visual studio code is the same and i will open the terminal and run ng server now the files will load and run to the browser to the port 4200 so this is a port i'll copy the link paste it here and this is our angular project running now let's change this html to a bootstrap template go to getbootstrap.com click get started and here we will copy the css let's add the css to index.html i'll paste it here and now let's add the template go to examples and i will select the sign-in form view page source and this main div is what we want i'll copy it and i will add it to the app component.html i will remove all this code into the code that we just copied i will remove the spec files because we won't add any test files and let's add also the css so this sign in css let's select it and i'll copy to up component css actually i will copy to style css because i want to share it with every component so this will look like this let's make some other changes so we don't need the body and html css here so it looks better now and let's go to appcomponent.html here we'll make some changes we will remove the labels the image let's remove every label so i will remove also the ids here so i'll keep everything very simple this is the login form now we need to add the header so i remove get bootstrap so go there again go to examples and here we'll select navbar static view the page source again here and let's copy the navigation here i'll paste this on the top so let's see what it looks like it look it looks like this now here i will remove this button i will change the name to the top nav bar to home i will remove this classes i will remove this form and for this ul i'll keep one li this will be login and i will copy it create another one register so this will look like this so this is a navigation that we want now we want to create the login component register component and home component so let's create them and i want to create them via angular cli so to create the components we run ng generate component register so we created the register component note that we also update update module.ts so once we create a component this module will be updated and here we will add the register component let's do the same for login but i will generate it with shortcuts so generate component login so this is the same as the other one let's generate the home component also and we need one more component which is the navigation so we created all the components now let's cut this code and i will add it to the navigation i will remove the spec file here so we added here the navigation and to use the navigation in upcomponent.html we have to use it like this up nav so we have to add the prefix up in front of the tag so this up nav uh won't change anything now let's make these links work so to make them work go to up routing module and here we'll add the routes for our app the first one is a path to empty so the main page the component there will be the home component so we added the main path i will add also the register so the login first and the login component here and this is register this is register component so we added the routes now but we won't see any changes because we have to change the app component.html i'll cut this form now and i will change this with a router outlet so inside the router outlet we will render all these components so every time we pass we put routes we have to render them in router outlet the code that i just cut i will add it to the login component.html and as we can see homework so we are at the home page now let's make the links work to go to the other pages so go to nav component html i will remove the href here and convert it with a router link this will go to the main page and let's add the router link for all for the these other links router link to login and the router link to register so we added the router links click login we can go to login register we go to register home we go to home so everything works fine now let's complete the register form first i'll copy the form from the login and i will paste it to the register form so i will remove this paste it here and this is please register here i'll put submit here i will add another input which is a type text and is the name so this is the form that we want to use now there are two ways to submit a form in angular i will use reactive forms they are normal forms and reactive forms so to use the reactive forms we have to import first the forms module here in our app model.ds and will import also reactive forms module so don't forget to import it also here now let's use them so we need to create a form and we have to declare it as a form group also don't forget the imports here in the constructor we have to get a form builder so private form builder we have to declare it as a form builder so we have to inject it better so we got the form the form builder and now let's build the form so this form is equal to this form builder group and inside we'll put all the inputs that we want so we want the name and we can assign the default value to empty email the default value is empty and the password also empty here so this is a form now to use it we have to define here that the form group like this is equal to this form so now we need to add for every input we need to set them as a form control name so form control name is we define the name email and the password and we have to set them here so form control name is name for this input this is email here and this is password so we created the form in this form we assigned the form here and for each input we know that the form builder has three inputs now what is left is to submit the form so we add here submit and we have to create a function submit here let's create it submit and we have to use it here submit so with this we can call this form this uh function sorry this needs a return type so it's void and here we want to call the backend to register our user so to call a backend we have to get another module first we have to import it from upmodel.ds and we will add the http client module and let's go to registercomponent.es first before sending the request to the server all console.log here when we submit i want to get to the data that we submitted so our console.log this form get row value and let's see what we console log when we submit this form so i will console log this random data submit and as we can see we console log what we sent here so now we need to send this data to the server so let's import the http client here private http http client so don't forget also the import here now with this http we can send requests to the backend so we want to send a request http post we need the endpoint here which is http localhost port 8000 slash api slash register the second parameter is the data that we want to send and the data is this get row value here and after we send this data we want to get a respon response so we have to subscribe for a response so the response uh we is gotten from this variable and let's console log the response so let's create the user again so a aa.com a submit and as we can see we created the user and we console log here so we have also one id here so the user was created now after we register we want to redirect to the login so to redirect there we have to get another import here so another injection which is the router we have to import it from angular router and once we successfully get the response we will send this router navigate to login we can make this shorter like this and since we don't use the response i will use it like this so let's register another user b b8b.com b and as we can see we are directed to login now let's make the login work so we have the form here now let's add here the form group so form as a form group let's add the form builder here and we will set here this form is equal to this form builder group will pass the email and the password so we set the form now let's go to logincomponent.html let's set the form group here is our form and here we need the form control name which is the email here the form control name is the password everything is set now the only thing left is the submit form submit function sorry so this is a void function and we will use it here submit so the submit function is created successfully now let's send a request also here so it will be similar to this so i will write it again let's import http http client here let's send a request this http post http localhost port 8000 slash api slash login the data that we want to send is this why do we show this this form get row value and we have also to subscribe for the response now this is not enough for us to log in because when we login we want to get also the cookies from the backend and to get the cookies from the backend we have to add another option here which is with credentials to true so with this we will get the cookies from the backend which will allow us to log in so now we will get the response and once we get the response we want to redirect to the home page so get here the router again and after we get the response we'll call this router navigate to the main page so the only difference here is this is required in order to get the cookies now i will inspect go to application cookies and i don't have any cookies here now let's send the request for the user that we just created and the password sign in and we redirected to the home page notice that now that we have a cookie here which is http only so this cookie will be necessary for us to retrieve the authenticated user so let's get the authenticated user in the home component here we'll display a message so let's create a message you are not logged in and i will show this variable here message so that's it for this html it will display the message here now let's call the backend to get the authenticated user so private here http http client and let's get the user this http get we need to pass the endpoint here which is http localhost port 8000 slash api slash user and we need to subscribe so there are two cases one is when we get the response and for the moment i will console log the response and the other one is when we get the error and i'll console log the error here so in our case we probably get an error so we get an error because we are not unauthorized why we are unauthorized because we need to add just like we did with the login here we need to add with credentials so just like we got the credentials we have to send them so with credentials to true here if we set this header then we console log the user so as we can see the user is retrieved now based on the result we want to change the message so when we get the user here we'll say the this message is equal to hi response name so we have to define the responses in here and when we get an error so i will make the message an empty string here when we get an error we'll say this message is equal to you are not logged in so we can see hi a e and a is the name of the user now that we are logged in we want to display a logout button here so how do we display the logout button here because the nav component is another component how do we communicate from this component from the home component to the nav component in that case we have to use event emitters so create a directory i'll name it emitters and i'll create a file here emitters here this is well this is just a class so export class emitters here let's import event emitter from angular core here and the event emitters here in this class i'll create them as a static uh as a static property why static because we can access them directly so i will show you what i mean by that so the emitter that i want to create i'll call it house emitter and this will be a new event emitter like this and we can define the type which is a boolean so this is our event emitter and how do we use this event emitter now in the home component now we can use it directly like this so emitters we need to import it from emitters we need to call our house emitter so this is a meter that we just created this one and we need to emit an event so the event is a boolean value we define the boolean value here one once we get the message here the boolean value is true so we are authenticated here in their case we are not authenticated so we will emit false so this is the emit case now in the navigation we will subscribe to the event so we will listen to that event so let's listen here we will add emitters alpha meter subscribe and here we'll get the auth variable which is i'll cast it here a boolean so now we know for sure that we are authenticated let's go to out component.html and here we want to add the logout button first i'll create a variable authenticated and by default is false and in the nav component i'll make the condition here for this ul so copy this and paste it again here we'll show login and register when if condition here and gif we are not authenticated if we are authenticated we'll show logout so ngif here authenticated and we'll display logout here and authenticated so not here we'll set that variable here so this authenticated is equal to auth so in short we will call here the user and there are two cases in case the user is logged in will emit true and the navigation will handle that event and the same case when the user is not authenticated now if we go here we can see logout so now let's make the logout work to make the logout work go to enough component.ts and here let's create a logout function so logout here and this is a void function we'll use this this function here to the logout we'll add here click logout so let's log out now what do we want to do when we log out so we'll call the backend so let's get here private http sdp client and here we'll call this http post to http localhost port 8000 slash api slash logout we need to send the node data so this data that will send is an empty object and the third parameter is we need the with credentials so we will add here with credentials to true we will send that cookie in order to delete it in the end we need to subscribe and once we subscribe successfully we will set the event emitter so uh actually i was i don't want to send the event emitter so i will just set this authenticated to false so let's try this click log out and we are at the sign-in page login and register are displaying here we go here you are not logged in if we log in again we can see high a the name and we can see logarithm so this was the authentication that i wanted to build i hope you liked this tutorial and if you did like it please share it and subscribe thank you

Channel: Scalable Scripts

Views: 18,237

Rating: 4.8562093 out of 5

Keywords: Angular, Angular jwt, Angular jwt authentication, Jwt, Jwt authentication using httponly cookies, Httponly cookies

Id: brb4SO-dO_k

Length: 33min 50sec (2030 seconds)

Published: Thu Feb 18 2021