React Auth0 callback not found

1

I deployed my React app to Render.com on “my-app .onrender.com” and the deployment was successful. In my React app I use Auth0, so when the user logs in using the universal login page from Auth0 it redirects them to “my-app .onrender.com/callback”. In my app, I’ve created the callback page and auth0_provider_with_navigate.js as such:

import { Auth0Provider } from “@auth0/auth0-react”;
import { useNavigate } from “react-router-dom”;

export const Auth0ProviderWithNavigate = ({ children }) => {
const navigate = useNavigate();

const domain = process.env.REACT_APP_AUTH0_DOMAIN;
const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
const redirectUri = process.env.REACT_APP_AUTH0_CALLBACK_URL;

const onRedirectCallback = (appState) => {
navigate(appState?.returnTo || window.location.pathname);
};

if (!(domain && clientId && redirectUri)) {
return null;
}

return (
<Auth0Provider
domain={domain}
clientId={clientId}
authorizationParams={{
redirect_uri: redirectUri,
}}
onRedirectCallback={onRedirectCallback}
>
{children}

);
};

Where “redirectUri” is “my-app .onrender.com/callback”. When I open the deployed app, I see the login page, and when I click login it takes me to the auth0 universal login page, but after logging in it goes to “my-app .onrender.com/callback?..” and the blank page just says “Not found”. I’ve added the necessary environment variables to my app settings in Render. I’ve added “my-app .onrender.com/callback” as a valid callback URL on the auth0 app settings. I’ve checked the urls and even initiallized them statically without environment variables, but I still get Not found.
This works when I run the app locally, just not when deployed by Render.

2

I found a solution. The issue wasn’t with auth0 but actually with rendering the subroutes. With render, if you use React router, you have to follow these steps:

3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.