Using Auth0 with NextJS on Heroku

by

I am trying to set up Auth0 to work with a NextJS app of mine on Heroku.

For that I followed the explanations given here:
https://auth0.com/docs/quickstart/webapp/nextjs/interactive

I am now at this section: “Add Login to Your Application”

But problems start to appear, when I try to visit:

    https://myapp.herokuapp.com/api/auth/login
    Since I use "(api)" for the directory name instead of "api"; the actual URL is:
    https://myapp.herokuapp.com/auth/login

I see something like this:

    dev-g3v4xyzu75ton2c
    Oops!, something went wrong

    Callback URL mismatch.
    The provided redirect_uri is not in the list of allowed callback URLs.
    Please go to the Application Settings page and make sure you are sending
    a valid callback url from your application.

    TECHNICAL DETAILS
    See details for this error

And when I click “See details for this error”, I get the following message:

    unauthorized_client: Callback URL mismatch. https://myapp.herokuapp.com/ABCD/api/auth/callback is not in the list of allowed callback URLs

I don’t quite understand this last message but I have checked that the URLs I set for the Allowed Callback URLs are correct.

Of course I have tried a few twicks, nonetheless without full success at this point.

I think I have configured the various parts, but obviously something is still wrong.

Any relevant tip from someone with experience using Auth0, maybe with NextJS, would be more than welcome.

  • I had poor experience with Auth0 libraries and spring framework. Don’t know about Auth0 nextjs libraries but I’d recommend finding an openid connect/oauth2 library for nexjs and using auth0 with that.

    – 

  • @K.Nicholas. OK. Would you have something to recommend? When looking for a way to set up user authentication in my Heroku app, I didn’t find much other than Auth0. I could also think of creating something on my own or use a combination of platforms, like going through an “auth-gate-app” on firebase which has a convenient way to handle user authentication. But I am not sure what I would come up with would be better than Auth0 which has supposedly already been used and tested by many other users.

    – 




  • No, I haven’t spent much time looking into front end libraries. npmjs.com/package/next-auth

    – 




  • You may have added https://myapp.herokuapp.com/api/auth/callback in the callback allowed list but what is the https://myapp.herokuapp.com/ABCD/api/auth/callback? I mean like what is the /ABCD/? Did you already add that also or not?

    – 

  • @Kalana. No, and this is the point. The only item I have set in the Allowed Callback URLs is: myapp.herokuapp.com. Besides, myapp.herokuapp.com/ABCD is indeed an existing route in my app but I have not set it anywhere concerning Auth0, so I wonder why it is showing up in this error message. In fact I don’t know what “provided redirect_uri” is referring to.

    – 

Leave a Comment