#05 Custom Authentication System Using Laravel 8, Bootstrap 5 & Ajax | User Login & Middleware

[Music] hello world welcome to my channel i am sahil and you are watching fifth video of the series custom authentication system using laravel 8 and ajax in previous video you have seen that how i have worked on user registration now today in this video i'm going to show you how to work on user login okay so let's start so open your project okay so this is our project now just close this register.blade.pc file and open login.blade.pc file okay now from this file we will send another ajax request to the server okay so here in a script section first we will use a script tag here then we will define the ready function jquery ready function okay now inside this what i will do is if we go to the top then here you can see there is a form tag and in this form tag we have used an id attribute with the value login underscore form okay so we will use this id to submit this form okay so just here i'll select the form using the id and then i will use submit event function parameter e first we will use e dot prevent prevent default to stop the page refresh okay now next we will select the login button okay so you can see this is the submit button and there is an id also here login underscore bdl so i will use this id to change the text of the login button okay so here just dot dwell please wait okay now next we will use ajax method to send ajax request to the server okay so first here i will use url in url we will uh define the route where we will send the ajax request okay so for this just go to web.pc file okay and here we will define another route and this will be also a post method and here just write login and here i will write user controller colon chrome class and here just write the method name login user okay and here i will name this route auth dot login okay dot login now just go to login.blade.pc file and here i will write a method name route and or dot login okay now next i will use method method will be post and data will be form data okay so here i will use this dot serialize this dot serialize method to grab all the form input field data okay and data type will be json and in success i will use function response for now i will use console.log to display the response okay save this now we have to handle this ajax request in the usercontroller.psp file okay so just open this file and here what i will do is just write a comment handle login user ajax request okay and here you define method public function login user okay and here i will use request request okay first i will check that the data is coming from the client or not so here i will use print our method and here i'll use dollar underscore post okay to get this response we have to go to login.get.pc file and just comment this data type json okay now if i come here and just open the console and refresh this page okay so here if i enter anything in these input fields and click on login so you can see here in the console we are getting back all the input field data it means our ajax request is working fine okay so next what i will do is just uncomment in this data type and go to usercontroller.pc file okay now here first we will validate the input field that is email and password field okay so to validate i will use validator equal to validator and i will use make method request all okay request all and inside this i will define the validation rule okay so for email i will use required okay and this will be an email so just write email and max length will be 100 okay now next is password so just write password and this will be also a required field so just write required and minimum of six characters so just write mean column six and then max column 50 okay after that i will use if condition to check that validation is success or fails okay so here i will write validator fails if validation failed then we will return a json response to the client okay so here i will write return response json okay now inside this json method i will use status status 400 okay and messages in messages i will send the message back get message back okay and if validation will success then in else condition we will first get the user by email okay so here create a variable user equal to then user model then here i will use where and then we will find the user by email and we will just use request the email and here we will just write first to get only one row okay and inside this else condition we will again use if condition and then we will check if user found then we'll check for the password okay so again inside this if a statement we will use another if statement and here we will again use hash class and then i will you check method this time okay so first we will we will match the password from this input field and we will match with the password that is stored in the table that is this has password okay so first we will use request arrow password and then we will get the password from the database with the user password okay if password will match okay then in this case first we will just use request and we will use session and we will store the user id in the session okay so here we will use request session and then put and here we will write the key okay the key of the session so here i will write logged logged in user okay logged in user and here we have to provide the value so here i will store the user id so here just write user arrow id okay and we will also return a json response to the client okay so here just write written response and json now inside this i will use status status 200 okay and messages messages in success okay and if password will not match then in this case i will use else condition and in else condition what i will do is i will return another json response response json okay now inside this again i will use status status now this time i will return status 401 and in messages i will return email or password is incorrect okay and if user is not found then in this case we will send another json response to the client okay so here i will return response json and here i will send status status 401 again we will send 401 and we will send message messages user not found okay or anything that you want to send to the client okay so just save and now if you go to the login.blade.php okay so everything is okay here now just come here and rephrase now suppose here i will write any random email id and password and click on login then you you can see we are getting a status 401 user not found okay so let's check the database so this email is this email id is not present in the table that's why we are getting user not okay suppose uh let's copy this email id okay let's copy this email id and go to login just paste this email id but write the wrong password here and click on login so this time again you will get a status 401 and the message is email or password is incorrect okay so suppose i will enter the correct password here and let's see what it returns so click on login so you can see we are getting status 200 and message success okay so now we will handle these uh json response okay and we will display the validation message also just below these input fields okay so here what i will do is just come here and first just remove this console log here we will use so error so error method that is already defined in previous video in this function.js file okay so error method okay so i'm using this method so so error and here sorry before calling this so error method uh i will first check a condition if response dot status status is equal equal to 400 okay now 400 means some validation error because here you can see if validation fails then we are sending a status 400 okay that's why here we are checking if response dot status is equal equal to 400 then in this case we will use this so error error method and here we will use the id of the input field that is email and here we will display the uh validation message in the invalid feedback div okay so response dot messages dot email okay similarly we will display the validation error for the password so just write password and here just write the id of the password field okay and just duplicate this and here we will just write login okay now again we will use else if condition and here will check response dot status is equal equal to 401 now in this case what i will do is i will first go to here and just build above this form tag i will create a div with id login underscore alert okay login underscore killer just copy this id and here i'll select the id is sorry i will select the div using id login underscore alert and then i'll use html method and then we will use so message method that is already defined in the function.js file okay now here i will use danger alert type and here we will display display the message so response dot messages okay and here also we will just duplicate this line and paste here now in else condition if everything is okay and uh both email and password is correct now in this case we will just use else if again okay else if and here sorry lc actually in else condition we will use if okay and inside this we will check response dot status is equal equal to 200 okay and we will also check response dot messages response dot messages is equal equal to success okay then in this case we will redirect uh to the dashboard page or profile page whatever you want to say so here i will use window dot location is equal to and here you will use let's in text route and here i will write profile okay profile save this now if i save this and go to the browser and rephrase now here you can see rod profile is not defined so we have to define this profile route so just go to web.pc file and here i will define route git profile and here user controller class okay and here just profile profile method and i will also name this route profile okay save this now if i come here and refresh then you can see there is no any error displaying now if i just enter any email id and password and click on login then you can see user not found and if we just click on login without entering any value in email and password field then let's see what happens so you can see the email field is required and the password field is required okay so suppose here i have written the email id but not the password field so if i click on login then you can see this password field is still validating but this email is not okay so here we have to provide the password so if i just write any incorrect password and click on login then you can see email or password is incorrect okay and if i enter correct password and click on login then you can see we are on uh profile page but this profile page is not created so does not exist error message is displaying okay so let's quickly create this profile page okay so inside this views directory we will create profile dot plate dot php okay here i will just display a message profile page okay and just go to the user controller dot pc file and here profile page okay and here just define a method public function profile okay just return a view return view profile okay save this if i come here and refresh then you can see profile page now next we will create a logout link to this profile page okay so just come here and go to profile.play.pc file and here i'm just creating a simple logout link let's try to log out and here we have to specify a route okay dot okay now just define this route so here i will use route git log off user controller class log out and here i will name it dot logout okay save this now we have to define this method into the controller so just copy and go to the user controller dot pc file and here logo method okay so here i will just write if sorry public function logo and here we'll check a condition if session if session has if session has this key set login user key set then in this case what we will do is first we will destroy this key by using session pull method okay and here we will just write logged in user logged in user and then we will use return redirect to the home page that is our login page save this now if i just come here and rephrase then you can see the logout link now if you click on logout link then you can see we are on login page okay now from url if we want to access profile page without login then in this case we can access this page okay and if i just go back from here then we can go to the login page also so to prevent this we have to create a middleware okay so to create a middleware just open your terminal and just create a new terminal okay so just click on plus symbol and here just write php artisan make middleware and the name of the middleware so here i am writing login check and hit enter okay now you can see middleware created successfully now just close this terminal now open this app directory then this http directory then inside this middleware folder there is a file logincheck dot php is created okay so this is our middleware file now before coding anything inside this file first let's open this kernel.pc file here we have to just assign our middleware into this route middleware uh property okay so here just write login check and then here provide the path so app http then middleware then login check class okay save this and close this file now in login check what i will do is i will just here check a condition if if not session if session has logged in user if session has not logged in user it means this key is not saved and also request path request path is not equal to home page that is login page and also request path is not equal to register register okay and then in this case just use return redirect return redirect to the login page okay and again if we just use if session has in case if logged in user session has been set then in this case we will also use and request request path is equal equal to login page or or request path is equal equal to the resistor okay so in this case sorry register in this case we will use return back okay save this now we have to just go to this wave.pc file and here we have to define a route group okay we will keep all the raw which we want to prevent from accessing without logging okay so here just create a row group now in this route group we will apply the middleware login check so first here i will use middleware middleware now here we have to write the middleware name so middle layer middleware name is login check login check and then here just define a function now insert this function we will keep all the routes that you want to prevent so i will keep this logo okay and i will also keep this login page route okay and we will also keep this profile route okay and for now just save this okay and come here and refresh now if if you try to access profile page without logging then let's see what happen profile so you can see we are not redirecting to the profile page and instead we are redirecting back to the login page okay so it's working fine now if we just login with the correct credential so you can see we are redirected to the profile page okay and if you want to go to the login page then let's see what happens so you can see we cannot go to the login page once we are uh logged in okay and if we want to go to the register page then let's see what happens so we can go to the register page now to fix this just go to the user controller file and just go to the top now here what i will do is sorry here in register method um what i will do is just use a condition if season as if session has logged in user in this case use return redirect return redirect profile page return direct profile page and in else we will redirect to the register page okay so save this now if we just refresh this page now this is profile page and if you want to go to the login page then you can see we are not going to the login page and if we try to go to the register page also then we cannot go to the register page once we are logged in but if we just click on log logout now we can go to the login page and we can also go to the register page okay so next what i will do is if we just let me show you if i just write the email id correct password and login then you can see we are on profile page but if we just click on logon then we are on login page and if we click here the browser back button then we are on profile page okay so this should not happen so to fix this uh we have to just go to logincheck.pc file and here in return next request we have to send some header okay so here i will use header header now in this header i will use cash catch control cache control and here i will just use no cash no cash and no store and also max max is equal to zero and must re-validate revalidate okay and we will also send one more header with the key pragma pragma and here i will write no cash no cash we will send one more cash the sorry header header and here i will write expires expires okay and in value just give some previous date old date okay so just write set 0 1 jam 1990 zero and time zero zero zero zero zero zero g m t okay now save this and now if we just uh you know if i just log in again with my name gmail.com click on login so you can see we are on profile page now from if we try to go to the login page just by removing the profile then you can see we cannot go to the login page but if we click on logon then we are on login page but we if you want to access by just clicking this back button of the browser then let's see what happens so you can see we cannot go to the profile page by just clicking this back button okay so that's it for this video in next video i'll show you how to work on user profile page okay so thanks for watching this video please like and share this video and also subscribe to my channel see you soon in the next video [Music] you

Channel: DCodeMania

Views: 454

Keywords: wolfmania, dcodemania, custom authentication in laravel 8, custom authentication using laravel 8 and ajax, laravel 8 ajax authentication system, authentication system laravel 8 ajax, login registration system larval 8 ajax, jquery ajax laravel 8 tutorial, laravel 8 custom authentication, custom sign in laravel 8, custom auth system in laravel 8, laravel 8 custom login and registration, laravel 8 profile update with image, profile image upload laravel 8, profile laravel 8 and ajax

Id: 1b_Xk_nmy4U

Length: 34min 39sec (2079 seconds)

Published: Mon Aug 16 2021