CSRF token mismatch Laravel sanctum and Angular http

Question

I have been trying to implement Laravel sanctum, but I am having this error "CSRF token mismatch" even though I followed everything that is said in the Laravel Sanctum documentation

cors.php config file

'paths' => [
    'api/*',
    'login',
    'logout',
    'sanctum/csrf-cookie'
],
'supports_credentials' => true,

kernal is added as per the documentation, so not wasting space by adding its code here

.env file

SESSION_DRIVER=cookie
SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost

I am using Angular 9 as my frontend here

This is my interceptor

request = request.clone({
    withCredentials: true
})

This is how I send the request to Laravel

this.http.get<any>(url('sanctum/csrf-cookie')).subscribe(() => {
     this.http.post<any>(url('login'), { this.username, this.password })
         .subscribe(success => console.log(success), error => console.log(error))
})

Once the first route is hit I can confirm the creation of cookies, but the issue is with the second route ('/login')

Muhammad Umair · Accepted Answer · 2021-06-07 13:19:39Z

16

I was able to resolve this issue by adding http:// before localhost in config/sanctum.php

From this

'stateful' => explode(',', env(
        'SANCTUM_STATEFUL_DOMAINS',
        'localhost,127.0.0.1'
)),

To this

'stateful' => explode(',', env(
            'SANCTUM_STATEFUL_DOMAINS',
            'http://localhost,127.0.0.1'
    )),

answered Jun 7, 2021 at 13:19

Muhammad Umair

6911 gold badge8 silver badges19 bronze badges

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

Comments

CleanCode · Accepted Answer · 2020-04-06 16:18:54Z

7

You need to send x-csrf-token in the header, (Angular includes it automatically only in relative URLs not absolute)

You can create an interpreter to do this, something like this should work:

import {Injectable} from '@angular/core';
import {
  HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpXsrfTokenExtractor
} from '@angular/common/http';

import { Observable } from 'rxjs';

@Injectable()
export class HttpXsrfInterceptor implements HttpInterceptor {
  headerName = 'X-XSRF-TOKEN';

  constructor(private tokenService: HttpXsrfTokenExtractor) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    if (req.method === 'GET' || req.method === 'HEAD') {
      return next.handle(req);
    }

    const token = this.tokenService.getToken();

    // Be careful not to overwrite an existing header of the same name.
    if (token !== null && !req.headers.has(this.headerName)) {
      req = req.clone({headers: req.headers.set(this.headerName, token)});
    }
    return next.handle(req);
  }
}

answered Apr 6, 2020 at 16:18

CleanCode

3842 silver badges16 bronze badges

1 Comment

Luis Alfredo Serrano Díaz Over a year ago

How can I use that in my HttpClient post request?

Serdar · Accepted Answer · 2022-02-09 11:09:18Z

2

I have a similar problem in my case but only some users are having this problem. I solved my problem by changing SESSION_DOMAIN to .localhost in the session.php file under the config folder.

answered Feb 9, 2022 at 11:09

Serdar

1001 silver badge5 bronze badges

Comments

Ayenew Yihune Demeke · Accepted Answer · 2020-07-31 07:07:34Z

1

My problem was that I was accessing the api on port 8001. It worked when I add it (127.0.0.1:8001) to 'stateful' in config/sanctum.php.

answered Jul 31, 2020 at 7:07

Ayenew Yihune Demeke

1,27715 silver badges22 bronze badges

Comments

Ahmadshoh · Accepted Answer · 2021-06-25 22:55:41Z

1

In my case, this problem was solved in a strange way. I went to the Illuminate\Foundation\Http\Middleware\VerifyCsrfToken file and there on line 76 in the "handle" method inside the "if case" there was a line like this:

$this->tokensMatch($request);

For testing purposes, I returned this string

return response()->json($this->tokensMatch($request));

and surprisingly it will return a normal token. Then I returned everything to its place, and it is strange, but this error was no longer there.

answered Jun 25, 2021 at 22:55

Ahmadshoh

1091 silver badge6 bronze badges

Comments

The Blind Hawk · Accepted Answer · 2024-12-10 09:30:39Z

If you tried all other solutions but can't find the issue, make sure you have not edited the session table in any way.

My issue was this piece of code in the migrations

$table->foreignId('user_id')->constrained(
    table: 'users',
    indexName: 'user_id'
)->nullable();

nullable() must be ran before constrained() to take effect.
This caused Laravel to fail inserting new columns into the table since the first insert statements has user_id=null.

Adding to the fact that Laravel's error are silent when it fails writing into the sessions table, and this issue is not easy to spot.

Other issues such as the db_user's authorizations lacking will give the same error so make sure to check the "sessions" table and that it is storing the data as intended then debug from there.

Collectives™ on Stack Overflow

CSRF token mismatch Laravel sanctum and Angular http

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related