Both spa and auth.js SDKs in a React app

Help
1

Hello,

I’m already using the Auth0.js SPA SDK to log my users in. I need to update their profiles on Auth0 and, as far as I understood, this SDK does not support this. I would therefore like to use the auth0.js SDK in the same project, but without asking the user to re-login to get a token for the Management API audience and use it to update their profile.

Any way to do that?

2

To update a user profile, you to make a call to the Management API, which you need a backend for. Can’t be done from the frontend / SPA.

Getting a token for the Management API is via Client Credentials Exchange, so basically a M2M (Machine to Machine) communication. It requires a client id and client secret (which can’t be stored securely in a SPA).

So these update requests need to be proxied so a backend/API of yours. The user uses his access token (AT) to make the update request to your backend/API. Your backend/API validates the AT and request payload, and makes the call to the Auth0 Management API with its own M2M access token.

3

Oh wow… what about checkSession? I thought we can use that to get a different token to a different audience silently. Did I misunderstand?

4

Also, isn’t this meant to be done on the front-end: https://auth0.com/docs/libraries/auth0js/v9#updating-the-user-profile

6

Ok, I see.

So, you just want to update user_metadata, none of the root attributes (email, name, etc.).

Available scopes are limited as per your linked docs

You can ask for the following scopes:

  • read:current_user
  • update:current_user_identities
  • create:current_user_metadata
  • update:current_user_metadata
  • delete:current_user_metadata
    …

so, for example, scope update:users isn’t.

Yes, I guess then it should be possible. TBH I haven’t tested it out myself yet with the older Auth0.js.

but without asking the user to re-login to get a token for the Management API audience

Even without helper method for updating a user profile in the newer auth0-spa-js SDK, you should still be able to get a proper access token for the management API with it. You just need to pass the audience parameter into the loginWithRedirect method.

Then use that token to make the Mgmt API call directly, without a helper method.

In case you need to get an access token for the Auth0 Mgmt API and one for your own API, so basically two access tokens, you can get the second one via Silent Authentication:
https://auth0.github.io/auth0-spa-js/classes/auth0client.html#gettokensilently

But in any case, since there’s an existing valid Auth0 session from the first login already, he wouldn’t need to re-login anyway.

So, summarizing: unless you really need this helper method to update the user profile in Auth0.js, you should be fine without it as well and can just use auth0-spa-js fine, if you don’t mind making that update request via a plain JS request.

In any case, whether you use one or two SDKs in your project: as long as you’re using the redirect flow via the Auth0 login page, which you do, and the user has a valid Auth0 session, he wouldn’t be prompted to re-login.

To avoid this second redirect (even though no prompt would be coming), you can rely on the mentioned Silent Authentication approach.