CODEWITHSUNDEEP
javascriptnode.jsreactjscookiesshopify
uekyo
uekyo

Reputation: 431

Error : appbridgeError: APP::ERROR::INVALID_CONFIG: shopOrigin must be provided

I made the Shopify App with Koa, Nextjs tho, I got this error

appbridgeError: APP::ERROR::INVALID_CONFIG: shopOrigin must be provided

App behavior is a little strange because when I access the first time, it goes well. However, a few hours later, I get this error. And then I researched the problem tho, I found the case. Cookies.get("shopOrigin") in MyApp class is going to be empty after a few hours later.

[server.js's part of code]

....................
....................

app.prepare()
.then(() => {
  var httpServer = http.createServer(serverCallback);
  // var httpsServer = https.createServer(config.https.options, serverCallback);

  server.use(session({ secure: true, sameSite: 'none' }, server));
  server.keys = [SHOPIFY_API_SECRET_KEY];
  server.use(
    createShopifyAuth({
      apiKey: SHOPIFY_API_KEY,
      secret: SHOPIFY_API_SECRET_KEY,
      scopes: [
        'read_products','write_products',
        'read_orders', 'write_orders',
        'read_customers', 'write_customers',
        'read_script_tags', 'write_script_tags'
      ],
      afterAuth(ctx) {
        const { shop, accessToken } = ctx.session;

        ACCESS_TOKEN = accessToken

        ctx.cookies.set('shopOrigin', shop, {
          httpOnly: false,
          secure: true,
          sameSite: 'none',
        });
        ctx.redirect('/');
      },
    }),
  );

  server.use(graphQLProxy({version: ApiVersion.October19}))
  server.use(verifyRequest());
  server.use(async (ctx) => {
    await handle(ctx.req, ctx.res);
    ctx.respond = false;
    ctx.res.statusCode = 200;
    return
  });
....................
....................

[_app.js]

....................
....................

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    const config = { apiKey: API_KEY, shopOrigin: Cookies.get("shopOrigin"), forceRedirect: true };
    console.log(`config`)
    console.log(config)
    return (
      <React.Fragment>
        <Head>
          <title>My LA Meats</title>
          <meta charSet="utf-8" />
        </Head>
       <Provider config={config}>
          <AppProvider i18n={translations}>
            <ApolloProvider client={client}>
              <Component {...pageProps} />
            </ApolloProvider>
          </AppProvider>
        </Provider>
      </React.Fragment>
    );
  }
}
....................
....................

I guess this is cookie's problem tho, I can't confirm it. Do you guys have the same problems? If you know how I should resolve this problem, let me know please.

Upvotes: 2

Views: 2705

Answers (1)

Arham
Arham

Reputation: 153

I am having the exact same error after changing 0 lines of code, it seems to arise because the shopOrigin cookie is HttpOnly. To confirm this I'd try running something like document.cookie in the console and see if the shopOrigin cookie shows up.

In my case the cookie was visible in chrome and firefox, and once I unticked the HttpOnly column for the shopOrigin cookie I was able to load my app. However, this is a temporary fix because the cookie is reset to HttpOnly on a restart of chrome. This is puzzling because the createShopifyAuth() function in server.js explicitly creates the cookie so that it is not HttpOnly.

Please let me know if you find a solution.

Upvotes: 1

Related Questions