Checking user scopes in React SPA

Hi,

I’m implementing a new React app and I’ve got the authentication flow working nicely - except for checking scopes. My goal is to be able to conditionally show/alter components based on what scopes the user has, but in practice, all I seem to be able to retrieve from createAuth0Client or its React wrapper (https://auth0.com/docs/quickstart/spa/react/01-login) is whether or not I’m logged in at all.

There’s a lot of talk of scopes in the documentation (and I’ve got them working for my backend API), but the only resource I can find for accessing scopes in the frontend (https://auth0.com/docs/architecture-scenarios/spa-api/part-3#display-ui-elements-conditionally-based-on-scope) is for Angular using the auth0-js library, neither of which apply here.

I’ve tried adding a scopes parameter to my Auth0Provider, but can’t seem to find any indication that that’s even being checked on login, let alone a way of verifying any individual scope.

Any thoughts?

1 Like

Does anyone have a solution for this? Running into the same issue myself.

I actually worked this out shortly after posting. Turns out it’s as simple as decoding the JWT itself. As in, use getTokenSilently() to retrieve the JWT from the Auth0 cache, then use a generic library function like jsonwebtoken.decode() (https://www.npmjs.com/package/jsonwebtoken) to extract all the details including scopes.

Not sure why this isn’t mentioned anywhere in the tutorials / intro docs, though.

2 Likes

Glad you have figured it out and thanks for sharing with the rest of community! I’ll relay that to our docs team.

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.