Integrate Hangfire Dashboard with Angular using JWT Token
One of the most successful articles I have written in recent times concerns the possibility of using a JWT token to authenticate the user while using the Hangfire Dashboard: Hangfire Dashboard and JWT Authentication.
By analyzing this work you can discover how the integration uses two consecutive strategies, the first concerns the passage of the JWT token in the opening QueryString of the Hangfire Dashboard. Once the token is validated, the backend sets this token as a session cookie, thus allowing it to be verified while browsing the various areas of the Hangfire Dashboard.
To all intents and purposes, this approach is very simple to implement, especially regarding the frontend side, but sadly it has some drawbacks:
- The access token is concatenated to the opening URL. In particular, there is no limit on the length of URLs but some browsers cannot parse URLs longer than 2083 characters (Internet Explorer for example).
- The access token is directly visible in the URL making it easy to share. There are no security problems in this sense but it is always better not to make this information visible to the end-user.
In developing a new admin project at Loccioni, we, therefore, decided to improve the integration of our WebApp (based on Angular v11) with the Hangfire Dashboard, avoiding passing the access token directly into the query string.
The solution we are proposing is absolutely not linked to a particular frontend technology but in the examples, you will find an Angular component used to better integrate and manage the JWT token.
.NET Core Backend
First of all, we need to implement a specific authorization filter to allow the Hangfire Dashboard to validate our users, this implementation follows the official guide.
As you can see compared to the old version we no longer have the check of the presence of the access token in the query string but the search for the access token in the cookie called HangFireCookie .
The JWT token read from the cookie content is then validated according to the specific rules of our .Net application and then the user’s role is checked to filter access only to Admin users.
As always, to enable the authorization filter, we add a particular Hangfire DashBoard configuration in our Startup.cs:
In our authentication filter’s configuration, the thing to note is the role of the user passed as a constructor parameter. Another peculiarity of the configuration concerns the possibility to set the AppPath property to null. This particular configuration allows us to hide the back to site button on the HangFire Dashboard template.
Angular Component
At the beginning of this guide, we announced that the frontend is developed through Angular. To integrate the Hangfire Dashboard we have implemented a very simple component based on iframe tag.
The component is trivial and the peculiarity concerns only the management of the cookie called HangFireCookie. During the construction of that component, the token is taken directly from the security service that we use in Loccioni projects and then stored in the browser cookie area. On the contrary, during the destruction of the component, the cookie is deleted using a passed expiration time.
Ps: I remind you that by default a cookie has an expiration time of 30 minutes, more than enough to give an Admin the possibility to control Hangfire. However, keep in mind that the cookie expiration must be less than the JWT token expiration.
Here we see the final result of this integration:
As anticipated, the ability to write and remove cookies frontend side is not a prerogative of Angular, you can use the same approach in your React, Vue or Vanilla JS applications.
Easy, simple, and maintainable!
Please, Subscribe and Clap! Grazie!
