Embedded Polaris App-bridge Connect Button

Solved
Highlighted
New Member
1 0 0

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

0 Likes
Highlighted
Shopify Staff
Shopify Staff
53 11 19

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

1 Like
Highlighted
Shopify Staff
Shopify Staff
53 11 19

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.

1 Like