Configuring Auth0 Sample with Scopes — April 2022 Update

screen shot consuming my demo web api. web api code on github

There are several reasons for me love Auth0. Auth0 is a proper OAuth2 implementation. That is the key point. Then, there is the excellent community with very active users and Auth0 staff.

Finally, and the key reason I like Auth0, ready to use samples. Especially for React JS, a technology that I am still wrapping my head around.

Now, then, I have written about this before.

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

This post is the updated Auth0 sample that is available as on April 16th 2022.

First Step — Update auth_config.json

It should look something like this.

{
"domain": "ameeshapatelishot.us.auth0.com",
"clientId": "2WhAWDA40f8tGk",
"audience": "https://iambatman.com",
"scope":"read:current_user update:current_user_metadata read:capquotes read:penquotes read:profiledetails read:seeallquotes read:sitestats"
}

Second Step — Update config.js

It should look like this. I have only put the relevant part that you should change.

return {
domain: configJson.domain,
clientId: configJson.clientId,
scope: configJson.scope,
...(audience ? { audience } : null),
}

Third Step — Update index.js

Lastly, this should look like this. Again, putting only the relevant parts.

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

What exactly is happening here?

The essentials of React JS is something like this. You see, your entire app is configured, in index.js.

So, you have your ‘App’. We wrap the entire App, inside the Auth0Provider component that is provided by the Auth0 React SDK. So, now, your entire App can access React components from the Auth0 library. Things like, getting token, signin and signout.

However, the main AuthoProvider component needs to know, which is its authentication server. Remember that, OAuth0 depends on a authentication server, providing all the details.

Hence, we provide the key things — domain, client id and scope. The domain is the primary authentication server. The client id, confirms that your React App is authorized in the Auth0 dashboard.

Lastly, scope, indicates the different types of scopes aka permissions aka claims aka roles that can be accessed by your React JS app.

Confirmation of Steps

If you did everything right, you should see images like this. Also, it is a good idea to login, collect token and verify that everything is expected.

This page is your proper confirmation that you did well.

collect token from network section of developer tools.

verify that scopes are present in your token on jwt.io

Final Note

There is not much else to it. Happy coding.

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 about everyday life. And, a 2nd Podcast, where I talk about freelancing.