Auth0 Home Blog Docs

Authorization and JWT in a React SPA

Hey everyone,

I’m working on an authentication & authorization flow in a React Single-Page Application that uses JWTs. The quickstart guide recommends that scopes should be used for authorization.

The way we do things now is that particular users have to be manually vetted to access certain areas of the app. If they are given access, they will see more pages, if not, they only see minimal content.

Question 1

Is it possible to give a user a scope that wasn’t requested when logging in?

e.g. give them the scope access:restricted_area when user_metadata contains the field "access_restricted_area": true, but users without this flag should proceed with authentication normally (just not get the extra scope).

I tried writing a rule that pushes scopes in context.accessToken.scope (as per the context object documentation), but it looks like that’s not an array at this point and I can’t push things into it.

If I initialize it as an array, I only get this particular scope when logging in.

context.accessToken.scope = [];
context.accessToken.scope.push("access:restricted_area ");

Question 2:

How to deal with quickly propagating changes in authorization?

I understand from the Auth0 documentation (can’t find the link right now) that it isn’t safe to give users of SPAs refresh tokens because these never expire.

Is there another way to quickly propagate the change to the user?

I know that the user can constantly refresh their token while they’re still logged in (with webAuth.checkSession({audience, scope})), but this only works for as long as they’re actually logged in and have the site open. If they turn off their device, the session will expire.

So if I implement short-lived tokens (e.g. that have to be renewed every 5 minutes), the user will likely have to re-authenticate very often, leading to a poor user experience.

Other suggestions? Thanks!