Flask API call 401 for first try, 200 for second render

Help
,
1

My react app uses the following code to issue an access token for my Flask API.

App

        <Auth0Provider
          domain={auth0Domain}
          clientId={auth0ClientId}
          authorizationParams={{
            redirect_uri: auth0CallbackUrl,
          }}
        >
          <QueryClientProvider client={queryClient}>
            <App />
          </QueryClientProvider>
        </Auth0Provider>

Api Client

export default function useApiClient(backend) {
  const { getAccessTokenSilently } = useAuth0();

  let baseUrl: string = 'foo'

  const a = axios.create({
    baseURL: baseUrl,
  });

  a.interceptors.request.use(async (value) => {
    const token = await getAccessTokenSilently({
      detailedResponse: true,
      authorizationParams: {
        audience: 'http://localhost',
      },
    });

    value.headers.Authorization = `Bearer ${token}`;
    return value;
  });

  return a;
}

However, when I first load the page, my flask code returns a 401 status. But when I wait, and the query runs again after 30 seconds without a reload, it returns a 200. When I reload again, it is a 401 again.

What is causing this?

In Flask, I am simply using the auth0 recommended code.

2

To note: the Bearer token is the exact same both calls