Login and Signup using .Net 6 and Angular | Angular Project | Authentication and Authorization Part3

hello everyone welcome back to my channel so first of all uh before starting the video I would like to thank each and everyone like we have released part one and part two and yes we are getting a very good response for those two videos so that that highly motivates me to to continue this project like quite faster so that's why I'm just trying to make things very fast okay so once again thank you so very much and there is some change now like I would like to ask for uh let's go ahead and from from from this video we can create some like Target okay so for this video I'm just like hoping for 100 likes okay so I hope you guys can make it uh way quicker okay so once we have a hundred like then uh we can release the part four and we'll continue that in this way okay so let's see how early we can we can go to that hundred plus likes okay I hope you guys will make it all right so let's jump uh to Our Deck okay and let's see what else we have completed till now okay so can you see first three points are done where we have created the dotnet and angular project okay then we have seen how to create the login and sign up page in bootstrap and then we have completed the most important part of angular which is the form validation and that is also been done and if you haven't seen this uh like so there are total two parts for which covers these three topic so I have it on my YouTube channel you can go ahead and watch it if you haven't okay because this is the complete series so whatever I will be talking today or whatever I'll be showing today that will be the continuation of those two part all right and let's let's discuss what is the topic for today okay so if you say we have Point number four which says that create API for login and sign up okay and we will be using dotnet6 which is the latest version right now okay so for that like we have a form ready already on the front end okay so what we need to do we need once the user sign up then we need to store the record in the database and whenever the user want to log in then he can put up his credential and he can go to the dashboard page okay something like that we need to implement but to send it to the database so we need some middleware again like some middle guy who help us to do that to connect the front end with the database because someone has asked me um in in one of my video in the comments how do we connect angular with the database so so I guess this is the way so this video is for you so here you can see how we can create those API which helps to connect our front end with the database where we can store and retrieve all those things okay so we will be using dot net core as our backend all right so uh if you have seen my first video there I have shown you how to create a new project in.net core if you haven't seen that then go ahead and check out this video I think this will be in first five minutes where I have shown that okay if you have not then I would recommend go ahead and check out that okay so if you have seen Matilda then you know how we have created this folder angular auth API so I will be like working more on this side now today not on the UI side but on this side so let's open this folder and let's open this solution okay so I have Visual Studio 2022 so I guess everybody have this so if you don't have it then please I will recommend to install Visual Studio 2022 I think this is one of the best admins the best upgrade from 2012 to 2022. it is quite uh faster and it loads your application also fast as compared to 2019. all right so I hope you have it also okay so this is how my project looks like currently okay so first of all again let's uh focus on the folder structure okay so so what we will be requiring so we'll require a DB context so for that let's create a context folder okay let me create a context folder okay so here we have the context then let's create a models folder like we will be writing all our models inside this folder and we'll also have a helper class like for example if I want to do some password hashing so I will be creating a logic there so let's create a helper folder okay help us and okay we'll create some other if we need while doing the development okay so this is how the project structure will look like like visual folder we will be having so this is the one of the important folder I would say because we have our controller here so this is the weather controller for like this is provided by dotnet itself so we are not going to touch this one if you want you can delete this as well okay all right so what is the first thing we need to do so we will be using EF core okay and so for that we need to install few packages okay so because we will be connecting those things with the database okay so what is the database I am using so for us we will be using SQL Server okay so if you don't have SQL Server then go ahead and install it and also you need to have this Microsoft SQL Server management studio so you need to have this and if you don't know how to install it just go on YouTube and search for it it's quite easy to do and if you want some dedicated video on it then please do let me know I'll create it one but I think you guys can do it it's very easy to do okay so here we have our SQL Server okay SSN I call it as SM Ms so it's I hope you guys have all of it okay now let's start with the model folder so for creating the models let's go here and right click and let's create a class called as user okay so here we'll store some user details so so we are just focusing on login and sign up so it's not a big deal to have it okay once we have this user then we need to create all those properties which you have seen right if I just show you my angular code so in the sign up so we need all these fields okay so for that I'm creating the model okay and to create a model that's how we do let's create a class give it a name and let's try to add those properties okay so the first property would be ID okay and this is going to be my primary key so I can give a annotation on the top as key and we can click here here to so if you hover on this you will get option to import can you see we get option to import this so let's click on this using and this gets imported on the dock you see input on the top key so this is going to be our primary key and let's add the other folders so you see prop string so we need first name okay drop then again string we need the last name okay we'll install our username okay then again string password prop string token and if you guys don't know how I am doing this fast it's very easy to create this just click p r o p and press tab two times that's it that's how it comes okay so we'll uh we can store the rule as well here directly and we'll have a email as well in the last string email okay so our model is ready okay and if you don't like this watering then what you can do just go inside your project just click here and can you see it is enabled you can just disable it save it and now if you go the user so this will get removed can you see that's how you do so if you just disable that in the label thing okay so our model is ready okay so now we need just uh the Nugget packages which is required so negative packages same like uh what we have in npm right so we installed some packages and and make our life easy to be very honest okay so to download the Nugget packages so we have to right click here and we have to click on manage naked packages okay so once you click there so we need to install uh four things and as you can see for me it is showing here uh the first four we need to install the first one is Microsoft entity EF core okay you can search here the name and this will get uh like visible so let's click here click on install press OK and click on I accept okay so this is got installed okay The Entity framework code is done I hope so let's see that is not done let me do it again I think something broke I'm not sure wait let me check try the other one first Okay click on accept something is running yeah I can say those are getting installed but yeah we are not able to see them like their uh green checks uh comes there so it tells that the Entity framework is installed I'm not sure for me it is not showing so let's see again let it get load all the packages okay so the EF code is done then we will be requiring SQL or this JWT as well so click on JWT for install click OK click on I accept okay I think that is also done so we can see here in the installed section okay so we have our JWT we have our code we have our SQL Server one thing is missing which is EF core tools okay so you can search for EF core tools okay let it come so this is what we need okay so click here click on install we will again Ask for this question say okay and say accept and I guess that's about it now if you go in the installation section you will see your packages is installed the four packages what I wanted okay so this one two three and four so you need to have these four installed okay so once you have this then only you can proceed further all right now as I told you now we have to jump to the context file so let's go here and create our DB context okay so for creating a DB context again we need to create a class okay a normal class so click on ADD and click on class okay let's give a class name as app DB context okay let's get load yeah included app DB context so once we have this so the first thing we need to do is so we need to inherit from DB context okay so this is so if you just hover on this click on show potential fix and you need to import this so this is coming from Microsoft dot Entity framework okay so once we have this we need to create the Constructor so to create that just press CT or and press to time tab or you can also manually write this so that's not a that's not a problem okay so we just need to um like inject that instance okay inside the controller so we have DB context options okay so inside the option the angle bracket we need to pass our DB context name which is app DB context all right and inside that let's so that's how we create injected it and we need to pass it to the base as something like this okay so this once this is done so we need to also create our DB set so that we can communicate it with the database so this is the model which will be sent to the database correct so we need to create a DB set for it okay so let's go ahead and create a DB set again let's create public change it integer to DB set and let's give the name as user model so this is the model name user which we have created this one let's import this as well in this file as you can see using API or tpi.models and let's give it this name as users okay so in this way our macdb context file is also ready and we also need to send this record to the table correct so for that let me write like create a method so we have this protected override y or model created okay so we have our model creating so let me tell you what I will be creating an uh instance of a of a class let me show you then what is actually that so we have this on model creating and inside that we have a model builder okay so this is our class okay let's click here this model builder and this model builder will helps to take the entity from your.net core and send it to the table which is in your SQL sign so it is the same whatever I said the same I will be doing it now so we have this model builder dot entity take this entity and send it to the table and we can give the table name as well okay so we can give a table name as TBL user or just users okay it's all dependent on you so whatever name you gave here so the same name gets created in the database okay okay uh I think I have missed this part that uh let me just tell you we are using Entity framework code first approach okay which means we will be writing code and stuff we need to run some migration and after that our database will get created automatically okay so I'll show you that know what don't worry okay so once this option things has been done so we need to configure the same in your startup.cs class whoops I think I made a mistake it's not startup.cs class now now it is program.cs like if you guys are coming from.net uh 3.1 2.1 or 5.0 then you guys have seen a file called startup.cs like if you are working in dotnet5 or dotnet 3.1 then you will have that startup.cs class but if you're on dot rate 6 then that file has been removed okay so now I'll go in the program.cs and here on this line we need to uh like configure that service okay so once we configure the service then we will be able to uh do our database call okay so to configure it what we need to do is so we have something called as Services okay let me write here Builder okay Builder dot Services okay builder.services dot there is option for adding a DB context so we have an option add DB context okay this one okay so in the angle bracket again we need to give the name of your app DB context so we call it app DB context so this is ADD DB content this is the our the context which we have created here okay so this is the lab name so we need to import this click on show and click on using okay so here remember that we have passed that option there correct so there was the reason behind that so that option will get value from here okay so what we will be doing right so let's have this okay let's create this bracket and inside that we have the option and so we say option option dot so we are using SQL Server right so we have to say use SQL Server okay something like this but if you're using MySQL then you have to say MySQL or if you're using postgres then then that will be a postgres SQL okay so for us it is SQL Server so that's how we put so SQL server and inside this we need to pass our connection string okay so let me first write here something called as Builder Dot configuration Dot get connection string okay I know you will be asking Sushi what are you doing so I'll explain you after this step okay so I will have a key name called as SQL Server SQL Server corn call SDR so this is SQL server connection string that's how I put and again this will throw an error so for that we have to import something which is using Microsoft identity framework core again that's get imported on the top this one okay now let me try to explain you this line what does this line does okay so this is nothing but help you helps you to create uh clearly we can we can make use of configuration files so we should not hard code it here so what we will do we'll use make use of app settings okay and here we can we have a property called as connection string okay and inside this connection string okay we need to pass in that name right we have given the name as SQL Server constraint okay so that's how we'll do so I'll better I'll copy it from here so that it will be easy no mistake in spelling paste it here okay and inside this you will have your connection string okay so what is the connection string now I hope you guys have this question so if you open up your SQL Server database so here you see right so let me first add those required things which is which is important the first one is data source okay so we need to pass in the data source and this is nothing but the name of your uh SQL like for example for me the connection string game if you click on connect sorry not this one so we cancel it this one can you see me get a server name right so that's what I need to put on the data source so let me copy this and I can paste it this after the equal to okay so when that came uh let me remove this as well yes all right so now we have this SQL Server so this is our data source so once we have this data source after that we need to have the initial catalog okay so the initial catalog is nothing but your database name okay so let's give it a name initial catalog that's misspelling is yeah it's correct initial catalog so we have selling a catalog and we can say equals uh we can give any name so we'll give auth DB uh version one or maybe I think that's not a good name let's give it a name as authentication API DB okay auth API DB okay so that's how the catalog looks like and then we need to put your integrated so if you don't know how to get this connection string it's quite easy you can Google it as well you'll get the answer but I'm trying to explain it what all these things are so okay so we have this Integrated Security as true okay we can mark it as true that's all that's all that's how the connection string looks like so you just need to pass the data source and this value you know where I have taken it from then we have this initial catalog okay so this initial catalog is nothing but the database name which you want to give and then we have this Integrated Security as true okay now let me first show you that if this database exist or not like I haven't created this DB yet okay let me show you in MySQL server if you go here can you see there is only auth DB not auth API DB so there is no auth API DB anywhere here okay so what we can do so now you can see we have database not created but the database will get created after a command and let me tell you what is that command okay now once this thing is ready so open up your package manager console this is the one uh if you don't see this then click on view click on I guess it is some other window yes other window and there you will get an option for package yeah this one package manager console that's how you open this okay so once you have this console open uh hit the command and before that you need to save all all the changes okay now hit a command called as ADD migration and let's give a name to your migration as V1 version one migration something like that okay can you see build start it will take few seconds so let's wait for it and it says build succeeded and now this will create a folder here called as migration okay so it says unable to create an instance of appdb context for the different pattern support at design time okay so let me check what is wrong here okay so it says something is wrong in the app setting or as I see here uh yeah and so that's why okay so this was the mistake guys so if you should not have it here this should be yeah that's how we end it I'm so sorry it was mistake I've added okay so now I think now again we can click on save all and now we need to run the same command again add migration V1 and hit enter build succeeded uh I want to see it done so once it says done then the migration is completed okay all right so now I can see the migration is completed because we have a folder created here okay and now it gives all those things like how the table will get screwed and all those stuff okay so here we have created our uh what we say the migration folder okay so once this is done we need to hit one more command to update the same like just by creating command it will not create a database here if I refresh it can you see it will not show anything yet let me just refresh and just show it to you I know it takes time let's wait okay so can you see there is still not are the API DB so once we hit a command called as update database I'm not sure if it is visible to you guys let me zoom in little bit update database so once we click this command update data and hit enter okay the spelling isn't correct again I did a mistake I'm so sorry guys so database and hit enter okay so the command is update hyphen database the build is succeed I want to see it done once it says done which means uh the database and tables get created on your SQL Server okay see I don't know SQL command and without knowing the command I have created the database and all the table required tables now if I try to refresh this again wait for some time okay now can you see the database got created auth apid we and if I open up this and if I go in the table okay so it also created my user table can you say users if I just click here and click on select exactly so we have our ID first name last name user password to control and email so whatever model we have created okay so let me zoom out again okay so whatever model we have created I'm not sure I think my screen size was very small uh okay I'll try to make it zoomed when I'm editing the video Don't Worry okay so if you see here so whatever users I have created here all the same thing got created on my database as well okay so that's how we do those migration and update database all right now let's focus on the controller partner because in the controller we need to create the API for login and sign up okay but before that let me again take a quick recap so that you can if you have missed like because my skills are small so you can have a look so the first thing we created the model okay and the second thing we created the DB context app DB context this one okay and before creating this we have installed a few packages okay so let me show you what all those packages were you can manage so we have installed these four packages again after that we created the DB context file and once this is done we have hit to command the first one was add migration this one and the second one was update database okay so once you are till here so the third like the last step would be creating the controller and creating our two endpoints or login and sign up okay so let's right click on the controller and click on ADD click on controller selected empty and select here also API controller and this should be empty because we'll start from emptying controller and let's remove this name and just keep the name as user okay so we are getting user controller and click on ADD okay so once we click that our controller gets created here okay so now we will be creating our first API okay so before that let me first uh create the Constructor because we need to inject a DB context class because this this is the one which helps us to communicate with the database correct so we need to make use of this appdb context so let me try to inject that so private read-only okay and our app BB context we have to import this so just just import it and let's give it name as called context okay and let me give the same name here as again app DB context as amdb context and inside this we can pass auth context will be equals to app DB context okay or I think so this name should match ideas I'm not sure it depends this also works let's let's keep it like this because we are doing it for authentication authorization so that's why I kept it as auth context okay so let's create the first endpoint so for that this will be our HTTP post so HTTP post and inside that we have a route called as authenticate okay so I passed it and let's create the method so public a sync task of I action result okay and let's give the name as authenticate okay so once we have this authenticate so a user will be sending a body okay a login object like for example to to log in okay let me again show you our application so for login we will be sending two things username and password correct so that's why we will have a body so we will say from body all right and we have your user okay so we have this user created this one this model user okay let me import this so I click on show potential fix and say user object all right now what we need to do is first we'll check if my user object is if it is null then we can return directly bad request so it throws the 400 error like the user is null but if the user is not null okay so we need to um like we need to check because we are doing a login here first okay so that's all we do so for that if the user exists for example if the user is already there in the database so we need to check that we'll say where user equals okay so we'll do um a call so we say await okay let me have space and then I call my context auth context dot user click user dot I'll say first or default a sync okay so once you have a Sync here because we are using a sync and a weight so this method has to be a sync so I know this throws an error so you need to just import EF core Entity framework core okay and inside this you need to pass the logic as where X where x dot okay your x dot user like username matches and all those things so you can you can check that you can check x dot username is there so we can say a user object there will be J Dot if we have this username which means we can say yes user exist correct so you can check for ID also you can check for username because we will be having user in unique so that's why I put as username okay if if the user is found for example we have a user here then we can do the further step but if there is no user if the user is null which means the user not found okay we can retire uh not found correct again this is not found and inside that we can just say new you can pass in our own message as user not found okay that's what we do if the user is null but but if the user is there for example if we we can check for the password also okay we can check for the password that if the password is also correct which which matches with the user uh then we can we can proceed off or for example we can do this in the first line only I think I have missed that so we can check on this line only and and what we can do we can stick for x dot password is equal to equal to user object dot password if that matches if these two are matching like username and password are matching then the user is there but if there is noises then we can just say not count something like that I'm not confusing you okay I'll explain it again if you want all right then what we need to do is we can just say return okay we can say return okay or we can send a message as new and then we can say message it has login success okay so let me again explain if the user object is null if someone is sending a blank object then it will return a bad request if we are checking if the user has the same username and password what users have sent if it is there then it will come to this line if it is not there if it is null then it will come to this line okay so that's how we write the logic for login okay now let me write it the same for uh register so again we have a HTTP post okay and this will say that register or we can say add or whatever you you are comfortable with you can give any name to here so you can put here as register and again public sync task of High action result okay and this is a register user again we will be getting it from Farm body so let's add this attribute from body okay this is my user and this will be going to my user object so resistance is very straightforward guys it is very straightforward uh we just need to check if the object is not blank that's all so first we'll check about that so we say if user object user object is null then we can say return bat request okay return back request with it but if it is not null if there is if it is having value like you can do like multiple checks as well uh for example we can do here if string dot is null or NP there is something called as this so we can do this check as well where we can check user object is not null okay or password is not null user obj dot username so we can check if string is not null or something like that we can do okay but I think this makes our job so no need of that correct okay now we'll as we have checked that it has some values and all this thing then we can we need to add this so for adding it in the database so we'll see here that uh the context so we'll say await we have the auth context auth context Dot the user dot add a sync and we can add the user object in the database okay once we have added we need to say save it correct so we can say auth context dot save changes async and once we save it we can just return OK and inside that we can give a body here and which says that message as user registered okay let's save this it is very safe for you guys first we have a register and then we have authenticate okay let me try to run this if this is done then you can run the application okay because now it will open your Swagger so as I have told you that we will be also having a look what Swagger is and all those things so Swagger is nothing but uh it is just like your Postman so we have a postman to do API testing so in the same way the Swagger gives us a great UI like user interface where we can do the same job what we were able to do it in in the postman okay so here you can see we have created two endpoints first is for register and second is for authenticate okay so first we'll try to register okay so I'll go here click on try it out I don't get ID because ID is auto incremented so we just give a first name we give a last name and we give a username then we give a password token will be blank the rule will be blank or we can give a role if you want like he's a user and we can give an email as well okay and now we can click on execute so once we execute this will uh do that do that call to your server and then it will send it to your database okay so let it get done and the first time this takes time can I see you get a message called as user registered let me register one more user um John Smith and uh three zero he will password will be same token token and then change this to admin and Yep this again has to be changed to jump okay now let's again execute this and can you see this was very faster and the user was registered now let's check on the database if if this is the case so just run this query execute can you see we got two users added okay Shashi and John all right now let's try to log it with the same user credentials so if I click on write out so for sign up we just need a two things so I'll just remove uh all the unnecessary part so we just need a password okay we just need password and we just need username those two things rest I can remove okay so the username was why she 30 and the password was admin if I click on execute can you see this okay so it gives me uh 400 errors so let me check what is that okay if I go in the top oh this was the problem so we don't need this comma Okay now click on execute okay now it says 404 which means you are not found okay now I will help you to uh do the debugging if you want but I know what is the can you say the name is incorrect can you see we don't have this kind of username in the database we have yashift three zero and I was trying to uh log in with this name so that's what it's return me it returns me 404 user not found which means there is no user with this username because this was incorrect and if I try to change it with the correct one and now if I try to execute so can you see we get a 200 and it says login success okay so that's how we create the API in.net and in angular sorry in.net and now we will be trying to integrate this same API in the angular okay so this is what uh we have it in our Point number five let me just show you our points okay so we have actually completed our creating the API for login and sign up so I can make it as done okay and again now we have to concentrate on point number five okay so I will do that now okay let's see how we can uh integrate this API with your angular but before that let's uh take a quick recap again so what what what all things we have did okay so if I open up my visual studio code so here if you see we have we did some coding in our controller so we created a controller called as user controller okay and inside that we have injected our app DB context correct and by using this app DB context we are able to uh save and get the records from the database so the first endpoint we created is authenticate which will help me to log in okay so for that we are passing the user object okay and then from here we are trying to check if the user object is null then it returns bad request else it will go in the second line and it will check for if user exists or not so it calls the user by checking if user name and for password which we have sent from the UI is matching if that is not matching then it says user not found but if that matches which means there is a user exist and we can say yes login success and for doing the register it was very simple if the body is empty then it returns a bad request and if the body is not empty it will check for those details and it will try to save it in the database so it is addressing saves I'll like put it in the details and this line helps to save it in the database so this ads and this saves and once that is done we can return message as user registered and that's what it did okay now let's try to create the apis on your angular site okay so let me open up our angular okay where is that okay let me open it here I think that's taking the time yeah here it's open okay so here we have this folder structure already so let's go in the app and we have our services ready okay so in the services we will uh try to create that that login part and and sign up part okay so first of all we need to give it a good name so we should give it a sub name like auth service because it is helping us to do those authentication and authorization okay so we'll try to give it a good name called as auth so to create a service uh um we just need to hit a command here in the CLI so let's go here and hit that command okay so we say NG G for Generate s for service we need to get that service but we need to create it and inside this folder so for that we have services slash now we need to give a name to our service so we'll give auth so this is the name of our service auth okay so let's wait for it to get created so the service is created as see as you can see so we have this auth service ready now okay so inside this first of all we need to have the URL where we need to hit the API so let's uh create a property to store it so we have a base URL of type string and we can give the value so what is the URL for it so let's go here in the Swagger okay and in the Swagger you can find that URL for example if I want to post or execute just click there you will get the URL okay so let's copy this okay so this is what the URL looks like and we just need to put it here inside this okay we can remove this yep so this is our base URL okay now we need to do the API call okay HTTP calls so for that we need to import uh first thing we need to First inject the HTTP client so let's do that private http nhttp blind okay this is the guy uh it doesn't takes so we need to import it manually so we'll say import from angular slash common slash http so we need to import HTTP client so let's put it here HTTP liked so once this is imported there will call and also we need to import it in the module okay so let's try to do it here so in the Imports array we need to have HTTP client module okay so that's how we do uh API calling so this is the preliminary step I would say to do the API call First you need to import HTTP client module inside your app model folder and have it in the import array once this is done then uh wherever you need to call that API like the HTTP call so inject that HTTP client inside the Constructor of the service and that's how you will be able to do API calling okay now let's create our first which is sign up sign up and we'll also have one more method called as login both are both are a post called so let me try to pass a body as well so you say user uh obj correct and currently let me give it as a type as any and here also let me give login obj and let's give it a type as any okay now we need to see return we do test this dot http okay HTTP dot post we are doing a post call that's why okay and inside this we need to pass the base URL sorry let's pass the base URL so let's do the string interpolation so press this double take this is present on the left hand side like this is before one you have the numeric keyword so press that okay and then here we have the base URL okay and then uh for doing the login or for doing the sign up we need to have the API as registered let me say register this one so let's copy this guy and paste it after after this register okay so this is the post call so that's why it accepts an object so he is complaining for that so we need to pass the body as usual obj because this is a post call okay same thing has to be done for your login so let me copy that and paste it here just we need to change this one so from register this has to be authenticate okay so we this has to be authenticate this guy so you can copy this or you can type it down manually so let's try to add it manually authenticate okay and sorry here we need to do that within ticket and then we need to pass login obj not the user obj let's pass this okay so in this way our service is ready okay service is right now we need to inject this auth service inside your login okay so first let's try to do the login let's go in the login component.ts okay and let's try to inject the auth service private auth service that's how we inject it is imported on the top as well can you see yeah the first line okay now so we have already a method for all submit or maybe I can change it to on login and same name has to be changed on the UI so let me do that as well okay so it will be somewhere down here this one so I just change the on submit to on login okay now so it checks for the form I have told you right so we need to send the object to database so that's how we do so if you see we have two object username and password so what we'll do is we load this let's try to call this Dot auth Dot Login and inside the login I need to pass some body so the body will be this this Dot Login form dot value okay once we pass the value we can subscribe to it and then let's try to add the success response so we can have the response we can alert response Dot message okay and in the next we can put here error this is our edit block which will helps to display your error so we can alert errors dot errors Dot message okay something like this we can check it if it is not null okay like this okay so that's how we do the login okay same thing has to be followed on your signup component so let's go in the sign up and again try to inject your service so let's go in the Constructor let me make it short okay let's go here in the Constructor and let's inject the auth service okay this is incorrect so this has to be cooler okay once we have the auth service again here we need to perform that logic so this Dot auth dot we have sign up and then we can pass in the body of sign up dot value so once we put the value we can subscribe to it okay so we're subscribing just say dot subscribe and the response again let's create an object next and here we'll have the response we can alert the response whatever we are getting it from the database oh sorry from the backend and we will have an error block which says error and then we can alert it should be error dot error Dot message then we can check for null 50 so let's do that as well okay so that's how we do and now let's check if um that thing works as expected so let me open up my angular so let's go here and yep that's how we have this ready now let's click on sign up and let's try to sign up a user um and sync and this is very I'm not sure if this name is good or not but yeah let's type in the username Raj at the rate gmail.com then get let's get a large three zero this is the username which we need to remember while login and password output as same admin and let's click on sign up so it gives me undefined I'm not sure what does it mean so let's see in the console what is actually that undefined is okay so I can see there is one error while sending it to the backend you can you see this is one of the famous error which throws I think lots of people ask me on my telegram Channel as well that uh what is this error what is this course and how to enable this course and all those things can you see this course is because we are trying to call a different origin because we are origin is 4 to double zero and we are trying to call 7183 okay so let me again start if we are trying to call um a different origin so that's how a cause error occurs okay so to solve the course error so what you need to do is you need to configure the course in the back end okay so I will be showing how to configure course in dotnet core so let me open up my DOT net core okay so here we have our dotnet core project so so I am into my so let me stop this first okay okay stopped okay so now what I will be doing so let's come in the program.cs file uh where we can configure the course okay so here on this line I'll say Builder dot services okay Services dot if you press dot then you say add course so once you put this can you see you get the option to to add a cause here or to configure the course here okay so inside that uh you will have option okay and then what you can do is you can add a policy first you can give a policy name to your course so we can say option Dot add a policy so the first parameter you need to pass is the name name of the policy so let's give it a name as my policy okay and then we can make use of this Builder to now yes so now this Builder will helps us to allow all those Origins so we can see or build a DOT so we have this methods allow any header okay so we can just put it in in line like what all things we need to allow so we can say Builder dot allow any origin so we have allow any origin okay and I'm trying to change this so we can say dot allow any method okay then again I'll say dot allow any header okay so that's so that's what I did so it will now allow any origin any method or any header so it will not throw any cars error if you're trying to hit this backend API okay but this is still not done so we have just configured it but we need to register this inside your pipeline okay so let's do that so let's go here and always remember uh use uh like we need to put this course above your authentication authorization pipeline okay so we need to have this above authorization so we say app Dot use course okay and we just need to give the name of your policy so the policy name was my policy okay and I think there is one thing is missing let's add that app Dot uh use authentication so let me add it use Authentication because we are doing the organization authorization so it is important so let's have this thing okay always remember you need to put the cost policy above your authentication okay all right now let's try to run the API okay it is running so let's get to the Swagger endpoint page let's see it's still taking them yeah so here it opens it and now let's go inside your angular application again on the UI and now let's try to hit this uh data again so we have this sign up body ready let's click on sign up okay so there will be a network call there let me just show you okay so we got 200 you can see we got a message called as user register if I press ok okay all right so I can see there is a bad behavior here that once the user is registered we need to reset this form okay so let's go on the sign up okay let's go to the sign up page and once your form is Success you get an alert message so you can say this Dot sign up form dot reset okay that's what we do all right now this sign up is ready so now let's try to validate the same thing by using login so if the user is able to log in or not correct so let's go on the sign up page and just click here rash 30 so this was my username and the password was admin so we can check it as well that's correct and now if I click on login okay so that will do the API call and now it says login success okay so that's what we do okay but I need to change a behavior a bit okay so once I put all the details here and if the sign up is Success okay so I want to route to the login page and if the login is Success then I want to Route it to the dashboard page okay something like that so let's try let's try to write the logic for it okay if the sign up is Success so let's uh call your router private router okay let's inject where the form is reset so we can set this dot router dot navigate and we can navigate again to the login page if the sign up is Success so that we can log in okay and if the user logs in successful then we want to show it to the dashboard page okay so let's create a dashboard component so let's go here and hit the command ngg see for component and we need to create dashboard component inside this component folder okay so okay the spelling is incorrect I'm so sorry this has to be components let's put it as components at the moment okay all right and slash we need to get the name as dashboard and hit enter so can you see uh so yeah our component got created here and it has also updated your app module.ts which is good all right now let's try to register this component inside your routing okay I go here and I put a path path as a dashboard it's small if the path is the assured then we can load the component called as dashboard component okay that's what we do and once this is also done let's click all save and now let's go to login and do that thing all right so now here again we call the router let's import this okay and now I go here if my login success then I can say this Dot this dot reset or I can say first this Dot Login form dot reset I will reset the form if it is success and dashboard page so for that I will be using router dot navigate and we can go on the dashboard page let's click on C okay so once this is also done let's try to see the Behavior now okay let's do a small demo first I'll try to sign up so let me put up a sign up credentials um James roads email will be James at the rate gmail.com username will be james30 and password will be again admin and keep the password same okay GM study now if I click on sign up let me close this click on sign up I see user registered and if I click ok so it comes on the login page automatically and now if I try to sign up with James 3 0 as a username and the password was admin let's verify it yes and now click on login can you see the login is success and now it comes to the dashboard page okay so this is what I wanted so that's how we have successfully integrated the API the document code API with the angular okay so again a very quick recap to explain you what I did so first thing I created a service okay this art service and I called this HTTP client to do the API calling I created to Method sign up and login passed in the object those two object and we are passing it to the back end and once this service is created we are injecting this service inside your login and sign up okay so in the Constructor we are injecting the auth service and also the router okay and now here we are calling that method odd DOT sign up we are sending the sign up object if it is Success then it gives the alert as a lot of success we are resetting the form and we are sending it to the login page and in the login page we are doing exactly the same we are injecting the odd service to do the API call we have the router if the login is Success we are resetting the form and sending the user to dashboard page okay and this was the way where we have created the login and sign okay login and sign up in angular and Dot net core okay so if you have any questions like if you skip like if you have anything like you are not understanding it then you can comment and I will be definitely gonna answer like what went wrong and we can connect on telegram to to fix your account okay so for now let me just try to change the status of the deck because we have completed this as well so we have successfully integrated the API with your angular okay so now in the next session what we are going to cover is we are going to see how we can hash the password okay if you see in the database we can see what is the password of the user right and which is not good it's not good to have this okay so what we will do in the next session we will try to see how we can hash the password and also we will see the the best ways of doing the server side validation okay and we'll also try to improve our code a bit because we haven't did um that much improvement we have just created the simple API and we are just trying to use it in angular okay but in the next session we will try to improvise our code okay so please stay tuned for that because that will be the very important lecture where you will see the advanced topic on the authentication authorization thing okay okay so till that time bye bye and keep learning guys

Channel: Let's Program

Views: 77,668

Keywords: .net, angualr, angular latest, angular project, .net core project, login, signup, login using api, angular and .netcore project, angular login api, web api login signup, cors error, slove cors issue, webapi cors error, angular cors error, swagger, .net and angular login signup, angular for beginner, angular 14 project, new angular

Id: ApSERLzbA9g

Length: 65min 22sec (3922 seconds)

Published: Sun Sep 18 2022