{"id":38455,"date":"2025-05-19T12:32:08","date_gmt":"2025-05-19T12:32:08","guid":{"rendered":"https:\/\/www.iflair.com\/?p=38455"},"modified":"2025-10-16T09:22:49","modified_gmt":"2025-10-16T09:22:49","slug":"integrating-angular-frontend-with-laravel-sanctum-auth","status":"publish","type":"post","link":"https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/integrating-angular-frontend-with-laravel-sanctum-auth\/","title":{"rendered":"Integrating Angular Frontend with Laravel Sanctum Auth"},"content":{"rendered":"

[vc_row css_animation=”” row_type=”row” use_row_as_full_screen_section=”no” type=”grid” angled_section=”no” text_align=”left” background_image_as_pattern=”without_pattern” el_class=”mx-0″ z_index=””][vc_column][vc_single_image image=”38458″ img_size=”full” alignment=”center” css=”” qode_css_animation=””][\/vc_column][\/vc_row][vc_row css_animation=”” row_type=”row” use_row_as_full_screen_section=”no” type=”grid” angled_section=”no” text_align=”left” background_image_as_pattern=”without_pattern” el_class=”mx-0″ z_index=”” css=”.vc_custom_1586517129021{padding-top: 30px !important;}”][vc_column][vc_row_inner row_type=”row” type=”full_width” text_align=”left” css_animation=”” el_class=”custom-ul-with-text-wrapper”][vc_column_inner][vc_column_text css=”.vc_custom_1747654602553{padding-top: 5px !important;padding-bottom: 5px !important;}”]<\/p>\n

With Angular and Laravel Sanctum Secure SPA Authentication<\/strong><\/h2>\n

[\/vc_column_text][vc_column_text css=””]Combining Angular and Laravel Sanctum is a good blend to build secure web applications with a touch of contemporariness. Laravel Sanctum offers a light-weight authentication package for single-page applications (SPAs), while Angular offers a dynamic front-end framework. When put together, they make the front-end to back-end communication silky smooth, thus making user interaction smoother and secure.<\/span><\/p>\n

In this step-by-step tutorial, we are going to detail the process of combining Angular and Laravel Sanctum. We will walk you through setting up the Laravel backend using Sanctum, setting up the Angular frontend, and building secure authentication pipelines. If you are an Angular Development Company or searching for <\/span>Angular Development Services<\/b><\/a>, this tutorial would be beneficial for you.<\/span>[\/vc_column_text][vc_empty_space height=”10px”][vc_column_text css=””]<\/p>\n

Setting Up Angular and Laravel with Sanctum<\/b><\/h3>\n

1. Install Laravel<\/b><\/h3>\n

Begin by creating a new Laravel project:<\/span><\/p>\n

composer create-project –prefer-dist laravel\/laravel laravel-sanctum-api<\/span><\/p>\n

2. Install Sanctum<\/b><\/h3>\n

Add Sanctum to your Laravel project:<\/span>
\ncomposer require laravel\/sanctum<\/span>
\nPublish the Sanctum configuration:<\/span><\/p>\n

php artisan vendor: publish– provider=”Laravel\\Sanctum\\SanctumServiceProvider”<\/span><\/p>\n

Run migrations to create the necessary tables:<\/span><\/p>\n

php artisan migrate<\/span><\/p>\n

3. Configure Sanctum Middleware<\/b><\/h3>\n

In <\/span>app\/Http\/Kernel.php<\/span>, add Sanctum’s middleware to the <\/span>api<\/span> middleware group:<\/span>
\n‘api’ => [<\/span><\/i>
\n\u00a0\u00a0\u00a0\u00a0\\Laravel\\Sanctum\\Http\\Middleware\\EnsureFrontendRequestsAreStateful::class,<\/span><\/i>
\n\u00a0\u00a0\u00a0\u00a0‘throttle:api’,<\/span><\/i>
\n\u00a0\u00a0\u00a0\u00a0\\Illuminate\\Routing\\Middleware\\SubstituteBindings::class,<\/span><\/i>
\n],<\/span><\/i><\/p>\n

4. Update User Model<\/b><\/h3>\n

In <\/span>app\/Models\/User.php<\/span>, include the <\/span>HasApiTokens<\/span> trait:<\/span><\/p>\n

use Laravel\\Sanctum\\HasApiTokens;<\/span>
\nclass User extends Authenticatable<\/span>
\n{<\/span>
\n\u00a0\u00a0\u00a0\u00a0use HasApiTokens, HasFactory, Notifiable;<\/span>
\n}<\/span><\/p>\n

5. Set Up Authentication Routes<\/b><\/h3>\n

In <\/span>routes\/api.php<\/span>, define routes for registration and login:<\/span><\/p>\n

use App\\Http\\Controllers\\Api\\AuthController;<\/span><\/p>\n

Route::post(‘\/register’, [AuthController::class, ‘register’]);<\/span><\/i>
\nRoute::post(‘\/login’, [AuthController::class, ‘login’]);<\/span><\/i>
\nRoute::middleware(‘auth:sanctum’)->get(‘\/user’, function (Request $request) {<\/span><\/i><\/p>\n

\u00a0\u00a0\u00a0\u00a0return $request->user();<\/span><\/i>
\n});<\/span><\/i><\/p>\n

6. Create Authentication Controller<\/b><\/h3>\n

Generate a controller:<\/span>
\nphp artisan make: controller Api\/AuthController<\/span>
\nImplement registration and login methods in <\/span>AuthController.php<\/span>:<\/span>
\nnamespace App\\Http\\Controllers\\Api;<\/span><\/i>
\nuse App\\Http\\Controllers\\Controller;<\/span><\/i>
\nuse Illuminate\\Http\\Request;<\/span><\/i>
\nuse App\\Models\\User;<\/span><\/i>
\nuse Illuminate\\Support\\Facades\\Hash;<\/span><\/i>
\nuse Illuminate\\Support\\Facades\\Auth;<\/span><\/i>
\nclass AuthController extends Controller<\/span><\/i>
\n{<\/span><\/i>
\n\u00a0\u00a0\u00a0\u00a0public function register(Request $request)<\/span><\/i>
\n\u00a0\u00a0\u00a0\u00a0{<\/span><\/i>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$request->validate([<\/span><\/i>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0‘name’ => ‘required|string’,<\/span><\/i>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0’email’ => ‘required|email|unique:users’,<\/span><\/i>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0‘password’ => ‘required|string|confirmed’,<\/span><\/i>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0]);<\/span><\/i>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$user = User::create([<\/span><\/i>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0‘name’ => $request->name,<\/span><\/i>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0’email’ => $request->email,<\/span><\/i>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0‘password’ => Hash::make($request->password),<\/span><\/i>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0]);<\/span><\/i>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return response()->json([‘message’ => ‘User registered successfully.’]);<\/span><\/i>
\n\u00a0\u00a0\u00a0\u00a0}<\/span><\/i>
\n\u00a0\u00a0\u00a0\u00a0public function login(Request $request)<\/span><\/i>
\n\u00a0\u00a0\u00a0\u00a0{<\/span><\/i>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (!Auth::attempt($request->only(’email’, ‘password’))) {<\/span><\/i>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return response()->json([‘message’ => ‘Invalid credentials.’], 401);<\/span><\/i>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span><\/i>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$token = $request->user()->createToken(‘auth_token’)->plainTextToken;<\/span><\/i>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return response()->json([‘access_token’ => $token, ‘token_type’ => ‘Bearer’]);<\/span><\/i>
\n\u00a0\u00a0\u00a0\u00a0}<\/span><\/i>
\n}<\/span><\/i>[\/vc_column_text][vc_empty_space height=”10px”][vc_column_text css=””]<\/p>\n

Configuring Angular Frontend<\/strong><\/h2>\n

1. Create an Angular Project<\/b><\/h3>\n

Generate a new Angular application:<\/span>
\nnew angular-sanctum-app<\/span>
\ncd angular-sanctum-app<\/span><\/p>\n

2. Install Dependencies<\/b><\/h3>\n

Install necessary packages:<\/span>
\nnpm install axios<\/span><\/p>\n

3. Set Up Authentication Service<\/b><\/h3>\n

Create a service to handle authentication:<\/span><\/p>\n

ng generate service auth<\/span><\/p>\n

In <\/span>auth.service.ts<\/span>, implement methods for registration and login:(<\/span>Laracasts<\/span><\/a>)<\/span>
\nimport { Injectable } from ‘@angular\/core’;<\/span><\/i>
\nimport axios from ‘axios’;<\/span><\/i>
\n@Injectable({<\/span><\/i>
\n\u00a0\u00a0providedIn: ‘root’<\/span><\/i>
\n})<\/span><\/i><\/p>\n

export class AuthService {<\/span><\/i><\/p>\n

\u00a0\u00a0private apiUrl = ‘http:\/\/localhost:8000\/api’;<\/span><\/i>
\n\u00a0\u00a0async register(userData: any) {<\/span><\/i>
\n\u00a0\u00a0\u00a0\u00a0return await axios.post(`${this.apiUrl}\/register`, userData);<\/span><\/i>
\n\u00a0\u00a0}<\/span><\/i>
\n\u00a0\u00a0async login(credentials: any) {<\/span><\/i>
\n\u00a0\u00a0\u00a0\u00a0return await axios.post(`${this.apiUrl}\/login`, credentials);<\/span><\/i>
\n\u00a0\u00a0}<\/span><\/i>
\n}<\/span><\/i><\/p>\n

4. Handle CSRF Protection<\/b><\/h3>\n

Before making authentication requests, retrieve the CSRF token:<\/span><\/p>\n

await axios.get(‘http:\/\/localhost:8000\/sanctum\/csrf-cookie’);<\/span><\/p>\n

This ensures that Laravel’s CSRF protection is satisfied.<\/span><\/p>\n

5. Implement Authentication Components<\/b><\/h3>\n

Create components for registration and login:<\/span><\/p>\n

ng generate component register<\/span><\/p>\n

ng generate component login<\/span><\/p>\n

In these components, utilize the <\/span>AuthService<\/span> to handle user interactions.<\/span>[\/vc_column_text][vc_empty_space height=”10px”][vc_column_text css=””]<\/p>\n

Ensuring Secure Communication<\/strong><\/h2>\n

1. Configure CORS<\/b><\/h3>\n

In Laravel, set up CORS in <\/span>config\/cors.php<\/span>:<\/span>
\n‘paths’ => [‘api\/*’, ‘sanctum\/csrf-cookie’],<\/span><\/i>
\n‘allowed_methods’ => [‘*’],<\/span><\/i>
\n‘allowed_origins’ => [‘http:\/\/localhost:4200’],<\/span><\/i>
\n‘allowed_headers’ => [‘*’],<\/span><\/i>
\n‘supports_credentials’ => true,<\/span><\/i><\/p>\n

2. Update .env File<\/b><\/h3>\n

Set the frontend URL in <\/span>.env<\/span>:<\/span><\/p>\n

SANCTUM_STATEFUL_DOMAINS=localhost:4200<\/span><\/i><\/p>\n

SESSION_DOMAIN=localhost<\/span><\/i><\/p>\n

3. Use HttpOnly Cookies<\/b><\/h3>\n

Laravel Sanctum uses HttpOnly cookies for authentication, enhancing security by preventing JavaScript access to the cookie. <\/span>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner row_type=”row” type=”full_width” text_align=”left” css_animation=”” css=”.vc_custom_1715260600126{margin-top: 20px !important;padding-top: 60px !important;padding-bottom: 60px !important;background-image: url(https:\/\/devwp1.websiteserverhost.biz\/iflair_site\/wp-content\/uploads\/2024\/05\/Hire-Expert-Qusar-Developers-for-the-Smart-Web-App-Development-\u2013-1.jpg?id=26671) !important;}” el_class=”custom-ul-with-text-wrapper”][vc_column_inner width=”1\/2″][vc_column_text css=””]<\/p>\n

Secure Your SPA with Angular & Laravel Sanctum<\/strong><\/span><\/h3>\n

[\/vc_column_text]Get Guide<\/a>[\/vc_column_inner][vc_column_inner width=”1\/2″][\/vc_column_inner][\/vc_row_inner][vc_row_inner row_type=”row” type=”full_width” text_align=”left” css_animation=”” css=”.vc_custom_1707119979398{margin-top: 20px !important;}”][vc_column_inner][vc_column_text css=”.vc_custom_1707911356934{padding-top: 20px !important;padding-bottom: 20px !important;}”]<\/p>\n

The Way Forward<\/strong><\/h4>\n

[\/vc_column_text][vc_column_text css=””]Combining Angular with Laravel Sanctum is a safe and effective way of dealing with authentication in contemporary web applications. Developers can aid in seamless communication between the frontend and backend as well as unlock the maximum capacity of both frameworks using the above steps. In case other users require professional help in this combination, they can hire a <\/span>Laravel Development Company <\/b><\/a>or Laravel Developers for added guidance and support.<\/span>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row][vc_row css_animation=”” row_type=”row” use_row_as_full_screen_section=”no” type=”grid” angled_section=”no” text_align=”left” background_image_as_pattern=”without_pattern” css=”.vc_custom_1707119045703{background-color: #ffffff !important;}” z_index=”” el_class=”contact-form-section pt-auto mx-0 custom_page_new” el_id=”contact-us”][vc_column][vc_row_inner row_type=”row” type=”full_width” text_align=”left” css_animation=”” el_class=”contact-form-wrapper mx-0″][vc_column_inner el_class=”form-home-top”][vc_column_text css=”.vc_custom_1644228956305{padding-bottom: 10px !important;}”]<\/p>\n

Free Consultation<\/strong><\/h2>\n

[\/vc_column_text]\n

\n

<\/p>

    <\/ul><\/div>\n
    \n
    \n<\/fieldset>\n<\/span>\n
    \n\t