Using a Custom Domain for Shopify Node/React App

Solved
Highlighted
Tourist
12 1 1

Hello!
I am currently having trouble deploying my Shopify custom app to a development store when I use my own custom domain. It works fine when I run my app locally and tunnel using ngrok.

I followed this tutorial - https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react and was able to complete it successfully. However, I'd like to migrate off of using ngrok and deploy my code on a domain. On my Shopify partners dashboard, I have changed the URLs section to have my custom domain https://my-customedomain.com as well as the whitelisted redirection URL https://my-customedomain.com/auth/callback.

However, when I try to install my app, but when I go to https://my-customedomain.com/auth?shop=my-test-store.myshopify.com, I get the error "shopOrigin must be provided".Screen Shot 2020-05-21 at 12.07.05 PM.png

Here is my _app.js

class MyApp extends App {
    render() {
        const { Component, pageProps } = this.props;
        const config = { apiKey: API_KEY, shopOrigin: Cookies.get("shopOrigin"), forceRedirect: true };
        return (
            <React.Fragment>
                <Head>
                    <title>My Custom App</title>
                    <meta charSet="utf-8" />
                </Head>
                <Provider config={config}>
                    <AppProvider i18n={translations}>
                        <ApolloProvider client={client}>
                            <Component {...pageProps} />
                        </ApolloProvider>
                    </AppProvider>
                </Provider>
            </React.Fragment>
        );
    }
}

I have deployed my app on https://my-customedomain.com with the environment variables defined so I am confused. Can anyone help?

 

0 Likes
Highlighted
Tourist
12 1 1

This is an accepted solution.

I was able to fix this by deploying to Heroku instead of Vercel 

https://github.com/Shopify/shopify-app-cli/issues/277#issuecomment-522375162

1 Like
Highlighted
New Member
2 0 0

Hi,

Let me explain why you cannot deploy to "Vercel/Now".

Shopify authentication code in "server.js" (afterAuth()) depends on "server session" being available, which is then passed to a cookie in shopify "afterAuth" callback. In your "_app.js" the code reads from this cookie and initializes AppBridgeProvider component.

Vercel is a "serverless" platform. Sessions are only available on servers. Hence the session is not available on vercel, "shopOrigin" in the cookie is empty and your "AppBridge" for embeded app fails at authentication.

There is a "gatsby-shopify-starter-app" out there, which eliminates the need for a "session". You can deploy this to a "serverless platform". The problem with this approach is that the user is prompted with a "login" window, where they must manually enter the "shopOrigin" name in order to pass the AppBridge authentication. This login window is fired everytime the cookie is not found (has expired, etc.).

0 Likes