Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

andreacris's avatar

Laravel sanctum and vue cli not setting cookies

Hi,

I have laravel 8 installed on a remote server and I'm trying to use sanctum to authenticate from vue cli running in localhost. When I post the login form It returns that i'm authenticated but it doesn't set the cookies in browser. Firefox console says: Cookie “XSRF-TOKEN” has been rejected for invalid domain. The same for the cookie "laravel_Session".

My configuration:

VUE

  import axios from 'axios';
  axios.defaults.withCredentials = true;

  export default {
    name: 'Login',

    data: () => ({
      form:{
        email: '',
        password: ''
      },
      dialog: true,
    }),
    methods: {
      login: function(){
        axios.get('http://xxx.xxx.xxx.xxx:7183/sanctum/csrf-cookie').then(response => {
          console.log(response);
          axios.post('http://xxx.xxx.xxx.xxx:7183/api/login', this.form).then(response => {
              console.log('User signed in!');
              return response;
          }).catch(error => console.log(error, response)); // credentials didn't match
        });
      }
    }

  }

LARAVEL ApiController.php

public function login(Request $request)
    {
      try
      {
        $request->validate([
          'email' => 'email|required',
           'password' => 'required'
        ]);
        $credentials = request(['email', 'password']);
        if (!Auth::attempt($credentials))
        {
          return response()->json([
            'status_code' => 500,
            'message' => 'Unauthorized'
          ]);
        }
        $user = \App\Models\User::where('email', $request->email)->first();
        if ( ! Hash::check($request->password, $user->password, []))
        {
          throw new \Exception('Error in Login');
        }
        $tokenResult = $user->createToken('authToken')->plainTextToken;
        return response()->json([
          'status_code' => 200,
          'access_token' => $tokenResult,
          'token_type' => 'Bearer',
          'user_id' => $user->id,
          'user_name' => $user->name,
        ]);
      }
      catch (Exception $error)
      {
        return response()->json([
          'status_code' => 500,
          'message' => 'Error in Login',
          'error' => $error,
        ]);
      }
    }

config/cors.php

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your settings for cross-origin resource sharing
    | or "CORS". This determines what cross-origin operations may execute
    | in web browsers. You are free to adjust these settings as needed.
    |
    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    |
    */

    'paths' => ['api/*', 'sanctum/csrf-cookie'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,


];

Thanks

0 likes
2 replies
rahulkhimsuriya's avatar

config/sanctum.php

'stateful' => explode(',', env(
        'SANCTUM_STATEFUL_DOMAINS',
        'localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,::1'
    )),

.env (NOTE: provide base url with port number)

SESSION_DRIVER=file
SESSION_SECURE_COOKIE=false
SESSION_DOMAIN=LARAVEL_BASE_URL
SANCTUM_STATEFUL_DOMAINS=LARAVEL_BASE_URL,VUE_BASE_URL
andreacris's avatar

Thanks it solved the problem, but now i get that some cookies use 'Samesite' attribute in wrong mode

Please or to participate in this conversation.