Issue when trying to implement google sign in with callback endpoint protected with Laravel Sanctum

[pratamatama]

Version

module: 5.0.0-1643791578.532b3d6 nuxt: 2.15.8

Nuxt configuration

mode:

• [x] universal
• [ ] spa

Nuxt configuration

  auth: {
    strategies: {
      google: {
        clientId: process.env.GOOGLE_CLIENT_ID,
        codeChallengeMethod: '',
        responseType: 'code',
        endpoints: {
          token: `${process.env.API_URL}/api/auth/google/callback`,
          userInfo: `${process.env.API_URL}/api/user`,
        },
      },
      laravelSanctum: {
        provider: 'laravel/sanctum',
        url: '/auth',
        endpoints: {
          login: { url: '/api/login' },
        },
      },
    },
  },

Reproduction

It might be too long to post the code here since it requires a laravel backend complete with configured sanctum altogether. But here's my component

GoogleSignIn.vue

<template>
  <button
    class="block w-full border border-gray-200 bg-white hover:bg-gray-50 transition-colors duration-300 shadow-sm rounded-lg p-3 px-4 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700"
    @click.prevent="onClick"
  >
    <span class="flex items-center justify-center">
      <!-- logo: google G -->
      <svg
        viewBox="0 0 24 24"
        width="24"
        height="24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)">
          <path
            fill="#4285F4"
            d="M -3.264 51.509 C -3.264 50.719 -3.334 49.969 -3.454 49.239 L -14.754 49.239 L -14.754 53.749 L -8.284 53.749 C -8.574 55.229 -9.424 56.479 -10.684 57.329 L -10.684 60.329 L -6.824 60.329 C -4.564 58.239 -3.264 55.159 -3.264 51.509 Z"
          />
          <path
            fill="#34A853"
            d="M -14.754 63.239 C -11.514 63.239 -8.804 62.159 -6.824 60.329 L -10.684 57.329 C -11.764 58.049 -13.134 58.489 -14.754 58.489 C -17.884 58.489 -20.534 56.379 -21.484 53.529 L -25.464 53.529 L -25.464 56.619 C -23.494 60.539 -19.444 63.239 -14.754 63.239 Z"
          />
          <path
            fill="#FBBC05"
            d="M -21.484 53.529 C -21.734 52.809 -21.864 52.039 -21.864 51.239 C -21.864 50.439 -21.724 49.669 -21.484 48.949 L -21.484 45.859 L -25.464 45.859 C -26.284 47.479 -26.754 49.299 -26.754 51.239 C -26.754 53.179 -26.284 54.999 -25.464 56.619 L -21.484 53.529 Z"
          />
          <path
            fill="#EA4335"
            d="M -14.754 43.989 C -12.984 43.989 -11.404 44.599 -10.154 45.789 L -6.734 42.369 C -8.804 40.429 -11.514 39.239 -14.754 39.239 C -19.444 39.239 -23.494 41.939 -25.464 45.859 L -21.484 48.949 C -20.534 46.099 -17.884 43.989 -14.754 43.989 Z"
          />
        </g>
      </svg>
      <span class="ml-3 pt-1">
        <slot>Login with Google</slot>
      </span>
    </span>
  </button>
</template>

<script>
export default {
  methods: {
    onClick() {
      this.$axios
        .get('/auth/sanctum/csrf-cookie')
        .then((_) => this.$auth.loginWith('google'))
    },
  },
}
</script>

What is expected?

After selecting google account, when the callback request is performed, it should append XSRF-TOKEN to be able to communicate with the server protected with Laravel Sanctum.

What is actually happening?

The callback request is blocked with 419 (unknown status), which indicates the absence of XSRF-TOKEN.

Steps to reproduce

1. Configure Laravel and Sanctum
2. Configure Nuxt
3. Copy paste component snippet above
4. Register the component in any page file
5. Run both app (Laravel & Nuxt)
6. Click the button
7. See the error on the Network tab of devtools

Additional information

Checklist

• [x] I have tested with the latest Nuxt version and the issue still occurs
• [x] I have tested with the latest module version and the issue still occurs
• [x] I have searched the issue tracker and this issue hasn't been reported yet

[pratamatama]

Solved by disabling CSRF verifier in the VerifyCsrfToken class inside Laravel

<?php

namespace App\Http\Middleware;

use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken as Middleware;

class VerifyCsrfToken extends Middleware
{
    /**
     * The URIs that should be excluded from CSRF verification.
     *
     * @var array<int, string>
     */
    protected $except = [
        'api/auth/google/callback',
    ];
}