Developing embedded app in tutorial redirects to full screen in chrome

Highlighted
New Member
1 0 0

I followed this tutorial to develop an embedded app https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react but I keep running into redirect issues when testing the app.

There seem to be many posts about this topic, but none of them seemed to work for me. All I want is running the test app in chrome as embedded app but when I try this as described in step 3 of the tutorial: https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react/embed-your-app-in-shopify chrome redirects and shows my app as a full screen.

Note: When I allow third-party app the embedded app is shown correctly.

It seems there will be a completely new solution but is there a temporal fix for the tutorial code?

For reference, the app is served like this in the Tutorial:

app.prepare().then(() => {
const server = new Koa();
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'],
forceRedirect: true,
afterAuth(ctx) {
const { shop, accessToken } = ctx.session;
ctx.redirect('/');
},
}),
);

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

server.listen(port, () => {
console.log(`> Ready on http://localhost:${port}`);
});

});

0 Likes