Getting "AppBridgeError: APP::ERROR::INVALID_CONFIG: shopOrigin

Jaydev12
Visitor
2 0 0

Jaydev12_0-1607230258478.png

I'm getting this error from my app within my store and I'm not sure. I've been following the Node js and React tutorial documentation and everything has been fine, up until this point.

Server.js file:

require('isomorphic-fetch');
const dotenv = require('dotenv');
const Koa = require('koa');
const next = require('next');
const { defaultcreateShopifyAuth } = require('@shopify/koa-shopify-auth');
const { verifyRequest } = require('@shopify/koa-shopify-auth');
const session = require('koa-session');

dotenv.config();

const port = parseInt(process.env.PORT, 10|| 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

const { SHOPIFY_API_SECRET_KEYSHOPIFY_API_KEY } = process.env;

//adding routing middleware and koa server
app.prepare().then(() => {
    const server = new Koa();
        server.use(session({ securetruesameSite'none' }, server));
        server.keys = [SHOPIFY_API_SECRET_KEY];
        server.use(
            createShopifyAuth({
              apiKeySHOPIFY_API_KEY,
              secretSHOPIFY_API_SECRET_KEY,
              scopes: ['read_products'],
              afterAuth(ctx) {
                const { shopaccessToken } = ctx.session;
                  ctx.cookies.set('shopOrigin'shop, {
                    httpOnlyfalse,
                    securetrue,
                    sameSite'none'
                  });
                ctx.redirect('/');
              },
            }),
          );
        server.use(async (ctx=> {
        await handle(ctx.reqctx.res);
        ctx.respond = false;
        ctx.res.statusCode = 200;
        return
    }); 
    //listens for request on port 3000
    server.listen(port, () => {
        console.log(`> Ready on http://localhost:${port}`);
      });
});
 
_app.js:
import App from 'next/app';
import Head from 'next/head';
import { AppProvider } from '@shopify/polaris';
import '@shopify/polaris/dist/styles.css'//imports the polaris css styles
import translations from '@shopify/polaris/locales/en.json'//imports translates from the locales folder
import React from 'react';
import { Provider } from '@shopify/app-bridge-react';
import Cookies from 'js-cookie';

class MyApp extends App {
  render() {
    const { ComponentpageProps } = this.props;
    const config = { apiKey: API_KEY, shopOriginCookies.get("shopOrigin"), forceRedirecttrue };
    return (
      <React.Fragment>
        <Head>
          <title>Sample App</title>
          <meta charSet="utf-8" />
        </Head>
        <Provider config={config}>
          <AppProvider i18n={translations}>
          <Component {...pageProps} />
        </AppProvider>
        </Provider>
      </React.Fragment>
    );
  }
}
export default MyApp;
 
If anyone could give me some guidance that would be highly appreciated; I just want to continue to learn app development within Shopify, but this annoying error is hindering me from doing so.
 
I tested it on Firefox to see if it would work, but I got the same error.
 Jaydev12_0-1607232146842.png

 

This is what I found in the console.....

Jaydev12_1-1607232349829.png

 

Reply 1 (1)

Jaydev12
Visitor
2 0 0

Following up from yesterday, after my ngrok session expired, I re-authenticated my app in my store admin today with a new  App URL and now everything is working. I'm not sure why that's the case, if anyone has incite, would you mind sharing?