title: CSRF token mismatch when using nuxt/auth + Laravel Sanctum
body: <p><strong>CSRF token mismatch</strong>. error on register page when I try to login it was working good.</p>
  <p><strong>my register page</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;b-container&gt;
      &lt;b-row&gt;
        &lt;b-col cols=&quot;6&quot; class=&quot;mx-auto&quot;&gt;
          &lt;b-card title=&quot;Register&quot;&gt;
            &lt;b-button variant=&quot;primary&quot; @click=&quot;register()&quot;&gt;Register&lt;/b-button&gt;
          &lt;/b-card&gt;
        &lt;/b-col&gt;
      &lt;/b-row&gt;
    &lt;/b-container&gt;
   &lt;/template&gt;
  
  &lt;script&gt;
    export default {
    auth: 'guest',
    data() {
      return {
          name: &quot;john&quot;,
          email: &quot;john@email.com&quot;,
          password: &quot;123321&quot;
      };
    },
     methods: {
        async register()  {
          const data = {
              'name': this.name,
              'email': this.email,
              'password': this.password
           }
           console.log(data);
           try {
               const res = await this.$axios.post('/register', data)
               console.log(res)
           }
           catch(e) {
               console.log(e.message)
           }
      }
    }
  };
  &lt;/script&gt;
  </code></pre>
  <p><strong>nuxt.config.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>export default {
    // Global page headers: https://go.nuxtjs.dev/config-head
    head: {
      title: 'hello',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { hid: 'description', name: 'description', content: '' }
      ],
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
      ]
    },
  
    // Global CSS: https://go.nuxtjs.dev/config-css
    css: [
    ],
  
    router: {
      middleware: ['auth'],
    },
  
    // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
    plugins: [
    ],
  
    // Auto import components: https://go.nuxtjs.dev/config-components
    components: true,
  
    // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
    buildModules: [
    ],
  
    // Modules: https://go.nuxtjs.dev/config-modules
    modules: [
      // https://go.nuxtjs.dev/bootstrap
      'bootstrap-vue/nuxt',
      // https://go.nuxtjs.dev/axios
      '@nuxtjs/axios',
      // https://go.nuxtjs.dev/pwa
      '@nuxtjs/pwa',
  
      '@nuxtjs/auth-next',
    ],
  
     axios: {
      baseURL: &quot;http://localhost:8000/api&quot;
    },
  
    auth: {
      strategies: {
        'laravelSanctum': {
          provider: 'laravel/sanctum',
          url: 'http://localhost:8000',
          endpoints: {
            login: {
              url: &quot;/api/login&quot;
            },
            logout: {
              url: &quot;/api/logout&quot;
            },
            user: {
              url: &quot;/api/user&quot;
            }
          },
          user: {
            property: false
          }
        }
      },
  
      redirect: {
        login: &quot;/login&quot;,
        logout: &quot;/&quot;,
        home: &quot;/dashboard&quot;
      }
  
    },
  
    // PWA module configuration: https://go.nuxtjs.dev/pwa
    pwa: {
      manifest: {
        lang: 'en'
      }
    },
  
    // Build Configuration: https://go.nuxtjs.dev/config-build
    build: {
      babel: {
        plugins: [
          ['@babel/plugin-proposal-private-methods', { loose: true }]
        ]
      }
    }
  }
  </code></pre>
  <p><strong>Login Page</strong></p>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;b-container&gt;
      &lt;b-row&gt;
        &lt;b-col cols=&quot;6&quot; class=&quot;mx-auto&quot;&gt;
          &lt;b-card title=&quot;Login&quot;&gt;
            &lt;b-button variant=&quot;primary&quot; @click=&quot;login()&quot;&gt;Login&lt;/b-button&gt;
          &lt;/b-card&gt;
        &lt;/b-col&gt;
      &lt;/b-row&gt;
    &lt;/b-container&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    middleware: [&quot;guest&quot;],
    data() {
      return {
        form: {
          email : &quot;john@email.com&quot;,
         password : &quot;123321&quot;
        }
      };
    },
  
    methods: {
      login() {
        this.$auth
          .loginWith(&quot;laravelSanctum&quot;, {
            data: this.form
          })
          .then(response =&gt; console.log(response))
          .catch(error =&gt; console.log(error));     
      }
    }
  };
  &lt;/script&gt;
  </code></pre>
  <hr />
  <p>EDIT: I do have the following error in my network tab devtools.</p>
  <blockquote>
  <p>network tab error xhr.js?b50d:177 POST localhost:8000/api/register 419 (unknown status) &quot;message&quot;: &quot;CSRF token mismatch.&quot;, &quot;exception&quot;: &quot;Symfony\Component\HttpKernel\Exception\HttpException&quot;,</p>
  </blockquote>