Shopify / Shopify/shopify-app-template-node

Oauth creation bug in template

Open
#1,282 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
1k
Forks
434
PR merge metrics
No merged PRs in 30d

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the OAuth auth/callback entry point and the shopifyApp settings in web/shopify.js, then reproduce the fresh-install flow using the listed template steps and logging configuration. Compare the OAuth cookie errors with the webhook registration code; done means a development-store install completes OAuth and webhook registration without those errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, node.js
Domain
api, authentication, backend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.