Questions and discussions about using the Shopify CLI and Shopify-built libraries.
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?
Thank you
Solved! Go to the solution
This is an accepted solution.
Hi buddywa,
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 <Modal title="Sign in" url="https://example.com/signin" open />
}
function MyApp() {
const config = {apiKey: '12345', shopOrigin: shopOrigin};
return (
<Provider config={config}>
<MyPage />
</Provider>
);
}
const root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.render(<MyApp />, root);
Sign in modal
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));
Hope this helps!
Trish
Trish | Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
This is an accepted solution.
Hi buddywa,
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 <Modal title="Sign in" url="https://example.com/signin" open />
}
function MyApp() {
const config = {apiKey: '12345', shopOrigin: shopOrigin};
return (
<Provider config={config}>
<MyPage />
</Provider>
);
}
const root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.render(<MyApp />, root);
Sign in modal
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));
Hope this helps!
Trish
Trish | Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
Hi buddywa,
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.
Trish | Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
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!
Confusing documentation:
https://pbs.twimg.com/media/FOpNlYjWQAgN04K?format=jpg&name=4096x4096
Did you find a solution?