OAuth flow for React App with Node Backend (split) | Admin embedded App

Chompas
Tourist
12 0 8

Hi,

I currently have the following setup to try to authenticate an Admin Embedded Public App.

  • Frontend React app with latest version of App Bridge 2.0
  • Backend Node app using shopify-api-node

I'm struggling with the whole OAuth flow and trying different options since the documentation is not clear enough on how it should work.

What I have right now is:

App url points to a url in my frontend react app (frontend-domain/install), that page grabs all the query params (hmac, shop, timestamp, etc.) and redirects to a backend-domain/auth (which I've added to the list of callback urls) where the logic to validate the request happens and afterwards tries to redirect to frontend-domain/home. I do receive the install prompt and the app gets installed but then when I try to use app bridge in the frontend (everything is wrapped in a Provider component as the doc suggests) and then I get a `Cannot complete OAuth process. Could not find an OAuth cookie for shop url`.

I don't know what's wrong. I've found some post of people being able to have a frontend and backend separate domains and still make this work but the entire Shopify documentation and examples circle in a single app that does everything together.

Is the app setting for app url correct? Should I do a redirect or a GET request?

Any help would be greatly appreciated since I've been stuck for weeks on this trying different approach.

 

(I initially posted this in the wrong subsection but I'm not sure how to delete the other thread)

0 Likes
joel-frienzee
New Member
5 0 0

I'm looking to add to this, When I install the app via a heroku deployment, I get to the permissions step on install, however when the redirect occurs for the subscription part of the step, I get an internal server error that reads the following:

`Cannot complete OAuth process. Could not find an OAuth cookie for shop url` 

 

 server.use(
    createShopifyAuth({
      async afterAuth(ctx) {
        ctx.cookies.set("shopOrigin", shop, {
          httpOnly: false,
          secure: true,
          sameSite: "none",
        });

        // Access token and shop available in ctx.state.shopify
        const { shop, scope, accessToken } = ctx.state.shopify;
        ACTIVE_SHOPIFY_SHOPS[shop] = scope;

        const registration = await Shopify.Webhooks.Registry.register({
          shop,
          accessToken,
          path: "/webhooks",
          topic: "APP_UNINSTALLED",
          apiVersion: ApiVersion.October20,
          webhookHandler: (_topic, shop, _body) => {
            console.log("App uninstalled");
            delete ACTIVE_SHOPIFY_SHOPS[shop];
          },
        });

        if (registration.success) {
          console.log("Successfully registered webhook!");
        } else {
          console.log("Failed to register webhook", registration.result);
        }
        // console.log(ctx);
        // Redirect to app with shop parameter upon auth
        const returnUrl = `https://${Shopify.Context.HOST_NAME}?shop=${shop}`;
        const subscriptionUrl = await getSubscriptionUrl(
          accessToken,
          shop,
          returnUrl
        );
        ctx.redirect(subscriptionUrl);
      },
    })
  );

joel-frienzee_0-1621831356460.png

 

This step works fine, however when I click Update unlisted sales channel, I get the Internal server error page, and checking the heroku logs shows the error as `Cannot complete OAuth process. Could not find an OAuth cookie for shop url` error.

 

This all works fine in local host, am I simply missing a step at deployment?

 

0 Likes