Auth0 Redirect Not Working with Deployed Site (React)

Help
,
1

This is my first time deploying a site, in which I did through render.com. On my landing page, there is a login button that is supposed to redirect to Auth0’s /authorize endpoint and allow the user to log in before redirecting to https://beatlimbo-frontend.onrender.com/profilecreation. However, after clicking the button, Auth0 screen never appears, and I am instantly redirected to a variation of the path: https://beatlimbo-frontend.onrender.com/profilecreation?code=-xi-7aZ6X61oGM3xJNNNkK8sMR85fAo94Ah7xymxxwewf&state=ZUxUeDd5Ny5VanlBOWcweU1HUE1sa1NyNUo4RFNEQTFncy5XR1BjdTRCVQ%3D%3D. I have added a redirect of /* to index.html so it is no longer showing “Not Found” on the page, but I still never see the Auth0 login screen and instead my page is completely blank, at the same url. Here is the status of the event: Request URL:https://beatlimbo-frontend.onrender.com/profilecreation?code=-xi-7aZ6X61oGM3xJNNNkK8sMR85fAo94Ah7xymxxwewf&state=ZUxUeDd5Ny5VanlBOWcweU1HUE1sa1NyNUo4RFNEQTFncy5XR1BjdTRCVQ%3D%3DRequest Method:GETStatus Code:200Remote Address:216.24.57.3:443Referrer Policy:strict-origin-when-cross-originFurthermore, I have made sure to configure my Auth0 allowed callbacks correctly and have adjusted them as needed in my code. However, I am still not entirely sure if this is a Render, Auth0, or React issue.

EDIT: I updated the Render build command to include my environment variables and am now getting the following error instead: This site can’t be reached. authorize’s DNS address could not be found. Diagnosing the problem.
DNS_PROBE_POSSIBLE at the following url: https://authorize/?client_id=&scope=openid+profile+email+offline_access&redirect_uri=https%3A%2F%2Fbeatlimbo-frontend.onrender.com%2Fprofilecreation&response_type=code&response_mode=query&state=ZWJKZHpUZmFZYjZaLn5TNGJleVN6UFNvSHZqeDRPNUlhVDhXZlhoWjlwTA%3D%3D&nonce=dmNfVUx0Nm9XNE9ydEt3YXVZMmlkTHV6Z1d4aVJoUUVDZFlXR1ZnMEI0UA%3D%3D&code_challenge=bwjthecpYQYd1q-S7ZXmGhOcyN96ltapAfNh1HfafSQ&code_challenge_method=S256&auth0Client=eyJuYW1lIjoiYXV0aDAtcmVhY3QiLCJ2ZXJzaW9uIjoiMi4yLjAifQ%3D%3D

3

Hi, thank you for replying. I reconfigured my Auth0 URL’s in the settings and am now successfully getting my Auth0 login after hitting “Get Started”. However, after logging in I am redirected to a blank page with a URL of https://beatlimbo-frontend.onrender.com/profilecreation?code=DwF3LSheHDQ9Wd-4IPHd3sqMgsaRSW9si2qzbux7BqIHe&state=Y1B2SmNuOWtIN0MzWExLWnpkbFhMTWFhVnEzazNISFNFdUNKZ0VDSUpFUA%3D%3D while I should be getting redirected to just https://beatlimbo-frontend.onrender.com/profilecreation; which is supposed to have content on the page. That link is in my Allowed Callback URLs as well. Not sure what I’m missing now. Here is the link to my repo if that helps: GitHub - mannybennett/BeatLimbo: A website that allows producers to get feedback on tracks that are unfinished or otherwise kept from the world.

4

Hello MannyBennett,

I know this is a late reply, but have you solved this problem yet? I also deployed React app (with Auth0 integrated) on Render, and I also ran into the same problem as you, that is, after user logged in, they are not redirected to the assigned callback URL as specified in Auth0 Application because the redirect URL has the query parameters ?code…&state…and in the browser’s console, it says 404 Not Found Error.

I solved this problem successfully. The way I did was:
. In the Render, go to your Static site service (just like the way you deployed the Frontend React) → on your left, there’s a tab called Redirects/Rewrites. And you will specify like this:

image
image1730×742 43.7 KB
(This will solve the problem with 404 Not Found, because you need to tell Render to redirect the inbound request to the index.html, which is where your React app is served. Otherwise, it will says 404 Not Found the file that your React app is served to render/display the contents)

. In your Frontend React code, if you use Auth0Provider in main.jsx, you need to use like this:

image
image832×767 46.8 KB

That is, you should use the template string (the backticks) instead of string concatenation with the “+” sign. I do not know why, but I have tried many times and by trial-and-error, I find that when I use string concatenation in the redirect_uri, then the redirect_uri is different to what I have assigned in Auth0 Dashboard. So I find out that using Template String with backticks ``, solved the problem successfully.

After doing 2 steps above, I have solved the problem successfully. I do not know whether you have solved it successfully yet, but if not, please give it a try, because it works perfectly on my side. Sorry for the late reply…

Best regards,
Quan

5

Hi, I’m having the same problem,
but my main page is on / , so I don’t have to redirect anywhere.

I still can’t fix this problem. It happens only with facebook, not google.
My app is in production, and both google and facebook approved it.

6

Hello friend,

If your main page is on /, so you can set the redirect_uri in the Auth0Provider to be ${window.location.origin} (using the backticks ``). That’s all, you can give it a try. Remember to add this redirect_uri to Auth0 Application Dashboard, and after you make the changes in your code, remember to deploy this code again so that the changes can be reflected in production

Best regards,
Quan