Angular 9 Authentication Using JWT

Angular 9 Authentication Using JWT
Share

2,375 total views, 3 views today

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

Before starting to learn Authentication with JWT and MEAN, hope you have an idea about MEAN setup.

So let’s start with creating angular authentication components then we move to setup node authentication and JWT access token step by step.

I refer Angular 9 Mean Stack artical to setup MEAN stack ,you can use as per your need.

There are many articles available online for setting up Mongo authentication with JWT. From them I place one of the simple and clean article which you may refer: Mongo authentication with JWT.

The steps will start from the Angular 9 app from where users client agent will send the API implemetning the JWT authentication endpoints to the the Node/Express auth endpoint generates JWT tokens upon registration or login, and send them back to the Angular 9 app.

Our Angular app uses local storage to persist the JWT token, verifies the JWT tokens when rendering protected views and sends the JWT token back to Node auth server when accessing protected API routes/resources.

Login, Register and Profile pages are part of our angular app authentication process. Use below commands to create these components:

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

Create and expose below APIs from your node server:

Now, let’s set up the HttpClient request on an angular app passed through Authentication Service only.

HttpClient

Open the src/app/app.module.ts file, import HttpClientModule and add it the imports array as follows:

Authentication Service

Here, we need to create the User model inside a src/app/user.ts file as follows:

Next, head back to your command-line interface and run the following command:

Next, open the generated src/app/auth.service.ts file and update it as follows:

So, this is what We first import the necessary APIs like Router, HttpClient, HttpHeaders, HttpErrorResponse, Observable, throwError, catchError, map and the User class.

And then we inject a HttpClient via the service via constructor and we define the API_URL, headers and currentUser variables.

Now, create and set up an auth guard which will be used to protect the users/profile/ route from non logged in users.

Open command-line interface and run the following command:

Now, open the src/app/auth.guard.ts file and add the following code:

Open the src/app/app-routing.module.ts file and import the authentication guard and apply it to the route as follows:

Now, we have each thing ready to test using postman OR any other api tool. But here we still have angular form setup. So finally we set up the reactive form for Register/Login/Profile.

To import reactive form module, Open the src/app/app.module.ts
file and import both ReactiveFormsModule and FormsModule then add them to the imports array:

To create the registration and login forms to our components, Open the src/app/register.component.ts file and add the following code:

To set template part, open the src/app/register.component.html file and add the following code:

Register

Likewise, add the login form. Open the src/app/login.component.ts file and update it as follows:

To setup login form template, open the src/app/login.component.html file and add the following code:

Login

In last, for profile page form, Open the src/app/user-profile/user-profile.component.ts file and add the following code:

To set up profile page data, open the src/app/user-profile/user-profile.component.html file and add the following code:

Before we test Register, Login, Profile feature let’s add logout button to hide/show nav items in our MEAN stack user authentication app:

Open the src/app/app.component.ts file, import and inject AuthService and add the logout () method as follows:

Next, open the src/app/app.component.html file and add update it as follows:

Conclusion

In this article, we have seen by code examples how we can implement the flow of user authentication using APIs and JWT tokens in a MEAN stack web application. Further we have looked that how to create the frontend forms and handler service using Angular 9.

Back to Top