Client app (redirect URL) opens on the page after app install, without shopify admin enclosing it

[seandz]

After test installing my public app (currently in development) on my dev store, the browser navigates to the redirect url and opens it. The app displayes correctly but it's outside of shopify. How should I modify the code below to fix this behavior?

As the names suggest, /authorizationRequestor is what I list as the endpoint for the app url. It redirects to /accessTokenRequestor on success.

express.get("/authorizationRequestor/", (req: Request, res: Response): Response|void => {
 const shopParam = req.query.shop;
 if (!shopParam) return res.status(400).send("No shop param specified");
 
 const state = nonce();
 const installShopUrl = buildInstallUrl(shopParam, state, getRedirectUri());

 // set generated nonce to a cookie keyed to "state". (Will be used for verification)
 res.cookie("state", state);
 
 // redirect browser to the scopes page for front channel permission granting
 res.redirect(installShopUrl);
});


express.get("/accessTokenRequestor/", async (req: Request, res: Response): Promise<Response|void> => {
 const {shop, code, state} = req.query;
 
 const stateCookie = cookie.parse(req.headers.cookie as string || "").state;
 if (!stateCookie) return res.status(400).send("No state cookie");
 
 if (state !== stateCookie) return res.status(403).send('Cookie failed verification');
 
 const {hmac, ...params} = req.query;
 const queryParams = queryString.stringify(params);
 const hash = generateEncryptedHash(queryParams);
 if (hash !== hmac) return res.status(400).send("HMAC validation failed");
 
 try {
  const authorizedCredentials: ShopifyAuthCodeCredentials = {
   client_id : SHOPIFY_API_KEY
   , client_secret : SHOPIFY_API_SECRET
   , code
  };
  const tokenResponse = await fetchAccessToken(shop, authorizedCredentials);
  const {access_token} = tokenResponse;
  
  const shopData = await fetchShopData(shop, access_token);
  
  // todo set this to load the hosted index.html file with my React app
  res.send(shopData.shop)
 }
 catch (e) {
  res.status(400).send("Error during fetchAccessToken")
 }
});

[SBD_ · Accepted solution]

Hey @seandz,

You can use App Bridge to reload your app inside the Shopify admin.

The script detects if your app was loaded inside an iframe. If it wasn't, then the script creates a redirection back into the relative embedded URL in the Shopify admin. You can disable this functionality by passing forceRedirect: false as a configuration option.