Published in


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

Photo by Vijayasimha BR on Unsplash

Today, I was working with one of my student clients, and we were configuring roles and permissions for our .Net 6 WEB API project. I have done this before. In fact, we used the guide that I myself wrote a few months ago. It’s available here.

This post, is like a sequel, to the above post. Make sure, you do all steps in the above post, before coming here.

However, I found out that, the Auth0 sample React JS app has changed a bit. So, we struggled to get the correct scopes in our client app, and by extension, the token that was being returned.

After hours and hours of researching, we solved it. I am sharing what we found, here.

You can get the sample here, from the main Auth0 repository. However, i strongly recommend you download it directly from the Auth0 dashboard. It, automatically includes most settings.

I lay out the many things we did to get this working.

One — Don’t use Upper Case letter in your ‘audience’

Well, this one is silly and odd, but, apparently, we cannot use upper case letters in the audience name.

For example, this is NOT GOOD.

However, this is just fine.

Two — Update your auth_config.json

It should look something like this. The default app does not come with the scope property. Add the ‘scope’ property.

{"domain": "","clientId": "","audience": ".com","scope": "read:current_user update:current_user_metadata read:testperm1 read:testperm2"}

Three — Update your config.js

Since the scope property is not included by default, the config.js, also does not ‘extract’ it. You will need to extract it and return it.

import configJson from "./auth_config.json";export function getConfig() {// Configure the audience here. By default, it will take whatever is in the config// (specified by the `audience` key) unless it's the default value of "YOUR_API_IDENTIFIER" (which// is what you get sometimes by using the Auth0 sample download tool from the quickstart page, if you// don't have an API).// If this resolves to `null`, the API page changes to show some helpful info about what to do// with the audience.const audience =configJson.audience && configJson.audience !== "YOUR_API_IDENTIFIER"? configJson.audience: null;return {domain: configJson.domain,clientId: configJson.clientId,scope: configJson.scope,...(audience ? { audience } : null),};}

Four — Update ReactDOM.render

Finally, you need to include the scope property to the Auth0Provider

ReactDOM.render(<Auth0Providerdomain= {config.domain}clientId={config.clientId}redirectUri={window.location.origin}audience={config.audience}scope={config.scope}><App /></Auth0Provider>,document.getElementById("root"));

Final Note

Ultimately, a lot of it is common sense for most folks. Unfortunately, I am not a React JS developer. So, what should have been obvious, became tricky.

Hopefully, there are others like me, and hope this helps.

I work as a full time freelance coding tutor. Hire me at UpWork or Fiverr or Stack Overflow. My personal website is here. Find more of my art at Behance and Unsplash. Also, I have a Podcast. Also, I am on substack.




I have been tutoring for a while now. I write some quick tips, tutorials and related topics here.

Recommended from Medium

JSON Web Tokens

Our Latest Partnership, DMScript X Modefi

Default Redirect Page

How I solved Bomberman challenge on HackerRank

Benefits of using Arrow Functions in JavaScript

Tail Calls in JavaScript — Will there be a comeback?

Make Your Identity in Cli World.

Angular Optimization. Memoized pipe functions in templates.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store


Freelance Tutor — Coding, Generative Art and Photoshop. Full Name : Vijayasimha BR

More from Medium

How To Use CORS in NestJS Application

NestJS For Absolute Beginners

Building REST API with Express.js, TypeScript and Swagger

TypeORM Query Builder Wrapper