React connect UI

Embed the hosted Authlane connect UI with a short-lived origin-bound URL.

React receives only a connect URL created by your authenticated backend.

Prerequisites

pnpm add @authlane/sdk @authlane/react

Implement the workflow

Create the URL on your server:

import { Authlane } from '@authlane/sdk';

const authlane = new Authlane({ apiKey: process.env.AUTHLANE_API_KEY! });

export async function connectUrl(userId: string) {
  const { data, error } = await authlane.connectSessions.create({
    externalUserId: userId,
    allowedServices: [],
    allowedOrigin: 'https://app.example.com',
    expiresInSeconds: 600,
  });
  if (error) return { data: null, error };
  return { data: data.url, error: null };
}

Render it in React:

import { AuthlaneConnect } from '@authlane/react';

export function IntegrationSettings({ connectUrl }: { connectUrl: string }) {
  return (
    <AuthlaneConnect
      connectUrl={connectUrl}
      minHeight={480}
      onEvent={(event) => {
        if (event.type === 'connected') console.log(event.serviceId);
      }}
    />
  );
}

The component validates postMessage origin and iframe source, applies a sandbox, and adjusts its height. Connected, disconnected, and error events are safe UI signals; refresh status from your backend before enabling tools.

Handle errors

On expiry or origin mismatch, discard the URL and request a new connect session from the backend.

Security boundary

The component accepts no API key or external user ID. Those boundaries are already sealed into the short-lived session. Provider credentials never reach the iframe parent.

Next step

Read connect a user for retry and disconnect behavior.

Search documentation