Laravel Sanctum/Airlock with Vue for SPA Auth

this is part of my premium course so if you liked this video be sure to check out useful laravel packages calm ok let's take a look at laravel airlock airlock provides a lightweight authentication system for single page applications now we already have passport which is a full author implemented but if you only need authentication within your single page web app then airlock is the better choice you can also use airlock for personal access tokens and mobile application authentication but in this video I'm just going to be focusing on using airlock to authenticate your single page web apps so I have an example here and I am making use of tailwind UI because I want to try it out and the way I have it set up is I have two separate applications one for the front-end and one for the back end so what you're looking at here is the front-end made with view CLI and the back end has no UI but here it is running my browser and this has a hair lock installed now for authenticating single page web apps air lock uses levels built in cookie based session authentication services this makes it more secure and has CSRF protection and is also protected against cross-site scripting attacks so let me just show it to you working here so there is built-in of--there so if i just put in something random that doesn't work then you'll have that message this is coming from the server and if you want to login just provide the proper credentials and we will be redirected to the dashboard and you can see this is coming from the server and you can also sign out so there's also guards in place so if you press dashboard here we can go to it now if you look up here if you notice the domain you'll see that the front-end lives on a subdomain and the backend lives on the top-level domain so this is really important both apps have to be on the same top-level domain you also can get it working on the localhost domain because of the way cookies work for local so again very important both apps have to be on the same domain and I'll show you how to set that up for both the front end and the back end okay so I went ahead and made a brand new view CLI application and the only thing I've done is added these tailwind UI components so I replaced the home page with this login component and I also have one for the dashboard here and obviously I also set up this new route for the dashboard so if you want look at the code I have this home route which I replaced with the Tailwind UI component and I made this new dashboard component here which is this and I set up the router accordingly which is in here so the first thing I want to do is set up the sub domain for our front-end so just like I showed you in the example we need to put this on the same domain as our back-end so right now it's running in local host and like I said it doesn't work in local host so we have to find a way to put this on a real sub domain so it some googling and I found this article and this is exactly what we need so it says runs typically on localhost 8080 which is what's happening here but if you add a view config dot J's file and if you add this in there with these subdomain that you want then we can use that sub domain after we make some changes to our hosts file so let's go ahead and add this so u dot config that J s right here okay and spaced out in and the host that I want is gonna be like I said I'm gonna put this on a subdomain so app airlock example dot test so our back-end is gonna be running on airlock example dot test I haven't created that yet and our front-end is this code and we want this to be on a subdomain so that's the domain I won't save that and let me just stop my npm run server here and now we have to edit our hosts file and we just have to enter this entry into it so let's go ahead and do that still sudo them /e TC - hosts ok and we can add that entry in as you can see you have you can see the example one I had earlier and it's just at this so it's gonna be a pair like air lock example dot test so app airlock example dot test ok let's save that and now if we just run npm run serve you'll see that it's now hosted on that domain so let's try it out and there you see it is running on this domain and it still works on the port so that's ok so if I go to that there we go go so let me just close this one out and we can close this - ok now let's go ahead and create the backend laravel application so I'm gonna use the laravel installer so laravel new and a name airlock example and I want laravel seven which should be out in the next few days at the time of this recording so let's add - - dev ok let's go into that airlock example and it's open this up in vs col as well so since I'm using ballet this should open in the airlock airlock example dot test domain and it of school so now both our front end and back end live on the same domain cool so let's finally set up airlock so the first thing I want to do is just composer require it so let's go ahead and do that and I also want to add the layer of luy scaffolding because we're gonna make use of layer vaults default of services for logging in and logging out and stuff like that and I also want the 2.0 version ok that's done let's go ahead and PHP are saying UI view I don't thing I have to do this but I'll do it anyways because we're using a totally different front-end for this okay what's next next is to publish the config let's go ahead and do that okay and this also comes with migrations but that's more for the tokens but will migrate anyways and there is a config for airlock as well let's go ahead and migrate actually I have to set up my database first so I already have a database setup so I have to change my env file and the database is just the same name as the project so airlock example and if I did that right PHP artisan migrate should work ok so as you see we have this one for personal access tokens which airlock created okay what's next so we have to add this middleware so ensure front-end requests are stateful in our app HTTP kernel so let's go ahead and do that app HTTP kernel let's go ahead and use that and it's grab this and put it in our API reps API middleware I mean right here okay and what's next so this is for API token off which we are not going to look at in this video we want the single page application authentication a so this we already did we did this ready okay now we have to look at cores and cookies so it says you should ensure that your applications cores config is returning true for access control allowed credentials so in level seven the laravel course package is baked into the framework so if you look at composer that JSON you'll see fruitcake laravel cores cool and if you look at the config you'll see one for course as well so let's go ahead and go here and we have to set supports credential to true okay what else it says we have to let Axios have this with credentials default so this is within our front end so let's install Axios on our front end let me stop this npm install Axios and while that's going let me just go back to my front end here so this is my front end and within here will just import Axios so import Axios from exhales and then it's put that default in there right here oops I thought I copied it copy-paste okay and say that and it's run serve again okay so back to our back end what's next here says we should ensure my application session cookie domain configuration supports any sub domain of your root domain so if you go to config session you'll see a key for domain so let's go there config session and if you look for domain here you'll see that there is an environment variable for session domain so let's go ahead and do that so that V is our one here already there is not so it's better right here session domain equals and like it says we want the dot domain com so this will enable all subdomains so let's do that and our domain is airlock example dot test ok and I forgot one step here if you read this then we have to set this stateful key in our airlock config and what this does is determines which domain is allowed to store cookies so let's go to our config airlock where is it up here and you'll see here there is a key for stateful and you can add multiple domains to this envy variable so right now has localhost as default but we can change that so let's go ahead and go back to our environment file let's put underneath here so it's close to the session and this should be the domain that the front-end is running on so our example it's gonna be app dot airlock example dot test ok and now I think everything set up now hopefully that's correct and now we can start making requests from our front-end so what we need to do is make a request to this endpoint and what this will do is set the cookie on the client and once this is done then we can make a request to the standard login route and then we can log in from there so let's go ahead and try this I actually think there is a step I forgot but let's just try this and then we'll see the errors that we get so back to our front end so I am in the login view or the home view in our case and we want to make a new method for logging and so it's just a methods key and it moves up let's call it login and we can paste that in okay and let me try something here so this doesn't have the base URL so we can add that in the defaults as well so Axios defaults that base URL and this is going to be HTTP and log example test okay and let's just see if we're getting anything here so console log response okay so say that it's my server running okay it is so let's go back to it and let's see if we get anything actually I forgot to use this login method in the signup button your sign-in button so had click equals login okay so let's try this out let's go to our front-end open dev tools and I'm used for fresh air and let me just get rid of these errors so yeah these errors are because there's no variable for these email password and password just because I paste it in and the completed thing so what is that it's just the v-model on these inputs so we're gonna make use of this anyway so might as well put that in there so I have one for email and password I believe so let's put that in some state here some data return object for email make an empty and password okay save that and let's see if those errors are gone these refreshes okay cool so let me just make this a bit smaller so let's go ahead and try signing in so there's some browser validation here so we're gonna have to actually know the request went through and if you see here it's saying we're getting course errors here so there seems to be some sort of miss configuration in our course and I was stuck on this for a while until I found the solution and that is to go back to our course config in our backends let me go back to our back-end but of course and we have to allow the paths that we want course to be available on so in this case it's gonna be this airlock slash CSRF cookie endpoint that we're trying to hit and we also have to make sure that we set it for login and logout because we're gonna be using those as well and everything else is gonna be from within API slash whatever endpoint so that's good so now if I save that hopefully this will work so let me refresh this and it's hit sign in and there we go this should set a cookie on the client and if you look at application if you look at cookies here then we see we have some cookies in here awesome so now we can make a request to the login endpoint which already exists in our level application because we set up in the author scaffolding so let's go ahead and do that so back to our front-end here and let's go into here so we don't need this anymore and now from within here we want to make another request to the login endpoint that's gonna be a post request to slash login and you want to pass in some information there so that's gonna be the email and the password so email is they start email because we have a V model on it and password is this password okay and it's called then on this as well let's call it response to and it's just constant log response too so I have no users in my database yet but let's just see if we're getting the correct error so let me refresh this it's got a console and just type in whatever here okay sign in and for 22 is the correct error so if you look at network like that for 20 to look at preview or the response and you look at the errors here you'll see we're getting the these credentials do not match our records error which is the correct error so now if I make an actual user let's see if that works so I'm gonna go into my lair bail app and it's called a slash register and make an actual user so the CSS is not working because I didn't install CSS but that's fine this end point should still work so let's make one for me say Andre at Andre calm password is password password password let's register okay so now there should be a user did that work let's check my database okay so it did so now let's try a front-end again and see if we get a different message for a successful user so back to here back to here and let me just clear out my cookies here so application cookies let me just delete all these okay and we just refreshes so let's try with that user we've created let me go to console and with the correct password sign in and there we go we are getting a 204 which is the correct response and the appropriate cookies are set on the client so now we should be able to hit the endpoint go to the backend again routes API yeah we have to do this as well so this is the default for routes API but for airlock we have to change the middleware to something different if you look at the docs here I think it's down here somewhere right here we have to set the middleware to be off air lock instead of off API so let me just comment this out and set it to air lock cool so after the cookie is set correctly for a successful login we should be able to hit this endpoint so here's one going to do I am going to hit this endpoint in the dashboard round over front-end so let's go back to our dashboard view let's go down here and let's make a mounted hook here mount it okay and let's go back to home for a second just grab this so I just want to Axios get okay and the endpoint is slash API slash user and I'm just gonna grab this as well you definitely should make Axios available globally but for this time I'll just duplicate that code and let's not forget the import statement as well okay cool and it's just console.log the response okay so my cookie is set already so let me just refresh this and if I did it correctly if I hit dashboard then the user information from the backend should show here and it does not let's try everything again so I'm gonna go back to home and I'm gonna refresh I'm gonna delete my cookies and I'm gonna try to log in again okay so oh and Dre at Andre calm password let's check this works okay if I hit dashboard will this work no it doesn't so something's wrong okay so earlier he saw me add this click handler for the button but I forgot that I already had the form submit handler up here on the form so it was making the request twice to receive the cookie which caught some issues so I remove this so I was only receiving one cookie and now that should work so for some reason I can't get it working in a normal browser tab so I'm gonna open up an incognito tab and also if you're having issues be sure to clear out these sessions so in this folder storage framework sessions as you can see I have one in here so I'm just gonna do RM star and say yes okay so now in my incognito let's go ahead and try this so there should be no cookies here because it's in incognito tab so let's try a proper login let's sign in okay we get this and it only shows once if you saw earlier I showed twice because I had those two events on the form one for the button then one for the form and now if I go to dashboard let's see if this works and it does awesome so now we're getting the information for our user here the logged in user cool so let's add the name here or we can put the email in there doesn't matter it's up to you let's go to our dashboard view and make a piece of state here for the name and it's returned name empty string and it's do this dot name is response so response that data is the user object and we'll grab the email and in the template let's go ahead and change that right here let's put a name in here okay so now this should work cool so let's go ahead and add logging out so whenever the user wants to log out we have to destroy this session so just like logging in we're gonna make use of levels built in log in log out route so let's go ahead and do that so let's look for the button here so it says sign out sign out so be careful because there's actually two here there's one for the mobile view and there's one for the desktop view so this is the desktop one so at click equals log out let's go ahead and make that method right here still methods logout and we're just gonna post to log out it's a post route slash logout do it out then response and it's gonna use the router here and go home so I like using named routes both in larval and view so I'm just going to name home okay and I'm also going to do the same thing in our home view once we log in so where's that right here instead of console logging and this was called dashboard okay so let's try logging out and then let's try logging in again so I'm logged in right now cool and if I hit sign out this should sign me out and redirect me back to the home page and it does awesome so let's try if it redirects from here so again it's on drea I'm Andre calm password so Center and everything is working awesome okay the next thing I want to take care of is route guards or navigation guards so now we're logged in so we shouldn't be able to access the home route but we still can and the opposite case applies to so when we're logged out so it's log out here we don't want to be able to access the dashboard view so this is where you would use something like view X to hold some sort of global State but I don't want to make this lesson about view X so what I'm gonna do is just store a piece of global state in local storage and all that does is tell us if we're logged in or not so let's go ahead and do that back to our code so before we push to the dashboard after we successfully login let's set a new variable in local storage set item and it's call it is logged in and unfortunately local storage doesn't support boolean's but I'm gonna put at least ring true here and that should be enough for us and we're just gonna destroy it upon logging out so let's go to dashboard and here I'm just gonna delete it from local storage so local storage that remove item and we don't have to give that cool okay so let's verify that this works so let me go back to home and let's login again so Andrea Andre calm okay and now let's check the local storage ok so there it is cool so if you go into the docs for view router and if you go into realm arrow fields this is how you would set cards so you need to set a meta object on the route so you want to protect and then we have to check here so it's just sort of like middleware in laravel so let's go ahead and do this let's add a meta field to the routes we want to protect so let's go to our router here so right here and we only want to set it on home and for dashboard as well so meta field so for home we want to make sure the Revisited is not logged in so let's call it required requires visitor visitor and this one is okay with requires off cool and about is fine for both so we don't need to put a meta field on that and now I am going to grab this piece of code here and this just checks the meta fields and make sure you are logged in or not and we added that piece of state in local storage so we can check that way so I'm just gonna put this code in main j/s as you can see the router is being imported here so we can just put it here you can obviously extract this to a separate file if you want so if the route we're trying to visit requires off then we have to check if we're logged in and we'll make a method here called is logged in actually it should be if you're not logged in then we want to redirect where and I like using names like I said we want to redirect to the login page so that's just home in my case and I'm gonna do the same for the other case so I'm just gonna grab this and put an else--if right here so it should be else--if and it should be required as visitor and this should be logged in and there should be dashboard so if you're logged in then just redirect to the dashboard so I'll have to make this method and I'm going to put it right here and all were doing is checking the local storage if it exists logged in so all you do is return local storage get item is locked in and if it's there then that means we're logged in if it's not then we're not logged in okay so let's try this okay so right now I am logged in so I try going home that won't work because I'm logged in we can even try setting the URL and it's gonna redirect to the dashboard and let's try the other case as well so if I'm here and attracting the dashboard that won't work even if I try this that won't work as well also so one last thing I want to do is just some validation here which shows the server error if there is one so let's go quickly do that I'm gonna go to my home route and let's put a new piece of state here called error message and that's it at the empty and let's just see how it's gonna look so I'm gonna put it above the first input so that should be right here and it's just do text read 500 let's make it small and give it a margin bottom and see error goes here see how that looks okay it looks good and just say error message here error message and just put a V if on this so V F equals error message okay and that won't show right now because there is none cool and down here we just have to catch the error and set that piece of state if there is one so I'll catch error and it's just console.log the error top response data to see what we're working with okay and just try login with something that doesn't exist cool and they see well this message isn't very descriptive but the message that we want is within this errors key and it has all the errors for each field here so I kind of wish this message was just the first message returned here because oftentimes you just want to display the first message or maybe if there's another key here that had like first message that would be nice but we have to go through all of this object in the array syntax and just grab the first error here so just do this really quickly so I want the key for that first message so I'm gonna do object not keys so error response not data errors and I want the first one so that's gonna be 0 so that's just gonna be email the string email and now we just wanna set the error message to error that response data errors so we want that key and we want the first field which is just the error message so they did that correctly that should just display the first error message test test password there we go cool and if you want you can clear the password but I'm just gonna leave that and you can obviously polish this up you can add like a loading spinner here and so on so one more time it's login correctly and airlock takes care of setting cookies and we just have to make sure that our apps live on the same domain and set up airlock accordingly and then we can login to our protected routes so yeah I hope that was a good overview of how to use airlock to authenticate your single page applications and I hope this was a good example using view please like comment and subscribe if you haven't already done so thanks for watching guys see you in the next one okay thanks bye [Music]

Channel: Andre Madarang

Views: 55,689

Keywords: laravel airlock, laravel airlock vue, laravel airlock auth, laravel spa auth, vue spa auth, vue single page app, laravel single page app, tailwind ui, tailwind css ui, andre madarang, drehimself, laravel cors, laravel 7, laravel 7 whats new, laravel 7 new, laravel package, laravel sanctum, laravel airlock renamed

Id: D9oIu6jiYLk

Length: 35min 21sec (2121 seconds)

Published: Sat Feb 29 2020