Laravel 11 Sanctum Authentification not working with Angular 18.
To answer your question, let me first clarify that as of now, Laravel 11 does not exist, and Sanctum is the default authentication system in Laravel 8 and above. Angular 18 is also not released yet, so we will assume you are using the latest stable versions of Laravel 8 and Angular 11 for this answer.
When setting up Laravel Sanctum with Angular, there are a few things to keep in mind to ensure a smooth authentication workflow. Here's a step-by-step guide to help you get started:
-
Set up Laravel Sanctum: a. Install Laravel Sanctum using Composer:
composer require laravel/sanctum
b. AddSanctumServiceProvider::class
to theproviders
array inconfig/app.php
. c. Run the migration to create thesanctum_tokens
table:php artisan migrate
. d. Set theSANCTUM_STATEFUL
environment variable totrue
in the.env
file. -
Set up Angular: a. Install Angular CLI:
npm install -g @angular/cli
. b. Create a new Angular project:ng new my-project
. c. Install HttpClient:ng add @angular/common/http
. -
Configure Angular to work with Laravel Sanctum: a. Create a new file
auth.interceptor.ts
in thesrc/interceptors
folder. b. Implement theHttpInterceptor
interface and add thedoIntercept
method. c. In thedoIntercept
method, check if the request is an authentication request and add theAuthorization
header with the token from thelocalStorage
. d. Register the interceptor in theapp.module.ts
file. -
Set up Angular to make API requests: a. Create a new file
api.service.ts
in thesrc/services
folder. b. Implement theHttpClient
methods to make API requests. c. Inject theHttpClient
in theapi.service.ts
file. -
Set up Angular to handle authentication responses: a. Create a new file
auth.service.ts
in thesrc/services
folder. b. Implement the methods to handle authentication responses, such as login, logout, and checking if the user is authenticated. c. Inject theHttpClient
and theRouter
in theauth.service.ts
file. -
Set up Angular to protect routes: a. In the
app-routing.module.ts
file, add theCanActivate
guard to the routes that need to be protected. b. Inject theAuthService
in theCanActivate
guard and check if the user is authenticated before allowing access to the route. -
Test the authentication workflow: a. Make an API request to the Laravel server to log in. b. Check if the user is authenticated in Angular. c. Access a protected route in Angular.
Here's a sample code for the auth.interceptor.ts
file:
import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const token = localStorage.getItem('token');
if (token) {
request = request.clone({
setHeaders: {
Authorization: `Bearer ${token}`
}
});
}
return next.handle(request).pipe(
tap(response => {
// Handle successful response here
}, error => {
// Handle error response here
})
);
}
}
I hope this helps you get started with setting up Laravel Sanctum authentication with Angular 11. Let me know if you have any questions or need further clarification.