Had the same issue and that fixed it, thank you @DiscountNinja!
What we did was simply change the `res.redirect(shopifyAuthUrl)` in NestJS to returning HTML with a full-frame Javascript redirect similar to what would be necessary to update requested scopes.
We use the user-agent to detect:
- Is it Firefox?
- Is it Chrome?
...if it is, then we use the standard 301 redirect. If it's not, or if the lowercased user-agent contains "shopify" then we use the Javascript redirect. The 301 results in a more pleasant user experience (the initialization process doesn't visibly jump from site to site) so we wanted to ensure that's preserved for most users instead of doing a Javascript redirect for everyone.
We also have a force full-frame redirect boolean in case we update scopes in the future as well.
The reason for the "shopify" part is because in addition to Safari, our embedded app wasn't loading within the Shopify Android app and they were nice enough to use a custom user-agent to let developers know that it was being accessed from their app which was extremely helpful in resolving this.
This could definitely use a bit of cleaning up but here's what we have in place now (inside a NestJS controller):
@Get('install')
getShopifyInstallation(@Query('shop') shopDomain: string, @Req() req, @Res() res) {
// Verify the Shopify domain.
if (!this._shopifyAuthService.validateShopDomain(shopDomain)) {
throw new BadRequestException('Invalid shop domain.');
}
// Note that if we need to change scopes in the future, a full-frame redirect will be necessary. Details: https://shopify.dev/apps/auth/oauth#changes-to-granted-scopes
const isForceFullFrameRedirect = false;
const redirectUrl = this._shopifyAuthService.generateInstallationUrl(shopDomain);
const userAgent = req.headers['user-agent'] ? req.headers['user-agent'].toLowerCase() : '';
if (
isForceFullFrameRedirect ||
(userAgent.indexOf('chrome') === -1 && userAgent.indexOf('firefox') === -1) ||
userAgent.indexOf('shopify') > -1
) {
return res.send(`
<!DOCTYPE html>
<html>
<head>
<title>Redirecting, please wait...</title>
<script>
setTimeout(()=>{
window.top.location="${redirectUrl}";
}, 4000);
</script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
<style type="text/css">
body {
padding: 30px;
background-color: #f6f6f7;
font-family: helvetica;
}
</style>
</head>
<body>
<i class="fa fa-spinner fa-spin"></i> Please consider using the Chrome browser to access the app. Redirecting...
</body>
</html>
`);
}
return res.redirect(redirectUrl);
}
Shopify Discussion
Partners and Developers