Change shopify authentication request url

Highlighted
New Member
4 0 0

Hi there,
I'm following the guide on https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react/embed-your-app-in-s...
So Shopify will access HTTPS://YOURNGROKADDRESS.io/auth?shop=YOURSHOPIFYSTORE.myshopify.com to authenticate the app.
My app is running on sub path, which I set as the app url in the app config. "App Url" = https://xxxxxxxx.ngrok.io/shopify/
It seems though that Shopify always accesses /auth on the root of the application (without my /shopify prefix).
Did I miss some config, or is running an app on a sub path not supported?

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
8 1 1

Hi, in order to set the auth callback to run at a different path you'll need to use the prefix option for the shopifyAuth middleware. So, in server/index.js it would look like:

 

createShopifyAuth({
      apiKey: SHOPIFY_API_KEY,
      secret: SHOPIFY_API_SECRET_KEY,
      scopes: ['read_products'],
      prefix: '/shopify',
      afterAuth(ctx) {
        const { shop, accessToken } = ctx.session;

        ctx.redirect('/');
      },
    }),
  );

Hope this helps!

0 Likes
Highlighted
New Member
4 0 0

Thank you for your answer!

 

This is what I set in the app configuration in the shopify partners App config:

Screen Shot 2019-06-26 at 10.05.36.png

 

The hmac request seems to point to the correct url:

reverse    | 172.18.0.1 - - [26/Jun/2019:08:07:50 +0000] "GET /shopify/?hmac=SNIPPED&locale=en-CH&shop=dev-store.myshopify.com&timestamp=1561536469 HTTP/1.1" 302 113 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36"

but the auth request is then done on the root of the ngrok.io url:

reverse    | 172.18.0.1 - - [26/Jun/2019:08:07:52 +0000] "GET /auth?shop=dev-store.myshopify.com HTTP/1.1" 200 26596 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36"

I'm using the example project from github. 

I set the following according to your suggestion:

createShopifyAuth({
      apiKey: SHOPIFY_API_KEY,
      secret: SHOPIFY_API_SECRET_KEY,
      scopes: ['read_products', 'write_products'],
      prefix: "/shopify",

This is the setup for my local nginx reverse proxy (one app is running on port 7000, which should the root of the ngrok. The shopify app is running on port 3000 and should be mapped to /shopify) :

events {}
http {
  server {
    listen 80;
    server_name dev.local;
    #different app running on local port
     location / {
      proxy_pass http://192.168.0.87:7000/;
    }

    location /shopify/ {
      proxy_pass http://192.168.0.87:3000/shopify/;
      proxy_set_header HOST $host;
      proxy_set_header Referer $http_referer;
    }
  }
}

I could only make it work by forwarding /auth to  the shopify app as well:

 

    location /auth {
      proxy_pass http://192.168.0.87:3000/auth;
      proxy_set_header HOST $host;
    }

Currently I think this could be a bug in the way Shopify handles the sub-paths. I'm still thankful for any pointers though!

 

0 Likes
Highlighted
New Member
4 0 0

I just tried around a bit more:

If I set the "/shopify" prefix.

The app correctly only supports auth on /shopify/auth.

 

But the request from Shopify is still pointed to /shopify. 

I had to create the following rule in nginx to make it work:

    location /auth {
      proxy_pass http://192.168.0.87:3000/shopify/auth;
      proxy_set_header HOST $host;
    }

This still confirms my theory that Shopify ignores the subpaths in the App Url config

0 Likes
Highlighted
Shopify Partner
2 0 0

Hi mbharanya,

 

Did you ever get this to work?  I'm seeing the same issue that looks like Shopify ignores the subpaths in the App Url config.

 

Thanks!

0 Likes
Highlighted
New Member
4 0 0

Unfortunately I haven't found another solution than my reverse proxy that I posted earlier.
I haven't spent more time on the problem though, as we abandoned the project I was working on alltogether.
Would love to hear from shopify directly, what their solution should be 

0 Likes
Highlighted
New Member
3 0 0

Hi, I have same problem as above with my development account.

With ngrok everything works fine. Now we have configured internal Domain name instead of ngrok. 

We are getting status code 302 multiple redirection ? 

Can we use other domain name apart from ngrok for development account? 

0 Likes
Highlighted
Shopify Partner
21 2 20

I'm having similar issues. Anyone have a good solution for this?

0 Likes