Hello,
I'm following the Build a Shopify App with Node.js and React tutorial and I'm stuck on on Step 3. Embed your app in Shopify.
Loading https://YOUR_NGROK_ADDRESS.io/auth?shop=YOUR_SHOPIFY_STORE.myshopify.com results in a successful app install and I'm brought to my ngrok URL outside of Shopify as expected.
The issue is that I'm unable to access my app embedded within the Shopify UI. When I click on the app in my list of apps there are some redirects that happen and I'm eventually brought back to my ngrok page, completely outside of Shopify.
Two questions:
- What's preventing the application from being loaded in embedded UI?
- Once the app is installed, is it expected behavior to redirect the user outside of Shopify? I'd like to keep the installation experience entirely inside of Shopify.
Here is my server code (NOTE: I've slightly modified the code and project structure to run via Typescript):
import 'isomorphic-fetch';
import dotenv from 'dotenv';
import Koa from 'koa';
import next from 'next';
import createShopifyAuth, { verifyRequest } from '@shopify/koa-shopify-auth';
import session from 'koa-session';
const startServer = async () => {
dotenv.config();
const port = parseInt(process.env.PORT, 10);
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
const { SHOPIFY_API_SECRET_KEY, SHOPIFY_API_KEY } = process.env;
await app.prepare();
const server = new Koa();
server.use(session(server));
server.keys = [SHOPIFY_API_SECRET_KEY];
server.use(
createShopifyAuth({
apiKey: SHOPIFY_API_KEY,
secret: SHOPIFY_API_SECRET_KEY,
scopes: ['read_products'],
afterAuth(ctx) {
const { shop, accessToken } = ctx.session;
console.log('We did it!', accessToken);
ctx.redirect('/');
},
}),
);
server.use(verifyRequest());
server.use(async (ctx) => {
await handle(ctx.req, ctx.res);
ctx.respond = false;
ctx.res.statusCode = 200;
});
server.listen(port, () => {
console.log(`> Ready on http://localhost:${port}`);
});
};
startServer();
Any assistance would be much appreciated.
Thank you!
