Using Laravel Sanctum/Airlock with NuxtJS

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!

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

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?

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.

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.

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.

If I use localhost, it returns same issue.

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.