Content Security Policy directive: "frame-ancestors 'none' When Using getAccessTokenSilently with Auth0

[parth25]

Checklist

• The issue can be reproduced in the auth0-react sample app (or N/A).
• I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
• I have looked into the API documentation and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• I agree to the terms within the Auth0 Code of Conduct.

Description

When we attempt to get a token using getAccessTokenSilently after a session has expired, we receive the following error:

Refused to frame 'https://****.uk.auth0.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'

Repository:

https://github.com/parth25/pos-react-auth0

Reproduction

1. Allow the user session to expire.
2. Call getAccessTokenSilently to retrieve a new access token.
3. Observe the error in the console.

Additional context

We are using Universal Login for our Auth0 setup.
This issue appears to be related to the Content Security Policy settings of our Auth0 tenant. The frame-ancestors 'none' directive is preventing the request.

auth0-react version

2.2.4

React version

18.2.0

Which browsers have you tested in?

Chrome, Firefox

[gyaneshgouraw-okta]

Hey @parth25,

Yeah, this is a known issue. It happens when Auth0 returns a frame-ancestors 'none' CSP header, which blocks the hidden iframe used for silent auth. This usually comes up when the user’s session has expired and getAccessTokenSilently() tries to renew the token behind the scenes.

Why it breaks

• Session has expired
• Auth0 sends strict CSP
• Third-party cookies are blocked (Safari, Brave, etc.)
• Certain Universal Login settings enforce stricter CSP

How to fix it

1. Consider Auth0 Custom Domains

If you're using Auth0 custom domains, the iframe requests become same-origin, which typically avoids CSP issues.
This is the number one solution for robust token management and getTokenSilently reliability.

2. Use refresh tokens

Skip iframes and rely on refresh tokens instead:

<Auth0Provider
  domain="your-domain.auth0.com"
  clientId="your-client-id"
  useRefreshTokens= {true}
  cacheLocation='memory'
  authorizationParams={{ redirect_uri: window.location.origin }}
>
  <App />
</Auth0Provider>

3. Handle the error gracefully

Catch silent auth failures and fall back to interactive login like loginWithRedirect():

try {
  await getAccessTokenSilently();
} catch (e) {
  if (e.error === 'login_required' || e.message?.includes('frame-ancestors')) {
    await loginWithRedirect();
  } else {
    throw e;
  }
}

Let us know if you have additional questions about the configuration or the issue.