Shopify / shopify-app-examples

143 stars 88 forks source link

Infinite redirect when on heroku #132

Open Tigatok opened 1 year ago

Tigatok commented 1 year ago

Hey there,

I am having a weird issue that doesn't seem to be happening when the app is hosted locally thru the ngrok tunnel. I've deployed my app as per instructions to Heroku. When trying to visit the app, the user is being put into an infinite redirect loop as per the following image:

image

The redirect URL is trying to send the user to this page: https://myapp.herokuapp.com/api/auth/callback?shop=mystore.myshopify.com&host=Z2FtZXJnYWRnZXRyeS5teXNob3BpZnkuY29tL2FkbWlu

image

This endpoint's code is this:

 app.get("/api/auth", async (req, res) => {
    return redirectToAuth(req, res, app);
  });

Which then redirects the user to this:

export default async function redirectToAuth(req, res, app) {
  if (!req.query.shop) {
    res.status(500);
    return res.send("No shop provided");
  }

  if (req.query.embedded === "1") {
    return clientSideRedirect(req, res);
  }

  return await serverSideRedirect(req, res, app);
}

function clientSideRedirect(req, res) {
  const shop = Shopify.Utils.sanitizeShop(req.query.shop);
  const redirectUriParams = new URLSearchParams({
    shop,
    host: req.query.host,
  }).toString();
  const queryParams = new URLSearchParams({
    ...req.query,
    shop,
    redirectUri: `https://${Shopify.Context.HOST_NAME}/api/auth/callback?${redirectUriParams}`,
  }).toString();

  return res.redirect(`/exitiframe?${queryParams}`);
}

So it appears the code from the app is "working properly" but I am not sure why everyone isn't getting infinite redirects. If I copy and paste the address in the redirect URL parameter, and visit that outside the context of the app, it brings me to my App's page and things appear to work. Would appreciate any insight!