Auth0 callback does not work on production

I have a React & Django application that works locally but not when deployed on Heroku. Long story short, on local env after login it makes a request to /authorize and after redirect to /callback?code=xxx&state=yyy and server respond with 200 OK.

On prod, from the other hand, after calling /callback server gives 302 with Location to main page - “/”. No matter what page I will access, every time it gives 302 and falls into infinite loop.

There are absolutely no difference between local and prod. Also, all necessary URLs are set up in env paths and Auth0 dashboard.

This is my code for

callback/index.tsx

import { PageLoader } from "../../components/page-loader";
import { useEffect } from 'react';
import { useAuth0 } from '@auth0/auth0-react';


export default function Callback() {
    const { isAuthenticated, isLoading, error, loginWithRedirect } = useAuth0();

  useEffect(() => {
    if (!isLoading && !isAuthenticated) {
      console.log("User is not authenticated. Redirecting to login...");
      loginWithRedirect();
    }
  }, [isLoading, isAuthenticated, loginWithRedirect]);

  if (isLoading) {
    return (
      <div className="page-layout">
        <PageLoader />
      </div>
    );
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div className="page-layout">
      <PageLoader />
    </div>
  );
}

I added it to App.js

<Route path="/callback" element={<Callback />} />

providers/auth.tsx

import { AppState, Auth0Provider } from "@auth0/auth0-react";
import { useNavigate } from "react-router-dom";

const domain = process.env.REACT_APP_AUTH0_DOMAIN;
const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
const audience = process.env.REACT_APP_AUTH0_AUDIENCE;
const redirect_uri = process.env.REACT_APP_AUTH0_CALLBACK_URL;

export default function AuthProvider({ children }: { children: React.ReactNode[] }) {
  const navigate = useNavigate();
  const onRedirectCallback = (appState?: AppState) => {
    navigate(appState?.returnTo || window.location.pathname);
  };

  if (!domain || !clientId || !audience || !redirect_uri) {
    throw new Error("One of the required environment variables is missing!");
  }

  return (
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      onRedirectCallback={onRedirectCallback}
      authorizationParams={{
        audience: audience,
        scope: "profile email read:api",
        redirect_uri: redirect_uri,
      }}
    >
      {children}
    </Auth0Provider>
  );
}

and index.js

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Router>
    <AuthProvider>
        <App />
    </AuthProvider>
  </Router>
);

Thank you

I tried changing callback URLs, compared local to prod environment and played with the Auth0 provider and settings.

App should return 200 OK after requesting /callback endpoint

Back to Top