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

Solved

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

ElizMartinez
Visitor
1 0 0

Hello.
Thanks for the tutorial it worked as expected until step 3 add Shopify App Bridge. I have copied the code as instructed to test my configuration. When viewing the test app on the  "Unhandled Runtime Error AppBridgeError: APP::ERROR::INVALID_CONFIG: shopOrigin must be provided"Capture.JPG

this is the server js

Capture2.JPG

 

I have been reading and studying the text for the last two days. I have not added any custom code. Please provide some guidance.

Thanks

 

 

Accepted Solution (1)

MichiBLN
Tourist
9 1 7

This is an accepted solution.

Hi, 

I had the same problem as I made this tutorial yesterday and in my case in .env the HOST property was missing.

It needs to be set to something like:

 

HOST='https://6431e05c.ngrok.io.{devshopname}.myshopify.com'

Of course changed to your actual ngrok forward url.

Maybe this is also your case.

View solution in original post

Replies 20 (20)

MichiBLN
Tourist
9 1 7

This is an accepted solution.

Hi, 

I had the same problem as I made this tutorial yesterday and in my case in .env the HOST property was missing.

It needs to be set to something like:

 

HOST='https://6431e05c.ngrok.io.{devshopname}.myshopify.com'

Of course changed to your actual ngrok forward url.

Maybe this is also your case.

fky
Visitor
1 0 1

How to set this? Thank you!

JohnEmad
Visitor
1 0 1

I have tried this solution, and added the missing HOST property in the .env file,

but unfortunately the error still exist

Here is the error message:

Annotation 2020-07-16 183133.png

 

and here is the snippet from the server.js:

Annotation 2020-07-16 182953.png

whitehorse0324
Visitor
2 0 0

You set fixed url into .env file.

By the way, when I try to make public app..?

 

AndyPicamaze
Explorer
41 1 15

Hi there

I cannot see any relation between the HOST property and the shopOrigin cookie.

The reason why you get this error is because in _app.js the config object for the app-bridge-react Provider has undefined value for shopOrigin. In the demo app the value is set from the cookie named shopOrigin. Which, on the other hand, is set on afterAuth by koa-auth-shopify. Check those to track if shopOrigin is set properly. 

https://apps.shopify.com/picamaze
Animated watermarks for product images and ads
jackcylin
Shopify Partner
21 2 9

The problem is about shopOrigin cookie set in afterAuth. Re-login your shop account will help and that's how I solved the same issue. Jack

aqoraan
Tourist
10 0 2

@jackcylin wrote:

The problem is about shopOrigin cookie set in afterAuth. Re-login your shop account will help and that's how I solved the same issue. Jack


This solution has fixed it from me, thank you @jackcylin!

jackcylin
Shopify Partner
21 2 9

Glad it helps. However, this way does not cover all, since afterAuth wasn't invoked all the time (follow Shopify tutorial). My final solution is to attach a middleware to check if shopOrigin exists and update one if needed. I am not sure if this way is the right answer, but it works for me.

 

    server.use(async (ctx, next) => {
            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();
    });

 

ArthurCa
Visitor
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

jackcylin
Shopify Partner
21 2 9

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);
        }
    });

 

FaizaBashir
Shopify Partner
38 0 2

how to get shop url in backend or serverside? I want shop url in index.js and middleware.

I want to call this api

https://{shop}/admin/api/2021-04/script_tags.json

how to get value of shop?

jackcylin
Shopify Partner
21 2 9
You should want to call the API for the backend admin. The shop value is
the Shopify default domain name, for example: xxx.myshopify.com.
FaizaBashir
Shopify Partner
38 0 2

Thanks @jackcylin How to get current shop domain in public app?

jackcylin
Shopify Partner
21 2 9
You can find it in the window.Shopify variable.
FaizaBashir
Shopify Partner
38 0 2

thanks @jackcylin for your response. I get this error ReferenceError: window is not defined with window.Shopify

jackcylin
Shopify Partner
21 2 9
Please see the attached screenshot.

[image: Screenshot 2023-07-26 at 4.51.00 PM.png]
FaizaBashir
Shopify Partner
38 0 2

Hey @jackcylin, I am unable to open screenshot 

jackcylin
Shopify Partner
21 2 9

Screenshot 2023-07-26 at 4.51.00 PM.png

FaizaBashir
Shopify Partner
38 0 2

thats working in browser console but I want it in shopify node app in ndex.js or middleware, it doesnt work there and i get error.

whitehorse0324
Visitor
2 0 0

This code works well in almost browsers.

But, in safari, cookie doesn't work and it goes circled cycle.

Could you give us the code which works well in safari browser, too?

 

Thanks