Nuxt 3 Authentication with Laravel Sanctum
This episode is for members only

Sign up to access "Nuxt 3 Authentication with Laravel Sanctum" right now.

Get started
Already a member? Sign in to continue
Playing
08. Authenticating with Fortify

Episodes

0%
Your progress
  • Total: 1h 1m
  • Played: 0m
  • Remaining: 1h 1m
Join or sign in to track your progress

Transcript

00:00
Now that we know that we can send requests down to our backend without
00:02
getting any cause errors, we have a nicer structure, let's get authentication working for login and see the user details come back from our API. To authenticate, we're going to use Laravel Fortify, which is going to provide us with all of the predefined login registration and update
00:20
profile routes that we need. You can use your own, if you want to, there's nothing stopping you from building out as long as a session gets set and your backend, when you log a user in, this will work, but Fortify contains all of this stuff and means
00:33
we don't really need to do much. So let's head over to the installation and get this pulled in. So let's pull over to our project here. I'm going to get rid of this example, login route that we added earlier, just
00:44
because that's going to get in the way. Okay, let's go ahead and install Fortify. Let's go back over to the docs and use the Fortify install command once this is done.
00:53
And once we've done that, we can go ahead and run our migrations. Although we're not going to need the two factor columns just yet. Okay. So now that we've done that, remember over in cores, we added this login endpoint.
01:06
So we've already got that in there and make sure it is in there. Otherwise we're going to get a course error. Okay. So now what we can do is create our user in the database and try and authenticate.
01:17
Just before we do that, let's go over and just tidy up the form that we've got here. This will take a moment, but we'll go ahead and copy and paste this over for the rest of the course. Okay.
01:26
So I'm going to wrap each of these in a wrapper here. And once we've done that, we'll add in a label. So let's go ahead and pull in a label. And this is for the email address.
01:37
Let's hook that up to email and we'll do the same here for password as well. So let's hook this up to password and we're good. Let's also pull these in because we're going to look at validation soon, which we'll output just down here within this wrapper, okay, let's wrap this one.
01:56
And that should be everything we need for a much better structure. Okay. Let's go back to Laravel Fortify really quickly, just to talk about this. So I'm going to go ahead and run php artisan and root list.
02:08
What you'll notice when you do this is you're going to have a bunch of routes registered, like the ability to post through to login, post you to register the ability to reset a password. All of these routes are predefined for you and you can just send
02:21
API requests directly to them. They're registered as web routes, but that doesn't matter. We've added them to our cause. And as long as we do, everything should work.
02:30
Okay. Let's try out sending another request down using our network tab open and let's hit sign in here and see what we get. Okay.
02:38
So we've now got a 422 unprocessable content. That's because we're now hitting that Fortify route, which has some validation in there. So of course, when we pass this down, we don't have a user at the moment.
02:50
So we see an error. These credentials do not match our records. Okay. Let's go ahead and create out a user.
02:56
So we'll just use tinker on the command line for this and let's go and say, user factory create. And let's just pass in any of the credentials that we want to register. So for me, that's my name, my email address, which we are using to sign
03:13
in and also the password as well. So we can just use the Bcrypt helper and pass in any plain text value to have that hashed. Okay.
03:22
Now that we've done that, we should technically be allowed to authenticate. Let's try this request again. Now, before we do that, make sure that over in your application section, under your cookies, wherever that is within your browser dev
03:36
tools, you get rid of these. Once we're authenticated at the moment, we can continue to authenticate. And if we're already authenticated, we're going to get redirected from Laravel Fortify, and that means we're going to see errors.
03:49
So make sure these are cleared out before you try any more network requests. Okay. Let's go ahead and hit sign in. And as you can see, that has now worked.
03:57
Now, by default, this has redirected us over to the homepage. We'll look at that shortly. But as you can see, the request to log in did work. And then over in user, because we already have an API route for our user, this
04:10
is giving us all of the details back. We'll customize this a little bit later. If you're not aware of that, over in your Laravel project, under your route section, this is predefined for you with the Sanctum middleware.
04:23
So we are pretty confident now that we are authenticated within our app. It doesn't look like it at the moment because we're not fetching any details, but we know that we are getting these details back from that API endpoint, which gives us everything we need to know about the user.
04:38
Now, the package that we're using will have taken all of these details and stored them within the user object within the package. We'll look at how to pluck them out later. Let's just really quickly look at configuring this.
04:50
So when we are authenticated, we're redirected to our dashboard. So to do this, once again, we're going to come over and get rid of our cross-site request forgery token, Laravel session, and we're going to go back over to auth and login.
05:04
So let's go back over to our client project, back over to our Nuxt config, and let's configure some things under the Sanctum object. For any redirects you create, we're going to output that redirect object that we saw earlier.
05:17
And then we can choose on login, which we also saw earlier. So we're going to set this to go through to the dashboard when the user signs in. Let's go ahead and try this again and hit sign in. And as you can see, we're redirected over to our dashboard.

Episode summary

In this episode, we're diving into authentication using Laravel Fortify! Now that our backend is set up and CORS errors are gone, it's time to get login working and start pulling through user details from our API.

We kick off by installing Laravel Fortify, which pretty much gives us all the authentication stuff out of the box—login, registration, profile updates, and more. If you want, you can roll your own, but Fortify makes things super easy so we can focus on building the rest of the app.

After updating our backend to use the correct Fortify routes, we clean up our frontend login form structure to make things a little tidier and get ready for validation messages. Then we take a peek at all the auto-registered routes that Fortify sets up for us.

We hit the login route from our frontend and, expectedly, get an error because there's no user yet. So we switch over to Tinker and create a user in the database. With a new user set up, we clear any old cookies from the browser (super important for these sessions!) and try logging in again. This time, it works! We're redirected as expected, and hitting our /user API endpoint returns all the user details correctly.

We wrap up by tweaking the Nuxt config so users are redirected to the dashboard upon login. All set up—authentication is now up and running in our app! In the next episode, we’ll probably look into customizing this further and making the auth flow even smoother.

Episode discussion

No comments, yet. Be the first!