shopify-api-js icon indicating copy to clipboard operation
shopify-api-js copied to clipboard

I have a problem with " Cannot complete OAuth process. Could not find an OAuth cookie for shop url"

Open ClairCc opened this issue 3 years ago • 7 comments

I was following the shopify tutorial https://www.youtube.com/watch?v=oKGR9RVCUDs And I got the following error when I wanted to go to the start of my application

` const express = require('express'); const dotenv = require('dotenv'); const { Shopify } = require('@shopify/shopify-api');

dotenv.config(); const host = 'localhost'; const port = 3000;

const { SHOPIFY_API_KEY, SHOPIFY_API_SECRET, SHOPIFY_API_SCOPES, HOST } = process.env; const shops = {};

Shopify.Context.initialize({ API_KEY: SHOPIFY_API_KEY, API_SECRET_KEY: SHOPIFY_API_SECRET, SCOPES: SHOPIFY_API_SCOPES, HOST_NAME: HOST, IS_EMBEDDED_APP: true, });

const app = express();

app.get('/', (req, res) => { if (typeof shops[req.params.shop] !== 'undefined') { res.send('Hello, world'); } else { res.redirect(/auth?shop=${req.query.shop}); } });

app.get('/auth', async (req, res) => { const authRoute = await Shopify.Auth.beginAuth( req, res, req.query.shop, '/auth/callback', false ); res.redirect(authRoute); });

app.get('/auth/callback', async (req, res) => { const shopSession = await Shopify.Auth.validateAuthCallback( req, res, req.query ); console.log(shopSession);

  shops[shopSession.shop] = shopSession;
  console.log(shops);
  res.redirect(`https://${shopSession.shop}/admin/apps/payments-14`);

});

app.listen(port, () => { console.log(Server runing at https://${host}:${port}); }); `

ClairCc avatar Jan 31 '22 17:01 ClairCc

I was hitting the same issue, until i realised that i was starting the auth flow using the localhost:3000 URL and then the auth callback route was hitting my public ngrok URL.

You need to start and end the auth flow on the same URL for the oAuth cookie to be set and read correctly on the same domain.

lukeclifton avatar Feb 10 '22 12:02 lukeclifton

@lukeclifton I'm also experiencing this issue. Can you elaborate on how you solved it? Not sure I follow what you wrote.

johnciprian avatar Sep 20 '22 22:09 johnciprian

@johnciprian Are you using ngrok for the oAuth redirects?

lukeclifton avatar Sep 21 '22 09:09 lukeclifton

@johnciprian Are you using ngrok for the oAuth redirects?

@lukeclifton Yes I am.

johnciprian avatar Sep 21 '22 12:09 johnciprian

@johnciprian Are you running your application and kicking off the oAuth flow using your ngrok URL?

If you use something like localhost:3000 to start the oAuth flow and then it redirects to the ngrok URL you will see the Cannot complete OAuth process. Could not find an OAuth cookie for shop url error as the cookie will be set for the wrong URL.

lukeclifton avatar Sep 21 '22 13:09 lukeclifton

@lukeclifton That's exactly what's happening to me. This just started happening. When I run npm run dev it use to give me a URL pointing to ngrok. Now the same command only points to local host. I wonder what I'm doing wrong. 🤔

johnciprian avatar Sep 21 '22 14:09 johnciprian

👋🏻 The latest version of the CLI (v3.13) now uses localhost instead of bringing up a tunnel for the dev command.

If you want to continue using tunnels, run npm run dev --tunnel.

In order to use localhost (now supported), you'll likely have to clear your session storage and the shopify_* cookies so it starts working again.

Note that if your app development/testing includes registering and use of webhooks, you must use --tunnel.

Reference: https://shopify.dev/apps/tools/cli/commands#dev

mkevinosullivan avatar Sep 21 '22 16:09 mkevinosullivan