Laravel Sanctum Nuxt User Registration Error

Question

I have a Laravel API and I implemented authentication with Laravel Sanctum and I am using homestead . I am trying to connect my Nuxt SSR frontend. Currently, I am experiencing an issue that I don't seem to understand and I have searched but can see any similar issue anyway.

The issue is that I can't even register a user from my Nuxt application. I get CSRF token mismatch error when I make a request to the register route.

• API domain: api.myapp.test
• Frontend domain: myapp.test:3000

Sending a POST request to http://api.myapp.test/v1/register return a CSRF token mismatch error.

Is there something I am not getting right?

Below are my Laravel configs:

cors.php

return [
    'paths' => ['v1/*', 'sanctum/csrf-cookie'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,

];

session.php

[
   'domain' => '.myapp.test',
]

sanctum.php

return [
    'stateful' => [
        'myapp.test:3000', 'api.myapp.test'
    ],

];

I am using nuxt/axios in my frontend. nuxt.config.js

{
// Even if I remove the credentials property, is still does not work
  axios: {
    credentials: true
  },
}

I am really confused because I don't get the error when I make the same request from Postman .

Answer 1

I propose you to use @nuxt/auth-module it has build in strategy for Laravel Sanctum. And as mentioned in docs:

NOTE: It is highly recommended to use proxy to avoid CORS and same-site policy issues:

{
  axios: {
    proxy: true,
    credentials: true
  },
  proxy: {
    '/laravel': {
      target: 'https://laravel-auth.nuxtjs.app',
      pathRewrite: { '^/laravel': '/' }
    }
  },
  auth: {
    strategies: {
      'laravelSanctum': {
        provider: 'laravel/sanctum',
        url: '<laravel url>'
      }
    }
  }
}

Then after manual registration through your controller, you can login user immediately using:

this.$auth.loginWith('laravelSanctum', {
  data: {
    email: '',
    password: ''
  }
})

Answer 2

It isn't clear from your question wether or not you're calling the necessary '/sanctum/csrf-cookie' endpoint before you're attempting to call your registration end point. If you're not, great news— the fix is really simple! Just send a GET request to the csrf cookie end point before attempting the others, and you should find your CSRF errors resolve.

Docs here:

https://laravel.com/docs/8.x/sanctum#csrf-protection

EDIT: Postman works, because CORS is a browser based protocol. Postman isn't a browser, and doesn't care at all if the server responds with or without the otherwise appropriate CORS headers.