App Bridge problem

andreiasdfg
Tourist
11 0 1

Can someone please help me with App Brdige? I have koa for backend and i use Koa-Shopify-Auth for auth. I'm serving react from the backend like that:

const static_pages = new Koa();
static_pages.use(serve(__dirname + "/static/build"));
app.use(mount("/", static_pages));

here is the auth:

app.use(
        shopifyAuth({
            apiKey: SHOPIFY_API_KEY,
            secret: SHOPIFY_API_SECRET_KEY,
            scopes: ['read_products', 'read_themes', 'write_themes', 'read_script_tags', 'write_script_tags'],
            afterAuth(ctx) {
                const { shop } = ctx.session;
                ctx.cookies.set('shopOrigin', shop, {
                    httpOnly: false,
                    secure: true,
                    sameSite: 'none'
                });
                ctx.redirect('/');
            },
        })
    )
app.use(verifyRequest());

and i'm trying to get shopOrigin from cookies:

 const config = {
    apiKey: process.env.REACT_APP_SHOPIFY_API_KEY,
    shopOrigin: Cookies.get('shopOrigin'),
    forceRedirect: true,
  }
  return(
    <AppProvider i18n={enTranslations}>
      <Provider config={config}>
          { window.name ? <Main/> : <p>Loading...</p>}
      </Provider>
    </AppProvider>
  );

 

For some reasons, during the Auth on Safari and on Incognito App Bridge screams at me that it can't get shopOrigin. And first of all, I do not understand why App Bridges needs shopOrigin BEFORE the embedded link with hmac state and stuff like that is available to me. Because i've tried to get shopOrigin from that link directly, not from cookies and still it failed.

 

This error happens only when I do auth on Safari or Incognito. Any ideas please? What I'm supposed to do, It's been 2 days since i've started to search on this forum for help

0 Likes
andreiasdfg
Tourist
11 0 1

window.name tells me if i'm in the iframe or not. something written by myself in javascript

0 Likes

App Bridge uses shopOrigin to redirect to the embedded link.

There are issues with 3rd party cookies and Safari. There are plenty of threads here explaining the issue.

 

https://apps.shopify.com/picamaze
Animated watermarks for product images and ads
0 Likes