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

JAN 2023 UPDATE - For anyone else who stumbled upon this issue.. The solution is actually the opposite of what YY Zheng is saying now if using the current default Shopify App configuration.

When you set your HOST environment variable for production be sure to include the HTTPS:// as detailed in the deploy docs: Https twice on my redirect_uri shopify when trying to authorize my application

ie HOST="HTTPS://my-cool-app.com"

Answer 2

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, });

Answer 3

The below combination worked for me:

hostScheme: 'https',
hostName: 'your-hostname.com',

This is with shopify-app-express. There should be something similar for shopify-api as well.

A point to note: When you're testing the Merchant Install Link make sure to copy it correctly from the console, I got hit by that.