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

[kdeng]

Issue summary

I am trying to demonstrate how to retrieve the Shopify store access_token using the following code, and I keep receiving this error. I reviewed another issue (#582), and it mentioned the issue should be fixed. Unfortunately, I still experience this issue.

  shopifyAPI.auth.callback({
      isOnline: false,
      rawResponse: request,
      rawRequest: response
  })

Expected behavior

to have Shopify.auth.callback({ isOnline: true, rawRequest: req, rawResponse: res, }) to not throw an error

  const shopifyAPI = shopifyApi({
    apiKey: apiKey,
    apiSecretKey: apiSecret,
    scopes: getShopifyAppScopes(),
    hostName: getShopifyCallbackHostname(),
    hostScheme: SHOPIFY_APP_HOST_SCHEME,
    apiVersion: SHOPIFY_APP_API_VERSION,
    isEmbeddedApp: true,
  })
  const callbackResponse = await shopifyAPI.auth.callback({
    isOnline: false,
    rawResponse: {},
    rawRequest: {}
  })

Actual behavior

it throw the error :

Error: Cannot complete OAuth process. Could not find an OAuth cookie for shop url: 
    at CookieNotFound.ShopifyError [as constructor] (/Volumes/work/workspaces/my-works/testing/node_modules/@shopify/shopify-api/lib/error.ts:4:3)
    at new CookieNotFound (/Volumes/work/workspaces/my-works/testing/node_modules/@shopify/shopify-api/lib/error.js:174:42)
    at Object.<anonymous> (/Volumes/work/workspaces/my-works/testing/node_modules/@shopify/shopify-api/lib/auth/oauth/oauth.ts:139:13)
    at step (/Volumes/work/workspaces/my-works/testing/node_modules/tslib/tslib.js:144:27)
    at Object.next (/Volumes/work/workspaces/my-works/testing/node_modules/tslib/tslib.js:125:57)
    at fulfilled (/Volumes/work/workspaces/my-works/testing/node_modules/tslib/tslib.js:115:62)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)

Could someone help to take a look at this issue? Thanks.

[kdeng]

I just realised there is another issue #682 reported the same issue.

[mkevinosullivan]

Thanks for flagging this ... we need to document this a bit better. It's recommended to put the call to shopify.auth.callback inside a try...catch and redirect to OAuth if the the CookieNotFound error is thrown.

An example of this can be seen in an older non-Express version of the app template, here.

[mkevinosullivan]

@Copdate-Copdate, @kdeng - which browsers/OS/library versions are you using for this OAuth process? Also, what framework (Express, Koa, etc.), if any, are you using in your respective apps?

[mkevinosullivan]

@Copdate-Copdate Please share what you've done different by following that tutorial (in theory, the library does what the tutorial does!)

From what you've shared, it seems you're building an Express app that uses the @shopify/shopify-api package directly (not using the @shopify/shopify-express-app package). Using the cli_three_api_six branch of the Shopify template, I've created a new test app as follows:

yarn create @shopify/app --name node-test-api-six --template https://github.com/Shopify/shopify-app-template-node#cli_three_api_six
cd node-test-api-six
yarn dev

Just running this (with Node 19.5, Express 4.18.2, @shopify/shopify-api 6.1.0), installing it by the link given by the CLI (3.38), using Chrome 109 on macOS 13.2, it authenticated and installed on a shop at first attempt.

2023-01-26 19:57:45 | frontend |
2023-01-26 19:57:45 | frontend | > dev
2023-01-26 19:57:45 | frontend | > vite
2023-01-26 19:57:45 | frontend |
2023-01-26 19:57:45 | backend  |
2023-01-26 19:57:45 | backend  | > dev
2023-01-26 19:57:45 | backend  | > cross-env NODE_ENV=development nodemon index.js --ignore ./frontend
2023-01-26 19:57:45 | backend  |
2023-01-26 19:57:45 | backend  | [nodemon] 2.0.20
2023-01-26 19:57:45 | backend  | [nodemon] to restart at any time, enter `rs`
2023-01-26 19:57:45 | backend  | [nodemon] watching path(s): *.*
2023-01-26 19:57:45 | backend  | [nodemon] watching extensions: js,mjs,json
2023-01-26 19:57:45 | backend  | [nodemon] starting `node index.js`
2023-01-26 19:57:45 | frontend |
2023-01-26 19:57:45 | frontend |   vite v2.9.15 dev server running at:
2023-01-26 19:57:45 | frontend |
2023-01-26 19:57:45 | frontend |   > Local:    http://localhost:57405/
2023-01-26 19:57:45 | frontend |   > Network:  http://127.0.2.2:57405/
2023-01-26 19:57:45 | frontend |   > Network:  http://127.0.2.3:57405/
2023-01-26 19:57:45 | frontend |   > Network:  http://10.0.0.242:57405/
2023-01-26 19:57:45 | frontend |   > Network:  http://172.16.0.2:57405/
2023-01-26 19:57:45 | frontend |
2023-01-26 19:57:45 | frontend |   ready in 278ms.
2023-01-26 19:57:45 | frontend |
2023-01-26 19:57:46 | backend  | [shopify-api/INFO] version 6.1.0, environment Node v19.5.0
2023-01-26 19:57:57 | backend  | [shopify-api/INFO] Beginning OAuth | {shop: xxxxxx.myshopify.com, isOnline: false, callbackPath: /api/auth/callback}
2023-01-26 19:58:11 | backend  | [shopify-api/WARNING] [Deprecated | 7.0.0] The isOnline param is no longer required for auth callback
2023-01-26 19:58:11 | backend  | [shopify-api/INFO] Completing OAuth | {shop: xxxxxx.myshopify.com}
2023-01-26 19:58:11 | backend  | [shopify-api/INFO] Creating new session | {shop: xxxxxx.myshopify.com, isOnline: false}
2023-01-26 19:58:11 | backend  | [shopify-api/INFO] Registering webhooks | {shop: xxxxxx.myshopify.com}

The code for that app can be found here ... I'm trying to understand what's different between you app's code and that template and/or between environments.

[mkevinosullivan]

One additional thing to try ... add the following

  logger: {
    level: LogSeverity.Debug,  // import { LogSeverity } from "@shopify/shopify-api";
  },

to the configuration you pass into the call to shopifyApi ... the debug level may reveal a bit more

[weeksie]

LogSeverity.Debug does not help at all.

[shopify-api/INFO] Completing OAuth | {shop: XXX.myshopify.com}
[shopify-api/ERROR] Could not find OAuth cookie | {shop: XXX.myshopify.com}

Using Koa as the platform, passing ctx.req, ctx.res for the request/response params. Adding manual debug statements inside the oauth.auth function shows that the code thinks cookie is getting set (I guess) but it's not present by the time we reach the callback.

Going to dig in further, but this is extremely annoying.

As an aside, why the heck are we supposed to store the session in the DB when all of the info is in the JWT?

[weeksie]

Anyway, I was able to get things working by implementing the oauth code manually.

interface AuthConfig {
  apiKey: string;
  secret: string;
  scopes: string[];
  callbackPath: string;
  homePath: string;
  onAuthStart: (shop: string) => void | Promise<void>;
  onAuthSuccess: (response: unknown) => void | Promise<void>;
}

export const shopify = ({
  apiKey,
  secret,
  callbackPath,
  scopes,
  onAuthStart,
  homePath,
  onAuthSuccess
}: AuthConfig) => {
  const verify = verifyWithKey(secret);

  return {
    async auth(ctx: Koa.Context, next: Koa.Next) {
      const params    = ctx.URL.searchParams;
      const shop      = params.get('shop');
      const timestamp = params.get('timestamp');
      const hmac      = params.get('hmac');

      if (!shop) {
        ctx.throw(422, 'missing shop');
      }

      if (!timestamp) {
        ctx.throw(422, 'missing timestamp');
      }

      if (!hmac) {
        ctx.throw(422, 'missing hmac');
      }

      params.delete('hmac');
      const query = params.toString();

      if (!verify(query, hmac)) {
        ctx.throw(401, `cant verify query ${query}`);
      }

      await onAuthStart(shop);

      const shopifyUrl = shopifyAuthUrl({
        apiKey,
        scopes,
        callbackPath,
        shop,
        host: ctx.host,
        grantOptions: 'value',
      });

      ctx.redirect(shopifyUrl);
      await next();
    },

    async callback(ctx: Koa.Context, next: Koa.Next) {
      const params = ctx.URL.searchParams;
      const shop   = params.get('shop');
      const host   = params.get('host');
      const hmac   = params.get('hmac');
      const code   = params.get('code');
      const grant  = params.get('state');

      if (typeof hmac !== 'string') {
        ctx.throw(422, 'bad hmac');
      }
      if (!shop || !shop.match(/[a-zA-Z0-9][a-zA-Z0-9\-]*\.myshopify\.com/)) {
        ctx.throw(422, 'bad shop');
      }

      if (typeof code !== 'string') {
        ctx.throw(422, 'bad code');
      }

      if (typeof host !== 'string') {
        ctx.throw(422, 'bad host')
      }

      params.delete('hmac');
      const query = params.toString();

      if (!verify(query, hmac)) {
        ctx.throw(401);
      }

      const tokenParams = new URLSearchParams();

      tokenParams.set('client_id', apiKey);
      tokenParams.set('client_secret', secret);
      tokenParams.set('code', code);

      const tokenResponse = await fetch(
        `https://${shop}/admin/oauth/access_token`,
        {
          method: 'post',
          body: tokenParams,
        }
      );

      if (!tokenResponse.ok) {
        console.error(tokenResponse.status);
        console.error(await tokenResponse.text());
        ctx.throw(401);
      }

      const response = camelKeys(await tokenResponse.json());

      await onAuthSuccess(response);

      if (grant === 'value') {
        const shopifyUrl = shopifyAuthUrl({
          apiKey,
          shop,
          scopes,
          callbackPath,
          host: ctx.host,
          grantOptions: 'per-user',
        })

        ctx.redirect(shopifyUrl);
        await next();
        return;
      }


      const isEmbedded = params.get('embedded') === "1";

      if (isEmbedded) {
        const shopifyHost = Buffer.from(host, 'base64').toString();
        const redirect    = `https://${shopifyHost}/apps/${apiKey}?host=${host}&shop=${shop}`;

        ctx.redirect(redirect);
        await next();
        return;
      }

      ctx.redirect(`/${homePath}?shop=${shop}&host=${encodeURIComponent(host)}`);
      await next();
      return;
    }
  }
};

type UrlProps = {
  apiKey: string;
  grantOptions: 'per-user' | 'value';
  callbackPath: string;
  shop: string;
  host: string;
  scopes: string[];
}

const shopifyAuthUrl = (props: UrlProps) => {
  const shopifyParams = new URLSearchParams();

  shopifyParams.set('client_id', props.apiKey);
  shopifyParams.set('scope', props.scopes.join(','));
  shopifyParams.set('redirect_uri', `https://${props.host}/${props.callbackPath}`)
  shopifyParams.set('grant_options[]', props.grantOptions);
  shopifyParams.set('state', props.grantOptions);

  return `https://${props.shop}/admin/oauth/authorize?${shopifyParams}`;
};

The only thing missing is the code for camelKeys and verifyWithKey but that shouldn't be the problem. I'm not setting cookies anywhere though. Are they strictly necessary? What are you using cookies for, and or should I be setting them?

[barna-ohana]

Catching the CookieNotFound error and then redirecting to Shopify again (and back) solves the problem for me. Found it in an example.

    try {
      const session = (await this._shopifyAPI.auth.callback({
        rawRequest: params.request,
        rawResponse: params.response,
      })).session;

      return session?.toObject();
    } catch (e) {
      if (e instanceof InvalidOAuthError) {
        throw new BadRequestException();
      } else if (e instanceof CookieNotFound) {
        await this._shopifyAPI.auth.begin({
          shop: params.shop,
          isOnline: false,
          callbackPath: params.callback,
          rawRequest: params.request,
          rawResponse: params.response,
        });

        return undefined;
      } else {
        throw e;
      }
    }

[weeksie]

@mkevinosullivan Re-creating the session object led me to jumping through a few hoops and remembering what you guys used the state url var for. Anyway, Chrome has a problem with sameSite: 'lax' and will just not set the cookie. When I set the cookie to sameSite: 'none' it worked.

[bhr]

Hitting the same issue, but the fix to catch the CookieNotFoundError and try again isn't helping. It's just not setting the cookie

[zds97]

I'm also hitting this same issue. Restarting the auth process when the error is an instanceof CookieNotFound also caused an infinite redirect.

It seems to be intermittent, it's not happening on all installs, only some.

Edit: There seems to be 2 main cases where this happens

• Installs where the cookie is invalid due to the user taking too long to click "install". In this the redirect works fine.
• Issues where the cookie seems to never be set. This causes an infinite loop for the end user.

The solution I ended up going with to solve the first problem without creating an infinite loop in the second case

• Set a cookie on the initial request for managing the redirect state
• If the user runs into a cookieNotFound error, check the cookie for redirect state
• If true, set the cookie to false and redirect the user
• If false, throw an error.

Second case still persists unfortunately.

[zds97]

@mkevinosullivan

I'm using NextJS with version 6.2.0 @shopify/shopify-api. This seems like a pretty common problem that is only solved by either:

• Patching the library (Haven't validated this fix)
• Manually handling the oAuth flow and not using the cookie.

Any chance of this getting addressed in the near future?

[mariamillerm]

We were able to reproduce the issue if the shop domain is not standard (like XXXXX.myshopify.com), but the custom one. Because, yeah, redirecting to the OAuth if the the CookieNotFound error found not helping if the cookie even wasn't set

[The1987]

Could you perform the following to also work around the issue?

• if shop exists then look for session in storage
  if expired push through oauth and save new session
  if not expired then push to app frontend

• if !shop then run through oauth and save new session

• then whenever you make a call you can verify wether the session and then take next steps.

I feel like many of us are following the documentation trying to build it out manually or update existing apps by having the shop immediately hit the /auth route then to the /auth/callback route vs first verifying if the shop is new or not. From my understanding you dont necessarily need to push a user through the /auth routes every time they enter the app otherwise it seems issues like this happen.