Authentication typically consists of a user entering using a username or email and a password and then being granted access to different resources or services.

Authentication in Angular 10, by its very nature, relies on keeping the state of the User. This seems to contradict a fundamental property of HTTP, which is a stateless protocol.

JSON Web Token (JWT) provides a way to solve this issue. Your Angular app can talk to a backend that produces a token. The Angular app can then pass that token in an Authorization header to the backend to prove they are authenticated and needs access to the particular route or resources. The backend should verify the JWT and grant access based on its validity.

Then on the frontend, we set the guard for a particular access point. So, if the User is authenticated, it can access the specific resources; otherwise, it won’t be able to access.

What is JWT Authentication

When a user logs into service, the server checks for the User’s credentials, if username and password match then, the server encodes the key user data, such as a user ID or the User’s email address into a JSON string.

The string is then signed using the secret key. This data is the JSON Web Token. It can be sent back to the client and used by the client to authenticate itself.

If the server can validate the token with the appropriate key, it can be sure that the authentication server generated it. But it can’t be forged because only the authentication server knows the private key.

Authentication can be provided by a service that is separate from the service wanting to restrict access.

What can Angular JWT Authentication do?

Angular Authentication should be able to do the following functionalities.

1. Users can register via Angular forms. (Template or Reactive Forms)
2. After register, the User can be logged in to the application.
3. If email and Password are correct, then the backend should generate a token and send back to the client.
4. The token should be saved in localStorage and can be able to retrieve whenever possible.
5. Users can set the token on the header, so after logged in, the token can be verified to access private routes.
6. Users can set an auth guard so that all the private routes should be protected based on the authorized users.

Angular 10 Tutorial

If you are taking this tutorial, then please do one thing and update all the different dependencies of this project as soon as possible Otherwise, you might face some issues while taking this tutorialIt is not mandatory to update all the tech stacks, but its good to use the latest version in this Angular 10 Tutorial.

1. Angular 10 (Check out how to update Angular CLI version 10)
2. Node.js 14.4.0(If your version is even number, then it is okay; otherwise, update it to even number because you can face some issues while running backend) and NPM or Yarn.
3. MongoDB Database.
4. Visual Studio Code.

We will create a backend using Node.js and Express framework.

This project is divided mainly into two parts.

1. Frontend (Angular)
2. Backend (Node)

We will start this tutorial by Installing Angular 10, and then immediately, we will build the Node.js server.

#angular #jwt