shopOrigin must be provided- Error, Step 3 Build shopify add with Node and React Tutorial

Solved
ArthurCa
New Member
2 0 0

I tried your last solution jackcylin, but I have a new error message : 

ReferenceError: validateHMAC is not defined

Any idea to fix this ReactBridge issue ?

Thanks !

Arthur

0 Likes
jackcylin
Tourist
3 0 3

Frankly, re-login is not the solution to this issue. Browser doesn't find shopOrigin cookie causing the issue. There are many reasons cookie not found. You need to see Shopify development team upgraded app bridge from 3x to 4.2.x to remove 3'rd party cookie dependency via JWT session token.

To fix the problem you ran into, my former solution was to check cookie and add again if cookie not found, please see code segment in the below.

  const { verifyRequest, validateHMAC } = require("@shopify/koa-shopify-auth");

  server.use(async (ctx, next) => {
        try {
            const got = ctx.cookies.get("shopOrigin");
            if (!got && ctx.request.query) {
                const { hmac, shop } = ctx.request.query;
                if (hmac && shop) {
                    const valid = validateHMAC(hmac, SHOPIFY_API_SECRET_KEY, ctx.request.query);
                    if (valid) {
                        ctx.cookies.set("shopOrigin", shop, {
                            httpOnly: false,
                            secure: true,
                            sign: true,
                            sameSite: "none"
                        });
                        ctx.redirect(`https://${shop}/admin/apps/${SHOPIFY_API_KEY}`);
                    }
                }
            }
            await next();
        } catch (err) {
            log.error(err.stack);
        }
    });