App install doesn't link to correct OAuth url

Paul_vd_Dool
Shopify Partner
38 3 21

Hi,

My app was recently submitted and I've been getting reports that if users click on 'Install app' on the listing page, they're redirected to an URL on their store resulting in a 404 page, while they should be redirected to the OAuth URL.

If they try to install it a second time, it works just fine.

I have no clue why this is happening, so hopefully somebody here knows the answer.

First bit of information: my app is build using NextJS.

So when the user pushes the install button, the first URL they go to is:
my-app.vercel.app/?hmac=hmac-string&shop=shop-slug.myshopify.com&timestamp=1634798897

This will reach my index.tsx file.

 

 

export default function Home() {
  // page context params
  useEffect( () => {
    if ( typeof window !== "undefined" && window.location ) {
      const query = qs.parse(window.location.search);
      axios
        .post("/api/auth", {
          query: query,
        })
        .then( ( response: any ) => {
          if ( response.data.redirectTo ) {
            if (window.parent) {
              window.parent.location.href = response.data.redirectTo;
            } else {
              window.location.href = response.data.redirectTo;
            }
          }
        })
        .catch( function (error) {
          // handle error
          console.error(error);
        } );
    }
  }, [] );
}

 

 

For authentication I use a package called Shopify NextJS Toolbox.

Therefore, my api/auth.tsx file is very bare-bones and looks like this:

 

 

import { handleAuthStart } from 'shopify-nextjs-toolbox';

export default handleAuthStart;

 

 

The code for handleAuthStart can be found here.
https://github.com/ctrlaltdylan/shopify-nextjs-toolbox/blob/master/src/middleware/oauth/handleAuthSt...

I'm pretty sure the issue is due to the fact that the api/auth endpoint isn't resolving correctly. I can see that it keeps PENDING in the DevTools. But I'm not sure how to fix that.

The code in index.tsx doesn't reach the .then() part but still, the user is for some reason redirected to:
store-slug.myshopify.com/apps/unique-app-id/?hmac=hmac-string&shop=store-slug.myshopify.com&timestamp=1634798897

This URL is the URL they should eventually end up at after walking through the OAuth (granting my app access) with the difference that there should be "admin/" between "store-slug.myshopify.com" and "/apps". (store-slug.myshopify.com/admin/apps/...)

And like I said above. If the user would try this a second time shortly after, the OAuth flow works correctly, the api/auth endpoint resolves and the app can be installed.

I've tried several things to resolve this myself.

First thing I noticed was that the query object in the index.tsx file wasn't entirely correct.
The qs.parse() method kept the question mark from the hmac param. So instead of { hmac: hmac-string, shop: shop-slug.myshopify.com, timestamp: 1634798897 } it returned { ?hmac: hmac-string, ... }. This briefly seemed to resolve the error yesterday, but the issue returned today so the fact it seemed to work again was just a weird fluke.

I've tried adding my own handleAuthStart file instead of using the external one from the package. In a local dev environment, I can then see that it goes through the whole function, even to the part where it returns the response with a status of 200 and the authUrl as a redirectUrl, but still it doesn't resolve correctly.

 

My own best guess is that for some reason it fails on one of the first lines in the handleAuthStart file but I have no idea how to debug that.

Really hoping somebody can give me a pointer.

For anybody wanting to try it out and see the issue for themselves. Here's my app listing page: https://apps.shopify.com/doppelganger-app

Replies 0 (0)