JSON Web Token is the best way of transmitting information between two parties securely because here the user identity is strictly verified. When the user logs in with true credentials, then a specific ID token gets generated and returned.

auth.guard.ts File at the Front-end side

In this class we implement guard to decide if the route is active or not. If the guard returns true it navigates and if the guard returns false, then it cancels the navigation.

Auth guard is used to check if the user is logged in or not. If the user is logged in, it returns true from canActivate() method otherwise it returns false and redirects to the login page.

 

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private router: Router) {
}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): boolean {
if (localStorage.getItem('token') != null)
return true;
else {
this.router.navigate(['/user/login']);
return false;
}
}
}

 

 

auth.interceptor.ts File at Front-end side

 

The interceptor file is intercepted HTTP responses from API and check there are any errors. If users are unauthorized then it will return a 401 status code error. HTTP Interceptor class is included in the HttpClientModule.

import { Injectable } from "@angular/core";
import { Observable } from "rxjs";
import { tap } from "rxjs/operators";
import { Router } from "@angular/router";

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
constructor(private router: Router) {
}
intercept(req: HttpRequest, next: HttpHandler): Observable> {
if (localStorage.getItem('token') != null) {
const clonedReq = req.clone({
headers: req.headers.set('Authorization', 'Bearer ' + localStorage.getItem('token'))
});
return next.handle(clonedReq).pipe(
tap(
succ => { },
err => {
if (err.status == 401){
localStorage.removeItem('token');
this.router.navigateByUrl('/user/login');
}
}
)
)
}
else
return next.handle(req.clone());
}
}

 

User.service.ts file to use back-end API

 

This file is used to call the back-end API. And I use ASP.Net Core in back-end.

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { FormBuilder, Validators, FormGroup ,AbstractControl, FormControl} from '@angular/forms';

@Injectable({
providedIn: 'root'
})
export class UserService {
constructor(private fb: FormBuilder, private http: HttpClient) { }
readonly rootURL ="http://localhost:55581/api"
formModel = this.fb.group({
UserName: ['', Validators.required],
Email: ['', Validators.email],
FullName: [''],
Passwords: this.fb.group({
Password: ['', [Validators.required, Validators.minLength(4)]],
ConfirmPassword: ['', Validators.required]
}, { validator: this.comparePasswords })
});
comparePasswords(fb: FormGroup) {
let confirmPswrd = fb.get('ConfirmPassword') as FormControl;
//passwordMismatch
//confirmPswrdCtrl.errors={passwordMismatch:true}
if (confirmPswrd.errors == null || 'passwordMismtch' in confirmPswrd.errors) {
if (fb.get('Password')!.value != confirmPswrd.value)
{ confirmPswrd.setErrors({ passwordMismtch: true });}
else
{
confirmPswrd.setErrors(null);}
}
}
register() {
var body = {
UserName: this.formModel.value.UserName,
Email: this.formModel.value.Email,
FullName: this.formModel.value.FullName,
Password: this.formModel.value.Passwords.Password
}; 
return this.http.post("https://localhost:44318/api/ApplicationUser/Register", body);
}
login(UserData: any) {
debugger;
return this.http.post("https://localhost:44318/api/ApplicationUser/Login", UserData);
}
}

 

Home.component.html file

 

This file contains an HTML template and angular 11 template syntax for displaying a simple welcome page with user detail.

 

Home.component.ts file

 

This component gets the user detail from the user service and makes them available to the template.

import { UserService } from './../shared/user.service';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styles: []
})
export class HomeComponent implements OnInit {
  userDetails;
  constructor(private router: Router, private service: UserService) { }
  ngOnInit() {
    this.service.getUserProfile().subscribe(
      res => {
        this.userDetails = res;
      },
      err => {
        console.log(err);
      },
    );
  }
  onLogout() {
    localStorage.removeItem('token');
    this.router.navigate(['/user/login']);
  }
}

 

Login.component.html file

 

This template contains a login form with a username and password field. And it displays a validation message for invalid fields when the submit button is clicked. The form that submits the event is to the onSubmit() method of login component.

 

Login.component.ts file

 

This component is using the authentication service to log in to the application. If users are already logged in they are automatically redirected to the home page.

 

import { Component, OnInit } from '@angular/core';
import { UserService } from 'src/app/shared/user.service';
import { Router } from '@angular/router';
import { NgForm } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';

@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
formModel = {
UserName: '',
Password: ''
}
constructor(private service: UserService, private router: Router, private toastrrr: ToastrService) { }
ngOnInit() {
if (localStorage.getItem('token') != null)
this.router.navigateByUrl('/home');
}
onSubmit(form: NgForm) {
this.service.login(form.value).subscribe(
(res: any) => {
localStorage.setItem('token', res.token);
this.router.navigateByUrl('/home');
},
err => {
if (err.status == 400)
this.toastrrr.error('Incorrect username or password.', 'Authentication failed.');
else
console.log(err);
}
);
}
}

 

 

Registration.component.html file

 

This component template contains a registration form with many fields.