Https twice on my redirect_uri shopify when trying to authorize my application

Question

I am facing an common Shopify OATH authorization error, red every topic on that and still not resolved it.

I have an oauth error invalid_request: The redirect_uri is not whitelisted. On my app setup page, i copied the links correctly, i have :

App URL : https://MYNGROK.ngrok.io/
Allowed redirection URL(s) : https://MYNGROK.ngrok.io/auth/callback

When I test this on any of my developpement stores, in the redirect_uri on the request i have :

redirect_uri=https%3A%2F%2Fhttps%3A%2F%2MYNGROK.ngrok.io%2Fauth%2Fcallback

I know that the problem comes from this; why do I have https%3A%2F twice ? And how can I resolve this ?

Thanks all!

Answer 1

I had an exactly the same issue this afternoon, and took me a couple of hours before I realised what was causing it.

Posting the solution here in case anyone else had the same issue.

Shopify will duplicate the https if you have it already in your host name.

You have 2 options, either works for me:

Option 1:

In the .env file, you keep https://, so it looks something like:

SHOPIFY_HOST=https://MYNGROK.ngrok.io

Then in the index.js file or something equivalent, when you come to initialize shopify, you need to specify replace the https when you specify HOST_NAME.

Shopify.Context.initialize({ API_KEY: SHOPIFY_API_KEY, API_SECRET_KEY: SHOPIFY_API_SECRET, SCOPES: SHOPIFY_SCOPES, HOST_NAME: SHOPIFY_HOST.replace(/https:///, "") API_VERSION: ApiVersion.April22, IS_EMBEDDED_APP: true, });

Option 2: Just remove https from your host name. SHOPIFY_HOST=MYNGROK.ngrok.io

Then index.js file looks like this:

Shopify.Context.initialize({ API_KEY: SHOPIFY_API_KEY, API_SECRET_KEY: SHOPIFY_API_SECRET, SCOPES: SHOPIFY_SCOPES, HOST_NAME: SHOPIFY_HOST API_VERSION: ApiVersion.April22, IS_EMBEDDED_APP: true, });