getAccessTokenSilently failing in production build

Help
,
1

I have the following interceptor in my react app:

export const setAxiosTokenInterceptor = async (getAccessTokenSilently: () => Promise<string>): Promise<void> => {
  HttpClient.interceptors.request.use(async config => {
    const accessToken = await getAccessTokenSilently()
    const updatedConfig = { ...config }
    if (accessToken) {
      (updatedConfig.headers as AxiosHeaders).set('Authorization', `Bearer ${accessToken}`)
    }
    return updatedConfig
  })
}

This code works fine with local dev server. When I build my react app and serve it via NGINX or npm serve from build folder on a public facing domain/hostname, the getAccessTokenSilently call hangs and eventually fails. I am not sure why it is hanging or failing. The logs in auth0 dashboard says the login is success and response was sent, but my browser never receives a response.

I added the test site to all of my auth0 domain configs as well to ensure there were no permissions error.

How can i troubleshoot this? Since I do not have access to auth0 servers, I cannot troubleshoot anything on the opposite end.

I am on a dev auth0 account. is this why it is failing on production? do i need to purcahse anything for this to work ?

2

UPDATE: I found auth0 code timing out in my console in my browser:

image
image1920×1032 60.9 KB

So it is definitely timing out. seems like auth0 may be dropping the reply or maybe my webhost?