How to Do Angular Authentication Using Json Web Tokens(JWT)?

NAJILATH P | November 23, 2022

How to Do Angular Authentication Using Json Web Tokens(JWT)?

The fundamental feature of JWTs is that we simply need to inspect the tokens and verify the signature to determine if they are genuine; we don't need to make separate server calls or store the tokens in memory or a database between requests. JWTs will at the very least have a user ID and an expiration timestamp if they are used for authentication. Assuming a JWT is a string with a verifiable JSON payload that describes a user Session.

Why Was a Distinct Authentication Service Needed?

We can keep our code tidy by consolidating all of our client authentication functionality into a single, application-wide AuthService. In this manner, for instance, only this class has to be changed if we decide to switch security providers later or rearrange our security logic.

Returning a JWT to a Client

We can return the token to the user in a variety of methods, such as:

  1. In the Request Body in a Cookie
  2. Cookies are a browser data storage technology that allows us to safely save a limited amount of data in a simple HTTP Header. Assuming the login page and the application share the same root domain, this means that if we save the JWT in a cookie, we won't need any additional client logic to send the cookie back to the application server with each request. However, there are some drawbacks to cookies as well, so let's discuss. You click on a link sent to you by someone.

    The link eventually sends an HTTP request to the hacked website that includes all of the site's cookies. Additionally, the browser will immediately forward the Cookie containing our JWT bearer token if you were logged into the website. There is no way for the server to differentiate between this attack and a legitimate request because it receives a valid JWT. This means that by sending an email or posting a link, an attacker may persuade a user to carry out specific actions on its behalf.

  3. Returning the JWT in the Body of the HTTP Response
  4. For instance, we will return the JWT to the client in the HTTP Response body rather than using cookies. It is preferable to send the expiration timestamp as a distinct property in addition to the JWT itself when returning a JWT. Although the session duration may also be easily obtained by the client without installing a JWT library, indeed, the expiration timestamp is also provided within the JWT.

Client-Side Storing and Using of JWT Once

We must keep the JWT that we receive on the client since if we refresh the browser, it will be gone and we will have to log in again. The JWT and expires are contained in the outcome of the login call that we are receiving. We are saving the JWT directly in Local Storage in the id token key entry in the property and providing it directly to the setSession method inside of setSession. We are using the current instant and the ExpiresIn property to determine the expiration timestamp. Then, in the expiration at Local Storage field, we are also preserving the expiration timestamp as a numeric integer.

For instance, the client program needs to know whether the user is logged in or out to determine whether to display particular UI elements, such as the Login`/`Logout menu buttons, or not. The functions isLoggedIn(), isLoggedOut(), and getExpiration now make this data available () ending On each request, the server sends the JWT.

What we need to do is somehow attach the JWT to every HTTP request made to the application server! Afterward, the application server will validate the request and associate it with a user by simply looking at the JWT, verifying its signature, and reading the user identification from the payload. We'll utilize an Angular HTTP Interceptor to make sure that each request contains a JWT.

To check whether the JWT is present, we first directly retrieve the JWT string from Local Storage. If the JWT is missing, the request is transmitted to the server unaltered. If the JWT is present, we will clone the HTTP headers and add an Authorization header that will contain the JWT.

For any business, Authentication and authorization are two vital information security processes that administrators use to protect systems and information. This blog demonstrates how to perform authentication and authorization using JWT in Angular. Our team at Sanesqaure Technologies offers the best Angular application development services. Feel free to chat with us if you need assistance.

Does your Project Demand Expert Assistance?

Contact us and let our experts guide you and fulfil your aspirations for making the project successful