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