Specifying scope before calling loginWithRedirect()

[nwardcc]

I have written a SPA using node react with a view to handling our client data within auth0.
The app is working however to allow access to the metadata I am currently calling getAccessTokenSilently() with the scope set to read:current_user and if that fails reverting to getAccessTokenWithPopup() with the same scope. This all works fine, however it’s a poor user experience for new users, who have to login/sign up and then separately grant access with another login popup enabling the required scope. Ideally I would prefer to specify the scope before calling loginWithRedirect(), is this possible?

[stephanie.chamblee]

Hi @nwardcc,

Welcome to the Community!

You can pass scope to loginWithRedirect so that the user grants access all at once:

loginWithRedirect({scope: 'read:current_user'})

[nwardcc]

Hi Stephanie Thank you for you reply. You may have guessed but I am new to auth0! Is this documented anywhere, I couldn’t find any parms listed for this function? Also is it possible to pass in an array of scopes? Thanks again

[stephanie.chamblee]

No problem!

You can find all of the loginWithRedirect options in the auth0-react API reference: https://auth0.github.io/auth0-react/interfaces/auth0_context.redirectloginoptions.html

To pass multiple scopes, you can separate each scope with a space in the string, like so:

loginWithRedirect({scope: "read:current_user create:current_user_metadata"})

[nwardcc]

Hi Sorry to be a pain, however I get the following when I make the suggested changes to the loginWithRedirect

react_devtools_backend.js:2430 The requested scopes (openid profile email read:user_profile update:current_user_metadata) are different from the scopes of the retrieved token (openid profile email). This could mean that your access token may not include all the scopes that you expect. It is advised to resolve this by either:

• Removing read:user_profile update:current_user_metadata from the scope when requesting a new token.
• Ensuring read:user_profile update:current_user_metadata is returned as part of the requested token’s scopes.

Clearly I cannot take option one, so how do I ensure that this scope is returned as part of the requested token’s scopes.
Thanks again

[stephanie.chamblee]

No problem at all!

Is the audience that you’re using in your app the Management API or is it an external API? If it is the Management API, instead of read:user_profile, can you use read:current_user?

Here are the scopes that are available to SPAs for the Management API: https://auth0.com/docs/tokens/management-api-access-tokens/get-management-api-tokens-for-single-page-applications#available-scopes-and-endpoints

Also, can you send the code snippet for your Auth0Provider component?

For example:

ReactDOM.render(
  <Auth0Provider
    domain={config.domain}
    clientId={config.clientId}
    audience={config.audience}
    scope="openid profile email read:current_user update:current_user_metadata"
    redirectUri={window.location.origin}
    onRedirectCallback={onRedirectCallback}
    cacheLocation="localstorage"
    useRefreshTokens={true}
  >
    <App />
  </Auth0Provider>,
  document.getElementById("root")
);

[nwardcc]

Hi I was using the default setting from the example app, which passes null as the audience. It is now setup like this:
{
domain: config.domain,
clientId: config.clientId,
audience: https://${config.domain}/api/v2/,
scope:“openid profile email read:current_user update:current_user_metadata”,
redirectUri: window.location.origin,
onRedirectCallback,
}
which is working perfectly
Thanks again for your help.