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'

//_app.tsx

import React from 'react';
import { Provider } from 'react-redux';
import { Auth0Provider, useAuth } from '@auth0/auth0-react';
import axios from 'axios';
import { ApiProvider } from './ApiProvider';
import { store } from './store';
import appConfig from './config';
import { handleOnRedirectCallback } from './auth';

const ApiProviderCustom = (props: ExtendedAppProps) => {
  const { Component, pageProps } = props;
  const { user, isAuthenticated, getAccessTokenSilently } = useAuth();

  const instance = axios.create();

  if (user && isAuthenticated) {
    instance.interceptors.request.use(
      async config => {
        const accessToken = await getAccessTokenSilently();
        config.headers.Authorization = `Bearer ${accessToken}`;
        return config;
      },
      error => Promise.reject(error)
    );
  }

  return (
    <ApiProvider instance={instance}>
      <Component {...pageProps} />
    </ApiProvider>
  );
};

const App = (props: ExtendedAppProps) => {
  return (
    <Provider store={store}>
      <Auth0Provider
        domain={appConfig.auth.CLIENT_DOMAIN}
        clientId={appConfig.auth.CLIENT_ID}
        authorizationParams={{
          audience: appConfig.auth.AUDIENCE,
          scope: appConfig.auth.SCOPE.replace(',', ' '),
          redirect_uri: typeof window !== 'undefined' ? window.location.origin : undefined,
        }}
        cacheLocation='localstorage'
        onRedirectCallback={handleOnRedirectCallback}
      >
        <ApiProviderCustom {...props} />
      </Auth0Provider>
    </Provider>
  );
};

export default App;

//ApiContect.tsx

import { ReactNode, createContext } from 'react'
import { ApiContextType } from 'src/types/global'
import BackendApi from 'src/api/BackendApi'
import { useAuth } from 'src/hooks/useAuth'
import { isDefined } from 'src/utils/miscellaneous'
import { AxiosInstance } from 'axios'
import appConfig from 'src/configs/appConfig'

type Props = {
  instance: AxiosInstance
  children: ReactNode
}

const defaultProvider: ApiContextType = {
  backendApi: new BackendApi(undefined, appConfig.backend_base_url, undefined, appConfig.machine_learning_base_url)
}

const ApiContext = createContext(defaultProvider)

const ApiProvider = ({ instance, children }: Props) => {
  // ** Hooks
  const { user, isAuthenticated } = useAuth()

  if (isDefined(user) && isAuthenticated) {
    const authenticatedProvider: ApiContextType = {
      backendApi: new BackendApi(undefined, appConfig.backend_base_url, instance, appConfig.machine_learning_base_url)
    }

    return <ApiContext.Provider value={authenticatedProvider}>{children}</ApiContext.Provider>
  } else {
    return <ApiContext.Provider value={defaultProvider}>{children}</ApiContext.Provider>
  }
}

export { ApiContext, ApiProvider }

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

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.