Hangfire Dashboard and JWT Authentication

Diego Bonura
We-Code Digital Studio
2 min readJun 10, 2019

I just posted an updated article with a better and simpler solution: https://medium.com/we-code/integrate-hangfire-dashboard-with-angular-using-jwt-token-e15ded8eee81

When you are dealing with enterprise applications you know that sooner or later you will have to integrate a task scheduler. Since, now many years ago, I moved from Java EE to .NET, I have always tried to use a product for the scheduling I love very much: Hangfire.

Hangfire is a complete, mature, and secure product that provides the developer with a fantastic environment for performing scheduled tasks or background workers. But today I would like to talk about one of his parallel projects in order to monitor the progress of the executions and a particular request I encountered during the development of the frontend side (Angular 7).

The product’s package is called Hangfire Dashboard and consists of a backend part for statistics and control API and a frontend developed in vanilla JS with the use of Chart.js.

Hangfire Dashboard

Main problem:

How to integrate an Angular application that uses JWT tokens to protect access to the Hangfire Dashboard based on user roles?

Very simply Hangfire allows you to develop your own authorization mechanism by extending the class: IDashboardAuthorizationFilter.

The first step is to implement this interface with a mechanism that includes the use of the JWT token along with that of the classic management with cookies:

The crucial point of this filter is the search for the JWT token on the query string, the management of cookies and JWT validation and of the claim content role.

Next, we need to configure the authorization filter in our startup:

As you can see we used the same JWT validation parameters and an “Admin” claim value to check the user’s authorization level.

At this point in our angular application we only have to create a link containing our Jwt token:

<a *ngIf="user.role == roles.Admin" href="main/admin/hangfire?access_token={{user.token}}" target="_blank">Hangfire</a>

Simple and very useful, all this allows us to be able to use the Hangfire Dashboard safely!

Please, Subscribe and Clap! Grazie!

--

--

Diego Bonura
We-Code Digital Studio

Software engineer with a strong sense of humor. Anyway yesterday it worked.