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

2

If the Auth0 redirect is not working as expected with your deployed React site, there could be several reasons for this issue. Here are some troubleshooting steps you can follow to diagnose and potentially resolve the problem:

  1. Check Redirect URLs in Auth0 Dashboard:

    • Verify that the redirect URLs configured in your Auth0 application settings match the URLs of your deployed React application. Ensure that the URLs include the correct protocol (http:// or https://) and the correct domain.

  2. Check Callback URLs in Auth0 Dashboard:

    • In the Auth0 dashboard, under your application settings, make sure that the Callback URLs and Allowed Logout URLs are configured correctly to match your deployed React application’s URLs.

  3. Check CORS Settings:

    • If your deployed React application is making API calls to your Auth0 endpoints, ensure that Cross-Origin Resource Sharing (CORS) settings are correctly configured on both ends to allow communication between your application and Auth0.

  4. Verify Application Configuration:

    • Double-check that you’ve correctly configured your React application to handle Auth0 authentication and redirects. Ensure you’re using the correct Auth0 client ID and domain in your application code.

  5. Update Environment Variables:

    • If you’re using environment variables for your Auth0 configuration, ensure that the variables are correctly set in your production environment. Sometimes, incorrect values can lead to redirect issues.

  6. Check Browser Console for Errors:

    • Open the browser’s developer console and look for any error messages related to the authentication process or redirects. This can provide valuable information about what might be going wrong.

  7. HTTPS and Mixed Content:

    • If your deployed site uses HTTPS, make sure that all the resources (scripts, styles, images, etc.) are loaded over HTTPS as well. Mixed content (HTTP resources on an HTTPS site) can cause issues.

  8. Router Configuration:

    • If you’re using a client-side router (e.g., React Router), ensure that the router is correctly configured to handle the redirect URLs and routes.

  9. Firewall or Security Software:

    • Sometimes, firewall or security software on the server or client side can interfere with redirects. Check if any security software might be causing the issue.

  10. Browser Extensions:

    • Disable any browser extensions that might be affecting how the page loads or handles redirects. Some extensions can interfere with site functionality.

  11. Clear Browser Cache:

    • Clear your browser’s cache and cookies to ensure that you’re testing with a fresh session.

  12. Check Network Traffic:

    • Use browser developer tools to inspect the network traffic during the redirect process. This can help identify any failed requests or unexpected behavior.
      MyLabCorp Login

If none of these steps resolve the issue, consider reaching out to Auth0 support or seeking assistance from the Auth0 community forums. They might be able to provide more specific guidance based on the details of your application and deployment setup.

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.