Custom Claim Does Not Show Up in Access Token

[mark29]

I’m having issues setting a custom claim on the accessToken in the Flow > Login script. I’m using the auth0 SPA JS SDK GitHub - auth0/auth0-spa-js: Auth0 authentication for Single Page Applications (SPA) with PKCE

Here is how I’m creating the client:

auth0.createAuth0Client({
        domain: ...,
        clientId: ...,
        authorizationParams: {
            redirect_uri: "http://localhost:3000"
        },
        useRefreshTokens: true,
        cacheLocation: 'localstorage'
    })

Here is the Flow > Login script to add a custom claim to the accessToken

exports.onExecutePostLogin = async (event, api) => {
  if (event.authorization) {
    api.accessToken.setCustomClaim('test', "hello");
  }
}

but I do not see the custom claim come through in the accessToken when calling const t = await auth0Client.getTokenSilently(); This returns a JWT with no data payload ...mwzciJ9..H7dP7YQ1...

However it works when setting the custom claim on the idToken when using

exports.onExecutePostLogin = async (event, api) => {
  if (event.authorization) {
    api.idToken.setCustomClaim('test', "hello");
  }
}

Any ideas why the accessToken does not include the custom claim from the Flow > Login script?

[tyf]

Hello @mark29 welcome to the community!

@mark29

but I do not see the custom claim come through in the accessToken when calling const t = await auth0Client.getTokenSilently(); This returns a JWT with no data payload ...mwzciJ9..H7dP7YQ1...

This is due to the lack of an audience param being passed in the authorize request - You can add this param in authorizationOptions. Without it, you’ll get an opaque token returned as you’ve seen.

What is the Audience

Last Updated: Jun 6, 2024 Overview The audience (presented as the aud claim in the access token) defines the intended consumer of the token. This is typically the resource server (API, in the dashboard) that a client (Application) would like to access. It can be added to the request to authorize i.e. audience: 'https://test-api'; Here is an example where an application MY_CLIENT_ID_12345 requested an access token with an audience of https://test-api. { "header": { "alg": "RS256", "…

[mark29]

I’ve added the audience to the config but getting this error now

Auth0Client.ts:503 Uncaught (in promise) Error: Service not found: https://nativeframe-prod-usc1b.nativeframe.com
    at ce.handleRedirectCallback (Auth0Client.ts:503:13)
    at auth.js:68:31

Options for reference

auth0.createAuth0Client({
        domain: ...,
        clientId: ...,
        authorizationParams: {
            redirect_uri: "http://localhost:3000",
            audience: "https://nativeframe-prod-usc1b.nativeframe.com"
        },
        useRefreshTokens: true,
        cacheLocation: 'localstorage'
    })

[tyf]

@mark29

https://nativeframe-prod-usc1b.nativeframe.com

Do you have https://nativeframe-prod-usc1b.nativeframe.com as a registered API in your dashboard?

[mark29]

Ah no, that’s what it was. Thank you!

[tyf]

Awesome, thanks for confirming!