Laravel Sanctum Angular Authentication 419 error code

Question

I'm trying to setup an authentication system using Laravel Sanctum and Fortify for the back-end and Angular for the front-end.

The front-end is running on localhost:4200
the back-end is running on: localhost:8000

I followed this tutorial for the common mistakes and set the .env file accordingly so it looks like this:

SESSION_DRIVER=file
SESSION_LIFETIME=120
SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost:4200
FRONTEND_URL=http://localhost:4200

and so is my cors.php configuration:

<?php

return [

  

    'paths' => ['*'],

    'allowed_methods' => ['*'],

    'allowed_origins' => [env('FRONTEND_URL', 'http://localhost:4200')],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,

];

For logging in my users I'm using this angular service function:

options = {
    headers: new HttpHeaders({
      Accept: 'application/json',
    }),
    withCredentials: true,
  }

login(email: string, password: string): Observable<any> {
    return this.http
      .get(this.baseUrl + '/sanctum/csrf-cookie', this.options)
      .pipe(
        switchMap(() =>
          this.http.post(
            this.baseUrl + '/login',
            { email, password },
            this.options
          )
        )
      );
  }

the problem is that when I try to login I get back a 419 erro code saying that the CSRF token mismatches.

taking a look at the cookies inside the browser's console the list is empty so no cookies are passed even if the request to /csrf-cookie is successfull

What am I doing wrong her? is it the angular service or my back-end config?

Armando_pagano · Accepted Answer · 2023-01-21 16:04:06Z

1

I finally solved the problem after asking on every possible source, let's talk about it:

Looks like that specifically on MacOS, if you try to send a request from localhost:4200 Origin and Refero headers will not match the Host header for some reason

i solved this changing every localhost occurrence in my Laravel .env and config files and then going to 127.0.0.1:4200 inside the browser instead of localhost:4200

it's a bit weird to explain but it makes requests come to the same source even if the localhost keyword should mean 127.0.0.1 IP by default

hope this will help someone

answered Jan 21, 2023 at 16:04

Armando_pagano

14810 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Laravel Sanctum Angular Authentication 419 error code

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related