Auth0 Integration With Heroku

[pleasehelp]

Hi. I am following this guide Auth0 React SDK Quickstarts: Login and my application works as expected on local host. After deploying to Heroku and updating my redirectUri however, I am receiving an undefined server IP could not be found error. Are there any other steps am I missing that are required for Heroku deployment? I found this thread React SPA deployed on Heroku with Auth0 not working which seems to contain my same issue, but I don’t understand the solution. I’m very new to both Heroku and Auth0 so I would really appreciate some help. Thanks.

[stephanie.chamblee]

Hi @pleasehelp,

I’m looking into this now! In order to recreate the error, did you add any environment variable to Heroku or make any changes to the QuickStart code to deploy your app?

Thanks,

Stephanie

[pleasehelp]

Thanks for the reply. My only environmental variables are the domain and client id. Do I also need to add my API audience url?

[stephanie.chamblee]

I’m not getting the same undefined server IP error, but I was able to deploy an example without setting any environment variables: https://sjc-react-example.herokuapp.com/

In the app, I’m just using the auth_config.json file, as I would locally:

{
  "domain": "<YOUR_DOMAIN>",
  "clientId": "<YOUR_CLIENT_ID>",
  "audience": "<YOUR_API_IDENTIFIER>"
}

Something that I was running into while trying to recreate this error is the fact that the QuickStart app runs a React app and API from the same start script. This is a challenge because Heroku dynamically assigns a port to bind to which is accessible with the process.env.PORT variable, and so I’m not sure how to listen to process.env.SERVER_PORT and process.env.API_PORT like it is set up locally.

It looks like there are workarounds for listening to multiple ports in an app deployed to Heroku, but it might be easier to deploy the API separately.

I was able to deploy the Quickstart app on Heroku by updating the npm start script to "node server.js" and changing process.env.SERVER_PORT to process.env.PORT in server.js. That way I am deploying the React app only.

It sounds like you are facing a different challenge than I did, though. Are you deploying your app from GitHub? Are you seeing the error when you are starting up the app or is it while the app is running (for example, are you seeing the error after attempting to log in to your deployed app)? Are you using the Heroku Auth0 add-on?

[pleasehelp]

I am not using the Auth0 add on. The app launches and functions fine, but when clicking the auth0 login button I am redirected to a page that looks like this Screenshot - 6b153ab19cb81bda1c08699b0e9b5694 - Gyazo. This error only appears on Heroku, and when I run locally I am properly redirected to the Auth0 login page.

[stephanie.chamblee]

Looking at the screenshot, it looks like the domain is undefined

Are you using Heroku environment variables for the domain, or are you using the auth_config.json file? It looks like the domain is undefined in the Auth0Provider:

// /src/index.js

ReactDOM.render(
  <Auth0Provider
    domain={config.domain} // <--- This is undefined
    clientId={config.clientId}
    audience={config.audience}
    redirectUri={window.location.origin}
    onRedirectCallback={onRedirectCallback}
  >
    <App />
  </Auth0Provider>,
  document.getElementById("root")
);

If you are using the auth_config file there, is the file listed in the .gitignore? You could troubleshoot by temporarily hard-coding the domain to see if that resolves the issue.

[pravin544]

Hi @stephanie.chamblee,

Sorry to jump in middle of convo. I am getting similar issue after deploying into heroku, local works just fine. Is there a source code for sample app you deployed that you can share? Or is there a step by step guide for react+auth0+heroku that you can share?

Thanks

[pleasehelp]

Hi. I’m not sure if you still have the issue but what worked for me was adding missing env variables to Heroku. You can use the cli or go to applications → settings → reveal config variables and add your domain and client_id. Also thanks for the help Stephanie if you’re reading this.