App install doesn't link to correct OAuth url

[Paul_vd_Dool]

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

[mdonohue]

Hey Paul,

Did you ever identify what's going on? We've got a similar issue and I'm trying to chase down if it's a library versioning issue or something deeper..

[Paul_vd_Dool · Accepted solution]

Are you also using the nextjs-shopify-toolbox by Dylan Pierce?
I've never really resolved it. The network request for some reason just never really resolved. I had Dylan look into it, but he couldn't reproduce the issue.

I eventually figured that I would just omit the request and do whatever is being done in the request, on the client side in index.tsx.

Because what it basically does is fetch some stuff like scopes and the API key from my .env file and create an auth URL out of it.

useEffect( () => {
  if ( typeof window !== "undefined" && window.location ) {
    const query = qs.parse(window.location.search.slice(1, window.location.search.length));
    const scopes = process.env.NEXT_PUBLIC_SHOPIFY_AUTH_SCOPES;
    const redirectUri = process.env.NEXT_PUBLIC_SHOPIFY_AUTH_CALLBACK_URL;
    const nonce = createNonce()
    const apiKey = process.env.NEXT_PUBLIC_SHOPIFY_API_PUBLIC_KEY;
    const authUrl = `https://${query.shop}/admin/oauth/authorize?client_id=${apiKey}&scope=${scopes}&redirect_uri=${redirectUri}&state=${nonce}`;
    if ( window.parent ) {
      window.parent.location.href = authUrl;
    } else {
      redirect.dispatch( Redirect.Action.REMOTE, authUrl );
    }
  }
}, [] );

Dylan did release a newer version of his toolbox whereas I'm still on a beta version of it but I haven't dared updating it yet. If it ain't broken...

"shopify-nextjs-toolbox": "^0.2.0-beta.1"

Hope this helps you.