Laravel Sanctum: Login fails using Fetch API

[NK0D1NG]

Hi there,

I am trying to get the login flow of my web app working. The web app is written using Nuxt 3 for the frontend (SPA) running on http://localhost:3000 and Laravel as the backend running on http://localhost.

Laravel specific info:

• Laravel Framework 9.17.0
• PHP 8.1.6

Because Nuxt 3 is using the fetch API and axios is currently not available for Nuxt 3 I am trying to get the login flow with Laravel Sanctum and the fetch API to work.

I am calling the Laravel Backend using a composable function like this:

export const useLogin = async (email, password) => {
  const config = useRuntimeConfig()
  const tokenResponse = await $fetch(config.baseURL + '/sanctum/csrf-cookie', {
    method: 'GET',
    credentials: 'include'
  })
  const token = getCookie('XSRF-TOKEN')
  console.log(token)
  const loginResponse = await $fetch(config.baseURL + '/login', {
    method: 'POST',
    headers: {
      'X-XSRF-TOKEN': token,
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: {
      "username": email,
      "password": password
    }
  })
}

Then I call it in a LoginForm-Component:

<template>
    <form @submit.prevent="login()" class="bg-blue-500 flex flex-col rounded-xl p-4 text-white">
        <h1 class="text-center mb-4">Login</h1>
        <label for="fname">Email</label>
        <input v-model="form.email" class="rounded-md h-8 mb-4 text-black" type="text" id="email" name="email"><br><br>
        <label for="password">Password</label>
        <input v-model="form.password" class="rounded-md h-8 mb-4 text-black" type="password" id="password" name="password"><br><br>
        <button class="rounded-md bg-orange-700 cursor-pointer" type="submit">Login</button>
    </form>
</template>

<script setup>

const form = {
    email: '',
    password: ''
}

function login() {
    useLogin(form.email, form.password)
}

</script>

The problem is that I get 419 errors (csrf mismatch) back from the login route although the X-XSRF-Token is set in the request headers (like described in the Laravel Sanctum docs):

Is it possible that Laravel Sanctum handles the Header name case-sensitive and so it can't find the token? As far as I know the fetch API always sends header names in lowercase and there is no way to change this behaviour.

The cookie is set correctly by the Laravel Backend:

The cookie data seems to be OK, too (response from a request I made some minutes ago):

I also tried setting the correct timezone in config/app.php and I also changed the timezone inside the docker container (laravel sail) but the cookies still have the same data values and expiration times so that seems to be OK.

These are the Sanctum values inside my .env:

SANCTUM_STATEFUL_DOMAINS='localhost,localhost:3000,127.0.0.1,127.0.0.1:3000,127.0.0.1:8000,::1'
SESSION_DOMAIN=.localhost

I don't know how to investigate any further.

I already wrote the problem details over at stackoverflow - so sorry for cross-posting but I did not get a working answer yet and so I give it another try over here. Because mostly all examples use axios or API tokens I am stuck with the problem for days now.

I'd be happy for any help!

Update

• I tried again a complete fresh installation with Laravel 9 + Laravel Sanctum and Fortify - No success (same config as above)
• I tried again a complete fresh installation with Laravel 9 + Laravel Breeze (API) - No success (same config as above)

For me this looks like Fetch API is the problem here, because the request seems to be blocked by Laravel Sanctum anytime with 419 (csrf token mismtach).

Anyone has any clue how to fix this? Or is it a bug?

[adityadees]

have you tried removing the . before localhost ?
try using this instead SESSION_DOMAIN=localhost

[NK0D1NG]

Does not make any difference

[danpastori]

I just got this working today and had the same scenario. I believe the missing piece is you need to reference your X-XSRF-TOKEN as: useCookie('XSRF-TOKEN').value with the .value since it's Vue 3. Below is my code and config that works:

My Stack is:

• API: Laravel 9 with Breeze (fresh install)
• Frontend: Nuxt 3 RC 3

ENV

APP_URL=http://localhost:8000
FRONTEND_URL=http://localhost:3000
SESSION_DRIVER=cookie
SESSION_DOMAIN=localhost

API Users Controller

<?php

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

class UsersController extends Controller
{
    public function __construct()
    {
        $this->middleware('auth:sanctum');
    }

    public function show( Request $request )
    {
        return $request->user();
    }
}

Registration (Nuxt 3)

<script setup>
const config = useRuntimeConfig().public;

const form = reactive({
    name: '',
    email: '',
    password: '',
    password_confirmation: ''
});

function register(){
    $fetch('http://localhost:8000/sanctum/csrf-cookie', {
            headers: {
                'Accept': 'application/json'
            },
            credentials: 'include'
        })
        .then( function( response ) {
            this.submitRegistration();
        }.bind(this));
}

function submitRegistration(){
    $fetch( 'http://localhost:8000/register', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-XSRF-TOKEN': useCookie('XSRF-TOKEN').value,
        },
        credentials: 'include',
        body: form
    } )
    .then( () => {
        navigateTo('/login', {
            query: {
                registered: 'success'
            }
        })
    })
}
</script>

Login Nuxt 3

<script setup>
const form = reactive({
    email: '',
    password: ''
});

function signIn(){
     $fetch('http://localhost:8000/sanctum/csrf-cookie', {
            headers: {
                'Accept': 'application/json'
            },
            credentials: 'include'
        })
        .then( function( response ) {
            this.submitLogin();
        }.bind(this));
}

function submitLogin(){
    $fetch( 'http://localhost:8000/login', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-XSRF-TOKEN': useCookie('XSRF-TOKEN').value,
        },
        credentials: 'include',
        body: form
    } )
    .then( () => {
       
    })
}
</script>

User Request

function loadUser(){
    $fetch('http://localhost:8000/api/v1/user', {
        headers: {
            'Accept': 'application/json',
            'X-XSRF-TOKEN': useCookie('XSRF-TOKEN').value,
            'X-Requested-With': 'XMLHttpRequest'
        },
        credentials: 'include'
    })
    .then( function( response ) {
        console.log( response );
    }.bind(this));
}

Other thing to note, make sure in your .env if you are using a port on the front end (i.e: 3000) ADD IT TO YOUR SANCTUM STATEFUL DOMAINS! Should be by default after a fresh Breeze install, but that one got me in the end too.

Hope this helps!

[NK0D1NG]

Hey @danpastori,
interesting that my Error was related to something else (see my answer below). Maybe the useCookie-method decodes the value under the hood so it works?

[danpastori]

@NK0D1NG That is weird. That might be something for the Nuxt (or h3) team. Just a guess, but I wonder if getCookie takes the raw cookie returned from the server (url encoded) where useCookie takes what is set on the server? The h3 docs doesn't have a reference to getCookie which is bizarre: https://www.jsdocs.io/package/h3#package-functions.

Glad you got it working though! A lot of moving parts in this workflow but it's 🔥 once it starts to work

[NK0D1NG]

Hey there,
I misinterpreted my error logs and found that there is another small difference using Axios and Fetch API:
Axios seems to decode the X-XSRF-TOKEN whereas Fetch API does not.

So this example token is sent by Fetch API:
eyJpdiI6IkRScW9GNGtIbndWWFdKbzRiN0VWVkE9PSIsInZhbHVlIjoiNUNuQStiZGt0Y3l0cXhReThHSEJxbCsxRmZvbFFHKzhQV3ArSlg0cjVQVm5qSDZoQ3ZsSERnUTREUXRvczdMOHhYSHFqbm5FUjd2dFpGMlN4bU81NWJ5SWpmem5BQi9vRmJBRFZZWmFSZFlqcHNxbTZ5N1Z0cGJzSmMwcUFRaXUiLCJtYWMiOiI4MjM1MTQ2ODExNzhlY2ExNDk1NDhhOWEwNzE0OWJlMzViOGQxNDJhMTY0YTI2NzYwMThjMzQ5ODVmMDYwMjk1IiwidGFnIjoiIn0%3D

And this example token is sent by Axios:
eyJpdiI6IisydDZOOFJoREp5ZnZudUtjRk1teXc9PSIsInZhbHVlIjoiV1dQdjJDZlNrcW43Zlg4TW1yRFdjOVJWVnJkaC9CZndxejJLQ3JEUkJIRXJ3Z2pNb2pxSUJYN0Y2RDBxZ1hKd01mNHF6empsRkFIeEFOSkJKbi8vT0hWOFBYMDdlMkZybzBZdllJQlBFa1lHTytZd1E0aU9vL2pOM1ZRZWwxV0ciLCJtYWMiOiI3NTczZGJiMjg5MWZmOTUzMjhiMTZhNjAxM2ZiZmVjODVjYjc2MGRiMGJkMTFkOGYzOWQzYWQ5MjI5YWIwOTA5IiwidGFnIjoiIn0=

There is a very small difference at the end of the token string (= vs. %3D).

Laravel itself sends the Token value URIEncoded (with %3D) but seems to expect the token with = at the end.

There is nothing about that in the docs but this issue kept me searching for days and was not that obvious.

I changed my code to:

export const useLogin = async (email, password) => {
  const config = useRuntimeConfig()
  const tokenResponse = await $fetch(config.baseURL + '/sanctum/csrf-cookie', {
    method: 'GET',
    credentials: 'include'
  })
  const token = decodeURIComponent(getCookie('XSRF-TOKEN')) // <---- CHANGED
  console.log(token)
  const loginResponse = await $fetch(config.baseURL + '/login', {
    method: 'POST',
    credentials: 'include',
    headers: {
      'X-XSRF-TOKEN': token,
      'Accept': 'application/json, text/plain, */*',
      'Content-Type': 'application/json',
      'X-Requested-With': 'XMLHttpRequest'
    },
    body: {
      "email": email,
      "password": password
    }
  })
}

And now the login is working using the standard Fetch API.

I hope this helps someone else debugging their login flow.

Greetings.

[sarath-aj]

decodeURIComponent() made it work, you saved me hours of headache, than you

[imycroft]

thanks for the solution, bro you are amazing!

[dogatonic]

@NK0D1NG Thank you for this post, the answer, and the effort. I found this SO helpful, after many searches, and peeks at other sources.