Start

Quickstart

Install @sembol/passkey-react and ship a working Stellar passkey wallet in one component.

Install

bash

npm install @sembol/passkey-react

Wrap and render

One provider, one stylesheet import, and two components:

app.tsx

import {
  PasskeyWalletProvider,
  CreateWalletButton,
  ConnectWalletButton,
  SEMBOL_TESTNET_ARTIFACTS,
} from "@sembol/passkey-react";
import "@sembol/passkey-react/styles.css";

export default function App() {
  return (
    <PasskeyWalletProvider config={SEMBOL_TESTNET_ARTIFACTS}>
      <CreateWalletButton />
      <ConnectWalletButton />
    </PasskeyWalletProvider>
  );
}

That is a complete testnet wallet: create with Face ID, sponsored contract deployment, automatic session restore on reload. The provider is SSR safe, so it wraps a Next.js App Router tree directly.

Read state, send a payment

tsx

import {
  usePasskeyWallet,
  useWalletBalance,
  useTransfer,
} from "@sembol/passkey-react";

function Wallet() {
  const { isConnected, address } = usePasskeyWallet();
  const { formatted, symbol } = useWalletBalance();
  const { transfer, status } = useTransfer();

  if (!isConnected) return null;
  return (
    <>
      <p>{address}</p>
      <p>{formatted} {symbol}</p>
      <button
        onClick={() => transfer({ to: "G...", amount: "1" })}
        disabled={status === "transferring"}
      >
        Send 1 XLM
      </button>
    </>
  );
}

Make it yours

tsx

<PasskeyWalletProvider
  config={SEMBOL_TESTNET_ARTIFACTS}
  theme={{ accent: "#e11d48", radius: "lg" }}
>

One accent retints every component. Build a full theme visually in the theme builder and copy the prop out, or read Theming for the whole API.

Passkeys are per domain. A wallet created on localhost will not appear on your production domain. Each domain gets its own passkeys, by WebAuthn design.