Get token silently fails on non-Chrome browsers

We plan to getTokenSilently on every backend api call so to extend the access-token lifetime.

Using this example as proof-of-concept auth0-javascript-samples/01-Login at master · auth0-samples/auth0-javascript-samples · GitHub the call to get new token fails on browsers like Safari, Firefox and Brave (It works fine on Chrome) with error:

Error: Login required
    at new n (auth0-spa-js.production.esm.js:1:1)
    at n.fromPayload (auth0-spa-js.production.esm.js:1:1)
    at r (auth0-spa-js.production.esm.js:1:1)

I added the code after line 119:

console.log('getTokenSilently', await auth0.getTokenSilently({ ignoreCache: true }));

snippet below

    try {
      const result = await auth0.handleRedirectCallback();

      if (result.appState && result.appState.targetUrl) {
        showContentFromUrl(result.appState.targetUrl);
      }

      console.log("Logged in!");
      console.log('getTokenSilently', await auth0.getTokenSilently({ ignoreCache: true }));
    } catch (err) {
      console.log("Error parsing redirect:", err);
    }

some other details:

    await auth0.loginWithRedirect({
              returnTo: 'http://localhost:3000'
            });

  auth0 = await createAuth0Client({
    client_id: <populated>,
    audience: <populated>,
    connection: <populated>,
    domain: <populated>,
    redirect_uri: "http://localhost:3000",
  });

If I want to get this working I have to update browser config to “allow all cookies” which is not something we plan customers to do as that is not the default setting. Is this a known bug, any workaround appreciated. Thank you.

Hello @alvin-ec welcome to the community!

This is unfortunately a known issue that is just due to modern browsers and cross-origin authentication - You can address this by adding a custom domain to address this limitation.

This can also happen if the audience and/or scope is different than in the original request.

The following FAQ on Custom Domains may also be helpful:

1 Like