.NET 7 💥 - Angular Authentication with JWT (JSON WEB TOKEN)

foreign thank you for watching this video I am Muhammad and today we're gonna be discussing something really interesting we're going to be going through the entire journey of creating an authenticated application between angular as well as topnot we're going to be creating the web API we're going to be creating all of the logic to have a JWT tokens we're going to get a front end where we're going to be able to register log in and execute some protected endpoints with all of that we're going to be having the full scope from beginners to end with full step-by-step guidance of how we can create this if you like this video please like share and subscribe it will really help the channel as well if you'd like to support me please consider supporting me on patreon or buying me a coffee now with that said grab a cup of coffee and let's get started so the first thing that we need to do is we need to create first of all our web API we're gonna add all of the authentication logic we're going to add how we can generate jwts and from there once we have all of the controllers ready where we can accept registration and login request we're gonna move in into the client application create our angular application and basically utilize our authentication API from there so first of all inside my uh terminal here I want to create my application and I'm going to be doing utilizing.sdk so let's first check that.net version that we have not dash dash version and as you can see I have version uh 7.0.304 which is going to be the latest version of the.net by the time of this recording you might have a different version but that's fine now once we have done that the next step is we're gonna be creating our application so we're going to put.net new web API and we're gonna give this a name as a let's call it again it's going to be drivers because we're going to be building a Formula One application and we're going to call drivers.api and as you can see it's creating my application and it's created now if I open this in for this video I want to use Rider rather than using visual studio code it should be the exact same thing as you always have but the main difference here I'm just using a different IDE and that's it but everything that we're gonna be utilizing within a rider you'll be able to do exactly the same thing blame your CD code so let's get to it so now that my application is open in Rider the first thing that we need to do is we need to install some packages so let's get started so I'm just going to open my terminal so the first thing that I need to do is dot nuts package and it's going to be Microsoft dot ASP not core dot authentication dot JWT bear perfect let's see the install successfully and in order for us to keep track at the same time if it's installed we're just gonna check it here and as we can see it did not maybe we have misspelled something so let's try again so microsoft.asp.netcore.authentication.jwt okay I misspelled Microsoft and now it should work okay perfect now if I go here we can see it has been added now what let's add the other one which is going to be a dotnet add package it's going to be Microsoft dot asp.core dot identity dot entity framework again I misspelled something oh I forgot the chord at the end okay perfect now we can see it's already added I'm gonna put also.net at package Microsoft dot ASP not core dot identity dot UI perfect then I'm gonna put again.net uh package I'm gonna put the Microsoft Dot entity framework core Dot sqlite and for this video we're going to be utilizing a database which is going to be sqlite to solve all of the information in previous videos we have utilized mongodb we have utilized postgres but for Simplicity sake we're going to be utilizing sqlite so now let's continue and let's go back to adding more packages and the last package that we want to add is going to be dot not add package Microsoft Dot entity framework core dot tools perfect so now if we take a look at my drivers.cs Pros we can see that everything here has been added and everything is basically targeting.net7 which is exactly what I want so once I have done all of that the next step is I want to add some JWT secrets and for me to do that I want to go to my web browser and inside my web browser I'm just gonna go to Google and let's reject all and I'm gonna say here that generate random string and there is a lot of websites so let's just use I think there's one that I fairly used let's see if I can find it if not we'll just go with any of that let's use this one and what I want here I want it to be like 50 characters and I only want to generate one and it should be uppercase and lowercase I don't want any numbers in it and now let's go and click on get string oops this is not what I wanted well it's different so here we shall generate one and here it should be 50. and now let's put get string okay let's put 32 then the max and you can see here we got a random string okay perfect so now with that I got this random string I'm gonna go back to Rider and here I'm gonna add my JWT config section so I'm gonna put JWT config and I'm just gonna put here Secret and then I'm gonna put the generated secret that I have then once I have done that I want to specify also the connection string for my database I'm just going to put connection strings and I'm just going to call this default connection and because it's a sqlite database it needs to be data source and I'm just gonna call it up DB and I'm gonna specify the cache as shared and this needs to be equal okay so let's go over what we have done so far so because we're going to be utilizing JWT tokens what we need to do is we need to have the ability to generate random tokens and for that we want to basically have like a secret and this is going to be our random string that we currently have so usually our random thing does not live inside our app settings but for simplistic we're putting it here in real life application if you're hosting content Azure you put it in key vault utilizing AWS you put it in secret manager so on so forth so they can making sure that there is no actual sensitive information is being stored inside the application specifically when you're trying to store it into GitHub and you don't want basically that to be hard-coded so for simplicity's sake we're putting it here but in real life scenario you should not do that and the second one is basically you have created our connection string to our database so database does not exist yet we need to create it but we had to create the connection string so once we inject the information inside our program.cs we'll be able to actually refer to this connection string and actually get the data so now once we have done that let's go back here so the next step inside my application under root directory I'm gonna create a new folder so I'm gonna add a new directory and I'm going to call this configurations and inside my configurations folder what I want to do is I want to add a new class and this class is going to be called JWT config and the reason that we're doing this here in order for us to basically have the ability to directly access the key from our app settings what we want to do is we want to inject this app settings into our the eye container so we're able to refer to it and then basically having a class which is basically referred to that configuration inside our app settings will allow us to do that so once we have done that here all our other property string and I'm gonna call it secret and I'm just going to make sure it's equal to string dot empty perfect so now that we have that and it's not called security it's called Secret and once we have done that all I want to do is go back to my program.cs let's remove this and let's add it here I'm just going to put Builder dot Services Dot configured configured and here it's gonna take our JWT config JWT config perfect and basically here I wanna basically just pass my configuration so Builder dot configuration.get section and this section is going to be called jwd config perfect so now just to make sure everything is doing great as do not build and you can see we have an error oh because I missed that build of course I did great now we have built succeeded the next step is I want to create a new folder here and this folder is going to be called Data actually yeah data and inside my data folder I'm going to be creating my DB contacts so I'm gonna call it API DB context and basically the API DB contacts here is going to play a crucial role and allow me to have my identity available inside my database because basically what I'm gonna do rely here is on the asp.net core framework to generate the identity tables which can contain the username the password the user information the rules etc etc and what I want to do here is I want to actually inherit the identity Library into my DB context so it will automatically be generated for me I don't have to do all of that work all I need to do is just inherit the proper libraries into my DB contacts and it will be available for me so let's see how we can do that so after I created my API DB context all I need to do here is just put identity DB context and I don't need to specify anything here and here all I need to do is simply just creating a Constructor and I want to pass the configuration to this Constructor and it's going to be DB configuration of DB context options and we're just going to call it options and I need to specify that it's type API DB contacts and then all I need to is just pass it to the base class which is going to be the identity DB context pretty straightforward now that I have done that the next step is basically I need to inject this into my program.cs so if I go back to my program.cs and that's inject it after this so all I'm gonna do is to Builder bot Services dot add DB context and it's going to be our API DB context and now I need to specify the options that I want to utilize and this options here we're gonna basically telling our application what type of database that we're going to be utilizing a connection string so on and so forth so here I'm just gonna put options I'm gonna put options dot use SQL Lite because that's what we have installed and then here I'm gonna put Builder dot configurations Dot get oops Got connection strings and what's the name of the connection string that I want to get it's going to be if we go back here it's going to be called default connection so let's copy this and let's add it here perfect so now that I have done that the next step is I want to do my migration so as you if you take a look here you can see that I don't have any databases available it's all like basically C sharp code and there's nothing there but now if I do it or not EF migrations uh I'm gonna call this initial Dash migration you can see the building started and it's completed and now we can see here that this refresh this we can see here that I have a migration folder which appeared and if I open this we can see here that we have tables that's going to be created which is going to be our asp.natural our asp.net users and the claims etc etc so all of that is going to be available for me out of the box now the next step is I want to utilize this migrations file to create the actual database and I'm going to put.net EF database update and the way this is gonna work is pretty straightforward so all of all of what's going to happen is my application is gonna go into my configuration get the connection string then it's going to check if there's any migration files if there is it's going to go and execute all of that as simple as that so now if I click on enter let's see what's going to happen perfect it's done and now if I come here we can see now I have an appdb which is created and if I open this up and yeah let's connect to it let's update the driver test connection succeeded and if I click on OK and if I open my database now let's refresh now inside my tables you can see here that I have all of my uh not tables that I needed which is going to be the users the role the claims all of that so all of that has been created for me out of the box I didn't have to do anything which is perfect now what I want to do is I want to add my dtos and dtos are basically going to be the object that's going to utilized inside my application in order for me to send information to my controllers and then I'm going to utilizing to receive information back to my front-end application and basically they are simple classes which can allow me to actually utilize all of the information that I need like a username like a password for logging in and it could be a name a username sorry a name email and a password for registration so I can build them however I need and I can I want to create the response type which is going to contain the jwc token if there's any error messages if there's any for example extra multiple error messages I will be able to actually add them within that so right now I'm going to be starting by adding my dtos so inside my code I'm going to basically create a folder I'm gonna call it models and just want an example before we do that usually what you do is you need to separate these into different class libraries you'll have one Library responsible for the entities another one for DB contact so what we're doing the separation of concerns but for now for Simplicity sake we're just adding everything into a single Library into single application just for Simplicity sake but in real life scenario what you want to do this is you want to separate all of that into different class libraries so you'll be able to actually re-utilize them into different projects that you might have so for example if you're creating one for authentication another one for actually to be utilized within the application if you have a microservices so that way you'll basically avoiding rewriting the code and basically have a class Library where you're actually able to utilize anytime you want but again for simplicity's sake everything in a single project for now so now inside my models I'm going to create a new folder and I'm gonna call it dtos and inside my dtos I'm going to get a new class and I'm going to call it user registration request dto and here it's going to be pretty straightforward uh we're gonna have let's create this kind of your type string I'm gonna request the name and let's let's hide the database for now we don't really need it I'm gonna make it string dot empty and then I'm gonna again prop string I'm gonna get my email again it's going to be equal to string dot empty and lastly I'm gonna put public string the password and again I'm gonna make it equal string dot empty perfect so now an additional step I want to make these as required so that way uh if I'm doing validation and the client did not send them to me I will not basically accept them perfect again build perfect building successfully to warning that's fine I don't have to worry about this right now so the other class library that I want to do here is I want to add the new class and this one is kind of called auth result and basically all the results can allow me to actually return the token once the authentication has happened and I'm gonna put the proper string I'm going to call this token again it's going to equal string.empty again prop Boolean the result if it's successful or not and lastly I'm gonna put prop list of strings and this is going to be the errors that has been generated perfect now that I have done that the next step is I want to add my login let's move this into the dtos for some reason I created outside and let's fix this I'm just going to add this Dot dtos and again here add new class I'm gonna call this login request actually let's call it user login request dto and basically here we're gonna request string which is going to be the email again it's going to be equal to string dot empty and the password again same thing equal string dot empty and what I want to do as well here I want to make them as required and again here that's required perfect so now that I have done that I want to generate the response type which is going to be login request response and for simplicity's sake I'm just going to inherit from the auth result and for the registration request response I'm gonna also unhide it from the author result so you might think to yourself why did we have done that why did we have to have two class uh two dtos which kind of heading from the other results and the reason that we have done that it's because that sometimes when you have a authentication flow you might want to for example let the user first verify their emails and if the user is verifying their emails they will not be able to actually log into the application once that's done so for that you want basically once that registration is finished you don't really want to directly give them a token so what you need to do here in this case you want to basically send them back a message that registration has been successful but you need with a message saying that you need to authenticate your email first or verify your email through the link that we have sent you through an email for example and then once that is done the user once they able they log in they will be able to get their tokens another scenario for example you might enter my temporary token in order for them to actually go in and finish some extra information before they can get actually full access to the system so there's multiple scenarios where you might need to either generate a token or not after the registration but uh and for that we wanna for example separate those two dtos one for registration one for logging in and because logging in it's always going to return back our JWT token but it's not enough to have that we need to have a refresh token if we're going to be building a real life scenario but again we're not going to be worried about that today we're gonna be basically trying to follow the simple authentication process of oauth stool which is basically standard request get a token validated and sending it back to the user and whenever the user wants to do any extra calls they're gonna have to attach that JWT token into the header of the request so we are actually able to authenticate them without gonna delve into the refreshing of the token generating a new one checking the expiry of that that's a completely different topic I have different videos if you do unlock me to cover it much more in details please put in the comments now let's go back and actually continue implementing this so now that we have created this again my favorite command dot not build we can see it builded and now I want to go back to my program.cs and what I want to do here is I want to start configuring my tokens so before the Builder dot build I want to basically to Builder dot Services dot add Authentication authentication and here I'm going to specify the options if I can write options perfect and now let's put this and let's put these on a new line so it's going to be okay so that's going to be something like this so options dot default authentication scheme and here we're going to utilize JWT better defaults dots authentication scheme so the first one then we're gonna put options dot default scheme again it's going to be equal the same thing JWT JWT better defaults dot authentication scheme and the last one is going to be options dot default challenge scheme and here it's going to be equal to JWT better defaults dot authentication scheme so what we're doing here is we're just basically specifying the default authentication mechanism because as we know we have for example cookie authentication we have token authentication we could have sample authentication and SSO available so what I'm doing right now is I'm configuring my web API to tell it what type of authentication I want to implement and which is key for that authentication is going to be utilizing in order for it to work it's just a configuration that's going into my program.cs and once I do that my application will be able to recognize it's utilizing the JWT token authentication scheme so once I done that let us just make a bit more space here and now I want to basically add my jwd configuration so I'm going to put add JWT better and then again I want to specify my configuration for it and here we're going to specify all of the configuration that I need so first of all I want to specify the key that I have and I'm going to put encoding oops encoding dots ascii2.getbytes and then here I'm gonna specify my Builder dot configuration dot get section and it's going to be my JWT config Secret so what I'm doing here is basically C Dot to string so what I'm doing here is basically I'm getting my key which is exist here where is that app settings I'm cutting this key that I have here the secret and this is through this one Builder the configuration.sections.string and then once I do that actually it's to value about the value not top string and once I have done that I'm getting the value of it I'm basically converting it into an array of bytes and that array of byte is going to be utilized in order for me to encrypt and decrypt the tokens that I'm receiving and basically that secret you need to protect it for your application you don't want to share it anywhere and you need to make sure that it's actually secure so no one will be able to impersonate the user inside your account and basically get hold of all of the secret information that your application might contain so that's why you need to protect your secret and basically making sure that it's not stored directly in your source code so going back here once I have done that let's make a new line I'm gonna now uh Define more configurations I'm going to put JWT the safe token equal to and then I'm gonna put jwd dot token oh can validation parameters equal new token validation parameters and let's define these parameters here and first of all we're gonna put the validation if I can type Val idate signing issuer signing key I'm gonna equal to true because of course we want to validate the key the second one actually needs to be a comma the second one we're gonna put a shower signing key equal to new symmetric key and here we're gonna need to pass the key that we have just passed and then I'm gonna put validate issuer you can make it as true validate audience for now I'm gonna make it false because I haven't created that yet I'm gonna put require expiration time I'm gonna put false again it's all for testing and real life scenario you need to change this and validate lifetime I'm gonna put also false but in real case and real words and how you need to make the mask through so here we can see that I have specified this now all I need to do is add a semicolon here semicolon there and now my validation should be ready and the next step that I want to do is after the Builder has been built after use authorization I'm gonna put up actually before that I'm gonna put up dot use Authentication perfect now what I need to do here is just put .net build perfect now the last thing that I want to add here in order for me to actually utilize my DB context is my security contacts I want to put here Builder dot Services dot add default identity and here is going to be my identity type which is going to be identity user and then inside here I need to specify my options it's going to be options DOT sign in dot required confirm account I'm just gonna say uh I'm just gonna say that equal to false what is this let's put it on the new line so we're able to see it better I'm just gonna equal the force because I'm not gonna do any account confirmation I'm not going to be sending emails and all of that and then once I did that I'm gonna put the add Entity framework stores and here I'm gonna specify my API DB contacts and that's it so what we have done here is basically I added my default identity which is going to be inherited directly from my API DB contact oops from my API DB contacts this one here and then once I have done on that I basically told my identity right now that in case this email is not verified because by default in order for you to be able to log in your email needs to be verified what I told it right now in case this email is not verified let it slide we don't really care about the email verification at the user login so what I did here is basically I override the default configuration that exists within my current identity provider in order for me to have a verified email again in real life scenario and then the new application you don't want to do that you want to make sure that your emails hasn't been verified successfully before you are actually granting the users to access your application and then the next step is I need I defined where it needs to find this configuration and I just point it out to my API DB context so once we have done all of that the next step for us right now is to start creating our controller which is going to be responsible for authenticating the user General logging in and registration so let's see how we can do that inside my controllers folder I want to create a new class in this case I'm gonna call it as simple as auth management controller okay in order for me to make it as simple as possible I'm just gonna copy these uh let's fix those references and here I'm just gonna make it forward slash API and then I'm just going to take all of this and then I'll remove everything which I don't need which is most of it to be honest so I don't need that so bye bye this needs to be auth management controller this needs to go to management controller management controller and basically I don't need that as well perfect so now that I have this empty controller again.net build perfect it's building and we can see that it built successfully now what I want to do is I want to add some extra items which is going to be my authorizations and my user management so private uh it's gonna be oops read only and we're gonna be utilizing the user manager and it's going to be the identity user underscore user manager and this is going to be available for me out out of the box using the uh the eye containers oops and I think it's like this yeah initialize the field we I can see now it's being initialized inside my Constructor and now let's do the other one which is going to be private read only JWT config underscore JWT config and then here we're gonna initialize it let's make this all in a single line and here all I'm gonna do is I'm gonna I option mapper actually I option monitor and we're gonna say it's gonna type of jwd config and I'm just gonna call it underscore options monitor and here it's going to be simple as JWT config equal underscore options monitor put current value and that's it okay again not build perfect so now what I want to do is the first I'm going to create my first action and it's going to be HTTP posts and I'm going to specify the route and it's going to be a register and it's going to be pretty straightforward so public async task I action result I'm gonna call register and for the parameter I'm gonna request from body and I'm gonna say it's gonna be the user registration request dto I'm going to say quality registration requested you all and pretty straightforward so the first thing that I want to do is basically this one here I just created it inside my dtos before which is going to be the registration request sorry the registration request will it will give us the name email and password so here the first thing that I want to do I want to check a check if all of these are available because if we take a look here what we did is we made them as required so if there's any one of these are missing the request is gonna fail so I want to make sure that all of this validation is happening so I'm gonna put if model state that is valid I'm gonna continue if it's not valid I'm gonna basically return bad requests and inside my bad request I'm just gonna return a message invalid request payload I can make it much more generic but for now that should suffice and now if everything goes to plan what I want to do is I want to check if the email that the user have sent already exists inside my database so check if email exists so I'm gonna put the word exists or email exist equal await underscore user manager dot find by email async and I'm gonna put the request dto.email so here what I want to do first check if email oops email exists not equal to null what I want to do here is I'm going to return again a bad request and I'm gonna say here invalid or uh email already exists pretty straightforward now if the email does not exist The Next Step here is going to be checking if actually if the email does not exist we can directly start it so I'm gonna put a VAR uh new user equal new identity identity user and identity user here if we're gonna utilize it or Define it it's gonna be taking the following so it's going to take an email and it's going to be simple request that you ordered email and we're gonna take that's it I don't think it takes the name we did not add the name but it's fine once I do that I'm gonna put the VOD I'm gonna say is created basically we're gonna create the user and here we're gonna put a weight underscore user manager dot create async and here what I want to basically pass to my create and sync is the new user that I just created and I want to pass the password so it's gonna be basically my request dto dot password and I'm gonna say here if SD created this successful but succeeded so if that has been created successfully I'm gonna return it but else I'm gonna return a bad request and the satisfied request I'm gonna say uh error creating the user please try again later perfect now The Next Step here is once the user has been created I want to generate my token we don't have this functionality yet so I want to create it but let's see what else can happen I want to basically now return uh I'm okay because it has required has worked inside this okay I'm gonna put registration a new registration where I just situation request response and inside this response will basically we don't have a so result is equal to true and the token is going to be equal to whatever we generate in the previous line so now that we have done this here we can see that this is going to be the main logic behind registering a user so all I have to do right now is just create a method that's going to allow me or function that's going to allow me to create this token and basically this method is going to be utilized right now when generated when the user register as well as when the user log in so that's why I separated it and put it inside its own function rather than not have to rewrite the code in both of the registration and logging in so here what I want to do right now is after this I'm gonna basically create a function which is I'm gonna call I'm going to make it first as a private and it's going to throw in a string it's going to generate JWT token and it's going to take the user so I'm gonna put it's going to take an auth user actually an identity user not an off user I'm gonna call it user okay so that's now that's going to be the function and right now I'm just gonna refer to it here I'm gonna put bar token equal generate I'm gonna pass here the new user and lastly I'm just gonna set up these codes here I'm gonna return the token and now all I want to do is just work on this function and just making sure the generator I talk so let's get to it so the first thing that I want to do here is I want to put far JWT token Handler equal new security token Handler and this is basically gonna be responsible for me to have my JWT token whereas basically I'm gonna we can think about as the library that's going to be responsible for generating the JWT I have to pass different parameters to it but basically this is going to be the main thing our main library utilize in order for me to have my token ready so once I have done that now I want to get my key and this key I'm gonna be utilizing the one inside my app settings so I'm gonna put forward key equal encoding dot ASCII dot get bytes if I can type of get bytes and here I'm just gonna pass my underscore JWT config dot Secret and now I got my key and then what I want to do right now is I want to specify a token descriptor the scripture equal new security token token descriptor and here will basically what I want to do is I want to specify all of the configuration that the token is going to need which is going to be the validating the lifetime any claims that I want to add any extra information that it needs to be inside my token for example if I'm utilizing authentication authorization if I want to have roles enabled I want to generate the unique ID for this token for example I have a correlation ID all of that I can do it inside my token descriptor I can attach to it there so here I want all I want to do right now here is pretty straightforward first of all I specify my subject it's going to be equal to new claims identity and it's going to be a an array of claims that I want to add and let's do this like this I'm gonna put here a new claim new claim and this claim first gonna be the ID and here we're gonna pass the user the new quality user yeah user.id perfect then this should not be a semicolon now the next one is going to put a new claim gonna be JWT that's just the claim name so we already have some claim names which is available I'm just going to utilize the sub and basically the sub here allows me to have a the email available to me so I can put sub I'm going to put user.email again let's add another name new claim JWT registered claim names dot email again it's going to be equal to user.email and the last one I'm gonna put the new claim clay oh forgot the comma comma it's going to be equal new claim and it's gonna be JWT registered claim names dot GTI and it's going to be equal to guide Dr Neil Google string and that's it so what is this GTI so the GTI here basically allow me to have a unique reference to every single token that has been generated and the idea behind this is for example I want to track every single token that has been generated and I want to track its ID inside my application so what I can do I can store the token I can store the GTI and it will have a unique reference so this is utilized for identity of my update of my request so that way if for example I have some kind of a man of a middle attack or someone is trying to re-authenticate their tokens and basically without having a proper claims available to them that way basically I'm able to utilize the GTI to actually identify that again that's a completely different topic We're Not Gonna basically delve into it but it's a good thing I thought I mentioned it here because it's a good thing to know so once I have done all of that the next step here after I specify my claims identity I want to specify my expiry date and I'm gonna say it's gonna expire so date time dot let's say UTC now and it needs to add let's say for simplicity's sake at hours I'm gonna make it at five or four hours in real life scenario should be maximum of 30 seconds or five minutes based on your application but usually no more than five minutes when for JWT token because in essence a JWT token is something called a short-lived token which does not have a long time to live it's utilized for a single process and if you want another one you got a new one from the servers and so on so on instead of having one token living for a long period of time so that's why it's called the JW token short lift token is have a short life a lifespan but for development sake we're just utilizing is a long life span for the token so we're avoiding having to refresh it again refreshing it is a completely different topic so now here as you can see I have basically added my expiration token and I made it as a four hours and then lastly I want to specify My Signing credentials and assigning credentials here it's going to allow me to utilize the secret that I have in order for me to every time that my application is receiving a token it actually validates it again this ticket to make sure it's signed by the same issuer or not if it does not it will refuse to process it and the request will be given a follow-3 unauthorized so now I'm gonna put a new signing credentials and it's going to be equal to new symmetric key symmetric security key and here all I need to do is pass the key that I have generated which is going to be from before that and lastly I need to specify my algorithm and it's going to be security algorithm dots you can you can see all of these are available for us out of the box that we can utilize and for simplistic sake I'm going to utilize the hmac sha-256 you can utilize a 512 actually with a 512 and that should be it and now once we have done that the next steps I'm gonna put four token equal jwd tokenhandler dot dot dot create token and here I'm gonna pass my token descriptor so as we can see here that the main library with as we said token Handler is actually referring to the Token distributor to get all of the different information and all of the different types of data that it needs to attach to my token like all of the metadata and the verification for it and the different security handles or is taking it as an information and basically from here we're having the token Handler uh security token and then once I do that I need to work it for basically called JWT token now I'm going to utilize my token Handler so JWT tokenhandler the right token and here I'm gonna specify my token and lastly I'm gonna return return my JWT token again once we have done all of that the first step is going to do this without not build and now we can see it's building and now I want to run my application to make sure to see if we are actually getting a token or not so debug and let's open it up in our web browsers let me go back to my web browser let's create a new tab and here let's make this a bit smaller so here inside my let me see how it's looking okay perfect inside my API authentication management register try it out specify a name I'm gonna specify Lewis and email is going to be Louis mercedes.com and the password that says it's gonna be say password one two three and now we'll see execute creating user error let's see what is the I think it's going to be password related so in order for us to make this a bit easier for us to navigate uh let us go back where we are generating uh token here so if it's not so what I want to do right now I want to switch this to a more specialized error to something like is created Dot errors dot select and I'm gonna put x dot description but to list yeah and let's try this okay perfect let's go back here and let's generate this so all I'm going to do is I'm going to send the same request again okay username is invalid only contains letter okay so let us fix this what was the username emails it was uh let's say this.com um that's a bit weird okay let's try one more thing see it's all part of development I'm gonna add a Breaking Point execute let's check my new user and you can see the email is Duos oh we have username here is empty so let me add the username so let me stop this and inside when I'm creating my user I'm gonna add a comma here with username equal request dot email and let us run this again and now if I go back here and if we click on execute okay let's run it and we can see we got a 200 and basically I was able to get my token the result is true and basically this is the token that I have so now if I take this and I go to jwt.io and required only and if I put here my token we can see and this datability allow you to see the information inside your token not the encrypted part but you can see here that this is the unique ID that has been sorry this is the Gypsy ID that has been generated this is Lewis's ID this is the email and the sub and here we can see the expiration time and basically we can see all the different information available for my token you can see the encryption algorithm that we are utilizing and here basically if I pass my a secret that I have so if I come here inside my app settings and I copy this and I put it here let's delete this let's put it here and we can see this got encrypted now decrypted and basically if I remove this we can see it go back to my encryption so perfect so now we can see that everything here has been verified everything is working as it should be and my token is actually running as required so let me stop my application and let's go back to my controller and inside my controller here all I want to do right now is add dialog and capability okay let's make this small and after my registration here I'm just going to add my login and again it's going to be HTTP post let's add the route and it's going to be login it's going to be similar public async task I action result and here is going to be login and then all I want to do here is put from body and here we're gonna be utilizing the user log oops user login request dto I'm gonna call it request dto and again we're going to utilize the same thing so we're going to say if model state DOT oops dot is valid we're going to allow them to log in as I'm just going to return the same error as inverted or bad requests The Next Step that I want to do here now is check if the user exists so I'm going to say word existing user equal await underscore user manager dot find by email async and here all I want to do is put the request dto dot email and then once I have done that I want to say if existing user is equal equal to null I'm gonna send a bad request invalid authentication I want to make it as genetic as possible else if all goes to plan all I want to do right now is for generate a token and what would I call the function generate JWT token so for token equal generate generally JWT token plus the existing user actually now I need to check the password so before we generate the token because we always have to check the password and I'm gonna put VAR is password valid equal a weight underscore user manager dot check password async and here basically we need to pass the user which is going to be existing user and we need to pass the password which is going to be from the request dto password and then once we have done all of that we're gonna say if is password Dot um okay if password is valid we're gonna continue by generating the token else I'm gonna invert authentication I'm not going to specify what it is and here once we have the token I'm gonna return okay oops okay and it's going to be new uh user login response user login request response okay it's gonna call log in the request response it's pretty straightforward result actually we don't have anything in the errors we're going to have token equal token and the error the results equal to true perfect now all I want to do after this again run it perfect now let's go back to my web browser here and the good Swagger I'm just gonna copy the username and passwords just copy all of that copy let's refresh so now we can see I have my registration and my login and now I can directly use my login so try it out let's put it here and I want to remove the name and now if everything goes to plan with my login I should be able to see my token returned perfect now we can see that we have a token now let's see if I change the password something like inverted and I click on execute now we should receive an error about authentication perfect now if I put it back and put an invalid email execute embed authentication perfect so now let's put it back as it was now basically what we have done is you were able to complete everything from the API side we were able to create my apis I was able to configure the authentication there the sjwt talk and I added my database I added my controller I added my DB contacts I added my login and registration endpoints and the generate of the jwd token functionality so now we can think about my API is done the next step that I need to do is inside I need to create my angular application I want to configure my angular application to be able to communicate with my API and basically able to send the request and receive responses and basically have this flow of communication between the two but now from the API side is now almost ready we still have one thing to do later on which is kind of regarding record because I don't want to cover it right now because I want us to see the error before we can see the solution for course but other than that now we can actually start by implementing our angular front-end so now if I go back to my terminal what I want to do here actually before we go to my terminal let us go back let's stay inside here and what I want us to do is I want to experiment with this a bit to Showcase that the authentication is actually working so right now if I go down here inside my weather forecast and if I run it there is no authentication required so we can see I'm getting my response so what I want to do right now is I want to add a requirement for this controller so only authenticated user will be able to access it and all I want to do in order for me to do that I need to add authorize and here I want to add a parenthesis and an authentication schemes and it's going to be equal to JWT JWT where defaults dot Authentication at the authentication scheme so now if I run this and I go back to my web browser and I click on it again we're gonna get a 401 unauthorized and it's not allowing me to authenticate against it so the way I can actually solve this and for this I'm going to utilize insomnia because it's easier for me to add headers there so here inside my uh insomnia I just want to take the URL that I had which is going to be this one the weather forecast I'm just going to add it here it's going to be guts as for the authentication it's going to be a better authentication so better token and actually let us do it manually so we add here authorization we're going to make it as better and I'm gonna go back I'm gonna log in actually I'm already logged in let's try to login again I got this talk and I'm gonna take this token here and I'm gonna send it before a token so we can get a 401 we can see got a 401 authorized now I'm gonna add the token I'm gonna click on send okay so now we're getting a 401 I think I know the issue if I go to others we can see the error is due to issuer not valid which is completely fine because basically what we have done here inside the code is I made an issuer validation through but inside my uh controller here where I'm actually creating my descriptor I did not add my issuer validation for it so that's completely fine so another just again this is all a demo I'm just gonna make this as false for now and then I'm gonna restart my application and again if you want to actually to be able to utilize the issue validation I highly recommend that you watch my other video that I have created previously because it's going to take a bit more time and already this video is really long but if you really have questions about it and you want me to cover it in much more details please put in the comments down below and then make sure to cover it in a future video or refer back to the old one and add more functionality to it so now let's go back to my web browser and here inside my web browser all I want to do is actually let's go back to insomnia I'm gonna send the request again and we can see that I got a 200 with that information so now that I know 100 that my code is working and my authorization is working let us go back to my terminal and start actually creating my front-end application so now what we need to do is we need to create our angular application and for that we need to make sure that we have node installed so in order for us to do that inside our terminal I'm just going to put node dash dash version we can see I want the latest version of node if you want to install node Summit what I did I'm just tracing Homebrew install node it should say that that's already installed but from your side you can actually install it that way if your windows just go to the windows website and you can download it from there actually let's show you directly so you can go here and just go to Google and type download node then through here you can download this on whatever you have pretty straightforward so now that we have an available available for us not available for us the next step is we need to actually have angular available so I'm just going to put npm installed Dash G at angular forward slash CLI I have already installed this but in case you don't have it you need to install it because basically angular is gonna utilize not to install itself and the dash G it means that it's going to be Global so anywhere that we're gonna utilize in our system angular is going to be available so now here we can see that angular is installing it's gonna go through this and you can say you can see that's already installed if you don't have it it's going to take much more longer than this so once we have angular installed the next step is I want to initialize a new angular application and before we do that I want to check the angular version that I have and currently you can see that I have angular version 16.1 which is the latest version and you can see here that I have the angular CLI with the nice graph so now let us actually start creating our application let's clear this I'm gonna put NG new and I'm gonna call this drivers. because it's going to be the front-end application is it is asking me if I would like to utilize angular routing or said this yes style sheet I'm going to rcss and this should take roughly around 50 seconds so once that is finished we're going to be resuming the video a few moments later okay so now that my application is installed the next step for me I'm just gonna go to my driver app and I'm gonna open the visual studio code okay so now that my application has opened inside my visual studio code I'm just going to open a terminal here and inside my terminal I'm just gonna put npm start I just want to make sure that the application is running and we can see here it's available on Port 4200 so let's copy this and let's go back here and now we should see that my angular application is running perfect so now I have this I'm going to stop this and what I want to do right now is I want to basically create my HTTP module and basically my HTML module here is going to be responsible for all of the communication that my front end will do with my back end and because of this communication I'm gonna be able to send the request that I need between my angular application into my apis and then the response back that I need in order for me to authenticate all of the requests so once I have done all of that and basically make sure the application is running all I'm gonna do right now is I'm gonna add this HTTP module that I want it's not for open source so now if I open source go to app you can see that I have app.module.ts and here I need to add a couple of stuff so I'm going to keep my NT modules the browser module now I need to have my HTTP here so I'm just going to put import let's make the smaller sticking out of space right now so I'm just going to put import then here is going to be simple http client module module and I'm gonna specify from at angular CLI actually angular common forward slash http and then I need to add my four module because basically I want to basically able to create a form so I'm gonna put import form module from again at angular forward slash forms form not from form s module okay perfect so now what I want to do is basically I want to utilize them so let's add them here inside my imports so this is going to be my HTTP module I know I need to refer to my forms module great so now that we have done that the next step is I want to create two folders one called modules and models and the other one called Services the models I'm going to be basically creating the dto that I'm gonna to be utilizing to send the request to my apis another one is going to be the service was going to be responsible for the handling of the HTTP request so inside my app I'm going to create a new folder and I'm going to call it models Nissan this models I'm going to be creating a new file and this file is going to be called login .ds and it's going to be pretty straightforward I'm going to put export class login and it's going to take an email and it's going to take a password perfect I'm going to create another one new file and this is going to call the register it's going to be also export class register it's gonna be for name because we're already requesting names we're gonna put email and password okay perfect and now I need to create a new another folder it's going to be called Services actually let us create another one here before we create the services folder and I'm going to call this JWT auth again export class because it's going to allow us to handle all of the incoming requests I'm going to call JWT auth incoming responses sorry it's going to be token equal empty and then it's going to be result which is going to be of type Boolean and it's going to be true by default and lastly we're going to have the errors type any okay perfect now let's create my services actually yeah let's get a folder called Services then we'll build up and one thing that I want to add before we do the services is I want to add environments because basically what I want to do is I want to have different URLs one for development uh basically endpoints for my API one for development one for for example QA and one for actually production and the way we do that is by utilizing the environment option that inquiries provide us and what I want to do right now is just create this environment variable so I'm able actually to refer to it inside my services so inside my terminal here I'm just going to utilize Ng generate environments environments I think if we take a look here we can see NG generate environments and here as we can see that my environment has been created and if I go look inside my folder structure we can see that I have environments two of them one is going to be calls for development and one is going to be for production or basically anything that I want so this makes it easier for us to utilize so what I want to do right now it is inside my development I want to add my API URL so API URL I'm gonna say equal and the way that I'm gonna get this I'm gonna go back to my web browser inside Swagger and if we take a look this is going to be my API URL so I'm just gonna copy this and I'm gonna put it here I would not need the semicolon here so I'm just gonna copy this as well put it in the other one Again full production environment you update this for production but for now what they're going to keep it as is so now that we have done that the next stop for me here it's gonna be basically to navigate to the services folder that I created so let's see where I am right now so here we can see that I have my SRC I'm gonna go to my SRC and then I'm gonna go to my uh app and inside my app here if you have us you can see that I have my service so let me rename it to services and now if I type LS again we can see that I have Services let me go to it and inside my services folder let's clear this up I'm gonna create a new service so I'm gonna put Ng generate service I'm gonna call it Authentication now if I type go to my services folder we can see here that I have my authentication this is the test if I want to write unit test for it and this is the actual service so now what I want to do is I want to update my service here to actually reflect the HTTP modules the form and basically all of this information that I need in order for me to actually do a course to my apis so here it's gonna be pretty straightforward first of all I want to put import and then I'm gonna put my HTTP client you can see it's already uh loaded then I'm gonna put import again and this is going to be for my login inside my login folder I need to also do for my register so import ant register and then I need to do my observable import observable and then I need to add my environment and instead of making it point to development I'm just going to point point it to environment perfect and I'm gonna put import if I can type now I need to import my JWT off perfect so here we can think about I'm just adding the references nothing really special now what I want to do here is first of all I want to add my registration URL in order for me to know so my registration driver is going to be registered register URL is going to be equal to if we take a look at my web browser we can see it's going to be forward slash auth management dot uh this is for login but for registration it's going to be forward slash nope that's not it let's do a try it out and we'll be able to see it so I'm just gonna put a new name okay let's try this let's remove this Breaking Point and we can see it we got the response so this is gonna be my URL forward slash management forward slash register so if I go to visual studio code this is going to be my register URL now I'm gonna put my login URL and it's going to be equal the same thing except for register it's going to be login and lastly I'm gonna get here my weather forecast because I want to try it out and let's see it through the service so if it go all the way down you can see as simple as weather forecast pretty straightforward I'm gonna call it uh whether URL equal something like this I already need this okay perfect so now that I have done this the next step is I want to inject my HTV into my Constructor so this one HTTP client so I'm actually able to refer to it and it's gonna for that I'm just gonna make it a private HTTP and you can think about this as the dependency injection that's available from angular for me to actually utilize the HTTP client so once I have done that the next step is I need to create my forward my three methods that's going to be utilizing the register URL the login and the weather so let's start with the first one which is going to be public register and this one is gonna take user type register and it's going to return here the observable of type JWT off and other for me to utilize this is going to be pretty straightforward so return this dot HTTP and Dot post and then up post and then here we're gonna specify the return type which is going to be JWT off and we're gonna basically now putting the URL that's going to utilize so it's an utilizing string concatenation I'm gonna put the environment dot API URL and then I'm gonna put forward slash and then again I'm gonna put the dollar sign and I'm gonna utilize the register URL and then once I did that let me just close it it's already closed I'm gonna put here past the user and that's it so here what I did is basically let me make this a bit smaller so what I did here is I utilized the HTTP object that I have I told it's gonna be a post I specified the return type and then I specified my full URL I utilize the API URL that exists inside my environment which is going to be this one then I put a forward slash and then I specify the register URL and I gave it the body of the request which is going to be user so now if we're going to do login it's going to be pretty straightforward so let's copy this and instead of register here I'm just going to call it login and here is going to be login and here's gonna be login and so the projects that you are just going to be login okay perfect so if you have any questions let's see and here should be JWT auth not login so if you're having question about observable let's go through it right now quickly so basically because all of the requests that we're going to API is not going to be synchronous it's going to be an async request and basically we want a way where we can actually let the main thread of our application continue running while we are waiting for the response to come back so we're doing observable which means that the request once it actually leaves our front-end application it's gonna go into a you can think about as a background state within this background State it's going to just sit there while the other part of the application is running it's going to wait for a response from the API once that responsive that my API the application is going to observe that response is going to wait for it then once the data source is back it's going to take that response it's going to continue working with it so the main thing about this is like because it's async requests we're not holding the main thread of the application while we are doing the call to our API we're basically telling it that it's going to be go do whatever you need to do with the API I'm just going to be sitting here waiting for your response when the responses come back and then I'm gonna continue working on it so that's something that we need to understand with observables and why do we need it right now so now that we have done the register and the login let's do the last one which is going to be public and it's gonna be called uh other let's put get weather and we're basically gonna make it of type observable Annie because we don't really we're not really interested in processing it just for like uh observability sake and we're gonna put return this Dot http.get and we're gonna put here it's gonna return any and then here we're just gonna specify the environment variable and again we're going to be utilizing string concatenation and here I'm just gonna say we're going to utilizing the environment.api URL then I'm gonna put forward slash then the other sign and then it's gonna put the brackets and then here I'm just gonna say it's gonna take the whatever URL order what did I call it yeah what did URL yeah whether URL and that should be it and now what I want to do is I want to go to my main component and I want to update it from there so here we can see that we have the component.the us and what I want to do here is I want to inject the service that I have just created and from there what I want to do is I want to basically create three buttons and these three button is going to be responsible for registering logging in and just doing the call and the reason that I'm doing it this way because I don't want this video audit to be longer than it is but basically it will illustrate the ability to log and get a token and utilize it register getting a token and utilize it as simple as that and we're going to be utilizing the local state of the browser so we're going to save the token in the state in the cache of the browser and the state file and basically that way we are actually able to refer to it from different sections with from within our application rather use different mechanism so again this is all for simplicity's sake and real life scenario you will have all of this in different pages everything is going to be responsible every single module you create every single component you create will have its own Focus but for now for Simplicity sake and to make it a short video as possible we're gonna be more back putting everything as the main component that currently exists so going back here if we come here I just want to start by adding the references so I already have components I'm gonna import my login from it's going to be Dot models forward slash login import register and I want to import the JWT auth import JWT auth and lastly I want to import the service perfect so now I have these I'm gonna keep this as it is and now I want to start adding it here so first of all I want to initialize my log n dto because I'm going to utilize this equal new login my register dto equal new register and lastly my JWT dto that I'm gonna be receiving back the request equal to new JWT off now inside my Constructor I'm going to initialize the service so it's going to be private oops private of service it's going to be equal the authentication Service and again thanks to dependency injection this is how it's being initialized and it's being utilized and now I'm going to create the buttons which is going to be all the actions for the button which is going to be the register it's going to take a register dto it's going to be of type register and then here I'm gonna put this dot of service dot register and then all I'm gonna do is pass my registered to and I'm gonna subscribe to it simple as that and then for my log and I'm just going to copy this I'm gonna put login actually we shouldn't have copied it but okay log ndto it's going to be of type login and this is going to be login and here it's gonna be by log ndto and I'm gonna subscribe to it but something else is once I receive my JWT ETO what I want to do is I want to store it in the state so I'm going to put local storage dot set item set item item set item I'm gonna call it this JWT token and it's gonna be my JWT dto dot token okay what's the issue with this I don't need this I don't need this okay so now that I have that and the last one is gonna be for the weather and I'm gonna call it weather it's not going to take anything and it's gonna use this authentication Service and Dot subscribe and we're expecting now others data of type any and this needs to be like this and like this and here all I want to do is just print it out so I'm gonna put console.log weather data okay let's fix this so here you can see I have setting this up I have my register and here I have my subscribe to the other okay perfect so now I want to update my app with component.html so let's remove everything we don't need I don't need this let's leave the Styles it doesn't really matter okay from here let's clear it out so highlight cards we don't need it resources we don't need it all of this gonna go next stop all of this we're gonna go remove to wherever we're gonna go links we're gonna go okay so all of this and it's gonna go perfect actually let's remove everything we don't really need all of this all we need is the body okay so oops we don't need any of this let's go back here so the first thing I want to do is I just want to create a heading H2 I'm going to call it register and inside this transistor is going to be straightforward I'm going to put a div and inside this div it's going to contain a name and it's going to contain an input and it's going to be we're going to use the NG model here NC model it's going to k equal to register.tto Dot name okay so I'm just gonna copy this three times this is going to be email and this we're gonna change to email and this is going to be password and this is going to be password and all I'm gonna do here is I'm gonna create a button and on the create and click of this button I'm gonna attach an action and this action is going to be the register and I'm gonna specify here the largest entity oh and here I'm just gonna put register so now if we run this npm start if we go back to my web browser if I flash this we see we have the register I'm gonna put my name is um email i'm.com and my password is going to be password and if we click on inspect and we glow on network I'm just going to utilize the request and we can see here that I have an error and why do I have an error because basically if we take a look at the response it's not allowed it's basically a cqrs sorry a course error so let's fix this course alert and then we're able to continue with this so if we go back to Rider and inside my program.cs All I'm gonna be needing to do here is pretty straightforward it's basically enable a rule inside my application for it to actually recognize that there's a front-end application trying to connect so before the Builder dot up I'm gonna stop this and I'm gonna add Builder or Services dot add course and here I'm gonna specify the options I'm gonna put options Dot uh policy and I'm gonna call this policy front end and then I'm gonna specify the policy config and here it's going to be pretty straightforward I'm gonna put policy dot with Origins I'm going to specify the actual URL that's kind of coming in which is going to be localhost 4200 and then without this make sure you remove this at the end and this I'm going to say that allow any method and I'm gonna put again allow any header perfect so now once I have done this I just need to copy the policy name and here I'm gonna put up dot U scores and I'm gonna pass the policy name that I have and now if I click on debug and if I come back to my web browser click on register we can see that I got a 204 which means processed and the response here we got basically the token with the results and basically it means that it worked so now with all of this it means that my application went we got the 200 it means that my my Pro my user has been registered perfect so now let's continue with the login so back here I'm just gonna copy this actually let's just add a horizontal line and I'm just gonna copy these and I'm gonna create one for logging in just to make it easier so I'm gonna it's gonna be a log n dto log and dto is going to be login and login dto and login so now let's wait until the clothes say login is not defined let's see why it is not defined if we go back to the component component oh let's make it lowercase perfect uh let's take the same credentials that we have for Lewis what is that where is it okay all these aaa.com and let's take this password so I'm just gonna put AA at aaa.com and this is the password that we put login what did we get we got an error why did we got an error now let's see the logs here inside my terminal because once it goes to log in let's go here oh because this needs to be log n URL that's the error so now if we go back and let's put the same thing at uh so so it was a a at aaa.com and now if you click on login we got a 200 and basically right now we got the token as we as we wanted perfect so the last thing that we want to do is right now we want to create the uh get water button so let's do it right now inside my app component.html I'm just gonna add another HR and this here I'm going to create a button and this button is going to be called katweather it's not gonna take anything and if we take a look at the component we can see it's just called water so let's take that put it here and now let's try to execute it add now if everything goes to plan which I get a 403 or again we have an error let's see what it is and I have a feeling a set of naming so let's go back to the weather and let's go to get weather forward slash this oh I know what's the issue let's go back here so if we go back to my weather controller we don't have the API here so let's add that now let's run this perfect now if you go back and click we should get a 401 unauthorized perfect so now let's see how we can add the token that I have inside this so we are able to actually do these requests and in order for us to do this uh what we want to do is we want to be able to intercept the request which is going from our angular application to our API and once we do this interception what we want to do is within that request which is going out we want to attach the authentication header that we have to that request so our API will be able to authenticate the request and basically give us the information and for that what we need to do is we need to create something called an Interceptor an Interceptor here is going to intercept the request which is going out and then once it intercepted it's going to allow us to actually add whatever information that we want to add to that request so it will be able to be authenticated from our API and it's going to be actually quite pretty straightforward so if I go back here inside my services I'm going to create a new file and this if I'm going to call it uh interceptor dot DS and let me stop my application I'm just going to put import HTTP oops http event http Handler http Interceptor and HTTP request and then oops I'm gonna import my injectables thank you and lastly the third import is going to be more observable import observable now that I have my imports ready I need to specify that this is going to be an injectable capital I yep and then I'm gonna unexport the class and I call it auth or something Authentication in in interceptor and it's gonna say it's gonna implement the HTTP interceptor and then here all it's gonna do is gonna say intercept the request which is going out and all I'm gonna do here is just get the token from the local storage and recorded JWT token and then once we do that I'm gonna say if token it means that if it does exist I'm gonna attach it to the request so basically I'm cloning the request and then I'm gonna put headers inside the set headers I'm gonna specify the authorization and I'm gonna say it's gonna be a better and I'm gonna specify the actual token and that's it and all I need to do at the end of this just put a semicolon here and return next dot handle and the request perfect so basically what I did here is I created an injectable class which is going to intercept the incoming requests the outgoing request is going to check for the token if it does exist it's going to attach it to the headers as an authorization token and this needs to be Azad so now that the Interceptor has been created the next step is what we want to do is we want to inject this Interceptor inside our module so that actually able to utilize it so to do that all we need to do is just go to the app modules and we need to scroll down where it says providers because we want to inject it here and we want to add the following so first of all we're now going to provide the provider which is going to be the http underscore Interceptor so the first thing that we want to provide the user class which is going to be the class which is going to be the name of the Interceptor and in this case if we go up it's kind of called authentication Interceptor so let's use that and once we have done that the last one is we're gonna put multi and we're gonna make it equal true so that will allow us to have multiple requests perfect so now that we have done that all I'm gonna do right now is I'm gonna put npm start and we can see it has built successfully if I go back to my web browser inside my web browser I'm just gonna clear everything up so I'm gonna use this and now all I'm gonna do here is get weather and now we can see here that my token has worked and basically I'm able to see it but it has it's giving me the for uh one because it's basically been a while since I last used it so now let's go back the same one I think it was AAA at aaa.com and the password I'm not sure to be honest but the password was let's see if it's still here inside the browser and well it's not here anymore so let us try to register again with the new users so let's try it here I'm just gonna put Muhammad and I'm gonna put Muhammad at the dust.com and ask for the password I'm just gonna put it as word like this so let me take this and I'm gonna execute I see oh okay let's run up our application again so here we can see now it's building perfect now if I go back to my web browser and let's execute okay great we got a 200 with the error okay that's perfect so now I'm just gonna take the same username and password go back to my web browser here and I'm gonna utilize the same email which is going to be muhammadat.com and I'm gonna put the same password and I'm gonna log in and we can see here within that once I logged in I got my token and now what I'm gonna do is just put the Twitter and we can see when I click the get water I was actually able to get all of the orders which is available for me so now my user has authenticated I'm actually able to get the information from that authenticate endpoint perfect so now that we have done that now we basically has finished the video we were able to cover everything that we need to from basically creating our API to authenticate creating our fund and application creating the code that we need in order for us to send the requests and username and a password to save the code and then send any subsequent request so within this video what we have learned is basically the full aspect when it comes to client and server interaction we were able to actually see how we can actually create our web API to manage our full authentication where we have our front-end application which is going to be angular and this scenario which basically sending the credentials regarding the tokens and utilize the stock and to authenticate I hope this video was helpful please like share and subscribe if you do if you found it helpful as well if you'd like to support me please consider supporting me on patreon or buy me a coffee with us thank you very much and have a great day

Channel: Mohamad Lawand

Views: 7,866

Keywords: .net, api, c#, dependency injection, entity framework c#, entity framework, asp.net core tutorial, .net core, asp.net core, web api, dotnet core web api, dotnet core, dotnet performance, dot net, angular dotnet core tutorial, angular dotnet core, mongodb, dotnet core web api crud, create dotnet core web api, dotnet api cors, dotnet tutorial, angular tutorial, angular authentication, angular authentication and authorization, angular 16, angular dotnet authentication

Id: 9IBNIbgMGdM

Length: 103min 20sec (6200 seconds)

Published: Tue Jun 20 2023