What's your biggest current challenge? Have your say in Community Polls along the right column.
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Oauth error invalid_request: The redirect_uri is not whitelisted

Solved

Oauth error invalid_request: The redirect_uri is not whitelisted

MarcoDo
Shopify Partner
19 4 8

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.
Accepted Solutions (2)
TheCodePixi
Shopify Staff (Retired)
5 3 4

This is an 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! 

To learn more visit the Shopify Help Center or the Community Blog.

View solution in original post

MarcoDo
Shopify Partner
19 4 8

This is an 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 .

 

 

View solution in original post

Replies 7 (7)

TheCodePixi
Shopify Staff (Retired)
5 3 4

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? 

To learn more visit the Shopify Help Center or the Community Blog.

MarcoDo
Shopify Partner
19 4 8
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
Shopify Staff (Retired)
5 3 4

This is an 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! 

To learn more visit the Shopify Help Center or the Community Blog.

MarcoDo
Shopify Partner
19 4 8

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
Shopify Partner
19 4 8

This is an 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
Shopify Partner
47 1 10

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
Shopify Partner
3 0 0

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