Laravel Sanctum authentication with Nuxt on Windows 10

Ok, so after few days of smashing my head over the keyboard, I finally figured out how to configure my development environment for working with Laravel Sanctum, Nuxt and Nuxt Auth on Homestead Windows10.

I installed Laravel on Homestead, and I installed Nuxt directly on my Windows machine. Laravel will run under http://api.myapp.pro while Nuxt will run under http://myapp.pro:3000

Install Laravel on homestead, as you would normally do and serve it from a subdomain (ex: api.myapp.pro). I prefer to use .pro domain extensions instead of .app, .test or .dev. It's a personal preference, and I haven't encountered any errors so far.

In your Homestead.yml file set:

folders:
	- map: c:/path/to/myapp
	  to: /home/vagrant/code/myapp

sites:
	- map: api.myapp.pro
	to: /home/vagrant/code/myapp

Inside your hosts file (for Win10 is under C:\Windows\System32\drivers\etc) set the following:

127.0.0.1 myapp.pro
192.168.10.10 api.myapp.pro

Run the comand to provision Vagrant (vagrant up --provision), log in the vagrant box (vagrant ssh) and navigate to your project path (cd code/myapp). Install Laravel Fortify and Laravel Sanctum and follow the documentation.

$ composer require laravel/fortify
$ php artisan vendor:publish --provider="Laravel\Fortify\FortifyServiceProvider"
$ php artisan migrate
$ vendor:publish

Add App\Providers\FortifyServiceProvider class under providers array in config/app.php.

Now install Sanctum

$ composer require laravel/sanctum
$ php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
$ php artisan migrate

Add EnsureFrontendRequestsAreStateful class to api array inside app/Http/Kernel.php file, place it at the top of the list.

In the cors.php file, add sanctum/csrf-cookie inside the paths array (the api/* is already there). Also here you will add all other auth (web) paths (login, registration, logout).

Inside your .env file, set the following:

SESSION_DRIVER=cookie
SESSION_LIFETIME=940
SESSION_DOMAIN=.myapp.pro
SANCTUM_STATEFUL_DOMAINS=myapp.pro:3000

Notice the dot . in front of .myapp.pro on the SESSION_DOMAIN variable. This will allow passing cookies from your domain (myapp.pro) to your subdomain (api.myapp.pro).

Inside the routes/api.php, set the Route::middleware to auth:sanctum. After login, nuxt-auth module will access this route to fetch the user data.

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

After you have finished setting up Laravel, turn back to your Windows terminal (I usually use the integrated terminal of VSCode or Git Bash). Install nuxt wherever you want inside your hard drive by running npx create-nuxt-app my-nuxt-app. Go inside your project folder and install the nuxt auth module and axios (if you haven't installed it yet with create-nuxt-app).

$ npm install --save-exact @nuxtjs/auth-next
$ npm install @nuxtjs/axios

Now, inside your nuxt.config.js file, set the following configuration:

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    '@nuxtjs/auth-next',
  ],

  // Auth strategy
  auth: {
    strategies: {
      'laravelSanctum': {
        provider: 'laravel/sanctum',
        url: 'http://api.myapp.pro'
      }
    }
  },

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    baseUrl: 'http://api.myapp.pro',
    credentials: true
  }

Set up your login page ...aaand you're done!

// login.vue
<template>
  <div>
    <form @submit.prevent="login">
      <input
        id="email"
        v-model="form.email"
        type="email"
        name="email"
        placeholder="Email"
      />
      <input
        id="password"
        v-model="form.password"
        type="password"
        name="password"
        placeholder="Password"
      />
      <button type="submit">Login</button>
    </form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        email: '',
        password: '',
      },
    }
  },
  methods: {
    async login() {
      try {
        await this.$auth
          .loginWith('laravelSanctum', {
            data: this.form,
          })
      } catch (e) {}
    },
  },
}
</script>

Inside your nuxt project, run npm run dev and navigate to http://myapp.pro:3000 instead of localhost:3000.

Now, if you are lucky, you will be able to register, login and authenticate in your Laravel app using NuxtJS :) Anyway, if you try to login in incognito mode in Chrome, it might not work.