Обратный вызов Auth0 не работает на производстве

У меня есть приложение React & Django, которое работает локально, но не работает при развертывании на Heroku. Короче говоря, в локальной среде после входа в систему оно делает запрос на /authorize и после редиректа на /callback?code=xxx&state=yyy и сервер отвечает 200 OK.

На prod, с другой стороны, после вызова /callback сервер выдает 302 с Location to main page - "/". Неважно, к какой странице я буду обращаться, каждый раз он выдает 302 и попадает в бесконечный цикл.

Между локальным и продом нет абсолютно никаких различий. Также все необходимые URL настроены в env paths и Auth0 dashboard.

Вот мой код для

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>
  );
}

Я добавил его в 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>
  );
}

и index.js

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

Спасибо

Я пробовал менять URL-адреса обратного вызова, сравнивал локальное окружение с окружением prod и играл с провайдером Auth0 и настройками.

Приложение должно вернуть 200 OK после запроса конечной точки /callback

Вернуться на верх