Authentication with Laravel Sanctum and Vue
Playing
03. Running on the same domain

Episodes

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

Transcript

00:00
One of the crucial parts about working with Laravel Sanctum is we need
00:03
to be working on the same domain. We can have sub domains, but at the moment within our local development environment, when we go ahead and run npm run dev on our view project, you can see that we by default get a local host here with this port.
00:20
Now for our actual project, this, depending on what you're using to serve this is likely going to be different. I'm using Laravel herd, or if you're using something like Laravel valet, you'll have a dot test domain with the API.
00:34
Now this might seem a little bit odd, but effectively we want to take our client and match up to this domain locally. So this is technically going to be the API domain, but at least we can test it while we are working locally.
00:48
How do we do this? Well, what we're going to do is head over to the editor and under our config file within our client project, we're going to come down here to the bottom of our config here, and we're going to provide the server option.
01:06
Inside of here, what we can do is choose which host we want this to run on. So we want this to run on Laravel Sanctum view API dot test. And although this is our client, we can now access this with that specific port in the browser.
01:22
And even though the port is different, Laravel Sanctum is still going to work. So now that we've done this, we're going to go ahead and just close this off and rerun it just in case. And you can see now it's available on this domain.
01:33
So now at least in a local development environment, the domains are exactly the same. So really, really important step. Otherwise nothing is going to work.

Episode summary

In this episode, we focus on one of the key requirements for getting Laravel Sanctum authentication working properly: making sure that both our frontend (the client) and backend (the API) are running on the same domain.

We start by talking about how, in local development, the frontend (for example, using Vue) often runs on localhost with a random port, while the backend might use something like Laravel Herd or Valet, which uses a custom domain like your-app.test.

The main task here is to configure our client-side project to use the same base domain as the backend API, even if the port numbers are different. We walk through how to change the dev server configuration in our project's config file so that the client runs on the matching .test domain locally.

After making this change, we restart the frontend server and confirm that it's accessible via the new domain. This setup is very important—if the domains don’t match, Sanctum authentication simply won’t work! This episode gets us past this common stumbling block and sets us up for smooth auth testing moving forward.

Episode discussion

No comments, yet. Be the first!