Nuxt 3 Authentication with Laravel Sanctum
Playing
04. Laravel Sanctum configuration

Episodes

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

Transcript

00:00
When we set up Laravel Sanctum for authentication between a single page application and our API, it's best to use the single page application mode of Sanctum.
00:10
This has multiple security benefits and also makes it a little bit easier to manage as well, rather than having lots of generated tokens hanging around. Okay. Let's go ahead and get Laravel Sanctum installed in our API project and let's
00:24
configure it, which is a really important part. Okay. We're going to go down to the SPA authentication mode. Just before we do that, let's go ahead and get this installed.
00:33
We can do that with a really simple php artisan install API command. Let's go over to our API project, open up our terminal, and let's go ahead and run this command. Once we've done that, you'll see that a database migration has been published.
00:47
We're going to go ahead and migrate this, although we don't necessarily need the access tokens because we're working with the single page application mode here. Okay. Let's go over to the single page application section of the docs and
00:59
let's go down to see what we need to do. So the first step is configuring our first party domains. Let's go ahead and find out where they live. So we're going to go over to config and Sanctum, which has been
01:09
published when we hit that command. And let's look for the stateful domain section. Now this has an EMV value that we can modify. So what this will do is it will just combine all of the sensible
01:21
defaults here that are together. So let's go over to our EMV file and we'll just put this anywhere in here. Let's put this down the bottom. Now we know that we're working on api.test.
01:31
So we're going to use this and we're going to use the port here as well. So that's the first step. Next up is adding the Sanctum middleware. So we're going to take this stateful API middleware, and we're going to add this
01:43
over to the bootstrap app file within our Laravel project. So let's go down to where we have our with middleware and our callback, and let's go ahead and add that in there next. Okay.
01:53
So next up are cross-origin resource sharing and cookies. This is incredibly important. The majority of errors that you'll get when you're trying to authenticate with an API come from cause errors.
02:05
Let's go ahead and publish the cause configuration file. So let's grab this command and go ahead and paste this in. And let's take a look at the cause configuration file. Now it's published and see what we need to do.
02:16
Okay. So the first thing, the really important part about this is the paths. Anytime we make a request to our API, we're going to need to add a path in here. We're going to be using Laravel Fortify for authentication since this gives us all
02:30
of the login register functionality, the ability to update profile information. So what we're going to need to do in here is as we go, add in any of the paths that Laravel Fortify registers. I'll go ahead and put login in there for now, cause we're going to look at that
02:45
shortly, but we'll come back to this later and add any more. Okay. So the next part of this is supports credentials. We need to enable this.
02:54
Okay. So let's go and have a look at what else we need to do here. We're not going to be using Axios, so we don't need to worry about setting with credentials to true or setting the cross-site request forgery token value
03:05
to true, so we don't need to do anything there. The next most important step is setting our domain for our sessions. So let's head over to EMV and let's search for session domain. You can see that at the moment, this is set to null.
03:19
Now we're working with just the same domain for each of the API and the client, so we can just comfortably set this to api.test. If you're working with subdomains, you're going to need to add a dot just before what you've done here.
03:32
And that will allow that for subdomains too. Let's just keep that at api.test for now. Okay. So we don't need to do anything else here.
03:40
We might need to come back a little bit later to tweak any of the settings, but our configuration on the backend is pretty much ready to go. We can start to try to send requests from our client down to our backend and see what happens.
17 episodes•1 hr 1 min

Overview

Learn how to build a full authentication boilerplate with Nuxt, Sanctum and Fortify.

This course covers everything you need to get started with authentication with Nuxt and Laravel. We’ll start by setting up a Nuxt project and configuring Laravel Sanctum, then add the ability to register, sign in and sign out.

We’ll also cover some TypeScript tips, protecting pages with middleware, and using Vue composables to keep our code tidy.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.