Adding Roles in Auth0, .NET and React JS

Photo by Vijayasimha BR on Unsplash

This week, I am working with one of my clients, guiding him through the process of adding a new role to a full stack application that is powered by a combination of .NET 5, React JS and Auth0.

I thought I will put those steps here, for other students too. This blog compliments the code available at this location, on github.

Random Stuff Generator

Alright, let’s get down to it.

Step One — Add Permissions — Auth0 dashboard

You have to remember that a role in Auth0 is simply a combination of permissions. So, you start by adding a few permissions. permissions can be any word of your choice. You would do all on the Auth0 dashboard. If you have multiple tenants, ensure that you are in the right tenant.

read:testperm1
read:testperm2

Step Two — Create Role — Auth0 dashboard

Next, head over to the Roles section and create a new role. Then, combine the above two permissions.

TestRoleJune25th2021

Step Three — Assign Role — Auth0 dashboard

Next, pick one of your accounts in the user list, and assign the new role.

Step Four — Update Policy — .NET 5 BackEnd

The code would look something like this. This would go into your Startup.cs. Here, please remember the exact location matters. Check the linked code repository at the beginning of the post for more details.

//policy related to TestRoleJune25th2021
options.AddPolicy("TestRoleJune25th2021", policy =>
{
policy.Requirements.Add(new HasScopeRequirement("read:testperm1", "https://.us.auth0.com/"));
policy.Requirements.Add(new HasScopeRequirement("read:testperm2", "https://.us.auth0.com/"));
});

Step Five — Add Endpoint in Controller — .NET 5 BackEnd

Here is a simple controller with the new policy updated. It simply checks for the role and returns a simple JSON confirming that the endpoint was properly authenticated and authorized and responded to.

[Route("api/[controller]")]
[Authorize(Policy = "TestRoleJune25th2021")]
[ApiController]
public class TestRoleJune25th2021Controller : ControllerBase
{
[HttpGet]
[Route("Hi")]
public ActionResult<GeneralAPIResponse> ServerDetailsHi()
{
var generalAPIResponse = new GeneralAPIResponse();
var tempString1 = "Okay, You have TestRoleJune25th2021 Role";
generalAPIResponse.ListOfResponses.Add(tempString1);
generalAPIResponse.dateTimeOfResponse = DateTime.Now;
return generalAPIResponse;
}
}

Step Six — Update your Auth Config — React JS App

Update your auth config file in your react app. Once again, check the linked repository above for exact details.

{
"domain": ".us.auth0.com",
"clientId": "",
"audience": "",
"scope":"read:testperm1 read:testperm2"
}

Step Seven — Testing it out

If you are already logged in with your test account, please log out. This is important because, the existing logged in generated token would not have the new and updated roles.

If the React app is properly configured, the very first time you login, you should get something like this. This is your first hint that things went well. If you dont get something like this, you did something wrong.

a image like this confirms proper configuration.

Now, collect your token, like you would normally do by calling any authorized endpoint in your .NET server from your react app.

one way of collecting token for testing

Now, test it on your Swagger doc page or Postman. The new role should work.

Update on January 28th 2022 : I found out that some things have changed. So, if you are still having issues, check out this sequel post.

Auth0 — React JS Sample App — Configuring Scopes, Permissions and Roles

Final Note

Please remember that any full stack app would have four servers at a bare minimum. the backend server API, the front end server react JS app, the authentication server Auth0 and lastly, a database server. I have put above, one way of getting all these working together.

The entire process can be frustrating but, hang in there. You will get it working eventually.

I work as a full time freelance software developer and coding tutor. Hire me at UpWork or Fiverr. My personal website is here. I also have a Podcast. Thanks for reading.