Laravel 8 Angular Token Based Authentication with JWT

In this tutorial you will learn about the Laravel 8 Angular Token Based Authentication with JWT and its application with practical example.

In this Laravel 8 Angular Token Based Authentication with JWT Tutorial I’ll show you how to create REST API with secure jwt token based authentication in Laravel 8 Angular application using JWT (JSON Web Token) . In this tutorial you will learn to create laravel rest api with token based authentication in laravel angular application. In this article, we will learn to create fully functional restful API with JWT Authentication in Laravel 8 angular application. We will also learn to create login and registration api using jwt authentication in laravel 8. In this example I will guide you through how to create fully functional restful API with JWT Authentication in Laravel 8 for laravel and angular application.

Table Of Contents−

Laravel 8 Angular Token Based Authentication with JWT

In laravel token based authentication provides secure user authentication system. Token based authentication restrain unauthenticated user from accessing the application. In this example we will be using JWT (JSON Web Token) token based authentication integrated with laravel application. In this example I’ll also show you how to install jwt auth and configure jwt auth in laravel 8.

Laravel 8 Angular Token Based Authentication with JWT

Clone Laravel JWT Auth Repo
Install and Configure Angular
Create CORS Middleware
Consume Angular Service
Set JWT Token with Http Interceptor
Angular User Registration Component
Angular User Login Component
Angular User Profile Component
Angular User Lgout Component

Laravel and Angular Project Structure

Create new project directory using following command:

mkdir your_project_name

1	mkdir your_project_name

and this folder will have backend (Laravel API) and frontend (Angular) folders inside it.

- your_project_name
--- backend
--- frontend

- your_project_name

--- backend

--- frontend

Create Laravel JWT Authentication REST API

In this step we will clone the Laravel JWT Auth REST API project, switch to backend folder inside your project folder using following command:

cd backend

1	cd backend

Now we will download the project from GitHub repo link, then unzip all the files inside the backend folder:

Now, run the following commands to install required dependencies for node and composer for your laravel auth project:

$ composer install
$ cp .env.example .env
$ php artisan key:generate
$ php artisan migrate
$ php artisan serve

$ composer install

$ cp .env.example .env

$ php artisan key:generate

$ php artisan migrate

$ php artisan serve

Start the project using following command:

php artisan serve

1	php artisan serve

Now project will be started at

http://127.0.0.1:8000

1	http://127.0.0.1:8000

Use above link as base URL for accessing following api

Method	Endpoint
POST	/api/auth/register
POST	/api/auth/login
GET	/api/auth/user-profile
POST	/api/auth/refresh
POST	/api/auth/logout

Install and Configure Angular

In this step you need to switch into the frontend folder and install Angular application using following command:

ng new frontend && cd frontend

1	ng new frontend && cd frontend

Next, we will create following angular components for user authentication system.

ng g c components/signin

ng g c components/signup

ng g c components/user-profile

ng g c components/signin

ng g c components/signup

ng g c components/user-profile

Now we will be installing bootstrap framework to design authentication forms.

npm install bootstrap

1	npm install bootstrap

Open angular.json file and define the bootstrap CSS path as following:

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.scss"
         ]

"styles": [

"node_modules/bootstrap/dist/css/bootstrap.min.css",

"src/styles.scss"

]

We are ready to start angular app, run the following command to start angular application:

ng serve --open

1	ng serve --open

Adding up HttpClient

Lets import Http client module inside the app.module.ts file. The Http client module will handle the HTTP requests,

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule
   ]
})

import { HttpClientModule } from '@angular/common/http';

@NgModule({

imports: [

HttpClientModule

]

})

Insert Reactive Form Service

As we will be using ReactiveFormsModule and FormsModule. Lets Import and inject both the APIs in app.module.ts file.

import { ReactiveFormsModule, FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    ReactiveFormsModule,
    FormsModule
  ],
})

import { ReactiveFormsModule, FormsModule } from '@angular/forms';

@NgModule({

imports: [

ReactiveFormsModule,

FormsModule

})

Create CORS Middleware

In this step we will create a CORS middleware, this will enable us to share resources between two different domain/ports. Our backend is running on PORT:8000 and frontend running on PORT:4200. Switch to “backend” folder and run the following command:

php artisan make:middleware CORS

1	php artisan make:middleware CORS

Open app/Http/Middleware/CORS.php file and set the Acess-Control-Allow-Origin headers as following.

<?php

namespace App\Http\Middleware;
use Illuminate\Http\Request;
use Closure;

class CORS {
    
    public function handle(Request $request, Closure $next) {
        header('Acess-Control-Allow-Origin: *');
        header('Acess-Control-Allow-Origin: Content-type, X-Auth-Token, Authorization, Origin');
        return $next($request);
    }

}

<?php

namespace App\Http\Middleware;

use Illuminate\Http\Request;

use Closure;

class CORS {

public function handle(Request $request, Closure $next) {

header('Acess-Control-Allow-Origin: *');

header('Acess-Control-Allow-Origin: Content-type, X-Auth-Token, Authorization, Origin');

return $next($request);

}

Open app/Http/Kernel.php file and add the define the “guest” CORS middleware inside the $routeMiddleware array.

protected $routeMiddleware = [
    ...
    'guest' => \App\Http\Middleware\CORS::class,
];

protected $routeMiddleware = [

...

'guest' => \App\Http\Middleware\CORS::class,

];

Now, restart the backend application using following commnad:

php artisan serve

1	php artisan serve

Consume Laravel REST API with Angular Service

In this step we will generate a Angular service file using following command:

ng g s shared/auth

1	ng g s shared/auth

Now, open shared/auth.service.ts file and put the following code in it.

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

// User interface
export class User {
  name: String;
  email: String;
  password: String;
  password_confirmation: String
}

@Injectable({
  providedIn: 'root'
})

export class AuthService {

  constructor(private http: HttpClient) { }

  // User registration
  register(user: User): Observable<any> {
    return this.http.post('http://127.0.0.1:8000/api/auth/register', user);
  }

  // Login
  signin(user: User): Observable<any> {
    return this.http.post<any>('http://127.0.0.1:8000/api/auth/login', user);
  }

  // Access user profile
  profileUser(): Observable<any> {
    return this.http.get('http://127.0.0.1:8000/api/auth/user-profile');
  }

}

import { Injectable } from '@angular/core';

import { Observable } from 'rxjs';

import { HttpClient } from '@angular/common/http';

// User interface

export class User {

name: String;

email: String;

password: String;

password_confirmation: String

}

@Injectable({

providedIn: 'root'

})

export class AuthService {

constructor(private http: HttpClient) { }

// User registration

return this.http.post('http://127.0.0.1:8000/api/auth/register', user);

}

// Login

signin(user: User): Observable<any> {

return this.http.post<any>('http://127.0.0.1:8000/api/auth/login', user);

}

// Access user profile

profileUser(): Observable<any> {

return this.http.get('http://127.0.0.1:8000/api/auth/user-profile');

}

Now we will be create a angular service to validate & configure laravel JWT Token in Angular application. Run the following command to generate service file:

ng g s shared/token

1	ng g s shared/token

Lets open shared/token.service.ts file and put the following code in it.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})

export class TokenService {

  private issuer = {
    login: 'http://127.0.0.1:8000/api/auth/login',
    register: 'http://127.0.0.1:8000/api/auth/register'
  }

  constructor() { }

  handleData(token){
    localStorage.setItem('auth_token', token);
  }

  getToken(){
    return localStorage.getItem('auth_token');
  }

  // Verify the token
  isValidToken(){
     const token = this.getToken();

     if(token){
       const payload = this.payload(token);
       if(payload){
         return Object.values(this.issuer).indexOf(payload.iss) > -1 ? true : false;
       }
     } else {
        return false;
     }
  }

  payload(token) {
    const jwtPayload = token.split('.')[1];
    return JSON.parse(atob(jwtPayload));
  }

  // User state based on valid token
  isLoggedIn() {
    return this.isValidToken();
  }

  // Remove token
  removeToken(){
    localStorage.removeItem('auth_token');
  }

}

import { Injectable } from '@angular/core';

@Injectable({

providedIn: 'root'

})

export class TokenService {

private issuer = {

}

constructor() { }

handleData(token){

localStorage.setItem('auth_token', token);

}

getToken(){

return localStorage.getItem('auth_token');

}

// Verify the token

isValidToken(){

const token = this.getToken();

if(token){

const payload = this.payload(token);

if(payload){

return Object.values(this.issuer).indexOf(payload.iss) > -1 ? true : false;

}

} else {

return false;

}

payload(token) {

const jwtPayload = token.split('.')[1];

return JSON.parse(atob(jwtPayload));

}

// User state based on valid token

isLoggedIn() {

return this.isValidToken();

}

// Remove token

removeToken(){

localStorage.removeItem('auth_token');

}

Create Authentication State to Multiple Components

Now we will create auth state that can be accessed in components. Use the following command to create auth state:

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 8 Angular Token Based Authentication with JWT

Laravel 8 Angular Token Based Authentication with JWT

Laravel and Angular Project Structure

Create Laravel JWT Authentication REST API

Laravel 9 Livewire Pagination with Search

Laravel 9 Livewire Pagination Example

Laravel 9 Check User Login, Online Status & Last Seen

codeigniter 4 image upload example tutorial

Laravel 9 Livewire Charts Example

Laravel 9 Livewire Crud Example

Laravel 9 Livewire Multiple Image Upload

Laravel 9 Livewire Image Upload

Laravel 9 Livewire Submit Form

Laravel 9 Simple CRUD Application Example

Laravel 8 Angular Token Based Authentication with JWT

Laravel and Angular Project Structure

Create Laravel JWT Authentication REST API

Install and Configure Angular

Adding up HttpClient

Insert Reactive Form Service

Create CORS Middleware

Consume Laravel REST API with Angular Service

Create Authentication State to Multiple Components

Set Token in Header with HttpInterceptor

Angular User Registration Component

Angular User Login Component

Angular User Profile Component

Angular User Logout Component

Start The Laravel App

Start The Angular App