Change shopify authentication request url

mbharanya
Tourist
4 0 1

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?

Replies 10 (10)
Tyler_Ball
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!

mbharanya
Tourist
4 0 1

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!

 

mbharanya
Tourist
4 0 1

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

dahliaScott
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!

mbharanya
Tourist
4 0 1

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 

Pravin-Bhapkar
Excursionist
12 2 2

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? 

FurnaceX
Shopify Partner
42 2 37

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

logesh
Tourist
8 0 0

any one still facing this issue ?

Mykhailo
Shopify Partner
9 1 4

Same issue here

ADBGianluca
Shopify Partner
1 0 0

We still have this issue. Any solution up to now ?