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:
- Blazor Authentication with Auth0
- Blazor Authorization with Auth0
- Blazor With Auth0, using the Management API (this one)
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
- 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:
- Navigate to the dashboard.
- Click on
Applications > APIsin the sidebar
- Select the
Auth0 Management API
- Click on the
- Navigate to the Auth0 API Explorer
- Copy the Access Token
Now we have a token, let’s set the token and query some data using the API Explorer:
- Go to the Management API Explorer.
- Click the Set API Token button at the top left.
- Set the API token by pasting the API Token that you copied in the previous step.
- Click the Set Token button.
- Scroll down to
List or Search Users
- 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
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:
- Navigate to the Auth0 Dashboard
- Click Applications
- Click Create Application
- Give a fancy name for the Application
API To Management APIin our case
Machine To Machine Applications
Auth0 Management API
- Copy-paste the
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:
- Call the API to request a new access token and then make our request.
- 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
2. Setup DI in
3. Add ClientId and ClientSecret to the
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.
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