Auth0 — React JS Sample App — Configuring Scopes, Permissions and Roles
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.
TheChalakas.comHowever, this is just fine.
thechalakas.comTwo — 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": ".us.auth0.com","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.
