Vue 3 Authentication with Laravel Breeze API | Vue Authentication Laravel

Hello friends welcome in this tutorial I'm going to create a view authentication system with laravelas backend and for the laravel I'm going to use also the package uh if you go to another documentation here we are going to get started starter kits I'm going to use the breeze API so if you go here installation composer require laravel Breeze and then we need to choose the uh API version this one PHP design Breeze colon install API okay here it is now after we have installed this you are okay with the back end you just you need to add uh this inside the dot dnv file you can find also the GitHub repository in my laravelr account view authentication Breeze API this is the uh project and you can find also inside the github.com view Dash authentication Dash Breeze API here is the URL GitHub repository I'm going to add in the video description okay and you can make changes if you want you can contribute to make better now let's go in the front end and here we have the home page of our project and just saying here go and login and let's go and log in here and we have the form with email and the password and of course we have a validation here we have forgot password and not a member yet go and go and sign up here let's say uh let's say for the name John and John at.com add the password and say register and now we are redirect to the home page and in the home page now we have the name of the user and the email of your the user displayed here we have now log out not we don't have the login and register because we are logged in now let's say log out and yeah we are in the home page but we see go and log in and we see the login analog user page uh links let's go and log in and let's login with John doe.com and the password so the user we created right now and let's say login yeah or we are directed to the home page and we display the user details okay now let's log out and let's go and log in again but now I'm going to say I forgot the password because also we have this and if I submit yeah we have the email field is required but now let's add that Zone at dot dot go and let's say submit and now we have here we have in emailed you the password reset link I'm going to use my trap.io for that and here we have now the uh email a few seconds ago okay I'm going to close this one and let's close also the GitHub repository and let's click that this reset password and we are addicted to the password reset we have new password and the confirmation password so let's add a new password and I'm going to add password string password again and let's say reset password your password has been reset and let's go and log in add the John dot com and add the new passwords which is the word password let's say login and yeah we are to the home page so that's it about this project we have the logout login register and also the forgot password I hope you enjoy friends if you like don't forget to subscribe to my channel and like the video and see you in the next tutorial all the best thank you very much Hello friends welcome I'm going to start a new mini series about vue.js and laravel and specifically I'm going to create a ugs authentication project with laravel API as a backend we are going to use the breeze API package so if I open the browser and let's go to the laravel.com documentation and we have starter kits here we have Breeze with Blade with react and View and also with API we're going to use this API here and this also has a next available on GitHub so if you want to use with next JS you can see the example on the GitHub but I'm going to create a vue.js project and use this API for making authentication we are going to have a registration login and forgot and reset the password so let's open my terminal and I'm going to in this video I'm going to create the projects of the vue.js project and the laravel project CD in my sites directory okay so first I'm going to create the laravel project and I'm going to say laravel I'm going to give it a name of laravel Breeze API and it's going to create the project with inside this directory and then I'm going to create a vue.js project okay now let's create the vue.js project so npm and let's clear this Okay so npm create with add latest and we need to give it a name uh let's say View Breeze API we need vue.js here JavaScript and CD in this project so let's CD in this project and say npm install and then we need to run the npm run that let's open first with vs code this one and let's run the npm Run Dev and as you can see we have the project inside the localhost and Port is 5173 so let's open this inside here yeah now let's open the vs code and just let me Zoom it I think we are okay let's navigate in the app directory in the app file and I'm going to remove what we have inside here I'm going to leave only the script and the template okay go to the components and delete this one as well inside the assets let's delete this one and now we have only the empty assets empty components and in the app view we have only this one so let's say here uh H1 View Breeze API okay and yeah we have few Breeze API and I have installed the laravel Valley so I can open the project the laravel project in laravel Dash Breeze api.test and yeah here we have okay now if you go let's search for Sanctum and we need to go scroll down and see the single page Authentication here I suggest you to go and read about it so in order in order to authenticate your single page application and the API must share the same top level domain so in this case right now we have the API so the front end inside this domain which is localhost and 5173 and back end we have in this laravel Dash Breeze API so in order to do to make this authentication with sanctum we need to have both of them in the top level domain so we need also the laravel project around in the localhost and it's not either is is very easy so we just need to say PHP Artisan serve and then we can have also the laravel in the localhost 8000. and also you can read here for the stateful domain configuration also for the we need to add the axios defaults with credentials to be true finally you should ensure your application session cookie domain configuration supports any domain of your root domain so this we are going to do in the next video we are going to work with a laravel back end and fix the session domain the sanctum domain and so on so see you in the next one all the best Hello friends welcome now let's get started and work with the back end in this video so I'm going to open the project with the vs code first so let's see the in the sides directory and now let's navigate in my backend which is uh laravel Dash Breeze Dash API and I'm going to open this with vs code okay here we have now if we go inside the resources views we have the welcome we have the JS we have the objs and bootstrap and also in the CSS okay I'm going to show you because now I'm going to install the breeze API and when we install the Beast API it's going to remove everything inside the resources and also let's see in the dot EnV file yeah right now we have the app URL the point of this API DOT test and now it's going to change also this one so let's navigate in the browser and go to the documentation of our laravel project starter kits and let's install the breeze copy this command inside the terminal and paste.in composer require laravel slash Breeze okay then we need to install the API version so here we have with View and with react but this is going to have inertia we need the also support the SSR server side rendering but we are going to install the API version so let's copy this and clear paste here PHP art design Breeze colon install API and yeah it's installed now if I open the project you can see we have app URL the point of the localhost 8000 and also we have here the front-end URL which is a localhost 3000 now the front-end URL is for our view.js project and we have the view.js in the 5173 and we can change that so for example 5173 here or we can leave this 3000 and change the vgs port okay also inside the resources we see we don't have anything we have only this file here okay next uh I want to navigate a go again to the Sanctum a single page authentication and in order to authenticate your single page IP up and also the API must share the same top level domain and now we have the same domain here we have localhost but okay then first you should configure which domains your single page application will be making a request from so we need to configuration the stateful domain and if you go inside the config uh Sanctum we have here the sanctum stateful domains and I'm going to copy this and add so as you can see we have the dot dnv and sanctum stateful domains I'm going to copy this and add in our DOT EnV file here and I'm going to point the localhost foreign okay and then also so after we configuration the stateful sanctum domain also means we will May maintain the stateful authentication using laravel session cookies when making the request because uh This breeze API use the session cookies for authentication also we need to add the access with attention to true but this is for the front end so we are going to install axios and add this the axios configuration and the last one is the add the session domain configuration so if again inside the service config and we have this session here session driver session Lifetime and also the we have a session domain yeah domain is going to point to the EnV session domain and let's copy this also and paste it here now the session domain is going to point to the localhost only the localhost save this so here we have for example if we have a domain we add dot in front and domain.com as I said you is better to go and read the documentation but I think now we are okay with the back end the last thing is the create database so let's copy this and let's open I use a table Plus I'm going to create a new database with this name and now if I run the Artisan migrate clear so PHP artisan and I have Alias for this so just remember just a a Artisan migrate okay now we have the database here very good and I think we are okay with the back end now so we added the sanctum stateful domains the point of the localhost 3000 remember because this is very uh you need to have this sanctum stateful domains the point that this URL or if you have uh as I said 5173 the same is need here and here but I'm going to leave it 3000 because I'm going to change the front end host and that's it about this video see you in the next one friends we are going to work with uh vue.js all the best Hello friends welcome again now we are going to work with the front end with vue.js project and let's open the terminal here I'm going to CD in my sites and let's navigate in the feel Breeze API I'm going to open the project with vs code and let's run this npm render so now we can open the project here open the browser and I'm going to open a new tab and paste that in yeah but as I said I want to change the port 3000 and let's go and do that so inside the vid.config.js after the inside the Define config for vgs I'm going to add a server and I'm going to change the port the 3 000. now if I save and as you can see we have here good now let's change also here because I if I refresh yeah we'd no longer have that so let's change the 3000 and yeah we have now the project view Breeze API good now we need to install the axios also the view router and the Pina and I have created a choose small tutorials for the view router 4 and for the Pina if you are interested you can find in the channel so let's navigate in the viewjs.org and in the Echo System here we have view router so let's get started and install the view router 4 so let's copy this command and I'm going to open here the terminal and paste that command here npm install view Dash router add 4. so version 4. and also let's close this and open the Pina because I'm going to install also the pinaire so we have getting starter and npm install Pina copy that and paste it here also we need as I said axios so let's search for axios and let's install this is very popular as you can see let's install the axios by saying npm install axios okay so let's copy and let's close we don't need that let's open the terminal paste that in hit enter and now we have all the packages we need the first thing I'm going to do in this is the art in this project we I'm going to add this access default with code this is the true so let's copy that and inside the project inside the source directory I'm going to create a new file and I'm going to name it axios.js and inside here I'm going to import actions so import axios from axios and I'm going to say axios defaults with credential that's true and also I want to add access Dot uh defaults dot base URL so we don't need to add any time we make a request the localhost 8000 I'm going to add it here so let's say STP localhost and we need to add the 8000 Port here and we are okay save this and close now we need to go inside the name Js because here we have installed the view router and also the Pina and the axios for the axios I'm going to say here import the axios file and we are okay now for the Pina I'm going to say import create Pina here so import the create Pina from Pina and also we need to import the router but for the router I'm going to create a new file so inside the source directory first create a new directory called I'm going to name it router and inside here I'm going to create the index .js here is going to be the router so for that I'm going to say here import a router from a router like this and then down there I'm going to say create a constant for pina it's going to be equal with the create pinatsu not create up create Pina like this okay and also let's create a constant I like to do something like this up which is going to be abled with the create app and add the app component here and then say up dot use Pina also up dot EOS router and then down there we just say up Mount okay I think we are okay we added the Pina the router let's save and let's see if everything works correctly so refresh in the terminal yeah okay friends that's it about this video in the next video I'm going to add the navigation which I have here foreign and also create some pages so see you in the next one all the best Hello friends welcome in this video I'm going to add navigation here and also I'm going to create some Pages for our project so let's open the vs code and inside the components I'm going to create the register component Dot View Also let's create the login Dot View I'm going to create the home Dot View and let's create also the nav bar so I'm going to create nav Dot View we need more for a forgot password but we are going to do later so for now we are okay and let's close one by one for now and let's go inside the router index.js and work with the router here I'm going to import the create router and also I'm going to import the create web history create web history here and then let's say I'm going to import the home component not like this home from the components slash oh like this and then create a constant for routes which is going to be an array with objects each object is going to be an are out so here I'm going to add the path which for this one is going to be slash and the component is going to be the home component we have up here good then let's close this and let's create one component one route for the register N1 for the login here this is going to point to the login and the component for this I'm going to say an anonymous function import and it's going to import that component which is inside the components and let's close this just see more clearly and the login component and let's copy and duplicate this one and change the path to B a register and the component to be register okay then down there I'm going to create const router it's going to be equal with the create router object and here we need to add options so the history I'm going to use the create web history we have imported here and add our routes and we can say a route like this or because we have the same name we just can leave like this and now we need to export the router so export default router let's save and let's close this now we need to open the nav component and let's say we set up here and open the browser here I have the code I'm going to copy and paste inside the template like this hit save and now inside the upload view let's close this first and I want the clean here let's go in the app.view and instead of something like this I'm going to import the nav bar so import nav but not enough view just enough from nav View and here I'm going to add that so first I'm going to say mean and inside at the nav like this self-close and then I'm going to add the router a view here and let's navigate in the browser in our project refresh and why we don't see that console view router let's open again the view router create web Aya foreign like this and the same thing here and call the parenthesis save and let's go and see yeah we have something like this and we need to add the Italian CSS here that is going to be in the next video so see you there Hello friends welcome back so in this video I'm going to install the tiling CSS here and also I'm going to add the login here here we have the form and also for register the same just without two more fields so first let's open the dialingcss.com get started and choose the framework guides here we use vid and also we use ugs so we have created a project now let's install the title CSS the post CSS and the out of prefixer so copy this open the terminal and paste that in then we need to add the Italian CSS in it so just copy this one paste here we need to add the index HTML and all the files ends with the JS view DS and so on inside of the content in the title config .csjs so let's open that file I'm going to close what we have here and inside the typing.config inside the content paste that in save close then in the Styles we need to add three lines for base components and utilities so let's go inside the Styles dot style.css I'm going to remove what we have by default and paste paste here the Thailand base components and utilities save close and then we are okay we just need to run the npm run the so let's run npm around Dev okay let's open the project and yeah here we have the project with home login and register now nothing happened if we click but we are going to change that so here yeah let's go inside the components now and when we go to the login we have the UL and here we have the Li we are not going to use anchor tags we are going to use the router link and say this is going to go to the slash or home page but I like the add names here so let's say bind toe and say here name and we need the other name so home in this case and now let's open the router because inside here we don't add the router name so let's say also name for this one I'm going to name it home and let's do the same thing for others so let's copy and paste it here and also paste it here and this is going to be name login and this is going to be a name register let's save close this one now and yeah now we added the name home we need to close this router link like this the same thing for the login so add the router link which is going to boil point so the name login and also we need to close that and the last one is for the register so let's say a router link bind to the name uh name register very good save this one now and let's go back and refresh go to the login we we are slash login as you can see here just now let's copy this uh component here and let's open the login.view say V setup and inside the template I'm going to paste this one and if I save go to the browser we have the login page here now because we are in the login we have the login form and let's Zoom it out a little bit like this and the same thing I want for the register so let's go and in the register now we set up paste that in adjust here we need let's say sign in here and remove this one and also remove the forgot password let's save let's go yeah we are in the register and also we don't need to say login but let's say a register we are going to work later but for now just yeah here we have live our login register or go and login and here we have login and provide password or sign up that's it about this video friends we have added the Titan CSS and add the form for login and register so see you in the next video all the best Hello friends welcome in this video I'm going to work with a login so first I'm going to open the backend project and see the route for the authentication and also I'm going to create a new user to have the login with front end so in the terminal here I have opened the laravel breeze which is the back end the laravel project and I'm going to open this with a view with the vs code and first thing here I want to open the auth.php here we have all the authenticated routes so for the user we need to make a post request.register for the login we need to make a post request slash login for the forgot password slash for code dash password and for reset password slash reset Dash password now for the login which is which we are going to work in this video we have the authenticated session controller and the method store to handle this post request and as you can see we have middleware Quest so if we are logged in we cannot make again uh post request let's open this controller and here we have the store method we injected the login request which is going to call the authenticate method and it's going to generate the session as you can see here and it's going to return response no content okay let's close and let's create now the user for that I'm going to open the database see there's and here we have an uncomment this is going to create the user from Factory with name an email test at example.com and the password is the is password so if you go to the factories user Factory we have this here this string which is going to return the password okay now let's close this and let's run Artisan migrate fresh there Dash seed okay and now let's run a solar artisan serve to serve the project good now let's open the view Breeze API with a vs code okay the first thing I'm going to do here is inside the home let's first save the setup close this one and here I'm going to import the RF and also the on mounted from View and also import axios to make a cat request to the user from the API and display the user in the home page so let's say import axios also from axios and let's say here const user table with RF and then on mounted I'm going to make an async function here and say uh const data equals with axios dot get and the URL is slash API slash user and for now just let's say console DOT log the data we get from there just make sure we need to add a weight here and now if we navigate in our this person you turn on the npm Run Dev and then open the project in the localhost 3000 inspect the element because of the network and refresh yeah we make a cat request to the user but we have the message unauthenticated very good now let's go to the login and make the logic the login and then when we logged in I'm going to redirect the home page and then here we can get the user because we are we are logged in okay so back to the login page and let's open the vs code and make the logic here so open the login page first in the login page I'm going to import the left from View and make also the access to make a post request so import RF from View and also import axios from axios and I'm going to say const form equal with RF you can use also a reactive but I like RF and I'm going to say here email people with an empty string and also the password equal with an empty string then go down when we have the form and inside the input for the email let's change this to be email type and I'm going to add the V model and say form Dot he made here scroll down when we have the input for password and say V model for DOT password like this when we have a form I'm going to say on submit of this form called the handle login method so we are going to create that and let's say here prevent let's copy the handle login and let's create now so I'm going to create a constant with that name who is going to be equal with an async function and here we need to make a post request somewhere to say axios first we need to say wait axios Dot post and the url url is slash login we need to add the data here which is the email which is the form dot value because we assign the form ethernet so we need to save value here I forget to add the arrow here value dot email and for the password at the for DOT value dot password like this and when we make a handle login after we logged in I want to redirect back to the home page as I said you and when we go to the back to the home page we make a request to get a new user and because we are logged in we can display the user here so for that we need also to import the use a router from The View router and I'm going to create here a constant for the router which is going to be equal with the use router and down there after we make a request I'm going to say a router push to the home page so slash like this and let's save and let's see in action so if I open also the localhost 8000 uh to see if everything yeah we have that inspect the elements and make sure just here I want to clear this and refresh okay inspect the element go to the network and see now we are going to log in with that user we created which is test at example Dot com and the password is password and let's see if I click login as you can see we redirected back to the home page so here we have Success login and yeah we have here redirect and here we have the user now in when we go to the home page so let's clear and let's refresh we have success user here okay now let's uh open the home page and instead of something like this I'm going to assign the data to the user but let's see now if I just come here and say const not const sorry user dot value because the user is assigned to the ref equal with the data okay and here I want to console log the user dot value to see if we have that user so let's go to the console and refresh and we have data inside also so if I say data dot data save and refresh yeah now we have the user here okay with that now it's inside the template what I'm going to do I'm going to add H1 and say display the user add the question mark Dot name because we make an async and also I'm going to add a paragraph and display the email here so user question mark Dot email like this save and as you can see we have the user name and the user email here so refresh console everything cool and or we have the user and the email here okay friends this is for this video we can logged in and display the user in the home page I hope you enjoy and see you in the next video all the best Hello friends welcome back in this video I'm going to work with the register page so let's open the terminal in here first I'm going to city in the laravel project so 3D in the laravel dash Breeze Dash API and I'm going to run the server so artisan serve and now we have the URL here okay then in the new terminal open the vojs project so 3D in The View out sorry view Breeze API and here let's open the project with vs code first okay and let's run now the npm around that very good open the localhost 3000 and I'm going to open also the localhost 8000 here very good now when we go to the register first I'm going to add the name and also the password confirmation so let's close this open the register View and we have input for password and let's duplicate this sub copy and paste it down there and this one is going to P for the password confirmation like this type password okay and when we have for the email I'm going to copy and add one more for the name so first it's going to be the name and also the sorry this is the second one is going to be the email and the first one is going to be the name and for this one I'm going to say type the B email like this and let's save yeah we have the name and I'm going to zoom it out a little bit yeah now we are okay so we have name email password confirmation this is what we need for our back end first we need to import the ref also we need to import the axios to make a post request and the use router so when we logged in we are going to go back to the home page so import the RF from View and also import sales from axios and the last one is import the use router from view router and I'm going to create a constant for the router to be equal with the use router so we create instance of the router then I'm going to create a constant form people with ref with an object which we have a name as an empty string the email as an empty string we have the password as an empty string and also the password confirmation password confirmation as an empty string okay now let's go and add the v-moded one by one so here we have our name after the placeholder I'm going to say V model for DOT name and then after the placeholder for email at the V model form dot email okay after the password placeholder up the V model for DOT password and then the last one is the password confirmation we modded password sorry form first form dot password confirmation okay now we need also to create the methods send a post request so here on the form say on submit let's say handle register and let's copy this and add the dot prevent here very good then come up here and say create a constant with that name which is going to be equal with an async function and we have imported the axials now let's say a weight axios dot post and we need to post to the Slash register this is the URL and we need to add the data which is the name it's going to point form Dot name from the value dot name and for the email is going to be the four dot value dot email and password form dot value dot password and the last one is the password confirmation form dot value dot password confirmation like this then after we logged in after we register I'm going to say her out there dot push and push this the home page we are okay I think now let's go and test this so here refresh inspect the element go to the console or go to Network first and let's test this let's say a test user with a test at test dot com add the password Here and say register and as you can see we redirected back and we have the user here test and the test at test.com so we have a success register and back in the home page we have also the success to get the to get the user we make the register and see you in the next one all the best Hello friends welcome uh this video is going to be a short one so here we are in the home page and also I have opened the back end here and if I inspect the element go to the network and refresh we make a request to get the user but we have 401 because we are not authenticated let's go and to the login page and let's login with the test users are Test example dot com and add the password say login here yeah we have Success login and success for the user and we are directed back and we show the user here good if I go to the application now in the cookies I'm going to clear this and refresh yeah we don't have now the user we are logged out okay but let's go in the back end and I'm going to clear also here are the cookies now if I go and to the login page and let's login again with a test example .com add the password say login here let's go first of the network and let's say now login we have a csrf token mismatch error and if you go to the darable Sanctum in the authentication we have the csrf protection so to authenticate your single page application your single page application login page should first make a request the slash sanctum slash csrf cookie endpoint and to get the cookie to initialize the cookie and then make a request to the login page so let's do that in this video so let's go inside the components login page and here I'm going to create a new method so let's say uh cons I'm going to name get the get token and this is going to be an async function async and what I'm going to do I'm going to await for the axios the get of that token and that URL is this one so let's copy this and paste it here okay and now if first we need to call this get token so we can then laravel back end is going to initialize the csrf protection for the application and then we make a and login a login request post request okay so here when you say handle login first I'm going to call that get token and also this is a single let's make this a weight and now then make a login request so let's see that go to the project and if I refresh yeah let's clear this come here and also let's go to the application and yeah we don't have any okay if I try to and also the go to the network first we are going to make a request to get the cookies you can see and then the login we are going to see here so let's say test example dot com and add the password okay let's go and log in and we are back we first make a csrf cookie request and then login then the user okay friends that's it about this video I hope you enjoy and see you in the next one all the best Hello friends welcome back in this video I'm going to work with a store so here we have the project we are in the home we display the user and also I have on the back end here and if I open the vs code set the source components we held home page the home component here and we have imported the unmounted from View and also the ref we created the content for the user and then on Mount it we call this get token first as you can see so let's say here first we said get token and then we get the user okay and we create the Constable get the token and we go here and then we get the user and assign the user here with the data we get from the API okay now let's create the store we have installed the Pina here in the first video I think and I'm going to save this for now and inside the source directory I'm going to create new directory here and I'm going to name it doors and in here I'm going to create a new file I'm going to name it out.js here I'm going to create the store first I'm going to import so let's import the Define store from Pina and also I'm going to import axios because we are going to make some API calls here so import axios from axios and now let's create the store I'm going to say export export like this const and I'm going to name it use out store so the convention is that have used before the name the name and after the store okay like this which is going to be evil with the Define store we have imported and here first we need that as you can see here as ID string and for the idea I'm going to say out you can name it what you like and then we can add options here first I'm going to add the state which is going to be an anonymous function here and I'm going to add the auth user I'm going to name it and initially this out user is going to be node because I'm going to show and hide this if the user is null or not then let's create the getters so Getters here an object and then the actions okay for the gutters for now I'm going to create only one I'm going to name a user which is going to accept the state and it's going to return so the state DOT out of user the current user we have here that's it for the gutters right now just the user okay then I'm in the actions now I'm going to go inside the home page and I'm going to create two actions the get token and the get user and then here we are going to import the state the store here and display the what we want so the user interactions also so first I'm going to say here or let's go and let's import this let's copy this not import and in here I'm going to say create an async we can create a sync function here async get token okay and here I'm going to paste what we have copy so what we have copy here I'm going to add Inside Out Js I think get token and now we don't need here so let's remove then I'm going to create another action to get the user so let's copy this as it is here and come here and create another action and another action is going to be an async function and I'm going to name it get user and as you can see here first we have called the get token then get user so let's get the user first I'm going to say paste that we have to copy here but now instead of uh assigning this user here I'm going to assign the user we have in the state and we can access that by saying this which is referring to the state here this Dot out user it's going to be evil with data Dot data okay the same we have here now if I save as it is right now and let's remove the axis from the home page let's remove this also and the get token also the user and the ref let's import now this out Js so import and we named use out store from go up to the stores slash house like this and then here we need to create an instance of that you store so we want to create a constant and I'm going to say out store is going to be equal with this use out store object and now as you can see here we need to call the get token and then the get user and we can say for example uh wait out user sorry outstore dot get token like this but I not going to do live I'm going to do in the get user here I'm going to call this get token so I'm going to say this dot get token in here and then in the home we just got the get user so let's say oh wait health store dot get user let's save and let's open the browser and refresh inspect the element and let's go inside the view we have Pina and we have the auth and as we can see we have the art user with an object with all the user details now here we have the username and the user image uh I'm going to cut this and add a div and I'm going to say here V if we have that user so we out store and now I'm going to use this getter user which returned out user I'm going to say out user health store Dot user like this if that is true display that otherwise I'm going to add another div and say V else I'm going to say here uh patch one go and allow it like this let's say then let's see oh here we need to say our username and how the user image let's copy that and paste it here like this so outstore.user.name and as you can see we have this the name and the email because we are logged in let's refresh okay now let's uh log out sorry for that let's inspect the element and go to the application cook is clear this for now we don't have the log out but we are going to create that and now we can see we have go and login let's go and log in here as a test user so test example dot com add the password and now we have the login yeah navigate to the home page we have the name and the email and that's it about this video that we so we created the store now I'm going to move all the logic for the login as well as you can see also here we have created this get token and now we are going to move the logic in the auth just so we don't need to get token also we are going to remove the move this handle login in here and the handle register we are going to move in the RTS so we can have lean uh components okay friends that's it about this video I hope you enjoy and see you in the next one all the best Hello friends welcome back now in this video I'm going to work with the login and register I'm going to add them in the the logic in in the alpha Js store so if you go first let's go in the login Dot View here we have this get token but we don't need because in the rjs we have the get token then let's remove this and now we need to move the handle login so let's cut this from here and let's go in the alpha Js and let's create a new method here but it's not even to be constant it's going to be an async function like this and it's going to need to have the data because right now we have email for Value dot image so let's add the data here and then we say here foreign like this data dot email and also the same for the password so data dot password we get the data here and also we need the the push back but for now let's remove and let's also remove this we have this await to get token and we can say this dot get token we have the get token in here and also Let's uh wait here so we get the token in here and we have handle login we call this get token then we await to post the login data foreign now we need to add data router push so when we log in a router post of the home page we need to go to the home page but here we don't have access to the router if we go inside the mind.js first we need to import from view the marker out so let's say yeah like this then Let's uh come down here or just right here I'm going to say Pina dot use and here we need to use the router inside this we need to distract the store and I'm going to say here store not like this but store like this store dot router it's going to be equal with that we have imported the marker out and the router we have in here so now bye saying this pin I use now we have access to this router in our our JS store and we can access that router by saying this Dot router and we can say dot push and where we want to send that save and let's go inside the login Dot View here we don't need now the router we don't need also the user out we don't need the axios we need only the left because we need to create this form here and let's import the store so let's answer this one let's say your import the use auth store from store out okay now we need to create another constant and I'm going to name it out stored which is going to be equal with the use out store and what we need here we need to use this handle login and also as you can see we need yeah we call here the get token so we are okay just in the form we say here handle login but we need to say out store dot handle login we add a pointer to this one and login but also we need to add the data because here we accept the data and we are the email as a data email and the password as a data password so for that let's say here at the form we have created here and let's save that and let's see in the action refresh inspect the element because of the console okay clear the cookies okay say test at example Dot com and add the password Here say login and yeah we're adjusted back very good everything in the console are okay now let's do the same thing for the register first we need to go to the application and in the cookies we need to clear this up and the refresh okay and let's work with the register now close this open the register View and here we need to sort move this handle register so let's cut this from here go to the out store and create a new async action and also here we need the data because the name is going to say data dot name the same thing for the uh email password and password confirmation so let's select them all and say data email data password data password confirmation we are going to add that in the head Handler register and also we need to call the router by saying this dot router push here we need to remove this colon and also here we need to call the get token so let's copy and paste it here and I think we're okay now let's go in the register View remove the access because we don't need the use router we don't need here also this one we just need to import now the store and let's import the use out store and here create a constant oath store like this which is going to be people with use out store and then in the form we need to say house store Dot and register and we need to add the data here which is going to come from the four okay the form we have here and I think we are okay now let's go and try the registration refresh and let's say uh Pina user and Pina add test.com add the password and say register and we redirected bug we have Pina here and Pinas dot at test.com so everything okay no errors in the console and we move the logic for the handle login and also for the Handler register we called the get token in the register and also the get token in the in the handle login and I think we are okay now that's it about this video so we moved the logic for the login and register in the store of Js if you like a Content like this don't forget to subscribe to my channel and like the video and see you in the next one friends all the best Hello friends welcome uh here we are in the front end and we are in the home page and we see the username and the user email so we are logged in but we see in the navigation also we have the login and register and now in this video I'm going to remove or show the login and register if the user is not authenticated and if the user is authenticated I'm going to add the button the log out okay so first I'm going to open the back end project and let's go inside the routes of dot PHP and as you can see here we have the log out route a post method and we have the authenticated session controller and the method is destroy so if I click here we have the destroy method which is going to log out and invalidate the session and regenerate the token and return response no content so we need to make a post request to the slash logout to log out the user okay so now I'm going to open the front end here so The View please API and let's go inside the components nav Dot View here we have the register and let's close this like this and also the login like this and what I'm going to do I'm going to first import the store the out store we have here and check if the user is there display the logout if it's not display the login and register so let's go up here in the script setup and I'm going to say first let's import that store import use auth store from go up one level and inside the stores we have the house store and let's create a content for that out store is going to be equal with the use hand we need to say here use like this use out store okay and then down there we check for the getter we have here if the users because this gather is going to return the out user and if it knows we don't have if we have we are going to have the data so let's scroll down when you have the links and I'm going to cut this tool and I say template and add the if a condition here and if we don't have the out Thor dot user if we don't have that display the login and register else so let's say here a template and say VLS VLS let's add the button to logout and I'm going to import this class I'm going to copy this class we have here and let's say inside here at the button or yeah button I'm going to say foreign [Music] now if I click not right now nothing happened so let's make the logic here what I'm going to do I'm going to go inside the alt JS because here is going to be all the logic and in the actions we have the get token get user handle login handle the register let's create one more for the handle log out so create an unsync handle log out and we don't need data here just we need to say the sender post request so let's say axios dot post and the URL is a slash logout like this and after that let's say this Dot out user are you assigned back to no okay so we have the user here and we reassign the null and now in the navigation when you have this button I'm going to say on click of this button I'm going to call this method so the handle log out let's copy this come here and I say out store so the object we created dot handle logout like this click save and let's see now in the action let's refresh inspect the element go to the console clear this and say log out and yeah we are addressed it back we are not logged in anymore and let's go and log in again uh as a test user example dot com and uh have the password and let's say login and yeah we have now the home and the log out everything works correctly okay friends so now we have the login resistor and logout in our project the last thing is the work with the forgot password so see you in the next video all the best Hello friends welcome in this video I'm going to work with the forgot password so here if we go to the login we have this robot password and right now nothing happens but if I click here I want to go to the Navigator the forgot password route and then to have a form and I have prepared this form here and then when we click we need to send the forward password and I'm going to use the mytrap.io so if you have mytap.io account okay if you don't have go to this mydrop.io and create an account and cop select here in the drop down the level and copy this code here and navigate in your dot EMV of laravel backend project and paste it here I have done that okay and then if you go to the routes out.php we have here the forgot password as you can see and the reset password so we need to send a post request to this forgot Dash password and if we click here and open on the store we are looking here for the email so in the need to send the email here and then he's going to return a status what status we have here okay so let's close and let's open the front end now and the first thing I'm going to create a component and then create the route for the forgot password and add the link here so let's say here inside the components new component and I'm going to name it uh forgot password like this and then let's say we set up and in the template I'm going to paste this form select alt copy and paste it here okay then let's go inside the routes index.js and I'm going to copy this one and paste it down there the path is going to be for God Dash password you can change if you'd like the name is going to be forgot password and the component also is going to be forgot password save this and close let's go inside the login because here we have this link and yeah we are not using anchor text we are going to use the router link here and not stress but two and we need to go to the Slash forgot password save come here and let's click let's refresh first and let's click here yeah we have forgot password and we have this 4. okay next what we need to do is let's go to this forward password and I'm going to import the ref from view import RF from View and I'm going to create a constant for the email here const email is going to be equal with RF and initially on empty string and in input we need to add the V model email here I already added that I have in here so we model email but you can add in the input the V model email here okay next when we click that this submit I want to send a post request to the back end so for that the logic is going to be inside the store so let's open the out store and here in the actions I'm going to create a new one I'm going to say I think and let's name it handle uh forgot password like this and let's here we need the email let's add the email there and what we need to do we need to wait axios dot pause is going to be post request and the URL is Slash for good password like this and we need to add also the email here so let's say email with the email we have we expected okay and for now let's say something like this save and let's open the forgot password and let's import now the store and let's use this handle for code password so import the use house store from and go up slash stores slash out I'm going to create a constant out store so we need to have the object of the use of store and in the form I'm going to say on submit called out store Dot uh handle forgot password and we need to add the email here and let's also add dot prevent here and save it okay let's open the inspect element go to the console here and that's clear and let's add a test example.com click submit and let's go to the network yeah we send a post request and we have emailed your password reset link so it's get back status with this string okay let's go now to the email and yeah we can see we have the email here reset password and if you see down there here is the link or if we click here we have the password reset we don't have that route but this is coming directly from the back end and then we have a token here with the email which is or email with type okay so then we need to check for the email and for the token and change the password but let me just show you one more thing and this is not only for this form but for the other forms also so if I send again the submit pending and yeah we have back but if I click again now we have four to two we have a message please wait before we try because we are going to try too many times very often and we are not showing the error here that's the same if we go to the login and just I'm going to send without email or password yeah we have a login 422 and we need to work with the errors let's say for the register so let's clear here and yeah we have errors but we are not showing so we need to show the errors with that we are going to work in the next video so errors for the register login and for the forgot password also okay friends that's it about this video we sent the reset password and I hope you enjoy if you like don't forget to subscribe to my channel and like the video all the best and see you in the next one thank you very much Hello friends welcome in this video I'm going to work with the errors so right now if I go here and click nothing happened so if I inspect the element go to console and let's clear this and let's send again the login we have 422 and if I click yeah we have errors here and there's for the email and for the password also and also if I go to the forgot password the same thing but here we have also the front end and in the register the same we have a errors for the name email and the password now let's go and work with that let's open the vs code inside the source let's go first in the store because here is going to be all the logic I'm going to create a state for the errors and I'm going to name it out errors and initially is going to be an empty array then I'm going to create a gather and let's say I'm going to name it errors and we need to add the state in here we're going to return the state DOT out errors okay then let's start and work with the first login then register and the I forgot password so with a login first I'm going to save this data out errors the B an empty array so when we send the Handler when we click to the handle login we are going to clear the errors and if we have the error let's cut this and let's say try and catch here on the try we need to add that so weight access post login with data email and password and then this router push down there we need to say cuts the error and I'm going to check now here if the error Dot response Dot status is a triple label with 422 okay so let's come here and inspect the element go to the network so when we send register yeah we have saddles422 so we check if we have that status I'm going to assign the error so let's say this dot out errors equal with error Dot response dot data dot errors and let's save this and let's open again here I'm going to go to the view now and Pina we have out here and we have the errors which is an empty array now if I click register and why we don't have now the errors so we say error response dot data Dot errors so we need to have the errors in The View because we are in the registering to go to the login sorry for that if I click yeah now we have the errors which is an object with the email and array okay Let's uh go and do the same thing in the register and in the handle forgot password so handle the register first say this error this out there are the empty array then Let's uh cut this and say try paste that in and then cut for the error cut error and the same thing we are going to do also here so let's copy this and paste it here we check if their response status for two two assign this out errors with the errors we get from the response and also on the handle I'm going to call this dot get token also here and let's say also uh this dot auth errors to be an empty array and then try and cut all right and cuts for the error like this and paste what we have copy because it's going to be the same then move the weight in the try here now if we want when we send the forgot password we want if we want we can navigate to the home page or we need if we want we can display the message but this it's going to with that we are going to work in the next video not here now let's save and let's open the component and the login First here we are going to check so we have the input for the email and or the password okay so the input for the email is here and after that I'm going to add a div and this div is going to be displayed if the house store Dot errors now the errors because we created that getter okay if we have errors and specifically here we need to say error for the email I'm going to add the spawn with a glass to be text Red 400 text B small and maybe margin 2 and padding two okay and here let's display now that error so let's say Earth store Dot errors dot email and we need the first one let's save and let's see so we are in the login and yeah as you can see we have the email field is required here just I'm going to add glass Flex here yeah let's do the same thing now for the password so let's copy that and here we have the input for the password after that at that div and now here we need to check for the password password like this save and yeah as you can see we have the email field is required in the password field is required let's go and work with the forgot password Here so close this and open the forgot password component we have the input and what I'm going to do I'm going to remove this required and add that one click save and as you can see we have the image field is required so here and that's it because we have the email here what I'm going to do I'm going to refresh and yeah we have an empty array if I click we have now the email field is required that's the same thing we need to do for the register here let's refresh here and let's open the register Dot View and in the form here we have the input for the name paste that in and change this to be name then we have the input for the email and paste that in and the last one is for the password paste that in and change this to B password click save and refresh very good now if I click register the name field is required the email field is required and the password field is required okay now if I let's type something here let's say test and test Dot com and add the password but this is not going to be the same just the C yeah the email has already been taken and the password confirmation does not match so everything works correctly and that's it about this video how we can display the errors now you can work more and make them them for example when I remove this also we can make that hide this to clear this email so we don't need to see here but that's it for for more advanced so that's it about this video I hope you enjoy and if you like don't forget to subscribe to my channel and like the video and see you in the next one Hello friends welcome in this video now I'm going to work with the reset password so here we are in the front end also I have around the back end here in the localhost 8000. and let's go to the login page forgot password and let's add the email here submit and first we need to show the message that the email has been sent but if we go to the mytra.io here is the email and we have the link now if I click here we navigate this URL and let's me open the back end so here we have the route for the reset password the post to the slash reset Dash password and we have the new password controller and the metal store which is going to handle this so let's open this controller the store method inject the request and here the request accept the token is going to be required the email and the password so the email is going to come from here as you can see we have the email here the token we have here and we need also the new password okay and then you can watch it the see the other things now let's close the back end and let's open the front-end components and I'm going to create a new component I'm going to name it a reset password okay and let's say here we set up very good now in the template what I'm going to do I'm going to add this form here I have prepared so let's select all copy and paste it in the template let's save this and let's go now inside the routers index.js and I'm going to create a new route for the reset password okay the name is going to be reset password also and component reset password like this let's save and let's close now this one and what I'm going to do I'm going to open the store because here is going to be all the all the logic for the our project so we have here the get token uh handle login and register and log out handle for that password now let's create the handle reset password uh let's make it I think handled already set password I'm going to name it now here we need the data which we saw in the back end so we need the email token and the password and password confirmation and I'm going to say I need the reset data and for sync let's open this I'm going to assign this authors with an empty array okay then I'm going to try and cut so let's say try and then cuts for the errors if we have any error and the same thing I'm going to say here if error dot response dot status is going to be triple label with uh 422 I'm going to say uh this Dot of error is going to be people with error dot response not reset data but response dot data dot errors like this okay and now here we need to send the post request that the reset password with the data so let's say here let's create a constant for the response which is going to be equal with Kuwait and call the axios Post and the URL which is slash reset Dash password okay and we need the data here which is the reset data okay and why I have done this sorry friends okay now let's come here and I'm going to say after we Center let's navigate to the home page or to the login and I think we have here this road Portia let's copy this then I'm going to show the message in the next video but right now I just I'm going to redirect back to the home page let's save this and now let's go in the reset password and work there and we need to use this handle reset password come here go to the script setup and first let's import the use of store so this store because we need the handle reset password Also let's uh import the ref from View import RF from view okay [Music] and I'm going to import the route because in the user out because we need to have access to this email and also to the Token so can get from the route for that let's say import the use route from The View router and now let's create a constant for the router which is going to be equaled with use route and route here okay then let's create a constant for the store out store is going to be equal with the use out store and now we need also to create the form for the input which we have the password and the password confirmation here so let's create that but also we need to add the token and the email as you can see so then we are going to get from the route I'm going to say const form it's going to be equal with the view RF and here we are going to add an object with password which initially is going to be an empty string and also the password confirmation which initially an empty string now for the email I'm going to say route dot query Dot email like this and the last one is the token and the token also is going to come from the route but here we need to say params Dot token okay so here the route is going from params because we have slash and the token and the email is going to come from the query because we have this question okay I think we are okay with the form now let's go down and inside the input after the ID I'm going to add the V model for the form dot password and the second confirmation password I'm going to say the model also here for DOT password confirmation now when we click on the button I want to use this handle reset password and add the reset data which is the form here here is the data for the password password confirmation email in the token here we have the form and I'm going to say on submit of this form and let's add the dot prevent here we're going to use the out store Dot and handle reset password and inside that we need to add the data which is therefore here now let's save and let's try so we say handle reset password we add the form which has this object and then we send a post request and we don't need the response so just for now let's say something like this let's close this and let's clear the email and let's start from scratch so refresh let's inspect the element we go to the console and let's add the test example.com click submit if I go to the network yeah we have forgot password 200 and we have the status here we have he made your password reset link so this I want to display here but in the next video and now let's go to the mic drop here we have let's click to this reset password uh yeah we have a password reset not let's go here and open the index not reset password but password reset in here and also we need to add the token because we accept the token now as you can see we have the new password and confirm password and let's inspect the element go to the console okay let's add the new password here I'm going to say we want to delete the same thing here and let's say reset password and as you can see we are directed back to the home page now is good idea to send the login page and then let's say test example .com and add the password one date so the new password I'm going to clear this and say login and yeah we are logged in with the new password okay so the good idea is to send this to the Slash login and let's try again let's log out let's go to the login page and let's say forgot password add the test example.com say submit okay let's come here and New Image is coming let's reset that password I'm going to close this and let's add a new password Here go to the network and now I'm going to say password again password let's say reset password and yeah we are redirected to the login now and let's add a test example.com and add the password login we are there very good now the last thing we need to make is go to the logout and let's clear this now if I click here we need to show the message the errors and also that uh when we send as you can see we have the password field is required because we sent that request but when I send the email I want to show that message here so we have emailed the start the reset link and also when we in here show the errors and also show the message or redirect back so that's it going to be in the next video so see you there and if you like don't forget to subscribe to my channel like the video and see you in the next one all the best Hello friends welcome back so in this video I'm going to work with the message when with the status we get from the Lira value when we send forgot password and also let's see in the inspect element let's go to the network and let's add the email here submit and we get the status here we have emailed your password reset link so now this start also I want to display here and also when we go in here now if I click reset password yeah with no show nothing here we need to display the message the errors and also the message see if I type some password Here and let's inspect the element also here go to the network and let's say reset password we radiated to the login but if I click here we have the status so your password has been reset so I'm not going to redirect the login I'm going just to show this status also there let's close this and let's clean the inbox here let's refresh and I'm going to change also this form here so let's open the components forgot password and on this form I'm going to add RPG slate 100 padding of four and I'm going to say margin uh padding top or margin top sorry margin top of 12. and around it the B large let's save and yeah I think now is more okay and as I said I want to display that message here so first let's go in the store of the JS and here when we handle the forgot password when we try and if everything is okay I'm going to say here create a constant for the response which is going to be equal with the weight axios post the forgot password and then we need also to have a state for that so let's create a state and I'm going to name it out uh status which is going to be no initially and then let's create also the gather for that I'm going to say status and it's going to have the state also this one which is going to return the state DOT out status like this and then down there we get the response I'm going to say this dot out status is going to be equal with the response dot data Dot status okay and let's save this so in the forgot password now let's go and I want to display that and I'm going to display it here I'm going to add the div with a class margin two and padding two and I'm going to add a text to be uh green Maybe 900 font semi bold I'm going to say and the PG is going to be green 300 and I'm going to add around that MD okay and inside let's display that start of so I'm going to say out store Dot status let's save this and as you can see we have this uh green but this I'm going to show only if we have that status because initially we set the node so we are going to say here V if Alt store Dot status and let's save now we don't see but if I say test example.com click submit and yeah we have the status but what we don't show here let's go to The View and let's try again oh yeah we need to wait for that so we say I'll store status and foreign reset link here okay let's close this and let's go and work now with this one reset password Here I won't first display the errors because if I click nothing happen and if I inspect the elements Network we have 422 with a message password the password field is required so for that is very easy let's come here and I think we have the error yeah I'm going to copy this error we have here for the email in the password reset I forgot password and let's add in the reset password when you have the input type for the password after this input let's paste that in but just change from email to B password and let's save and as you can see the password field is required and also if I type something not much reset password password information does not match and one two three four one two three four the password must be at least eight characters okay now let's add but before we add in the correct password I'm going to do the same thing here we have done in the handle forgot password I'm going to display that status here so let's do the same thing we have done I'm going to copy this line of code here and paste it down there so copy this code from the handle forgot password this one and add it to the handle reset password just we need to add to create a constant for the response or it's going to be able with the weight of the axious post and then we assign the Earth status with response data status let's save and let's go again to the forgot password and let's copy this uh div for the out status and paste it inside here and I'm going to add this after the form and let's save and I'm going to refresh and let's type the password one to eight I'm going to add and let's say reset password and as you can see now we have your password has been reset and if we go on out of the login and add test example.com at the password Here one to eight say login yeah we are to the home page with user details okay friends this is the tutorial about view Authentication I hope you enjoy and see you in the next tutorial friends all the best thank you very much don't forget if you like if you like not if you don't like but if you like the video and subscribe to my channel thank you very much

Channel: Code With Tony

Views: 11,637

Keywords: laravel, vuejs, livewire, laravel 8, laravel 9, laravel crud, laravel 8 tutorial, laravel 9 tutorial, Vue auth, Vue Laravel authentication, Vue authentication, Laravel breeze api, Laravel vue authentication, laravel vue tutorial, laravel breeze api, vue authentication, vuejs authentication, vue auth with laravel, vue authentication with laravel, vue auth with breeze, vue full authentication, vue laravel full authentication, display errors, vuejs 3 authentication

Id: YS0MV285KW4

Length: 140min 10sec (8410 seconds)

Published: Sun Nov 27 2022