Oauth creation bug in template

[GaldinoMat]

Issue summary

Basically I was using the "auth/callback" endpoint to run some webhook creation functions and I was being constantly thrown this error

Cannot complete OAuth process. Could not find an OAuth cookie for shop url ...

So I gave my app a fresh install to check if the OAuth was being properly installed and this error was thrown right after I installed it in my store:

Could not find OAuth cookie | ...
Failed to complete OAuth with error: Error: Cannot complete OAuth process. Could not find an OAuth cookie for shop url: ...

Thinking it was some sort of weird bug since I converted the template shopify provides us to Typescript, I cloned the base JS template again and gave it another go.

Lo and behold, the same error is being thrown. Which is weird since the app is installed normally in my stores, but everything that uses the OAuth cookie throws this error and ends up breaking the development process.

I've seen similar issues like mine in #639 and here.

I think this can be quite serious since this is popping up in the base template and can be very difficult to fix to any new users that are trying to get into app development.

Here is my template for reference. It is basically the same as the original one, just converted it to TS, installed eslint and prettier and put the backend code in a different folder. I also used the original node-template Shopify provides us.

Here it the code that I've been trying to run to create an HTTP webhook

console.log('start webhook creation');

    try {
      shopify.api.webhooks.addHandlers({
        PRODUCTS_DATA_UPDATE: {
          deliveryMethod: DeliveryMethod.Http,
          callbackUrl: '/api/webhooks',
          callback: async (
            topic: any,
            shop: any,
            body: string,
            webhookId: any
          ) => {
            const payload = JSON.parse(body);
            console.log(`products update feedback: ${payload}`);
          },
        },
      });

      console.log('webhook handle registered!');
    } catch (error) {
      console.error(error); // in practice these should be handled more gracefully
    }

    try {
      const callbackResponse = await shopify.api.auth.callback({
        rawRequest: _req,
        rawResponse: res,
      });

      const response = await shopify.api.webhooks.register({
        session: callbackResponse.session,
      });

      if (!response.PRODUCTS_DATA_UPDATE[0].success) {
        console.log(
          `Failed to register PRODUCTS_DATA_UPDATE webhook: ${response.PRODUCTS_DATA_UPDATE[0].result}`
        );
      } else {
        console.log(
          `Registered PRODUCTS_DATA_UPDATE webhook: ${response.PRODUCTS_DATA_UPDATE[0].result}`
        );
      }
    } catch (error) {
      console.log(error);
    }
    console.log('finished webhook creation');

• @shopify/shopify-app-express version: ^2.1.3
• Node version: 16.19.1
• Operating system: Windows 11

`Cannot complete OAuth process. Could not find an OAuth cookie for shop url ...`
`Could not find OAuth cookie | ...`
`Failed to complete OAuth with error: Error: Cannot complete OAuth process. Could not find an OAuth cookie for shop url: ...`

Expected behavior

App should install and detect OAuth cookies normally.

Actual behavior

App throws said errors. It works normally but any OAuth related logic, like webhook creation, breaks completely.

Steps to reproduce the problem

1. Clone the template
2. Run yarn or npm install in the root directory
3. Run yarn dev or npm dev to start the development tunel
4. Install in any development store and watch the logs to check for the mentioned errors. Also try copying and pasting the mentioned code to check for OAuth errors when creating/registering webhooks.

[GaldinoMat]

up

[railerbailer]

solutions to this?