Hi all,
I am having the following problem after cloning into the shopify-demo-app-node-react on github (https://github.com/Shopify/shopify-demo-app-node-react)
As I am having the same problem as a previous user, but none of the solutions have worked for me, I am re-posting on this problem.
Following the tutorial: https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react/embed-your-app-in-s…
Step I am stuck on:
Authenticate and Test Your App
https://YOUR_NGROK_ADDRESS.io/auth?shop=YOUR_SHOPIFY_STORE.myshopify.com
Browser Window Errors
URL Above Entered - Internal Server Error
Which displays a code 500.
I cannot get past this error.
As per the tutorial instructions, I made a .env file in my foot project folder (shown below). As per past community solutions, I have attempted the following:
-swapping out SHOPIFY_APP_URL=‘https://08bd78e4a554.ngrok.io’ with SHOPIFY_APP_URL=‘https://08bd78e4a554.ngrok.io/auth/callback’
-adding and removing API_VERSION=‘2019-10’ as a new line in the .env folder
-swapping out dotenv.config(); with dotenv.config({path:‘process.env’}); in the server.js file in the root folder
-adding a separate clone of .env as process.env in the root folder
-doing the above while killing and then restarting the app server via the command ‘npm run dev’, as well as restarting ngrok and re-entering the new tunnel info into app page and .env file
THE ERROR STACK:
TypeError [ERR_INVALID_ARG_TYPE]: The “key” argument must be of type string or an instance of Buffer, TypedArray, DataView, or KeyObject. Received undefined
at prepareSecretKey (internal/crypto/keys.js:322:11)
at new Hmac (internal/crypto/hash.js:111:9)
at Object.createHmac (crypto.js:147:10)
at sign (C:\Users\Bryce Kirby\desktop\pgm2021\invtestapps\shopify-demo-app-node-react\node_modules\keygrip\index.js:23:8)
at Keygrip.sign (C:\Users\Bryce Kirby\desktop\pgm2021\invtestapps\shopify-demo-app-node-react\node_modules\keygrip\index.js:30:38)
at Cookies.set (C:\Users\Bryce Kirby\desktop\pgm2021\invtestapps\shopify-demo-app-node-react\node_modules\cookies\index.js:110:30)
at topLevelOAuthRedirect (C:\Users\Bryce [email removed]
at C:\Users\Bryce [email removed]
at step (C:\Users\Bryce Kirby\desktop\pgm2021\invtestapps\shopify-demo-app-node-react\node_modules\tslib\tslib.js:133:27)
at Object.next (C:\Users\Bryce Kirby\desktop\pgm2021\invtestapps\shopify-demo-app-node-react\node_modules\tslib\tslib.js:114:57)
at C:\Users\Bryce Kirby\desktop\pgm2021\invtestapps\shopify-demo-app-node-react\node_modules\tslib\tslib.js:107:75
at new Promise ()
at Object.__awaiter (C:\Users\Bryce Kirby\desktop\pgm2021\invtestapps\shopify-demo-app-node-react\node_modules\tslib\tslib.js:103:16)
at shopifyAuth (C:\Users\Bryce [email removed]
at dispatch (C:\Users\Bryce Kirby\desktop\pgm2021\invtestapps\shopify-demo-app-node-react\node_modules\koa\node_modules\koa-compose\index.js:42:32)
at session (C:\Users\Bryce Kirby\desktop\pgm2021\invtestapps\shopify-demo-app-node-react\node_modules\koa-session\index.js:41:13)
MY CODE (from Shopify’s github source of the node.js tutorial linked above):
.env:
SHOPIFY_API_KEY=‘{MY KEY}’
SHOPIFY_API_SECRET=‘{MY SECRET}’
SHOPIFY_API_SCOPES=read_products,read_product_listings,read_customers,read_orders,read_inventory,read_locations,write_script_tags,read_fulfillments,read_shipping
SHOPIFY_APP_URL=‘https://08bd78e4a554.ngrok.io’
server.js:
require(‘isomorphic-fetch’);
const dotenv = require(‘dotenv’);
dotenv.config(); //dotenv.config({path:‘process.env’});
const Koa = require(‘koa’);
const next = require(‘next’);
const { default: createShopifyAuth } = require(‘@shopify/koa-shopify-auth’);
const { verifyRequest } = require(‘@shopify/koa-shopify-auth’);
const session = require(‘koa-session’);
const { default: graphQLProxy } = require(‘@shopify/koa-shopify-graphql-proxy’);
const { ApiVersion } = require(‘@shopify/koa-shopify-graphql-proxy’);
const Router = require(‘koa-router’);
const { receiveWebhook, registerWebhook } = require(‘@shopify/koa-shopify-webhooks’);
const getSubscriptionUrl = require(‘./server/getSubscriptionUrl’);
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_KEY,
SHOPIFY_API_KEY,
HOST,
} = process.env;
app.prepare().then(() => {
const server = new Koa();
const router = new Router();
server.use(session({ sameSite: ‘none’, secure: true }, server));
server.keys = [SHOPIFY_API_SECRET_KEY];
server.use(
createShopifyAuth({
apiKey: SHOPIFY_API_KEY,
secret: SHOPIFY_API_SECRET_KEY,
scopes: [‘read_products’, ‘write_products’],
async afterAuth(ctx) {
const { shop, accessToken } = ctx.session;
ctx.cookies.set(“shopOrigin”, shop, {
httpOnly: false,
secure: true,
sameSite: ‘none’
});
const registration = await registerWebhook({
address: ${HOST}/webhooks/products/create,
topic: ‘PRODUCTS_CREATE’,
accessToken,
shop,
apiVersion: ApiVersion.July20
});
if (registration.success) {
console.log(‘Successfully registered webhook!’);
} else {
console.log(‘Failed to register webhook’, registration.result);
}
await getSubscriptionUrl(ctx, accessToken, shop);
}
})
);
const webhook = receiveWebhook({ secret: SHOPIFY_API_SECRET_KEY });
router.post(‘/webhooks/products/create’, webhook, (ctx) => {
console.log('received webhook: ', ctx.state.webhook);
});
server.use(graphQLProxy({ version: ApiVersion.July20 }));
router.get(‘(.*)’, verifyRequest(), async (ctx) => {
await handle(ctx.req, ctx.res);
ctx.respond = false;
ctx.res.statusCode = 200;
});
server.use(router.allowedMethods());
server.use(router.routes());
server.listen(port, () => {
console.log(> Ready on http://localhost:${port});
});
});
Thank you!!!