Oauth error invalid_request: The redirect_uri is not whitelisted

[MarcoDo]

I get the above error when trying to authenticate: 

Oauth error invalid_request: The redirect_uri is not whitelisted

I followed the tutorial https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react, and weirdly the setup worked for the first ~3 ngrok adresses that I used.

Suddenly it stopped working. Since it worked multiple times, I am pretty sure that I put in the correct addresses as App-URL, Whitelisted URLs, ...

If someone has an idea why this problem suddenly might arise, please let me know.

[TheCodePixi · Accepted solution]

 There might have been an issue with Safari if you were using cookies in your app, as Safari has some really strict rules around that. But I'm glad to hear it was resolved! 

[TheCodePixi]

Hey! Were you ever able to resolve this issue? There could be other reasons this is happening, but it's most typically just a typo. If you're still having issues with your redirect URI, can you share what you have as your URL in your project (and how you're using it) and in your app setup in your app dashboard? 

[MarcoDo]

Click to expand...

Hey! Yes, the problem is solved. 

Th error only occurred on Safari, so switching to Chrome solved it. There was no typo however.

[TheCodePixi · Accepted solution]

 There might have been an issue with Safari if you were using cookies in your app, as Safari has some really strict rules around that. But I'm glad to hear it was resolved! 

[MarcoDo]

I just want to quickly follow up on this topic, since I have received the same error on another app I developed. 

Again, I have set up all redirect urls correctly (and didn't touch the shopify-cli code). It worked locally (with ngrok) but stopped working when deployed to Heroku.

I noticed that the query params of the redirect query was (parsed with json converter):

{
"client_id":".my-clientid",
"scope":"read_products",
"redirect_uri":"https://my-heroku-app.herokuapp.com//auth/callback",
"state":"821730078878296",
"grant_options":[
"per-user"
]
}

As you can see, for some odd reason a duplicate '/' is inserted before 'auth' which makes the redirect uri obviously invalid.

I have not really found a satisfying solution but got it working for me while developing. 

On the error landing page ("redirect uri not whitelisted ..") I simply deleted the the second '/' from the browser url and did another browser call.

As I said, this made me log in and enabled me to keep developing in the admin panel, however I think that if merchants install it in production, they might face the same issue (and ducktape solution) which is an obvious no-go I guess.

[MarcoDo · Accepted solution]

Okay, one last follow up in case somebody will struggle with this in the future.

My mistake was in my .env file (or your config vars if you deploy to heroku). 

As the "host" variable I had https://myherokuapp.com/ , (or https://myngrok.com/)

The mistake is the ending '/'. Delete this character and the problem will be resolved. 

So use: https://myherokuapp.com or https://myngrok.com .

[Zolbayar]

For future Googlers,

This could happen when you provide an invalid app public key or secret too. So, don't forget to double-check them if you're absolutely sure that you whitelisted the correct URL 🙂 😉

[Maxo]

thank you so much for your contribution, i really was stuck with this issue.