nuxt.jsnuxt-auth

In Nuxt Auth, is there any way to intercept socialite callback to append XSRF-TOKEN?


My API is written using Laravel and Sanctum as the authentication handler. I use nuxt-auth to implement the login feature in the frontend. So far, it works.

The problem is, when I try to implement social login using Google, whenever I'm done selecting my google account, it sends a POST request to the callback URL but it doesn't append any XSRF-TOKEN in the header. This make the request fail with error code 419 - unknown status.

To make it clear, please have a look at this screenshot. It was taken after selecting google account.

visual clue

I'm wondering if there is any way to intercept the call to append it manually, if there is, please tell me.

If needed, here is my scripts

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>

nuxt.config.js

axios: {
  proxy: true,
  credentials: true,
  headers: {
    common: {
      Accept: 'application/json, text/plain, */*',
      'X-Requested-With': 'XMLHttpRequest',
    },
  },
},
proxy: {
  '/auth': {
    target: process.env.API_URL,
    pathRewrite: { '^/auth': '/' },
  },
  '/api': {
    target: `${process.env.API_URL}/api`,
    pathRewrite: { '^/api': '/' },
  },
},
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' },
      },
    },
  },
},
router: {
  middleware: ['auth'],
},


Solution

  • 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',
        ];
    }