Throughout this step by step tutorial, we’ll be learning about how to create an Angular 10/9 web application with an authentication form for signing up users using Angular 10FormBuilder, FormGroup, and ValidatorsAPIs.

> ✋✋ Join our Facebook group 👈 to discuss anything related to Angular 10/9 development.

Prerequisites

This tutorial has a few prerequisites such as:

• Node.js and npm installed on your development machine,
• Angular CLI 10/9 installed, if not use the npm install -g @angular/clicommand to install it. For Angular 10 CLI, you need to use npm install -g @angular/cli@next at this time, since it’s still in beta version.

Now, let’s start with the first step of our Angular 10 tutorial.

Step 1 — Initializing your Angular 10/9 Project

Let’s get started by initializing an Angular 10 example project.

Head over to a new command-line interface and run:

$ ng new angular-10-auth-example

Angular CLI will prompt if Would you like to add Angular routing? Say yand Which stylesheet format would you like to use? Pick CSS.

Step 2 — Generating the Authentication and Admin Components

In the second step of our Angular 10 tutorial and example, we’ll proceed to generate the authentication and admin components.

Go back to your command-line interface and navigate to the root folder of your project:

$ cd angular-10-auth-example

Next, run the ng generate command to generate the Angular 10 components:

$ ng generate component auth
$ ng generate component admin

We created two AuthComponent and AdminComponent components.

The auth component will be used to add a reactive form for getting the user’s email and password.

The admin component will be used as an example page that will be secured against access from non-authenticated users. Users will need to log in before they can access the admin page.

Next, include these two components in the routing module. Head to the src/app/app-routing.module.ts file and update it as follows:

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

import { AuthComponent } from './auth/auth.component';
import { AdminComponent } from './admin/admin.component';
const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'login'},
  { path: 'auth', component: AuthComponent },
  { path: 'admin', component: AdminComponent }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

We have created three routes:

• For the auth component,
• For the admin component.
• One for redirecting the empty path to the auth path.

Let’s remove this default HTML code. Open the src/app/app.component.htmlfile and remove everything but leave <router-outlet>:

<router-outlet></router-outlet>

In the next step of our tutorial, we’ll see how to create a user model.

Step 3 — Creating a User Model

Let’s now create a User interface. Head back to your command-line interface and run:

$ ng generate interface user

Go to the src/app/user.ts file and update it as follows:

export  interface  User {
    email: string;
    password: string;
}

This will ensure each user will have an email and password.

Step 4 —Creating an Angular 10 Authentication Service

Next, let’s create an Angular 10 service that exports the methods required for authenticating users. In your command-line interface, run:

$ ng generate service auth

Go to the src/app/auth.service.ts file and update it accordingly:

import { Injectable } from '@angular/core';
import { User } from './user';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  constructor() { }
  public signIn(userData: User){
    localStorage.setItem('ACCESS_TOKEN', "access_token");
  }
  public isLoggedIn(){
    return localStorage.getItem('ACCESS_TOKEN') !== null;
  }
  public logout(){
    localStorage.removeItem('ACCESS_TOKEN');
  }
}

The signIn method is not fully implemented. For a real-world implementation, check out Using Angular HttpClient with Node & Express.js — Example POST Requests.

#angular-9 #angular #angular8