Oauth error invalid_request: The redirect_uri is not whitelisted

Question

I'm trying to develop an app with React and Node based on this documentation:

I followed the tutorial step by step but I'm stuck in testing the app with this URL format:

I replaced the ngrok address and my shopify store but I get the 404 error (This page could not be found.)

I found the same question in this link. So I renamed the .env to process.env but I still have the same problem.

Here is the .env file:

package.json :

server.js :

The error :

Answer 1

I don't think my answer is going to help many , But i am going to put it here anyway. So i had the same issue recently and i tried everything in stack-overflow and shopify community. And finally the problem was i had mistakenly copied my another app's apikey. So even if the apiKey is wrong the error probably you are going to face is the same "The redirect uri is not whitelisted."

Answer 2

Mistake I was doing that I forgot to postpend /auth/callback to Forwarding URL to the Allowed redirection URL(s) section generated by following command:

ngrok http 3000

so redirect url will be like:

https://SOME_STRING.ngrok.io/auth/callback

Answer 3

Yes there is an issue with your callback URL you have to define your app URL and callback URL in your shopify partner account where you create shopify app

Shopify partner account

You have to do as follow

open apps >> yourapp >> app setup >> Insert In URLs(Whitelisted redirection URL(s))

Once you whitelist your URL there then the issue is solve