Nuxt 3 Authentication with Laravel Sanctum
Playing
03. Using the same domain

Episodes

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

Transcript

00:00
Before we set up Laravel Sanctum, let's look at a crucial step in getting
00:05
authentication working between both of the client and the API. I put this as a separate episode just because it is such a common mistake when you're trying to authenticate that your API and your client don't match. So hopefully this will help.
00:18
Okay, let's go over to our nuxt.config file and let's set up a custom domain for our client. To do this, we're going to use the dev server option, which is an object. And in here, we're going to provide in the host that we want to use. Now we know that our Laravel project is called api.test.
00:37
Again, whatever you have called that, you just want to match this up inside of this host option under dev server. Once you've done that, go ahead and open up your console, stop npm run dev, and then rerun it.
00:49
And you should now be working on an api.test domain. It doesn't matter that the port is different. That's still going to work. But now we have both of these domains matched up from our client and our API.
01:02
So if we just open up our API here by just running api.test, you can see that we've got our Laravel project set up. Okay, both domains are matching. Really straightforward, but a really important step.

Episode summary

In this episode, we focus on a super important—but easy to overlook—step when setting up authentication between your Nuxt client and your Laravel API: making sure both your client and API run under the same domain.

We start by jumping into our nuxt.config.js file to tweak the dev server settings so that our Nuxt app runs on the same domain as our Laravel API (for example, api.test). This helps prevent authentication headaches down the line, especially when working with cookies and session authentication. The exact setup might be a bit different for you depending on your project, but the key is to have both sides using a matching domain.

Once that's configured, we restart our Nuxt dev server and double check that both projects are running under the same domain (even if ports are different, that's totally fine). It seems like a really basic step, but trust me, it saves a lot of frustration later on! Now we're perfectly set up to move on and actually integrate Sanctum in the next videos.

Episode discussion

No comments, yet. Be the first!