Token Authentication (JWT) in Angular

In the previous post, I showed you how to create a token in ASP.NET Core. Now I will show you how you can use it in a project that uses Angular.

Example

In the beginning, let’s create an angular project with the command ng new App-SPA –style=scss –routing (in the future I plan to write a bit more about Angular).

Let’s create a service that will get the token from API and after obtaining it, save it to localstorage.

baseurl – there is our api on port 5000

Let’s remind what the action to create a token looks like in API.

After calling the method from the AuthService, we see that our token has been saved there.

 

*do not forget to add the CORS service to API.

To decode token I will use the library angular2-jwt. So let’s install it by npm install @auth/angular-jwt.

At first creat object jwtHelper.

Then you can easily use it to decode the token.

Or seeing if the token did not expire.

For testing the operation of the application I created a very simple html view with a button that get and saves the token to localstorage. Additionally, nameid (from claims) is displayed if the token has not expired.

App-component.ts looks like below.

And it presents it as follows:

In the next post I will describe the mechanics of the auth guard.

Whole code on github.

One Comment on “Token Authentication (JWT) in Angular”

Leave a Reply

Your email address will not be published. Required fields are marked *