@getpassage/web-react

React SDK for Passage Connect — account linking via App Clips.

Shows a modal with a QR code that the user scans to open an App Clip. The SDK monitors link status over WebSocket and calls your callbacks on completion or error.

Install

npm install @getpassage/web-react

Usage

Wrap your app with PassageProvider, then call openAppClip from any component:

import { PassageProvider, usePassage } from "@getpassage/web-react";

function App() {
  return (
    <PassageProvider>
      <ConnectButton />
    </PassageProvider>
  );
}

function ConnectButton() {
  const { openAppClip } = usePassage();

  return (
    <button
      onClick={() =>
        openAppClip({
          claimCode: "clm_...",
          onConnectionComplete: () => console.log("Done!"),
          onConnectionError: (err) => console.error(err.error),
        })
      }
    >
      Link Account
    </button>
  );
}

API

<PassageProvider>

Wrap your app to provide the Passage context and render the App Clip modal.

| Prop | Type | Description | |------|------|-------------| | connectUrl | string? | Connect service URL (default: production) | | clipBaseUrl | string? | App Clip base URL (default: production) | | debug | boolean? | Enable debug logging |

usePassage()

Returns { openAppClip, close }.

• openAppClip(options) — Open the modal with a QR code.
  • claimCode (required) — Claim code from POST /v1/links
  • onConnectionComplete — Called when the link completes
  • onConnectionError — Called with { error, code? } on failure
• close() — Dismiss the modal.

Standalone API

For use outside React components:

import { configure, openAppClip, close } from "@getpassage/web-react";

configure({ debug: true });
openAppClip({ claimCode: "clm_..." });

License

MIT