Blazor Authorization with Auth0

Blazor + Auth0 = ❤️️

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).

This article is the second one in the series, I highly recommend you to checkout the first article to get up to speed.

Articles in this series:

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

In the last article you’ve learned:

• How to authenticate your users with Auth0
• Login with a social provider (Google in this case)
• Protect your Blazor Client
• Protect your REST API
• Connect the authentication flow between the Client and the Server.

In this article we’ll cover:

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

Use Cases:

• As a administrator I want to create roles in the Auth0 Dashboard.
• As a administrator I want to assign roles in the Auth0 Dashboard.
• Once a user is authenticated we want to show different UI based on their role.
• As a administrator I want to create new Weatherforecasts, which should not be possible for customers or regular users.

Creating Roles

Open a browser and go to your Auth0 Dashboard, once there navigate to the User Management section and drill deeper into Roles.

1. Add a new Role called Administrator.
2. Assign the role to yourself or to the user you’re planning to use for testing.

Setting Roles in the Id and Access Token

By default Auth0 does not add the role claim to the id nor the access token. Therefore we’ll never know who is in which role… However we can use a Custom Sign-in Action to add it to the tokens when signing in.

Follow the steps in the GIF:

1. Create a new Action which sets the roles in the tokens. (code is listed below, post-login-action.js)
2. Add the role to the login flow.

Set roles in the id and access token

This little piece of code sets the roles in the tokens.

post-login-action.js

Checking the claims in the Token

Let’s see which claims are actually in the token by update the Index.razor page:

Run the Client and see the results:

What you’ll notice is that the ”Only Administrators can see this” is not showing, appearantly the AuthorizeView component doesn’t handle it very well at this point, actually it’s the AccountClaimsPrincipalFactory which doesn’t like to serialize json arrays. However we can override this behavior by supplying our own. Create a new class in the Client/Shared folder ArrayClaimsPrincipalFactory and implement it as follows:

As a last step, let’s add theArrayClaimsPrincipalFactory to the configuration in the client’s program.cs

Now it should be possible to see the text, ”Only Administrators can see this”.

Administrator only

Let’s add a new component called AddWeather.razor which makes it possible for administrators to add a new weatherforecast for a certain date. The component looks like this:

Add Weather Data Form

In the client/pages folder add the AddWeather.razor component.

In the NavMenu.razor add a link which is only visible to administrators:

In the WeatherForecastController.cs on the server, we only want Administrators to add new weatherforecasts, add a Authorize attribute to the HttpPost call.

Run the app and try to add a new WeatherForecast.

What if we’re just a Customer, that should not be able to add new weatherforecasts?

1. Login to the Auth0 dashboard
2. Create a new Role called Customer
3. Assign the Role Customer to the User you’re testing with and make sure the administrator role is no longer assigned.
4. Logout of the application
5. Login in the application

Even if we remove the @attribute [Authorize(Roles =”Administrator”)] from the AddWeather.razor component, the API call will fail with a 403 forbidden, nais.

In the next article we’ll explore the API Explorer and check how we can show all the users in our own Blazor App using the Management API which is provided by Auth0.

Go to the next article, Blazor with Auth0, using the Management API | by Benjamin Vertonghen | Dec, 2021 | Medium

We ❤ open source so the source code can be found on Github

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