Laravel 10 Angular 16 Token-Based Authentication with JWT

User Registration with Laravel and Angular

The given below code covers the following tasks in User registration module:

• Creating a form with Bootstrap.
• Consumption of an Auth API built with Laravel in Angular.
• Registering and Signing up a user and storing the user data spontaneously in the MySQL database.
• Getting the user data using React Forms in Angular.
• Handling the server-side validation in Angular extracted form the Laravel Auth API.

Open signup.component.ts file and append the following code.

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from './../../shared/auth.service';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.scss'],
})

export class SignupComponent implements OnInit {
  registerForm: FormGroup;
  errors: any = null;

  constructor(
    public router: Router,
    public fb: FormBuilder,
    public authService: AuthService
  ) {
    this.registerForm = this.fb.group({
      name: [''],
      email: [''],
      password: [''],
      password_confirmation: [''],
    });
  }

  ngOnInit() {}

  onSubmit() {
    this.authService.register(this.registerForm.value).subscribe(
      (result) => {
        console.log(result);
      },
      (error) => {
        this.errors = error.error;
      },
      () => {
        this.registerForm.reset();
        this.router.navigate(['login']);
      }
    );
  }
}

Open signup.component.html file and insert the following code.

<div class="auth-wrapper">
  <form class="form-signin" [formGroup]="registerForm" (ngSubmit)="onSubmit()">
    <h3 class="h3 mb-3 font-weight-normal text-center">Register User</h3>

    <!-- Errors -->
    <div *ngIf="errors?.name" class="alert alert-danger mt-3">
      {{ errors?.name }}
    </div>
    <div *ngIf="errors?.email" class="alert alert-danger mt-3">
      {{ errors?.email }}
    </div>
    <div *ngIf="errors?.password" class="alert alert-danger mt-3">
      {{ errors?.password }}
    </div>
    <div *ngIf="errors?.password_confirmation" class="alert alert-danger mt-3">
      {{ errors?.password_confirmation }}
    </div>

    <!-- Signup form -->
    <div class="form-group">
      <label>Name</label>
      <input type="text" class="form-control" formControlName="name" />
    </div>
    <div class="form-group">
      <label>Email address</label>
      <input type="email" class="form-control" formControlName="email" />
    </div>
    <div class="form-group">
      <label>Password</label>
      <input type="password" class="form-control" formControlName="password" />
    </div>
    <div class="form-group">
      <label>Confirm Password</label>
      <input
        type="password"
        class="form-control"
        formControlName="password_confirmation"
      />
    </div>
    <button type="submit" class="btn btn-block btn-primary">
      Register User
    </button>
  </form>
</div>

Token Based Secure Login in Angular and Laravel

In this step, we will cover up the following tasks:

• Log in to the application using correct credentials
• Set the authentication state through auth state service, which hides and shows specific elements based on user state.
• Set Bearer token in the header using HttpInterceptor, It renders the user data by making the consensus between client and server.
• We have completed this task earlier, but we will execute when the login API is being requested.
• Use reactive to get and validate the form values.
• Redirect to profile page when successfully login.
• Display form error in the frontend.

Open signin.component.ts file and insert the following code.

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from './../../shared/auth.service';
import { FormBuilder, FormGroup } from '@angular/forms';
import { TokenService } from '../../shared/token.service';
import { AuthStateService } from '../../shared/auth-state.service';

@Component({
  selector: 'app-signin',
  templateUrl: './signin.component.html',
  styleUrls: ['./signin.component.scss'],
})

export class SigninComponent implements OnInit {
  loginForm: FormGroup;
  errors:any = null;

  constructor(
    public router: Router,
    public fb: FormBuilder,
    public authService: AuthService,
    private token: TokenService,
    private authState: AuthStateService
  ) {
    this.loginForm = this.fb.group({
      email: [],
      password: [],
    });
  }

  ngOnInit() {}

  onSubmit() {
    this.authService.signin(this.loginForm.value).subscribe(
      (result) => {
        this.responseHandler(result);
      },
      (error) => {
        this.errors = error.error;
      },
      () => {
        this.authState.setAuthState(true);
        this.loginForm.reset();
        this.router.navigate(['profile']);
      }
    );
  }

  // Handle response
  responseHandler(data:any) {
    this.token.handleData(data.access_token);
  }
}

Open signin.component.html file and include the given below code.

<div class="auth-wrapper">
  <form class="form-signin" [formGroup]="loginForm" (ngSubmit)="onSubmit()">
      <h3 class="h3 mb-3 font-weight-normal text-center">Sign in</h3>

      <!-- Errors -->
      <div *ngIf="errors?.email" class="alert alert-danger mt-3">
          {{ errors?.email }}
      </div>
      <div *ngIf="errors?.password" class="alert alert-danger mt-3">
          {{ errors?.password }}
      </div>
      <div *ngIf="errors?.error" class="alert alert-danger mt-3">
          {{ errors?.error }}
      </div>

      <!-- Login -->
      <div class="form-group">
          <label>Email address</label>
          <input type="email" class="form-control" formControlName="email">
      </div>
      <div class="form-group">
          <label>Password</label>
          <input type="password" class="form-control" formControlName="password">
      </div>
      <button type="submit" class="btn btn-block btn-primary">Log in</button>
  </form>
</div>

Display User Profile

To display user profile subscribe to the profileUser() method via AuthService, in response, we get the user data that we fetch by making the HTTP POST request through Laravel API. Display the data using the interpolation sign inside the user profile template.

Open user-profile.component.ts file and paste the following code.

import { Component, OnInit } from '@angular/core';
import { AuthService } from './../../shared/auth.service';

// User interface
export class User {
  name: any;
  email: any;
}

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.scss'],
})

export class UserProfileComponent implements OnInit {
  UserProfile!: User;

  constructor(public authService: AuthService) {
    this.authService.profileUser().subscribe((data: any) => {
      this.UserProfile = data;
    });
  }

  ngOnInit() {}
}

Open user-profile.component.html file and incorporate the following code within.

<div class="container">
  <div class="card inner-main">
    <div class="card-header">
      User Profile
    </div>
    <div class="card-body">
      <p class="card-text">Name: <strong>{{UserProfile?.name}}</strong></p>
      <p class="card-text">Email: <strong>{{UserProfile?.email}}</strong></p>
    </div>
  </div>
</div>

Logout

We are going to use simple logic to make the user log out from the app. Remove the JWT token from local storage, set the authentication state to false.

Create a isSignedIn variable, It hide and show navigation items based on auth state. Access userAuthState observable through AuthStateService, subscribe and assign the response to the
variable.

Open app.component.ts file and insert the following code.

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { TokenService } from './shared/token.service';
import { AuthStateService } from './shared/auth-state.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

export class AppComponent implements OnInit {
  isSignedIn!: boolean;

  constructor(
    private auth: AuthStateService,
    public router: Router,
    public token: TokenService
  ) {}

  ngOnInit() {
    this.auth.userAuthState.subscribe((val) => {
      this.isSignedIn = val;
    });
  }

  // Signout
  signOut() {
    this.auth.setAuthState(false);
    this.token.removeToken();
    this.router.navigate(['login']);
  }
}

Create the app-routing.module.ts file and insert the code within.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { SigninComponent } from './components/signin/signin.component';
import { SignupComponent } from './components/signup/signup.component';
import { UserProfileComponent } from './components/user-profile/user-profile.component';

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

import { AuthInterceptor } from './shared/auth.interceptor';

@NgModule({
  declarations: [
    AppComponent,
    SigninComponent,
    SignupComponent,
    UserProfileComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    ReactiveFormsModule,
    FormsModule,
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true,
    },
  ],
  bootstrap: [AppComponent],
})

export class AppModule {}

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { SigninComponent } from './components/signin/signin.component';
import { SignupComponent } from './components/signup/signup.component';
import { UserProfileComponent } from './components/user-profile/user-profile.component';

const routes: Routes = [
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: 'login', component: SigninComponent },
  { path: 'register', component: SignupComponent },
  { path: 'profile', component: UserProfileComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})

export class AppRoutingModule {}

Finally, make sure to update the app.module.ts file.

Open app.component.html file and insert the following code.

<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm fixed-top">
  <h5 class="my-0 mr-md-auto font-weight-normal">Laravel Angular JWT Auth</h5>
  <nav class="my-2 my-md-0 mr-md-3">
    <a class="p-2 text-dark" routerLink="/profile" *ngIf="isSignedIn">User Profile</a>
    <a class="p-2 text-dark" *ngIf="!isSignedIn" routerLink="/login">Log in</a>
    <a class="p-2 text-dark" routerLink="/register">Register</a>
  </nav>
  <button class="btn btn-outline-primary" (click)="signOut()" *ngIf="isSignedIn">Log out</button>
</div>

<router-outlet></router-outlet>

Start The Laravel App

Start the local web server, get inside the laravel project folder and run the app.

cd backend && php artisan serve

Start The Angular App

Head over to angular project folder and run the app.

cd frontend && ng serve --open

Conclusion

We have completed the Laravel and Angular tutorials. In this tutorial, we learned how to authenticate with the JWT token. A user can register, signin, and view user profiles securely.

In the upcoming tutorial, we will also learn to build forget and reset passwords, log in with social media platforms, route protection with guards, and sending a verification email functionality.

Anyway, If you are new to Laravel and Angular development, after completing this tutorial, you will be able to comprehend almost the entire user authentication process.

You can get the complete code of this tutorial on GitHub.