Hey all,
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>
);
Also, this is how it looks on prod 2x 302 redirects
Locally, it returns 302 from /authorize and 200 from /callback
Thank you