Angular 7 Login With Session Authentication Using React Form

In this article, we are going to manage the login process. We will check whether the user is logged in or not, and will block the route if the user is not authenticated.

While walking through this article, we will cover the below Angular concepts.

• Angular Routing module
  Manage Angular route as user authentication permission.
  
  
• Angular Auth Guard
  This Angular feature is helpful for handling authentication. This is an interface which tells the router whether or not it should allow navigation to a requested route. Here, in this example, we are using the 'canActivate' guard type. For more information about Angular guard, you can visit here.
  
  
• Angular localStorage
  There are three ways to store data into client-side in Angular application

1. Memory
2. Session storage
3. Local Storage.

Here, we are using the localStorage which stores data into the client browser. It is supported only in a modern browser. In this, data will remain stored if the browser is closed or reopened while in session storage, the data will be lost when the tab is closed. It's simple to use and the syntax of the localStorage is also easy. It allows ~10mb data to be saved in the browser.

Now, let's implement.

Create a new Angular project using the below command.

Here, I used bootstrap in this application. To install bootstrap in an application, you can run the below command inside the terminal.

After installation, add the below line in the src/styles.css file.

Now, create two components as Login and Dashboard.

Create one service named as auth

Create a new login interface

Create a new guard named as auth by using the below command lines.

Here, Angular guard means it is the Angular route guard which can tell the router whether or not it should allow navigation to a requested route.

Add two properties in the Login interfaces.

Now, go to the guards/Auth.guard.ts file. Import the ‘canActivate’ interface from ‘@angular/router’ package.

Implement the canActive() method inside this file.

Now, in app.module.ts file, import the AuthGuard module.

Add AuthGuard in Providers.

Then, import ReactiveFormsModule and FormsModule in this file from @angular/forms package.

So, now, our app.module.ts file will look like this.

Now, go to the app-routing.modue.ts file and add login and dashboard routes inside it. Here, add the ‘canActivate’ attribute to check user authentication. If the user is not authorized, then it will redirect to the login page.

Put the below HTML code inside the app.component.html file.

Here, routerLink contains the path of the URL and routeLinkActive adds class active to the selected menu. <router-outlet> will decide which View to be displayed as per the route URL.

In auth.service.ts file, import ILogin interface.

Add Logout() method inside this service class.