Vue js SPA Laravel Authentication, Vue SPA save user and login user - laravel

hello and welcome back to the channel please subscribe if you haven't done it yet today we continue my last video when i created a vue.js spa with larawel backhand now we create the authentication part when we create the login and register page and in the next video we will create the crowd functionality when we will be able to create article update article read article and delete article inside the dashboard if you are logged in as a user so today we are focusing on the login and registration uh a user into this single page application without any page reload okay so we take this application one step further in the last video we have the home and about we will start from there but today we will create this login and register page as well so we will be able to save new users into our database without any page load and then we will be able to login the user and of course we have a dashboard page as well so if i say slash dash dashboard i got rewrite it back to the login page because i'm not logged in so i'm not authorized to visit that dashboard page so now i can type in my username and basically my email address and password and if i hit login i get redirected to the dashboard page as you can see and i can see my username and email address these are coming from the database and of course i can log out so if i log out i'm rewriting back to the home page automatically and if i try to access again that dashboard page without login i got redirected to the login okay so that's what we're doing today this is where we finished our last video we have about page and home page and now we would like to create a authentication so we will create a login page and register page and we authenticate the user and we show them a user dashboard where in the next video we will create a crowd application basically where they can create articles and save the articles and show the articles and edit the articles and delete that articles but for today we will just create only the authentication system for this spa with laravel 7 on the backend so for this we need to create a login and register enough barlings on this left hand right hand side so let's just do that let's open up vs code and i'm in the welcome the blade and here is where my navigation bar let's just create one more flex div okay and we need two router links let's just copy these paste here and first will be the login and the second will be the register and the routes are not ready yet we will create it soon but this will be the login route and the second one is the register route right let's have a look okay and we need to say justify between so it will be pushed in this side and it has to be flex container as well the main container div so it has to be flex and justify between so now we should see what we expect here you go so we have the homepage about page and we will create a login and a register of course we get 404 because these are not created yet so first of all if you would like to authenticate a single page application with laravel the best way is using sangdom previously known as airlock so let's just open up a lot of websites go to the documentation and if you go to the official packages you will see sanctum down here which will be a lock as i just mentioned earlier and here is the api token authentication and here is the sp auto authentication right so first of all we need to install true composer so let's just do this step i'm going back to my vs code open up one more command line copy and paste hit enter so it will install the sanctum package for our laravel application right so this is done let's continue with the instructions we need to run this command again let's go back copy and paste hit enter that's it on and php doesn't migrate but at the moment we don't have any uh database for this application so let's just create one go to the localhost.php myadmin right and let's just create a new database for this view spa right so now we have a database for this application let's go back to our vs code and let's go to the dot env file we need to specify the database name we have just created it was a view spa in my case my username is root and i don't have password on my local environment let's close this to load this configuration file again we need to restart the server so let's just ctrl c and php artisan serve again let's go to this hit refresh and now we can do the php artisan migrate command okay so our migration was successful let's just have a look hit refresh and as you can see we have the users table now and personal personal access token we we don't use this personal access token now anyway and also we need to add one more line to our kernel.php so first of all let's copy this line up here okay so let's go inside the app folder http and kernel.php and let's just add this line up here and also we need one more line this okay and we need also this line if you scroll down you will see this api and that's it for this kernel.php right so now let's create this login and register pages so first of all let's just register them inside our right so let's just create these two routes login and register these two components so if you go to the resources js folder as you can see we need to create two components actually free because if we are logged in we need a dashboard for the user so first of all we need to register the user so let's create the register view register view component okay let's create the basic structure of the view components so template and of course we need a script as well okay let's just copy this and let's create our login paste the previous code here and let's create the dashboard as well and paste okay so we have the three components let's go to the routes.js and let's import them so first of all we have a register second we have a login and the third is the dashboard great now we need to create the paths for these as well so one two and three so this will be the register register route we will use the register component here it will be the login route and we will use the login component and same for dashboard right great so now we should at least see register login login and dashboard we should see these components now okay so let's hit refresh login register and if you visit the dashboard it should work as well and this works okay so now let's create the register form basically it will be some html tags with uh tailwind css classes so i'm doing it behind the scenes and i'm coming back and explaining what i've just done right so i'm just done the login page and the register page behind the scenes now let's have a look these so these are both vue.js components and i'm loading them without any page reload right so this is the register component view view component i have a flex diff here and as you can see i have the h1 tech for registering account and i have one input field for the name here is my input field with all these television css classes and this is the type of text and i'm using vmodo form.name so if i scroll down as you can see inside my data return object i created one more object called form and i have name email password and password confirmation and i also have an errors i'm coming back for it later on uh so this form part responsible for the input fields up here so i have the name email password inside this form object so that's why if you check i have this v model form dot name because inside this form i associate it with this name field so whatever i type in inside this name input field it will be passed down to this form object same with the email address as you can see i have v model form dot email so whatever the user types in inside this input field it will be populate this object here down here same with the password i have a password input field name password type password and up here type is email for the email address of course and i have one more input field for conf confirmation password so the user has to confirm their password when they create a new account and i associate it with the vmod form dot password confirmation to this down here okay and i have a button called register if i click on this button i prevent the default behavior of this html button so click prevent and i want to do this save form method which is uh specified down here inside this methods i have a save form i i'm doing a axios postic vest here to this api registration register account api route which is not ready yet we will create this soon and i'm passing to this api route this form so everything the name email password and password confirmation will be passed to this uh post request to this api uh route and then if i if i can save the user in into the database and everything everything was successful then i console log saved or if we have any errors for example validation errors because the name email password and posted confirmation are required and whatever the error coming back from the backend i will save it inside this array and then later on i can uh create a a span and if i have any errors for example associated with this name field then i can write out the error message you will see it uh soon how does it works okay and we have a very simple login view component as well we have a h1 tag so we're talking about this login to your account we have an email and password and login button just as you can see h1 and your email input and your password input and the submit button the login button which will again will perform a login user function which is down here inside this methods login user we will perform an axios post request to this api route api login we send the details email and password by this this form will be sent so all these will be sent to this api route and if everything is correct then we push to the router the name dashboard so we basically redirect the user to the dashboard page and again if we have any errors then we assign it here and we can show it to the user whatever the errors okay and i just uh introduced this name dashboard so this route push name dashboard so basically i'm using named route here so we need to set this up inside the routes.js because at the moment we have only path and we don't have any names so let's just do that okay so basically that's it now we have a named route so when we redirect the user to this named route dashboard it will automatically redirect to this path and will and this component will be served to the user will be shown to the user okay so basically that's it for the ujs part now let's jump back to the laravel part and create this uh api slash login but first let's create this api register account api route so we need two controllers here first we need a register component so let's just create that php artisan make controller register controller so php artisan make controller register controller hit enter and let's do one for the login as well but first of all let's just change this route simple to the register route not register account register so let's create this api register route if you scroll down to the route api.php we will create our routes here so route it will be a post route because we are posting to this route and it will be a register route and basically nearly the same for the login controller let's go up to the app http controllers register component controller we will we will register a user so we would like to use app slash user model and we will save the password in a hashed version so we will use the hash the hash class as well and first of all let's validate our user's input so basically we need name email password and password has to be confirmed so let's just validate them because all of these are required so we need to create the public function register first of all and this register function will accept the request okay so now let's validate the input fields as well it is required as well and it has to be email and it has to be unique inside the users table so uniq inside the users okay and the last one is the password which is required again of course and it has to be at least 6 characters it has to be inside codes and it has to be confirmed i have a typo here required okay so if the validation is okay and everything is fine then we would like to create a new user of course we don't want to save the password as a plain text we would like to hash it that's why we imported this hash class so hash okay that's fine so we have just uh able to validate the request and save the new user if everything is okay let's just try this out hit refresh let's go to the register page let's type in some name and we have errors register component does not exist yeah because it's not component it's controller sorry it's my bad okay let's have a look now register and as you can see inside the console.log we have saved what we have just expected because if you check our register view if everything is fine with this post then we would like to console saved so if we check now our database we should see our new user there let's hit refresh users and here you go we have the brand new user okay now let's uh take care about the login so just quickly run two and again the login view we have to input fields email and password and the login button which will trigger this method down here we prefer again a post request to this api login route we send the email and password and if everything is fine then we redirect the user to the dashboard page and if we have any error we catch that error and assign it to this array okay let's do now we have created the api route route post login and login controller and we would like to hit this login method inside the login controller so let's go up http logincontroller let's create this login method so public function login and this will accept again a request from the okay so we need to import few classes here again we will use the authentication class and the validation exception so let's validate the request again and the second one is the password okay so if we have both both of these fields then we would like to try to attempt to we try to log in the user so basically we are check the user database the table inside the database that if the email and the password combination is exist so let's just do that so what we are doing here we are try to attempt to log in the user by this email and password and in this case we are return a response json response basically we are returning our user with a 200 with a 200 status code but if the email or the password doesn't match in the database then we are throwing a validation exception which gonna be this through a validation exception with the messages and we only have one message in this case email the provided credentials are incorrect so if the email or the password doesn't match we will send this error message back to the user and of course we are not logs them in hit refresh so we already have one account created first i will type in a false input so for example of course this doesn't exist in our database first of all i forget to fill this password input field and we have a an error message again i think i have a typo let's have a look again and yeah at this time we got this four two two uh status code the given data was invalid uh password field is required okay so we have the error message if we are try to login now we have email field is required and password field is required okay so now let's try to log in and let's type in a valid password okay so now we should be redirected to the dashboard page without any error and yeah we are authenticated and we are redirected to the dashboard page okay so now we need to do some further uh adjustments right we need to have to go back to the api.php and instead of the api authentication we would like to use the sanctum so now if i send a get request to this slash user i should be able to get the authenticated user's detail back so if i go to the dashboard and i like and if i create a request to that slash users then i should be able to get my email address and my name and shown up here so let's just do that basically we'd like to get the users here which is before which is by default will be null but we are sending a get request to that api route to this slash users and this will return back our logged in users detail so we will create a mounted and we prefer an axios request dot get because it's a get request to that slash api slash user and it has to be inside the quotes inside the response we should get the uh user so inside this response i want this user to be equal to responded user so this user is that user i want to make it equals to this responded user service dot data data okay now it should work let's hit refresh we don't have any console.log errors so now if i check my view tab dashboard i have a user object with my email and name so if i go back to my vs code up here and if i say name and i say user user.name and let's say i would like to display my email address as well okay let's have a look and here we are we have the name and email address from this api route now of course we would like to be able to log out so let's just create a logout button down here prevent logout okay soon nas now let's just create this logout method we need a comma here okay so now we have this logout which will again which will again send a post request to the api slash logout so axios dot post api slash log out of course it doesn't take this yet but i will create it we are able to log out the user then [Music] we would like to redirect them back to the home page okay and again we have using the name route so let's just do that for this home let's go to browse.js if i scroll up i will name it name now let's create this api logout so let's go to the api.php and let's create one more route for the logout i will use the controller for that so it will post requests to the logout i will hit the login controller logout method let's create this logout method inside the logincontroller logincontroller one more public function and it's very easy out look out that's it so now if i hit refresh something went wrong dashboardview expected a okay so i have a typo somewhere dashboard.view up here the closing curl braces was at the wrong place so let's have a look now yeah we are logged in and now we are able to click on the logout button push of undefined so i have i must have a typo here again yeah because it's not routes it's router okay hopefully no more typo here hit refresh and of course we get this uh unauthorized method because uh previously when i clicked on the logout it's logged out basically but it doesn't push us to the home page so let's login again okay so now if we log in we see our details coming from the database and if you look out we are seeing the homepage we are redirected homepage but now if we are listing visiting the dashboard as you can see we still see this dashboard page dashboard route of course we can't see our details because we are not logged in so it's unauthorized but it would be much better if we try to visit this dashboard we automatically get redirected to the login page because we are not logged in so we shouldn't see that dashboard route at all so let's just do that quickly so basically it's going to be a very basic structure of the middleware so basically inside this router routes.js at the dashboard component dashboard path we are creating a before before enter we have a function here okay so first of all we need to check if we are authenticated if we are authenticated then we can redirect the user to the dashboard if we are not authenticated then we would like to redirect the user to the login page so okay so before we are entering to this path we would like to do this before enter and enter i have a typo here for enter and we are doing an axios request here if this axios request is successful and we get a 200 uh status code back then we would like to go to the dashboard if there is an error so basically we are not authenticated then we would like to redirect to the login so we are not able to log visit this dashboard page okay so let's just create this api authenticated api route that's good and basically i just would like to copy and paste this part sometime and this will be this authenticated we don't have any request to accept delete this and we will just simply return a true statement okay so now it should work as we expected let's just hit refresh as you can see i immediately get redirected back to the login page so we can visit home about login and register but if we are not logged in and we try to access to the dashboard page we got reacted to login

Channel: Code Fisher

Views: 24,395

Keywords: Vue SPA Laravel authentication, Vue SPA laravel sanctum auth, Vue js ragister user laravel, vue spa login user laravel, Vue js laravel SPA, Web Development, web development, dev ed, traersymedia, Andre Madarang, Andre Madarang vue js

Id: CwXhQZvuHjM

Length: 35min 6sec (2106 seconds)

Published: Mon Aug 03 2020