Sync Widget SDKs

Sync Widget React SDK

The Sync Widget React SDK makes it easy to integrate Data Synchronization into your application, enabling users to effortlessly manage their data in the Portabl Passport™.


This guide assumes that all prerequisite steps are applied and configured as mentioned in the Data Sync tutorial.


  npm install --save @portabl/react-sync-with-portabl


Render the Sync Widget component with the necessary properties.

import SyncWithPortabl from '@portabl/react-sync-with-portabl';
import axios from 'axios';
function App() {
  return (
      getSyncContext={async () => {
        const { data } = await axios.get(`http://localhost:3001/sync-context`);
        return data;
      prepareSync={async () => {
        const { data } = await`http://localhost:3001/prepare-sync`);
        return {
          invitationUrl: data.invitationUrl,
          isLinked: data.isLinked,


widgetBaseUrlstringhttps://widgets.getportabl.comThe url from which to load the widget
getSyncContext() => Promise<{ isSyncOn: boolean; isSessionEstablished: boolean; datapoints: string[]; issuerDIDs: string[]; }>function that calls the Sync Context api endpoint and returns the response
prepareSync() => Promise<{ isLinked: boolean; invitationUrl?: string; }>function that calls the Prepare Sync api endpoint and returns the response