Implementing a Connect/Sign-in button for an embedded Shopify Sales Channel app (Polaris + App Bridge) is debated, with pop-ups often blocked and external links lacking callbacks.
Key approaches discussed:
Same-domain sign-in: Use an iframe modal via App Bridge Modal, then pass a completion message back to the main app. Example code shows subscribing to Modal DATA events in the main app and dispatching data from the modal.
OAuth flows: An iframe modal won’t work. Use an App Bridge Navigation Redirect (remote redirect) to the external sign-in URL, then redirect back to the embedded app.
Reported issues:
Cross-subdomain setup (example.com app, accounts.example.com sign-in) causes domain mismatch errors when trying to open an absolute URL in a modal.
Remote redirect worked in a browser but, inside the Shopify app, the redirect window doesn’t close and attempts to load the sales channel in the other tab.
Conflicting guidance: docs discourage pop-ups, while style guide visuals prominently show a pop-up (linked image).
Status: No confirmed resolution. One participant asked if a solution was found; key questions about a pop-up approach that works both on web and inside the Shopify app remain open.
I am building a Shopify Sales Channel using an embedded react app with Polaris and app-bridge.
I have an AccountConnection button in my embedded app that needs to open an external window to the sign in page on my website. I’ve checked out other embedded apps and have found most of them use a pop up window with a call back.
How can I do this properly with Polaris? I’ve tried using Javascript window.open but the pop up will often be blocked by the browser. If I use the external={true} parameter on the button element it opens in a new tab with no call back. I figure there has to be a proper way to do this?
If the sign in page is hosted on the same domain as your app, you could try opening an iframe modal instead. Once the user clicks the sign in button from the modal, you could send a message to your main app to notify the app that the sign in was completed. Sending messages from the modal to your main app is possible if you pull in the Modal actions from @shopify/app-bridge/actions. For example:
Main app
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider, Modal, useAppBridge} from '@shopify/app-bridge-react';
import {Modal as ModalActions} from '@shopify/app-bridge/actions';
function MyPage(){
const app = useAppBridge();
useEffect(() => {
// Subscribe to messages from the modal
// Return a method to unsubscribe and clean up the effect
return app.subscribe(ModalActions.ActionType.DATA, (payload) => {
console.log('Received message from modal:', payload);
});
});
return
Sign in modal
```javascript
import createApp from '@shopify/app-bridge';
import {Modal as ModalActions} from '@shopify/app-bridge/actions';
const app = createApp({
apiKey: '12345',
shopOrigin: 'shopOrigin',
});
// The payload can be any JSON object
const payload = {
message: 'Hi from modal!'
};
//Send a message to the main app
app.dispatch(ModalActions.data(payload));
Note that if you need to perform oauth on your app, opening an iframe modal won’t work. What you could do is perform a remote redirect to your sign in page and then redirect back to the embedded app.
I’m in the process of implementing the connect button for our Shopify sales channel. Our app is hosted on a different subdomain from our sign-in domain. For example, the app may be hosted at example.com, but the sign-in page may be hosted at accounts.example.com. I tried to use the iframe modal but I’m getting a domain mismatch error in the console when I attempt to open the modal using an absolute url.
Previously I had performed a remote redirect to our sign-in page, and redirected back with a sign-in code. This worked great on a browser, but doesn’t work properly inside the Shopify app since remote redirect window never closes and instead attempts to load our sales channel inside the other tab.
What is the proper way to implement the Connect button for a Shopify Sales Channel? Nearly every example that I’ve seen of other Shopify apps appears to be using a pop-up window. But the Shopify documentation discourages the use of pop-ups, but at the same time, the style guide for onboarding customers prominently shows a pop-up window being used. Is there a proper way to display a pop-up that will work both on the web and inside the Shopify app? Your help is much appreciated!