Full Stack Authentication Angular & Laravel using JWT | Login & Register API | Part 1

[Music] hey what's going on guys hope that one will be fine and welcome back to the part number two so in this video i'm going to explain you about the installation that we are required for the larva so the first thing i'm going to do here is to right click on it and click on the git bash here and i'm using here the terminal of kit bash you can use here the the basic cmd so in order to install that you just need to go to the git dash sim.com in order to install that so on my desktop the first command that i need to run to install my laravel project so you need to type your composer create dash project laravel slash laravel and the name of the application i'm going to give it the full stack underscore right so whatever the name you want to give here so the name of my project which should be full stack under garage right so there are there are a few things if you're a very beginner and if you have no idea about the installation so you first need to install the composer a dependency manager for the php so all you need to do is to just simply do the installation depending on the os you have if you're using windows you can use the windows installation on the base of the if you are using mac you can use the mac installation as well as with the you have to install the code editor in my case i'm going to use here vs code which is the amongst the most popular code editor right and there then you have to install the xampp or the vam whatever you have just simply download that and i have already running up my localhost phpmyadmin make sure your xam server should be running and the most important thing that i'm going to use here is the postman so make sure you can install from the postman.com and that is basically helpful for testing our api right as simple as that so i will be right back once this installation will be done and then we will continue our required steps all right guys so the installation has been done and now i need to just open up the using the vs code so first i need to go to the directory that we have so we have full stack underscore auth so just give that and just move into the vs code so for if you're using the git bash you simply just press the code and the space start and this is going to open up the vs code for you right all right so the first thing that i'm going to do is to create my route and with the help of the route we are able to create the controller we define the function so we are going to do each and everything step by step so first thing i'm going to do here is to go inside my routes which should be our root directory folder and inside my api.php i'm going to define my very first route so the first route that i'm going to define here is the is the post request for the registration so first we will have to create the registration process which includes very basic uh tables uh basic column which includes email you the name and the password right so let's go see that after that so let's create here a route with the name of register and uh we have to define the name of the controller which i have to create yet so let's give a gig give it the name of user controller and define the name of the function which should be registered right so we defined the controller and the function so already my server air server is running on uh php artisan sir port number 8000 so in order to you can also use the vs code terminal so just simply click on here and to add the another option for adding your commands for the terminal all right so here i'm going to create my controller so php artisan make controller and user controller all right so just simply press enter and you see the controller integrated successfully and app http controller and user controller alright so inside here i'm going to define my function which which is for the registration process so let's define here so public function register and definitely we are doing a registration process and we have a post request so in order to have a post request we have to define the request inside our uh method parameters so let's define the request so request and the request and i also need to define my user model the use app slash user right so in order to check the migration which is created by default so all you need to do is to go inside your database migrations and here there we go so you could see here the create underscore users underscore table so the main tables that we need here in in this whole series is the name email and the password right and so these are the major three fields that we are required for the registration so we don't need to change anything else so it's it's fine right so we have to also connect our database so for that we have to go to our dot env file and that's let's first define the name of the database so give it the name of full stack underscore r right as simple as that just copy the name of the database and if you have open up your database by simply localhost phpmyadmin and let's create the new one and i just give it the database name which i have defined already in my dot enb and i i don't need to create the custom table so we can run by the help of migrations so let's migrate the table so php art is in my grade and it's going to migrate all the tables right now if i go back to the database and you see now we have our users table which includes the id name and the email right that's fine okay so now we have set up our database and let's define the registration process so we also include our user model so with the help of use app slash user and now let's define here the uh let's create the user first so in order to create the user we have to just simply create here user call and create so this method will help us to create the table uh fields for us so so i define here the array for the name so let's first define the name so name and we have to give it the request so dollar request dash name same for the email so let's define here email and dollar request dash email and for my password so the password that i need here in my case it should not be the uh var char or only the numbers or the desert it should be something like a decrypt or something like has defined here a method of b crypt and with the help of that we're gonna have a long string password which will be very helpful so let's define inside the b grip and for that i also need to do one more step actually i forget to bring this arrow so let's define that first and i need to include so if i just simply try to create that it will give me an error so for that i need to define that facade so let's define here on top so use illuminate and sport facades and let's define here hash it should be facades slash hash and the facades f should be capital right so that's fine and close it with the semicolon all right now we have to also check if that user is created successfully the email should not be read uh should not be repeating again and again it should not duplicate right so let's first test that with the postman i need to just simply define the response as well so let's define the response down underneath that so response and inside response i'm going to give it the status which later on later on one of will be very much success important because with the help of when we are doing the front end stuff so that's where we have to apply a check which indicates that one means that it's it's the status is true or on base of zero we means that something is not fine so on when we are doing the front-end side that's where the status is very helpful so we also have to define the message so we have to define the message inside this and let's give it the message of user registered successfully all right and we also have to give the response code for the 200 which means that everything is successful it's also defined here so the response that i need to give here is the code and let's define here 200 actually i don't need this yeah okay so now that's fine and now last thing that i need to do is to just simply return that so in order to return the response i just need to give here return response and define in the json format and let's pass the response so let's have a look and see that whether we are able to create the registration process or not so i'm going to open up my postman and let's first check this out by just simply running uh the localhost and the port number which is 8000 and the request which is get and let's first send the response in order to check yeah everything is fine go to the preview it's showing the laravel now we have to check the post request for the registration so for that we are inside our routes so if you go and see here so we are inside our api.php so whenever you are inside your api.php file so make sure remember that you should be you should have the path for the url which should be slash api and then the name of the of the url that you pass so which is the register and because we are registration we are registering the form we are passing the request so i need to go to the body and let's go inside our the body and i also need to change that to the raw and inside raw i need to show things in the json format so just simply define that and let's create here the very first view so we have to define here name [Applause] so let's give it the name of john so john and i need to pass here the email so let's define here the email of john at the right gmail.com and let's also pass the password so i'm gonna pass here the password one two three four five six which should be inside your double quote that's fine all right so let's gonna send the response and check whether we are working on art so it says that undefined database actually i need to again close my server and run that again because we have we have migrate our tables so for that anything which is inside your dot env so you have to run your server again so now i just refresh that and let's go inside my postman and just try to run that again so you see now if i just go to the pretty version so you see the status is one which indicates that something is fine and message which shows the user register successfully and the code 200 which means that it's okay so it's you can see the response is also 200 right so it's a standard response for successful http request all right so there is a one issue that if i just try to keep sending the request again and again yeah the data is actually allowing the it says that the duplicate entry is entered but how we can restrict with the help of api so let's go and jump and just avoid that issue in order to resolve that we have to go back to our user controller and just right on top of it i'm going to define here a condition so the user and check the user there so we have our where clause and check that email and whatever the request that we are passing here so i'm gonna give it the request for the email and that first means that it will check the the very first email for the so get means that it will check the collection and for the first it will check whatever the request whether it matched up with the the existing email so let's do and have a apply here a condition so if that user is exist that means that we have to show the response so i'm going to copy it from here and let's define inside here and give it the response of zero that means that yeah the email exists right so i'm gonna give it the message here email already exist and i'm gonna give it the code for the 409 which basically is the status quo that something exists right which is keep duplicating right so that's a very small portion of it which will check that if if that email exists already so it will not allow us to show to create another duplicated email as well as with the help of the migration so because we have a unique here inside my database migration so with the help of this unique method which will not allow us to end at the duplicated email but we have to show the response when we are working with the front-end side we have to show that message to our front-end side so that that the email is duplicated so that's where it will be really helpful so now now i've just tried to send the request again and let me have to check that i'm so let's try to run the request again and still keep showing the same message yeah i i just forget one thing here that rather i should needs to because now we have two different conditions so i need to pass it inside the else that if that user exists then just that's fine and if it's not so i just want to cut this out and paste it inside the else condition and now i everything will be work successfully now let's give the send response and you see now it will shows that email already exists now if i just try to change that to john 12 at the right gmail.com it says user register successfully let's change another one now let's give it here a b nation and let's pass here a b nation at the rate gmail.com and send the request and you see now the registers uh user registered successfully now if i just try to add the game now it says the email already exists now let's go back to the database and check this out you see now the password is hash coded and we have our email which are all unique so that is all for the registration process so the second process that i'm going to do just after a while just want to take some one minute break and then we will be right back to the login process where we have to find out the documentation you need to follow the steps so i just want to show you the link that i have so just simply type here jwt in laravel on google and you have to just click on the very first link of it very helpful link so everything is here inside this documentation we just need to follow all those steps step by step and we have to generate our very first login with the help of jwd so i will be just right back in just few seconds all right guys so let's uh move to the jwt auth and i want to give this link in the description so you can easily find a follow this documentation a very simple and very easy one so if you watch other videos which are a little bit complex i believe so it's a very straightforward rule and it's not something which is complex so very basic steps to follow and that's how you can just simply generate the token so so first we just could directly jump to it so jwt it is used to protect the routes from the api and that way you can fetch that token and you can make the request using token to access the protected routes so that's what we are going to do and so the first thing that you need to do is just copy that composer require and just just uh open your git bash or you can even use your vs code uh terminal so whatever you feel comfortable so i'm going to use here that and so simply actually and just need to yeah so we are going to run the composer required diamond slash jwt dash auth and the if that's the first step and then i don't need to actually i don't need to provide that inside my or i should i need to let's just copy that maybe there is a few differences in the versions but let's add that inside the config app.php so i'm going to go inside my config and let's follow up the steps from here so config and there we go so we have the app.php and we need to add that inside the providers so let's go inside the providers array and just define that right underneath that or that's fine okay so we defined our provider and let's wait for the extension once it's installed it's just very much closed for the installation next we have to just simply grab this and we have to run this command so as long as it is taking time then we have to follow the second step uh which we have to where we have to generate the secret key so first uh you have to install the install by the composer add that to the service provider so the two steps has been turned now next we have to publish that configuration so that's what i'm gonna wait once this step is done we have to generate that all right so it's almost going to done let's copy that and generating the optimize autoload files and let's paste the next one all right so just just simply press enter and it's going to publish it and inside your config and we have to also generate the jwt secret key and i have included a helper command to generate a key for you so so this will update your dot envy file while something like jwt underscore secret equal to so it is a key that will use to sign your tokens so it will this will happen exactly will depends on the algorithm that you choose to use so simple so just simply uh press enter uh actually not this command we already run that so just run the jwt under column secret and just simply press enter and this is going to create generate the secret key for you right all right so that's fine let's go to the dot env and so there we go right so that's where you could see so we have our jwt underscore secret key generated successfully all right now we have done those steps next we have to just press the next and just follow those steps so i don't need those bootstrap file changes just skip that all and just move to the another one so that's where which is very important so you have to open up your user.php model so let's go inside your app http and go to your user.php right and that's where i'm gonna define few things so on top of it we have to define uh so first i have to define here use illuminate auth foundation just copy that here and just paste it right here actually not this one it's already present um i need to define this so just copy it from here after class user so right after class user just remove that and paste it right up here the jwt subject all right so next we have to define the use time and jwd auth contract so just right after that i need to define the all right that's fine okay so next we have to define those two methods so just copy that from here and right after the use notifiable i need to or just after that just define those two methods all right so that's fine for that for the update uh we have updated our user model next we have to configure the auth card so uh let's go inside your so here it's a note this will only work if you're using laravel 5.2 and above and uh in inside your config slash author php file you need to make few changes to configure laravel to use the jwt card right so go inside your config and jwt so i need to go to the config and next we have to go inside our which one so it's auth.php let's so let's go inside here and do some few changes so inside your default array we have to change the guard to api which was previously wrapped so change that to api all right so that's the first step and next we have to change that inside the guards array and let's go inside my guards array so there it is and inside guards we have our api there it is the api and we have to pass the driver not the token it should be jwt so just simply define here and the provider which is users that's fine all right so i think so we are very much it and we have almost follow followed all the steps so we don't need to do rest of the stuff because we are doing with our on so let's go inside your user.php or even before you need to go to your routes which should be routes and api dot php so that's where we are going to define our route for the login all right so let's define here it's a route call in column post it should be the post request and define here login and define here the name of the controller which should be user controller at the rate login all right so let's go inside the user controller by app http controllers user controller and right after this method i'm going to define here another method with the name of public function login and define here request so request dollar request and right inside this method i'm going to define here a few things so the first thing that we need is to apply the credentials so the credentials that we need for the sake that we have to uh pass the request for the for the email and the password so i need the request let's define request only which will be only apply for the requested parameters that we are passing which is the email and the password right and next we have to check using the try catch now i'm applying here something which is known as tri-catch exception all right so that will help us to check the jwt exception which means that if the if the token is not generated this is going to show us some message or something like that so in order to define the exceptions the first thing that i need here is just right after here i need to define some diamond jwd so use diamond which should be given in the documentation so you can easily grab that from there too so i believe it should be [Music] um it should be eliminate facades no that that's not there but i i believe there's something if you can find out somewhere uh if i just go next to it [Music] next i believe there should be somewhere right so you can find out so what but we can um we can define that manually right now so use diamond slash and jwt art so jwtr slash facade slash and jwtr all right so they are actually with having such way it might be a reason of some errors but i hope that i defined it fine so use slash diamond slash cwtr slash facade slash jwd auth right and uh next we have to define the exception which should be very much similar to that so just copy that and right after the just remove that facade and define here the exceptions so exceptions and the exceptions that we need is for the jwt exceptions all right so that's fine okay so let's go and define inside the tri-catch and we have to check if the email or password which is incorrect that means that if that token is incorrect so let's define here if that jwt auth attempt and inside that attempt we have to define here the credentials that will check the email and the password and in on that case we have to see that the email or the password is incorrect and let's define here the exception for the jwt so jwt exception it should be jwt exceptions not the exceptions or it might be fine so we can check if we have no error that's we then we will check this out right so we define our try and inside the exception i forget to bring here the e all right and inside those exceptions i have to see that means if there is no token generated so i need to pass here the response of data that means that data should be now all right so next we have to also pass the response code which means 500 so let's give it the pass the 500 the code request and next we have to pass the message so the message that i need to pass that let's give it the could not create token all right so that's fine for the case if that token is not generated but if the credentials were wrong so i need to first pass the status so let's pass the status of 0 and we have to give it the code of 401 and we have to pass the message of email our password is incorrect all right so that's fine and i also need to pass the data should be null right so that's fine right so now everything that we define here if the credentials were wrong or if there is no token generated now we have to check if that user is authenticated right so let's define here user and with the help of auth method we are able to get the user so we get the auth user information we have to pass the token so let's define the token inside the array and here so we have to define that token that bill claims the user id so in order to define the user id just simply we have to define here user underscore id and let's grab the user object here so the variable which is the user all the details are coming from the user variable so in order to get the id we just need to define here id and if i need to get the email so all i need to define here email and let's get the dollar user the email all right so that's fine and that's not over yet we have to also check if that attempt of the credentials were correct so let's define the credentials and that's it right okay so that case we are able to generate the token and we have to now check we have defined the response and i need to just copy that all now we have to define here the first let's define the data i need to just just bring this on top actually so the data which should be the data that we are getting uh so this data has all the token inside here and then we have to give it the status of one which means that it's logged in successfully the code should be 200 and the message should be login successfully so login successfully and then we have to simply return the response in json dollar response so just like that i need to just copy that response and pass it to the [Music] to the to the email or password which is incorrect and same case for the if the token if is not created right so that's fine and let's test this out first if just to check this out everything is working fine or not all right so now i need to change that route to slash api slash login and now if i just try to remove this name because we only need email and the password and let's send the request and you see now it's it's it's registered successfully we have the token we have the status of one and the code of 200 and the message which means it's logged in successfully so let's try with these wrong password and you see it says the email or password is incorrect or if i just define something here uh email just change that email which is still incorrect so it's working fine and now let's log in with the john just to check this out so john gmail.com and let's try to log in with here and it's also logged in successfully so just copy that uh the token that is that we get so just copy that token and all i just want to show you one thing here if you go to the jwt dot io and all i need here are it should be so just pass here inside this information so it will give you it will encode the token and the code form you could see we have the uh the issued issuer we have the issued ad the date the the user id the email so every information that you can get with the help of this encoded token right so that's really helpful for you you see we can with the help of the signature we are able to get the headers we can get the payload and the verified signature so these are all the three information that we are able to get which makes things very much authenticated and protected right so you i hope you guys learned something about offer the authentication as well as the registration and now this api is created successfully and now the next word thing we are going to do with the with the help of the front end which we are using angular and we are going to create our form and do some registration and login process in the next coming parts right so that's it for this video and i will see you guys in the next one

Channel: AB Nation Programmers

Views: 4,406

Keywords: Full Stack Authentication Angular & Laravel using JWT | Login & Register | API | Part 1, fullstack, fullstack crash course, lamp stack, angular, laravel, laravel and angular api for authentication, api, jwt crash course, Laravel and Angular Together, Angular and Laravel Authentication Full Course

Id: c2bk_Ytqhmg

Length: 34min 49sec (2089 seconds)

Published: Sun Mar 14 2021