Using Laravel Sanctum/Airlock with NuxtJS

⚡️ Latest Posts & Comments
1

Originally published at: Using Laravel Sanctum/Airlock with NuxtJS - Server Side Up

Want to set up the new Laravel Sanctum authentication package with NuxtJS and the NuxtJS auth module? Here’s how we got it working!

2

We migrated this post from Disqus to Discourse. Here is a screenshot of the previous comments for reference:

Screenshot_2021-05-05 Using Laravel Sanctum Airlock with NuxtJS - Server Side Up(1)
Screenshot_2021-05-05 Using Laravel Sanctum Airlock with NuxtJS - Server Side Up(1)1596×8552 531 KB

3

In my case, I am running the Nuxt frontend and laravel backend on my local pc(windows 10).
Now, I faced some errors such as cors error of wildcard *, 401 unauthorized error.
How can I solve this?

4

These are pretty common since Laravel Sanctum has a million settings. Here are some places to check:

  • Add the /sanctum/csrf-token to your CORS file
  • Set your SANCTUM_STATEFUL_DOMAINS to the right URL of your frontend in Laravel env.
  • Set SESSION_DRIVER=cookie in Laravel ENV
  • Set SESSION_DOMAIN={your dev domain}
  • Apply \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class middleware to your endpoints.
  • Added supports_credentials to true in your Laravel cors.php file.
  • Added withCredentials: true in your nuxt.config.js for axios.

Also, are you using the auth-next plugin with NuxtJS: Setup - nuxt auth docs? It’s much better for Laravel Sanctum.

Hope this helps! If you have any specific errors, let me know and I can try to further debug.

5

My settings are same with which you suggested.

* Set SESSION_DRIVER=cookie in Laravel ENV
Only this is missing, so I updated it with your suggestion.
But it still returns 401 error.

image
image1657×407 34.9 KB

6

What it looks like to me is that you hare requesting the IP address of your API instead of having it on either a different port or a different URL. When setting cookies with Laravel Sanctum, I believe they need to have some sort of domain associated with it whether it’s http://localhost or a dev environment.

7

If I use localhost, it returns same issue.

image
image1919×763 82.7 KB

8

What do you have set for your auth strategy within your login method? It should be laravelSanctum.

If you can share any of your config files without sharing sensitive data, that can help me diagnose what’s going on.

9

Dear Dan. If you were writing this tutorial again in October 2021 what would be different particularly from the Sanctum side. Well by this I am perhaps saying (without saying) that you may want to consider writing inserting parts that address any changes that may exist. One last thing, what about a YouTube Video

10

@selase ,

The major change I’d make would be regarding using the official Sanctum plugin provided by NuxtJS. It takes care of the heavy lifting and helps streamline the authentication process.

I’ll think about a YouTube video and keep it on my radar!