Laravel Sanctum SPA with Nuxt Client

[Music] what's up guys in this video we are going to be looking at integrating laravel sanctum single page application authentication with a nox js client now this is coming from questions that i received from students who took my course on udemy which i released last year about a full stack api development in laravel and you can check out the course in the description of this video if you want but basically when the course was released we didn't have laravel sanctum just yet and so we used the time on jwt auth authentication package to do our api authentication but since laravel sangtool was released i've received many questions from students asking if i can produce a video to show them how to do this so i just thought it would be a good idea to do this on youtube instead and just make it free for everyone now it is also a good idea in any case that you try to use as many first-party packages as possible if they can meet your needs before you start looking outside of the ecosystem of laravel so i find laravel sanctum really nice to use in this situation which i'm going to demonstrate to make one thing clear we know that there are two really distinct ways of authenticating people with laravel sanctum there is one which is issuing authentication tokens which you will generally use for third third-party applications that are authenticating to your api and this basically issues tokens for each user when they are logged in and these tokens are stored in the database and those tokens have to be passed back to the api with every request that requires authentication so this is basically a stateless authentication and you would use it for clients that do not run on the same domain as your api but there's also the single page application authentication which basically uses the web authentication of laravel so in this case you're actually creating a stateful authentication where a session is established in the backend and cookies are shared between your client and your api now the prerequisite for using the single page application is that both your client and your api have to be on the same domain so if they are on separate domains of course it won't work because we are talking about sharing cookies and you can't share cookies across different domains so we are going to be looking at the single page application in this case where the next client application will be running on the same domain as the api so let's quickly create a laravel application here and i'm going to demonstrate how to integrate that using the new knoxed off package which are the version 5 which actually comes with a laravel sanctum provider and that makes it really easy to handle the single page application authentication with nox js we're also going to look at the middleware on the knox site how you can protect pages and it's really easy to do when you're working with the knoxv package so let's quickly set up a lot of a project here and i'm just going to do that through composer and i'm going to call my api api now while that's loading let me just add the folder to my workspace here so now we do have a basic level application set up here and if we go to the front end because i'm using laravel valley i can just do api dot test so that's just the boilerplate that comes with laravel let's start by actually setting up the database and some of the fundamental things so the app url in this case is api.test and the urls that we set here will end up being really important again because we want to be able to share cookies between the nox client and the api in the back end and i've already created a database called knox off i think with the password of password now let's quickly install laravel sanctum here so if we just go to installation all we need to do is pull in this larva sanctum package via composer i'm just going to paste that here while that's running we are going to publish the configuration which is really important so we see the variables or the values that we need to configure in the back end and i'm just going to do the migrations or to run the migrations here but we really don't need it in this case because the migration that comes with laravel sanctum is the table to store the personal access tokens for users when they are using token based authentication but that's not really what we're doing here regardless of that i'm just going to run the migrations here it doesn't hurt to have that table even though we're not going to be using it so i'll quickly skip down to sp authentication and we follow the instructions here the first thing is we want to pull in this middleware in our kernel file and the middleware which is services ensure front-end requests are stateful this is basically the meat of the reverse sanctum when you try to do authentication this is the middleware that does the check to see if the origin is coming from the same domain and it channels the authentication to your sanctum guard so we are basically going to pull that into our kernel here on the app http kernel and we need to put that under the api middleware group here now let's go down and set up our cross origin results sharing when you install laravel by the way it comes with a course package out of the box so from liver seven i think this was introduced or maybe it it comes with the cost package pre-installed and here we already have some paths or some ur paths that have been excluded from course policies like the odd api routes are going to be excluded from course from cross-origin sharing blocks and we also have the sanctum cross site request for the cookie endpoint which is basically the end point that sets your csrf token on your client side so those are excluded from course policies out of the box but really importantly here we want to set the support credentials to true because we want to be able to send credentials cookies and all of that from the front end to the back end which means that we expect those credentials to be sent to the server from the client side so to do that in the front end when we are working with axios you'd have to also configure axios to send the credentials by setting the with credentials entry here to true we are going to look at that when we start working with knox but for now that's all we need to do for the course let's also look at the sanctum configurations which we published so the configuration here will not touch anything in the sanctum configuration down here but there's an entry here that says sanctum state for domains and this is basically setting the domains that you want larval sanctum to identify are stateful and if a request is coming from a different origin than the stateful domains then those requests will be rejected so they will not be recognized so we have to set that domain here and in this case the domain is going to be api.test.3000 and the port 3000 here is because i'm using knox.js and by default it's going to run on port 3000 so this is going to be the client domain basically again if you are using localhost and you have localhost here then you need to set the domain for your client side here which will probably be local host port 3000. but in my case i can do api.testport3000 here because i'm running my application in laravel valley the important thing is that your api and your client side domains should match they should be the same there's one more setting here which is the session domain and the session domain is basically is actually set in your config sessions dot php file so if we go back to our configurations and we look at session.php we can scroll down to the bottom somewhere or somewhere in the middle there's a domain entry where you can set your session domain so it says this will determine which domains the cookie is available to in your application so let's copy that and under session we set that to api.test as well now if you want this to target both your top level domain and any subdomains you just put a period here so it will be dot api.test but in this case we don't have any sub domain so i'm just going to leave it to api.test so basically that's all you need to do as far as setting up your reverse sanctum is concerned now we are going to be working with the api route here we are not going to be using any of the web routes even though the authentication is using the web guard we are not going to be creating any web routes here we are going to be doing everything in api routes file and when you install laravel of course it comes with one endpoint in the api file which is just the endpoint to get the currently authenticated user but at the moment this actually is using the auth api middleware but laravel sanctum comes with a different middleware called off sanctum so we need to set that we need to set that middleware to of sanctum instead of off api let's create a couple of other endpoints here to register the user and i'm going to make the registration route here a get route and the reason i'm making it i get it out is the the registration rate is not really a sanctum thing at all so we are not going to be spending time creating a form just to register the user in the front end so i'm just going to do the registration as i get so i can pass the credentials in the browser so here we are going to get the request and to register a user of course again this is just a simple crotch so i'm just going to do create and take the name the email and we need the password and we need to hash the password of course so i'm just going to use bcrypt which is just a helper for hashing the password and that's all we need for the user registration again i'm not going to spend time doing any validation here that's outside of the scope of laravel sanctum from the registration route we're also going to have a login route and for the login this is going to be a post route because we're actually going to be posting the login credentials from the nox client so again function request and now the first thing we want to do is grab the credentials that we need to authenticate the user with so it's going to be a request only email and password then we need to check to see if we can authenticate the user with those credentials so here we just say if we cannot authenticate the user with the given credentials so if auth attempt so if we are not able to authenticate with those credentials then we simply throw a validation exception with messages and we're going to store the message here under the key email and we're just going to say invalid credentials so let's pull in this exception class now if they make it past this stage it means that the credentials that the user send in were correct so we can actually go ahead and establish a session for that user and that is quite easy because we just need to say request session regenerate and then return response i'm just going to return it now with 201 because we are creating a session so i'm just going to say no 201 so what we're doing here is we are basically pulling the credentials that's the email and the password from the request that the user is sending through with the login then we're using those credentials to try and authenticate the user so auth attempt is a method that comes with the authentication guard in laravel so auth attempt with the credentials and if that fails so we are negating this attempt so if it fails then we are throwing an exception which is a validation exception that says invalid credentials so this will basically be a 422 error but if it doesn't we simply regenerate an authenticated session for that user now let's also do a logout and the logout again is going to be a post route so route post and we'll just call this logout so function request so the first thing is we use the off guard and i'm actually going to explicitly specify this to use the web guard even though the web guide in this case is our default guard so if you just say off guard it should go to the web guard but i just like to be explicit sometimes uh when i'm when i'm actually working in the api file just to make it clear that this is what we're using and then we call the logout method on the offcut then request session invalidate so we invalidate the current authenticated session for that user then we also do a request session regenerate token so we are generating a new session which is an unauthenticated session so here because we did off attempt here if it succeeded then we are generating an authenticated session and here we invalidate that authenticated session and then we regenerate a new session for that user which is unauthenticated so which is a guest guest session basically then we can just do a return response json no and two o o so that's all there is as far as the routes that we're going to be using here called goals now let's quickly go to the browser and register a user because we are using a get method for the registration route we can basically just pass our registration credentials here so here i'm just going to say api forward slash register so we are just passing the credentials here as a query string so let's just run that and it should have created the user but we didn't return the user so let's just say return user here just to be sure that everything got created so i'll go back and i'll just clear the user that got created in the database just so we recreate that and actually see the user object so let's create that again and now we do see the user created in the database so we have the name the email and the created and the timestamps all right so that's all that we need to do as far as laravel is concerned or the api is concerned unless well when we start working with knocks if we have any errors we'll come back and look at it but for now this will do it for our api and let's move on to create our client side or the nox application now now to create our nox application we just go to the nox documentation it's pretty easy you can use yarn npx or npm and we just simply say npx create nox app or npm init and all of that but i'm going to use npx here so we are creating a basic knox application npx create nox app and i'm going to call this client i'm just going to leave the project name to client we're going to use javascript not typescript and i'm working with npm not yarn now you can choose a front-end framework here or you can just do bare bones but let's just go with bootstrap view and so we can use some bootstrap styling in the front and it's not going to be anything fancy but let's just make use of that now very importantly here you want to have axios installed because that's what the off or the next auth module will be using to send requests to the backend and everything else here we just leave it to default and say no no and we're going to be doing a server side rendered app so yes and we don't want a git ripple and while that's installing i'll also add that folder to my workspace so let's get into the client directory and if i just do npm run dev we should have our client server or the next application spun up here on port 3000 which is the same part that we put in the api here under stateful domains so this should be the domain that you have here in your dot m file under sanctum state full domains so it should match that and if yours is not running on port 3000 put whatever is uh whatever port it's using in your client site so let's go back here and we can just do api dot tests for 3000 to spin up our client application now again i'm using api.test here because i'm working using laravel valid so i can just use the same domain with port 3000 but if you if you're not using larva valet this is very important your front end and your back end should be running on the same domain so if you're using localhost this should say localhost.3000 and maybe your laravel application is running on localhost spot 8 000. so our nox installation is working but let's just go quickly and set up the knocks off module when i created my calls larvae sanctum did not exist yet so this package did not yet provide a way to authenticate with laravel sanctum but with the current version which is version 5 we do have a new provider called laravel sanctum which is what we are going to be using here and this is the cookie-based authentication for laravel sanctum so we are going to be installing this package and using that larvae sanctum provider here to get our authentication working so let's start here by quickly pulling in the package and make sure that you are pulling in the off next version if you're using an older version you won't have this provider which means that what we're doing here will not really make sense to you and it will not work so let's pull that in i'm just going to kill my server here and run that and while that is working normally we would have to also install axios but we already chose to install axios when we generated a nox application so we don't need to run this again but if you did not choose to install axios then you would have to install this knox axios module and now let's dive into the configuration for the nox package so this is all done in the next config.js file the first thing is we need to pull in the module that we just installed in our packages so in here we did install the next off which is the next version so we need to pull that in and i'm just going to get rid of some of these comments then we need to create an authentication section which is where we are going to configure how the next off package authenticates users how it retrieves users and all of that information so let's come back to the providers and we just click on laravel sanctum and we see the basic configuration for laravel sanctum basically you can define multiple strategies and use multiple strategies to log in so if you wanted to log in with facebook google all of that you can configure them as different strategies in here so in our case we only need to put in the laravel sanctum strategy so i'm just going to copy the strategies part there and in the off entry here i'm going to paste that so we have the entry called laravel sanctum the provider is laravel sanctum and the domain or the url here is the base domain of your laravel api so here it's going to be http api.test we also need to configure a couple of endpoints so the endpoints that will be used to log the user in to lock them out or to retrieve the currently authenticated user now there are some defaults that come with the next auth package which you can see by going to the github repository for the auth module so if you go to the repository here and you look at providers you can see the providers that are currently supported and if we click on larvae sanctum you can see the default values for the configuration so the strategy is here it's called laravel sanctum and we do have some endpoints which we need to configure but these are the default values that come with it so we have endpoints for the cross-site request forgery which is sanctum csrf cookie and we are not changing this but we need to set the login logout and the user credentials all we need to set in here are the url values because we already have some defaults and the defaults here are going to be the credentials that is going to send through because remember that here we did say that you need to set the width credentials in axios to true so this package already handles that for us we don't need to do it anymore so it already sets the with credentials to true it sets some of the headers that we need like the content type and the accept headers and all of that so all of that is already handled now we are going to change the login the logout routes to actually match what we have configured in our api so here let's just say endpoints and the first one we want to do is login and the url for login is going to be api login of course you could also just put the base url here to api and then just put the login part here if you prefer that it's all up to you the value that you enter here is relative to that base url because it will be appended to that base url so that's the login route let's do the lock out and that's just going to be logout and let's do the user and that's going to be user that's the same as the default so if you leave this out it will still work because that's actually the default looking at the configuration here in the github repo now there's more options that you can provide here like the user object if you're returning a user in using let's say uh api resource in laravel you know that the data is usually wrapped in a data object the response is wrapped in a data object so this is to set what property may be wrapping your user object in this case we are not wrapping the user in anything we are just retrieving the raw user uh information from our api so if you look at our routes file here you see that in the endpoint to get the currently authenticated user we are just returning the user so we are not wrapping that in any data object but if you decided to wrap this as an array in a data object then you need to provide that property name here in our case this is going to be false because we are really not using any wrappers for the response now outside of your strategies there are a couple of redirects that i want to set here and these are not peculiar to the provider here they are just general settings for the next auth module which basically tells the module how to redirect users based on actions that they are taking of pages that they are visiting so let's start with the login redirect so here i'm just going to say login and this is the route that you where users will be redirected to if they are trying to visit a page that requires authentication so if a user is not authenticated and they are trying to visit let's say an edit profile page which is supposed to be an authenticated route then they should be redirected to this login page so this is the route that they would be redirected to if they are visiting any protected route we also want their logout route and i'm just going to say a slash to the home page and this is the path that the user will go to after the logout of the current page if the current page is authenticated so if the user is on their dashboard and the dashboard requires authentication and they click on the log out button from that dashboard then they need to be kicked out of that dashboard and sent somewhere so this is basically where they will be sent to so they will be sent to the home page but if they were on a page that is public that doesn't require authentication then they won't be redirected to any any route so they will just stay there now we also need a home page which in this case again will just be a date with a forward slash you may think that this is the home page of your application but no this is actually the page where you want to redirect users when they log into the application so once they click on login question is where do you want to send them so if you wanted them to go to their dashboard once they log in then you'd actually change this to dashboard instead of just the forward slash but in our case i just want to keep that to a forward slash so far that is the configuration that we need to do in the next config file for the sanctum provider now let's come over and create a couple of pages and the reason i really love nox js so much is it comes with all these bells and whistles i don't have to configure a router file here and specify my routes manually i can just create my routes based on the page structure here so let's create a couple of routes i'm going to create a login page i'm going to create let's say a dashboard page and i think those three pages should be okay so we are going to use the dashboard here just to illustrate a page that the user has to be signed in before they can visit so let's come over to our template on the index page here i'm just going to get rid of everything in here and let's build this template from scratch even the stars here i'm just going to clean them out because we are using bootstrap view we have access to a couple of components so if you don't know what it is you can just go to bootstrap view enter and you see a bunch of components so every component that you have in bootstrap it's been converted into a view component basically and we're using them here so let's say we need a container i'm just going to say b row and in b row i'm just going to say b column course will be six so i just want six column white here and let's set a class of mx auto to centralize that and let's do a cut with the title of home so i call them just a public home page so it's clear that this is a page that will not require any authentication so welcome home now i'm going to copy this and just put that in the dashboard and we'll just change this to private dashboard and let's also copy that and we put that in the login page here and let's just say login so let's go back to our application here we have to run npm run dev and here we should see our home page if i just say forward slash dashboard we go to the private dashboard which i need to correct a little bit private with a t so we go to the private dashboard i can also go to login and these routes are all very public right now now while we are here actually let's go to the layout and put in at least a little navigation bar just so we can show things and hide them when necessary again if you come to the bootstrap view site here you can see there's an example of a navbar which we are basically going to copy over and make a few changes so let's say we're placing the nav bar here and just by saving that nav bar if i go back to the nox application we should see we have enough bar showing up there and i'm just going to make a class of margin bottom four and because we are using knox we can simply just say two to use the nox router here and we want that brand name to go to the home page so next off i'll just name that knocks off and we see that going to the home page let's add a couple more links here which we are going to be using to show and hide depending on the user's login state so i'm just going to copy the right nav bar here again this is just boilerplate html that we're putting in here so we don't really need much from here we're going to place a couple of links here so i'm just going to call this one dashboard and that will go to the dashboard page then i'm going to call this login and that should go to the login page then i'm going to add a link here for log out let me put dashboard and logout together because they are going to be authenticated routes and here just say logout and the logout page will not be going to any page just be on href and go to pound and i click dot prevent we are going to call a logout method from our next component here so i'm just going to get rid of all the styles in here as well we don't need them but we do need a script tag so for now this logout method will not do anything just yet but let's just do a console lock actually and see if we can get that message in our console here so if i click on logout i expect to see lock so that is working as expected for now that's what we need to do there let's go to our login page and here we are going to quickly set up a data structure for our component so i'm going to put the credentials in a form object which will be the email and here i'm just going to hard code the values because again this is not going to be anything fancy but that is the email that i provided when i registered the user on the api side and the password i'm just going to hard code them here as well then we do need a login method and login so console.log login as well now let's come back here instead of actually coming up with the whole form i think i'm just going to go with a button here i'm just going to say variant equals primary so a primary button and just call it login and when the user clicks on that button we want to call the login method in our component so let's go back here and try to go to login so if i do this we should see login in our console so let's quickly implement the login mechanism here using the knox auth module it's insanely easy to do the login from here so here in our login method we simply said this off dot login with and with here it takes the provider that we are using to log in so here our provider was called laravel sanctum and if we go back to nox config we can see that the strategy that we have here is called laravel sanctum so that is the provider that we are passing here to the login with method it takes the provider but it also takes the data that we are sending through so data here is this dot form so the data is basically what we entered here in the form and that's all that you need to do to lock the user in so we can also just do a then here just to see if there's any response console.log the response and let's also do a catch in case we have errors so this is all we need to do for login here now let's go back and one thing if you look at here we do have our vue x store is empty at the moment but the next auth module actually saves your user object in a store module so we need to activate view x to make sure that we can see what's going on in there when the user logs in locks out and to activate view x here is quite easy all we need to do is go to the store folder here and create an index.js file and that's all we need to do here to activate the store so if i come back here refresh and we look at our store is now showing up here and in the state here we do have an auth module and in the auth module there's a locked in entry which is false at the moment because we are not logged in there's a strategy which is laravel sanctum and the user is not now let's try to lock the user in here and see what happens so i'm just going to clear everything here and let's issue a login request so login and we do see that the login was actually successful it was successful because it established a larger session and it actually set the cross site request for tree token in our cookies as well and if we go to the view x store and we refresh our state we now see that logged in is true and the user is showing up here in our store and we can directly access this user object in the store to access this let's just go back to our dashboard and instead of saying welcome we can just say welcome b and let's just access the user of user dot name save that and if we go back to the dashboard now we can access the user by the name or any credentials that we want in there so this makes it incredibly easy already to do anything with your authentication in fact this has handled everything that he should have had to do manually and it should have taken quite some time to get this configured set up and having all of this registered globally so you can access them even in templates but we are not done quite yet because if you look at here i'm just going to remove this for now just because it's going to throw errors for the next thing that we're going to do here but if we look at what's happening here if i try to go to the login page it still allows me to go to the login page this should not happen now let's implement the logout and we also see what happens when the user is locked out to lock out it's even easier than logging the user in and we did have our logout thing in layouts and in the navigation so the method is in here in the logout so to log out all we need to do is just say this off log out and that's all you need to do of course you could do this in a try cache block put this in here let's make this a synchronous i think that would be okay and console.log the error in case there is an error so that is the log out function here so if i come back here and i just click on log out we are locked out we are redirected to the home page which is what we set in our configuration but more importantly if we come to our ux store here the login now is set to false the user is set to false and we can tap into that to perform any authentication that we want in the front end so let's quickly talk about middleware the next off module comes with a couple of middleware to check your authentication state we are currently locked out of the system so if i come here and i do dashboard i can still access the dashboard it's supposed to be private so locked in here is false but i can see the dashboard so we need to be able to protect this with middleware we also want to hide the links for dashboard and log out here if the user is not logged in and to hide the login button if the user is already logged in so let's do all of that now here we know that the dashboard and the logout buttons need to only be visible to users who are logged in so here i'm just going to create a template and i'm going to say v if off dot locked in and i wrap that in there again alt dot log in coming from our store here so we see there's a locked in value in the store so as long as this is false we will not see those links and we are not seeing them here and of course we need to do the reverse for the log login route so template vs the earth we showed a login so that's all we need to do to hide and show things by just checking the authentication state of the user of course this doesn't prevent the user from just saying dashboard and going to the dashboard from here and if they go to the login and they click login now they are logged in they can see the dashboard and they can see the logout buttons let's now implement the middleware to ensure that users are not able to visit pages that are private if they are not logged in now like i mentioned the module comes with a couple of middleware and the authentication mediaway in this module is can be implemented in two ways you can implement it globally meaning that if you wanted all your pages in the application to be protected and only be accessed by logged in users then you can simply set that middleware in your knox config here under a router key or a router entry so if i do router and i say middleware off now just by doing this i should not be able to access any page if i'm not logged in so if i try to go to the home page it will bring me back to the login page if i try to go to the dashboard it will also bring me back to the login so by specifying your auth middleware in the noxconfig you're protecting the entire application and only the login page or the login route will be accessible now this doesn't mean that you cannot exclude some pages from this if you wanted the home page for instance to still be accessible to everybody you can simply come to the home page here or to any page that you want to exclude from that global authentication state and you simply set a property called off set the value to false so if i say off false then now i should be able to go to the home page with no problems because i've explicitly told the module not to check for authentication on this page that this is a public page this is if you're actually trying to use the authentication middleware globally in the application for most applications we really want to only protect certain routes so to protect specific routes in your application what you need to do is simply go to that route let's say the dashboard meaning that we are not going to put the middleware in the noxconfig but we are going to put it on each page that requires authentication so here in my dashboard for instance i can just say middleware off and if i do that i can come back here i should not be able to access the dashboard again if i try to access the dashboard it will kick me out and bring me to the login page but i can still go to the home page because i haven't specified that middleware there and the middleware is not specified globally so if you want to protect individual pages then you just have to go to that page and set the middleware property of that component to off now one thing that we see here is that even though this works we don't really have a guest middleware to protect on individual route basis so the guest middleware that comes with this package works if you are protecting the application globally so if you are putting the authentication in your next config file but if you are doing it on a component by component basis then the guest middleware or the guest property doesn't work as much you need to create your own middleware for the guest property and apply that middleware just like you apply it here in the off module so to create middleware again here in knox it's really easy it's a piece of cake we already have a middleware folder that's created or that comes with knocks when you install it so all we need to do here is create the middleware file guest.js in this case so we want to create a middleware for guests so that if a user is logged in they should not be able to visit or to see the login page again so all we need to do here is just create a file in the middleware folder and the name of the file becomes the name of the middleware so in this case guest will become the name of our middleware and here we can say export default let's just pull in the app which is the next instance and we pull redirect from the router and all we need to do here is check to see if the logged in value of the auth module is true so if app dot off dot logged in so if the user is logged in then we want to redirect them to the home page so that's all we need to do to get the guest middleware working so we're just saying that we're checking to see if the user is logged in and if they are we simply redirect them to the home page otherwise of course it will just continue as is i'm getting a squiggly line here because this should actually be an arrow function so that's all we need to do for the guest middleware and if you can create as many middleware here as you you need and apply them to your pages and you can put multiple middleware on a single page so by doing this i can come here to the login page let's just check to see what's happening now so here i can say login i'm not logged in but i can still go to the login page by entering the url here so that's what we want to avoid so by applying that middleware we should be redirected so let's say middleware and here let's say guest so if i come back here i refresh and i try to go to the login page because i'm authenticated it will kick me out and bring me back to the home page so it will never allow me access that login page as long as i am logged in but if i log out and i go back to the login page i can access it again and if you look at the difference here i put this in an array so you can pass multiple middleware to a single page so you can see here that i'm able to log in and when i'm logged in i can no longer visit the guest routes which in this case is just the login route but i can go to my dashboard which is private and i can also log out but if i log out then i can go to the login page again which means our middleware is working quite well now one thing that i want to draw your attention to again is this is really smart you know if you're working with laravel and blitz uh generally when you try to access a an authenticated page and you're kicked out lava kind of saves that page in your session in under the intended flag right now when you eventually log in you're immediately redirected to the page you intended going to before and that's the same thing here if you look at let me try to go to dashboard here which is an authenticated page i'm redirected to the login page but more importantly if we come to the cookies here we do have an entry for auth redirect and it says dashboard so the module actually saves the intended url in the cookies and when i finally log in like if i log in here it will immediately redirect me to that route so if i log in i'm taken to my dashboard and that cookie value is cleared out so this is a really smart way to organize things and you can see that it takes tons of work out of the user himself again we can come back to the dashboard here and we can just say off user name so if i come back we do have welcome john showing up here as expected so again if you are looking to work with laravel and knox and you are planning to host both your knox and your apis on the same domain this is the best way to go you're using a first party package from laravel so you're working within the laravel ecosystem and you don't have to maintain any uh jwt authentication tokens in the front end or anything like that you're working within sessions and there's a lot of benefit that comes with working with sessions if you can successfully connect your front end and your back in that way this is just one of the providers as i mentioned if we go back here you can see there's more providers in this off module and laravel is really being favored here quite a lot because we do have providers for jwt level and we have for passport and sanctum which you just did so we are just touching on the sanctum in this video but i'm going to be looking at other authentication or these other providers in other videos so if you like this video please click on the subscribe button subscribe to the channel so that you get notified when i upload any new video for this and other lessons the entire source code for this project is in github and the link is in the description below as well as the links to the auth module and laravel sanctum and some of the useful links that you may need for this lesson so please click on subscribe and i'll see you in the next video

Channel: Fusi Gabz

Views: 5,653

Rating: 4.9783196 out of 5

Keywords: Laravel sanctm, Nuxt, Sanctum+nuxt, Laravel santum with Nuxt, Laravel, Nuxt SPA

Id: xhVhJieMInM

Length: 48min 3sec (2883 seconds)

Published: Fri Jan 29 2021