SnapTrade

Display the Connection Portal in an iFrame

In order to make it easier and faster to use the SnapTrade Connection Portal, we added support for loading the Connection Portal in an iframe. This allows apps to make the connection experience more coherent so that users don't need to leave their app until the OAuth linking step.

After generating a redirect link (https://docs.snaptrade.com/reference/authentication_loginsnaptradeuser), use the following template to load the portal in an iframe inside your app:

Note: We suggest load the iframe in a modal. You can either use your own modal component or use the following libraries: 


      <Modal>
        <button className="close-button" onClick={close}>
          <span aria-hidden>×</span>
        </button>
        <iframe
          id="snaptrade-connection-portal"
          src={loginLink}
          title="SnapTrade Connection Portal"
          allowFullScreen
        ></iframe>
      </Modal>

The application is also designed to initiate the firing of three distinct events in response to certain specific occurrences. These occurrences and their respective event triggers are as follows:

  • Successful connection establishment: Upon a connection being successfully established, the application will transmit a message containing the value SUCCESS to the parent application.
  • Connection failure: In the event of a connection failure, a message containing the value ERROR:{status_code} will be transmitted to the parent application, with the specific status code of the error being included in the message.
  • User tab closure: If the user closes the tab, the application will transmit a message containing the value CLOSED to the parent application.

Example of how these events can be captured in a React app:

  useEffect(() => {
    const handleMessageEvent = (e: MessageEvent<unknown>) => {
      if (typeof e.data === 'string') {
        if (e.data === 'SUCCESS') {
            // do something here
        }

        if (e.data.includes('ERROR')) {
         // do something here
        }

        if (e.data === 'CLOSED') {
            // do something here
        }
      }
    };
     return () => {
      window.removeEventListener('message', handleMessageEvent, false);
    };
  }, []);

If your app uses React in its frontend, you can use our React SDK package to make it even easier to iframe the Connection Portal.

Here is a link to the SnapTrade React SDK: https://www.npmjs.com/package/snaptrade-react