can't get shopOrigin cookie in Chrome

Solved
Highlighted
Excursionist
28 2 1

my app doesn't work anymore despite that i haven't changed the code.
the error says: AppBridgeError {name: "AppBridgeError", message: "APP::ERROR::INVALID_CONFIG: shopOrigin must be provided", action: undefined, type: "APP::ERROR::INVALID_CONFIG", stack: "AppBridgeError: APP::ERROR::INVALID_CONFIG: shopOrigin must be provided"}

this only happens on Chrome, on Firefox it's all  good.

the server side code:

 

 

 

 

....
var express = require('express');
var appp = express();
var cookieParser = require('cookie-parser');
const next = require("next");
const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();
....
app.prepare().then(() => {
.....
//Exchange temporary code for a permanent access token
    const accessTokenRequestUrl = 'https://' + shop + '/admin/oauth/access_token';
    const accessTokenPayload = {
      client_id: apiKey,
      client_secret: apiSecret,
      code,
    };

    request.post(accessTokenRequestUrl, { json: accessTokenPayload })
      .then(async (accessTokenResponse) => {
        const accessToken = accessTokenResponse.access_token;
        console.log(accessToken);
        res.cookie('accessToken', accessToken, { httpOnly: false });
        console.log('setting shop origin in cookies: ' + shop);
        res.cookie('shopOrigin', shop, { httpOnly: false });
        res.redirect('/index');
        console.log("out of server");
      })
      .catch((error) => {
        console.log(error);
        res.status(error.statusCode).send(error.error.error_description);
      });

  } else {
    res.status(400).send('Required parameters missing');
  }
});
appp.use(async (req, res) => {
  await handle(req, res);

  res.statusCode = 200;
  return;
});

 

 

 

 

and on client side:

 

 

 

 

...
import { Provider } from "@shopify/app-bridge-react";
import Cookies from 'js-cookie';
....
//inside render
const config = {
      apiKey: API_KEY,
      shopOrigin: Cookies.get("shopOrigin"),
      forceRedirect: true
    };

return (
      <React.Fragment>
        <Head>
          <title>FOQUS</title>
          <meta charSet="utf-8" />
        </Head>
        <Provider config={config}>
          <AppProvider>
            <ApolloProvider client={client}>
              <UserContext.Provider value={{ disconnect: this.signOut, disconnected: this.state.disconnected }}>
                <Component {...pageProps} />
              </UserContext.Provider>
            </ApolloProvider>
          </AppProvider>
        </Provider>
      </React.Fragment>
    );

 

 

 

I'm using cookie-parser, I tried also with js-cookie, same problem.

Chrome shows a warning idk if this helps: A cookie associated with a cross-site resource at { the website that i'm hosting my app within } was set without the `SameSite` attribute. It has been blocked, as Chrome now only delivers cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.

0 Likes
Highlighted
New Member
3 0 0

I'm having the same problem now too. So weird, it was working fine before today.

0 Likes
Highlighted
New Member
3 0 0

Ok so today I ran my app again in Google Chrome with NO CODE changes, nothing different. It suddently works now and does not give me the shopOrigin cookie error. WEIRD??????!

0 Likes
Highlighted
Explorer
42 10 12

This is an accepted solution.

Hi Mate

Error is a bit misleading but chrome is pretty much blocking your cookie.

So when it attempts to authenticate shop origin is not provided.

Chrome blocks cross site cookies now. You need to add the sameSite=none attribute to your cookie to get chrome to allow it.

We all had to update our apps because they're embedded in shopify and it will cause the cookies to be blocked. Bit of a pain but fixable.

 

Highlighted
Excursionist
28 2 1
res.cookie('name', value, {sameSite: 'none'}); didn't work for me
0 Likes
Highlighted
Explorer
42 10 12

try

res.cookie('name', value, {sameSite: 'none', secure: true}); 
0 Likes
Highlighted
Excursionist
28 2 1

this worked thanks, accepting this as solution

0 Likes
Highlighted
New Member
1 0 0

I got similar issues, your solution worked, Thank you.

0 Likes