Okay, let's take a look at logging in. If you're building a single page app, you're going to have to make use of a package like Sanctum to log in. Now I already have a video on Sanctum and this video is going to be pretty much the same thing, but we'll go through it together with this Fortify project that I have in place. Before you start, you have to make sure that your front end and your back end live on the same domain. So for this example, we have our back end running on this domain, but I'm going to make use of php artisan serve so we can run it on the localhost domain. So this is an alias for localhost, so let me just grab this and we can replace that.

use of php artisan serve so we can run it on the localhost domain. So this is an alias for localhost, so let me just grab this and we can replace that with localhost. And this should still run, okay? And on the front end, I have a separate project, which is a Vue app. And if I run npm run serve, this app should run on localhost as well, but on a different port, I believe 8080. So there it is, localhost:8080. Let's keep that running and open it here. And we'll go through this later on.

Let's keep that running and open it here. And we'll go through this later on. Again, make sure your two apps live on the same domain. And if this were in production, you can have your front end, say, on the top level domain, say, domain.com and your back end on a sub domain, say, backend.domain.com or something like that. So let's go ahead and install Sanctum. So I'm going to stop this php artisan serve and run it again later. So it's composer require Sanctum, as always, installation, composer require, okay, okay, that's done.

So it's composer require sanctum, as always, installation, composer require, okay, okay, that's done. Let's vendor:publish the service provider that should create the config and some migrations. Okay. Next, we can migrate. Let's go ahead and do that. And it says nothing to migrate because I did this before already, and I had an error and looks like the migration is still in place. But let me just migrate:fresh to make sure everything is migrated correctly. And I believe the one Sanctum adds is this personal tokens one.

But let me just migrate fresh to make sure everything is migrated correctly. And I believe the one Sanctum adds is this personal tokens one. Okay. Next is to add this middleware to our API middleware group in app/Http/Kernel.php. Okay. Let's do that. HttpKernel. And it's added to the API middleware. Okay. And what's next?

features here. But we are interested in the single page application. Okay. So there's more set up here. And this is what I said earlier, both apps front end and back end have to live on the same domain. And it's localhost in our case for dev. Next is this stateful option. So that should be in the Sanctum config. So for stateful here, it's right here.

So that should be in the sanctum.php config. So for stateful here, it's right here. And you can read the description here. But basically, this has to define where your front end lives. So this is a default, but I'm going to put it in our .env file. Let's put it underneath the session stuff. And let's put what's what's in the default. So back here, grab all of these. So you should put your dev domains and also your production domains in here. And in our case, we do have to add something because our front end lives on localhost

So you should put your dev domains and also your production domains in here. And in our case, we do have to add something because our front end lives on localhost:8080, host 8080 and comma separated. And let me just put a comment here where your front end lives. Okay. Save that. What's next? Next is the middleware, which we did already. Okay. Next is configuring CORS.

Okay. Next is configuring courses. So let's go ahead and do that. There's a course config. And we have to do a few things here. We have to add support credentials. So set that to true. And for the paths, we have to add two new paths here, which are already available because we have Fortify installed. And that's the login and the logout route.

we have Fortify installed. And that's the login and the logout route. Okay. And there's one more thing we have to do. So it says for Axios, we have to make sure to set the with credentials options, which we'll do when we're working on our Vue app. And the last thing we have to do is set this domain key, which is in config/session.php. So let's go to that config/session.php. Let's look for domain. And you can see by default, it's set to null, but we have to set it to the domain of our

Let's look for domain. And you can see by default, it's set to null, but we have to set it to the domain of our front end and our back end. So let's set that. And if this were in production and our apps lived on separate domains, for example, like I said earlier, the back end lived on a subdomain, then we can add a dot in the front and then the domain name. So like that. But in our case, since we're just using localhost on different ports, we can just do localhost. Okay.

But in our case, since we're just using localhost on different ports, we can just do localhost. Okay. So that should be all the setup we need for our front end. So now let me run this app using php artisan serve to make sure it's on localhost. Okay. And let's go to that. This is it. localhost:8000. And let me just register a new User so we can use that to test login from our front end application.

And let me just register a new User so we can use that to test login from our front end application. And this back end stuff should still work the same. So let me just make a new User. Okay, let's go ahead and register. And that still works like it did before. Okay. Now, since our back end is set up, let's go ahead and set up our front end. So let me just go over what I have here for boilerplate. My view app is behind here.

So let me just go over what I have here for boilerplate. My view app is behind here. I have the home view here, which has the login form. We have some state for email and password. Here is that state right here. It's empty by default. And then I have a login method on submitting the form. And all this is doing is alerting what the user typed in for email and password and then pushing to the dashboard route. And that dashboard only has this.

pushing to the dashboard route. And that dashboard only has this. And this is where I want to show the logged in User's information. So let's go ahead and work on this. So back to our home route and back to the docs. See here. So first thing we want to do is make a get request to this endpoint. And this will set up our CSRF protection and generate a cookie for us. So let's do that. Let me comment this out.

So let's do that. Let me comment this out. Actually, I have to import Axios first, which I already have installed. So let me just paste in some code here. So I'm importing Axios. I'm setting the withCredentials option like it said in the documentation. And I'm also setting the baseURL to our backend. So that's localhost:8000. Obviously, this will change for production. So now let's go ahead and just console.log the response here.

And let's check the console. We do get a 204, which is a successful response. So now these cookies should set up the CSRF token validation correctly for us. So now back to the docs, we can now make an endpoint request or a request to the login endpoint, which is already available. And since we have this setup, then it should pass through those cookies. And then we should be able to log in successfully. So let's go ahead and try that. Back here, instead of console.log, let's go ahead and make that request axios. It's a POST request to the login route.

Back here, instead of console logging, let's go ahead and make that request axios. It's a POST request to the login route. So let's do that. And we have to pass in the email. And we have saved for that and a v-model on that. So it's this.email, save the password. And then for the response, let's do .then, response. And I want to redirect to the dashboard. So I have that up here already. And just paste that in.

So I have that up here already. And just paste that in. Okay. And for the error case, let's catch the error. And let's do, let's just console.log for now, error.response. And we'll test out that case first. So this should refresh automatically. Let me just get rid of the cookies. So it's starting from scratch. And let's take a look at our console here.

So it's starting from scratch. And let's take a look at our console here. And let's put in incorrect credentials and let's see if we get the correct response. Okay. So this should not exist. And we do get the correct 422 response. If you look at this, we have the data or the errors for each of the fields. There it is. But I'm just going to spit out this generic error here. So let's do that as an alert, alert, error.response.data.message.

But I'm just going to spit out this generic error here. So let's do that as an alert, alert, error.response.data.message. Okay. And let's try that again. Some gibberish. And there we go. Okay. Now, let's try logging in with a User that exists. And let's see if we get redirected to the dashboard. And we do.

And let's see if we get redirected to the dashboard. And we do. Cool. So now our cookie is valid and we should be able to make requests to protected endpoints. So let me show you what I mean. Back to our Laravel app. Let's go to routes/api.php. And there's an example route here, which is protected, but we have to make one change. Instead of auth:api, we do auth:sanctum for the middleware. And save that.

Instead of auth API, we do auth sanctum for the middleware. And save that. Back to our frontend. Let's go to the dashboard view. Actually, let me just copy this stuff, because we're going to make use of Axios again. Let's paste it in here. And let's see if we can hit that endpoint. So let's make a mounted hook here. And let's make a request, axios.get. The endpoint is /api/user.

And let's make a request, axios.get. The endpoint is /api/user. And then let's just console.log the response and see if we get the user's information. Yes. And console.log response. Okay. See if this works. Let's just refresh. And we do get it right there. 200.

And we do get it right there. 200. And there is the User information. Cool. So I just want to output the or one of the User's pieces of information here. So let's do that. Let's make some state here. Let's just output the User's email address. So we'll return an object. email is empty by default.

So we'll return an object. email is empty by default. When we return, let's go ahead and set that piece of state. This email equals response.data.email. And let's just put something up here for the email. email. And let's just say email here. Okay. This hopefully should work. And it does.

This hopefully should work. And it does. Cool. So now let's add logout. And all we have to do is make a POST request and then redirect. So let's do that quickly. Let's make a button here. Say logout. Let's make a method. Click.

Let's make a method. Click. logout. Let's make a methods key down here. methods. logout. And we just have to make a POST request. So let me grab this. Paste it in here. It's a POST request to /logout.

Paste it in here. It's a POST request to /logout. And that exists already because we have Fortify installed. And all I want to do is redirect back to the homepage. So let me just grab that code for redirecting. And we are redirecting back to the homepage. And now if I did this correctly, I should be able to logout. And I am. That should invalidate the cookie. So now let me just clear this.

That should invalidate the cookie. So now let me just clear this. If I try to go to the dashboard, that should result in an error because we are no longer logged in. And it does. Cool. 401 Unauthorized. So that's a quick example of using Sanctum together with Fortify to authenticate your users for your single page apps. In the next video, we'll take a look at authenticating non-browser apps like mobile apps.