Blazor with Auth0, using the Management API

In this small series we’ll setup a Blazor Web Assemly Application which communicates with a C# REST API. We’ll protect the endpoints with Auth0 as Identity Provider based on Roles (RBAC).

Articles in this series:

1. Blazor Authentication with Auth0
2. Blazor Authorization with Auth0
3. Blazor With Auth0, using the Management API (this one)

This article is the third one in the series, I highly recommend you to checkout the first article and second one before continuing.

In the last article you’ve learned:

• Creating roles using the Auth0 dashboard
• Assigning roles to your users using theAuth0 dashboard
• Protect certain endpoints only for users within a specified role.

In this article we’ll cover:

• Using the Management API to query all our users/roles stored in Auth0.
• Create a new Role using the Management API.
• Using the API Explorer to test certain endpoints of the Management API.
• Upgrade our API to a Machine to Machine (M2M) client to use the management API.
• Automatically re-use the access token leveraging Dependency Injection and Delegation Handlers

Use Case

• As a Administrator I want to see all the users stored in the Auth0 database in the Blazor Client (not in the Auth0 dashboard)

The Final Result

• Login as administrator within Auth0.
• See all users stored in the Blazor client instead of the Auth0 dashboard.

The Auth0 Dashboard

The dashboard is pretty great and quite easy to use, however an administrator always has to login into Auth0 to see all the users, which might not be the best user experience. We can enhance this by using the Management API to query all the users and show them in the Blazor client. Before we dig deeper into the C# side of things, let’s introduce the API Explorer first, to see what the Management API is capable of.

API Explorer, Swagger’s bigger brother.

The API Explorer let’s you explore the documentation of the Management API interactively. The Management API is a simple yet powerfull REST API to query and mutate data inside Auth0 (outside the dashboard). The API Explorer reminds me of Swagger, but with some help to explore the API, hence the name ofcourse. Normally you always require a Access Token to call the Management API, but for testing purposes Auth0 provides a handy Test Access Token you can use in the API Explorer or even in Postman if you prefere. Let’s first get a Test Access Token we can later use in the API Explorer:

1. Navigate to the dashboard.
2. Click on Applications > APIs in the sidebar
3. Select the Auth0 Management API
4. Click on the API Explorer tab
5. Navigate to the Auth0 API Explorer
6. Copy the Access Token

Now we have a token, let’s set the token and query some data using the API Explorer:

1. Go to the Management API Explorer.
2. Click the Set API Token button at the top left.
3. Set the API token by pasting the API Token that you copied in the previous step.
4. Click the Set Token button.
5. Scroll down to Users > List or Search Users
6. Scroll down and click Try , you’ll see all the users in the database

However it does not stop there, let’s say you want to create a new Role and query all the roles, the API Explorer and Mangement API got you covered:

We won’t dig deeper into the API Explorer, but the possibilties are all there. I highly recommend using the API Explorer before you implement it using C#. If it doens’t work in the Explorer, it’s not gonna work in C# anyway.

Showing all users in our Blazor Application

Let’s take it a step further and show all the users in our own Blazor app instead of API Explorers and Auth0 Dashboard. Before we can consume the Management API we need an access token, to request this token we need a ClientId, ClientSecret and Domain. It’s never wise to put secrets in your Blazor WASM client, since it can easily be decompiled and read by a malicious user. Therefore our API needs to make the call to the Management API, but before we can do that, we need to upgrade our API to become a Machine to Machine client.

Machine to Machine Communication (M2M)

Our Client will make API calls to our API and our API will make requests to the Management API, however we’ll need to upgrade our API to also become a Client of the Management API and allow all the permissions you require. To create a M2M Application do the following:

1. Navigate to the Auth0 Dashboard
2. Click Applications
3. Click Create Application
4. Give a fancy name for the Application API To Management API in our case
5. Select Machine To Machine Applications
6. Click Create Application
7. Select Auth0 Management API
8. Select All Permissions
9. Click Authorize
10. Copy-paste the ClientId and ClientSecret, we’ll need it in just a moment

Integration with C# and Blazor

Auth0’s Management API is just a RESTfull API and can easily be called by using a HttpClient. However, Auth0 provides us with a .NET Standard 2.0 SDK which can be included using NuGet, which makes life easier. That being said, it still requires an access token which can be obtained using the SDK / REST API. The problem is that the access token is valid for 24 hours according to the specification. Before each call we’ll either have to:

1. Call the API to request a new access token and then make our request.
2. Implement our own access token cache to re-use tokens as much as possible so each request can use the token without requesting a new access token, which might be bad for performance and totally unnecessary!

The second option is the most desirable but requires some additional coding. Fortunately Hawxy already solved this problem using Delegating Handlers in the open source package called Auth0Net.DependencyInjection. So we can re-use the access token in our requests within 24hours, if the token expires it will call the API again to receive a new access token. #yay kudo’s to this guy! For the rest the official SDK is still being used, which is nice. Let’s implement the functionality to query users using these packages.

1. Add the package to the server project which has a dependency on the Auth0 SDK, so it’s coming along with it.

dotnet add package Auth0Net.DependencyInjection -v 2.0.0

2. Setup DI in Server/Program.cs

3. Add ClientId and ClientSecret to the Server/appsettings.json

4. Add a new UserController.cs in the Server/Controllers folder

5. Create a UserDto.cs in the Shared Project.

Notice that we’re using nested classes here, which makes it easier to find all the DTO’s for User related stuff. However using classes as namespaces is disencouraged by Microsoft. But hey, it’s makes my team’s life easier…

6. Let’s create a component to show all the users, called Users.razor in the Client project.

7. Finally create a NavMenu item to navigate to the component/page, but only for visible for administrators.

You should now see the following, also notice that we cache the access token, thus only 1 access token is being requested until expired.

Summary

The management API is really great, especially combined with the Auth0Net.DependencyInjection package. In this article we’ve only touched the top of the iceberg, you can do a lot more with the Management API. However there is also a public Authentication API, don’t mix those up since sometimes you have enough with the Authentication API.

As always the source code is hosted on GitHub since we ❤ open source

HOGENT-Web/csharp-ch-10-example-1 (github.com)