Blazor Authorization with 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:
- Blazor Authentication with Auth0
- Blazor Authorization with Auth0 (this one)
- 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.
- As a
administratorI want to create roles in the Auth0 Dashboard.
- As a
administratorI want to assign roles in the Auth0 Dashboard.
- Once a
useris authenticated we want to show different UI based on their role.
- As a
administratorI want to create new
Weatherforecasts, which should not be possible for
customersor regular users.
Open a browser and go to your Auth0 Dashboard, once there navigate to the User Management section and drill deeper into Roles.
- Add a new Role called
- 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:
- Create a new Action which sets the roles in the tokens. (code is listed below,
- Add the role to the login flow.
This little piece of code sets the roles in the tokens.
Checking the claims in the Token
Let’s see which claims are actually in the token by update the
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 the
ArrayClaimsPrincipalFactory to the configuration in the client’s
Now it should be possible to see the text, ”Only Administrators can see this”.
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:
In the client/pages folder add the
NavMenu.razor add a link which is only visible to administrators:
WeatherForecastController.cs on the server, we only want Administrators to add new weatherforecasts, add a
Authorize attribute to the
Run the app and try to add a new
What if we’re just a Customer, that should not be able to add new weatherforecasts?
- Login to the Auth0 dashboard
- Create a new Role called Customer
- Assign the Role Customer to the User you’re testing with and make sure the administrator role is no longer assigned.
- Logout of the application
- 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