I get a status error code when I try to access the data after logging in.
I am getting the XRSF token when someone attempts to log in but can't the user data back.

Below is my useAuth.js code

```
import axios from 'axios'

export default function useAuth() {

    const login = async (credentials) => {
        await axios.get('/sanctum/csrf-cookie') // ! STATUS CODE - 204 - Ok

        await axios.post('/login', credentials) // ! STATUS CODE - 200 - Ok

        let response = await axios.get('/api/user')
        console.log(response)                   // ! STATUS CODE - 401 - UNATHORIZED
    }

    return {
        login
    }

}

```

My routes/api.php code

```
<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

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

```

My .env

```
SESSION_DRIVER=file
SESSION_LIFETIME=120

SANCTUM_STATEFUL_DOMAINS=localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,::1

```

I tried to change SESSION\_DRIVER to cookie but brings the same result as file

Main App.vue code

```
<template>
  <form v-on:submit.prevent="login(form)">
    <div>
      <label for="email">Email</label>
      <input type="text" name="email" id="email" v-model="form.email">
    </div>
    <div>
      <label for="password">Password</label>
      <input type="password" name="password" id="password" v-model="form.password">
    </div>
    <div>
      <button type="submit">submit</button>
    </div>
  </form>
</template>

<script setup>

  import { reactive } from 'vue'
  import useAuth from './auth/useAuth'

  const { login } = useAuth()

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

</script>

```

Anyone with an idea on how I can solve the problem

Thank you