Angular 14 MEAN Stack Authentication

In this step by step tutorial, we'll be building an example app with JWT authentication and REST APIs based on the MEAN stack. We'll be using Angular 14 for the frontend and Node.js along with Express and MongoDB in the backend.

In this tutorial, we'll particularly learn how to build the frontend and we'll be using the backend from this example

What is the MEAN stack

We'll be look at how to deal with user authentication in the MEAN stack. Our MEAN architecture comprises an Angular 14 app connected to a REST API built with Node, Express and MongoDB.

According to [Wikipedia](https://en.wikipedia.org/wiki/MEAN(softwarebundle):

MEAN is a free and open-source JavaScript software stack for building dynamic web sites and web applications. The MEAN stack is MongoDB, Express.js, AngularJS (or Angular), and Node.js. Because all components of the MEAN stack support programs that are written in JavaScript, MEAN applications can be written in one language for both server-side and client-side execution environments.

The MEAN stack authentication flow

This is how authentication works in a MEAN stack app:

• The flow starts from the Angular 14 application where users send the REST API implemetning the JWT authentication endpoints,
• the Node/Express auth endpoint generates JWT tokens upon registration or login, and send them back to the Angular 14 application
• the Angular application uses local storage to persist the JWT token,
• the Angular 14 application verifies the JWT tokens when rendering protected views
• the Angular application sends the JWT token back to Node auth server when accessing protected API routes/resources.

The steps of our Angular 14 tutorial

These are the steps of this tutorial:

1. Step 1- Installing Angular CLI and creating an Angular 14 project
2. Step 2 - Creating Angular 14 components
3. Step 3 - Installing Bootstrap for styling
4. Step 4 - Setting up the Node authentication backend
   
5. Step 5 - Setting up Angular 14 HttpClient
6. Step 6 - Creating the user authentication service
7. Step 7 - Attaching the JWT access token to requests using Angular 14 Http Interceptors
8. Step 8 - Guarding/protecting routes from non authorized access
9. Step 9 - Setting up reactive forms
10. Step 10 - Adding the registration and login forms
11. Step 11 - Getting the user profile
12. Step 12 - Adding the logout button

Let's get started!

Step 1 - Installing Angular CLI and creating an Angular 14 project

In this step, we'll install Angular 14 CLI and initialize a project. You can find the full instructions in this tutorial but in nutshell these are the instructions that you should run in your command-line interface:

$ npm install --global @angular/cli
$ ng new angular14nodeauthexample

# ? Would you like to add Angular routing? Yes
# ? Which stylesheet format would you like to use? CSS

At the time of writing this tutorial @angular/cli v14 is installed in our machine.

Next, navigate inside your project's folder and serve the application locally using the following commands :

$ cd angular14nodeauthexample
$ ng serve

The development server will be serving our Angular 14 app from the http://localhost:4200/ address.

Step 2 - Creating Angular 14 components

In this step, we'll create the components of our application.

Our Angular app will have the login, register and user-profile pages.

Open a new command-line interface and run the following commands to create the components composing the UI of our app:

$ ng generate component login
$ ng generate component register
$ ng generate component user-profile

Open the src/app/app-routing.module.ts file and import the components then add them to routes array as follows:

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

import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
import { UserProfileComponent } from './user-profile/user-profile.component';


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

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

export class AppRoutingModule { }

Step 3 - Installing Bootstrap for styling

In this step, we'll install Bootstrap in our Angular project.

In your terminal run the following command:

$ npm install --save bootstrap

Next, add the Bootstrap 4 stylesheet path to the angular.json file as follows:

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

See in the next tutorial

• Date: 19 Oct 2022