Xaman Wallet Integration

Xaman Wallet Integration

Quick Start

1. Load the SDK (in layout.tsx or HTML head):

<script src="https://xumm.app/assets/cdn/xumm-oauth2-pkce.min.js"></script>

2. Initialize and connect:

const XummPkce = (window as any).XummPkce;
const xumm = new XummPkce(API_KEY, {
  redirectUrl: window.location.origin + "/dashboard"
});

// Listen for auth events
xumm.on("success", async (state) => {
  const account = (await xumm.state())?.me?.account;
  console.log("Connected:", account);
});

// Start auth flow (opens popup)
await xumm.authorize();

API Key

Get your API key from: https://xumm.app/dashboard/developer

Environment variable: NEXT_PUBLIC_XAMAN_API_KEY

Key Methods

• new XummPkce(apiKey, options) - Initialize SDK
• xumm.authorize() - Start OAuth flow, opens Xaman app
• xumm.state() - Get current user session
• xumm.logout() - Clear session
• xumm.on("success", callback) - Listen for successful auth
• xumm.on("error", callback) - Listen for errors

Options

{
  redirectUrl: string,      // Where to redirect after auth
  rememberJwt: boolean,     // Persist session in localStorage (default: true)
  storage: Storage,        // Custom storage (default: localStorage)
  implicit: boolean        // Use implicit flow (default: false)
}

Session Recovery

The SDK auto-restores sessions. Call xumm.logout() before authorize() to force fresh login.

Troubleshooting

• Popup blocked: Browser popup blocker may prevent authorize() - call from user action
• Account undefined: Use xumm.state().then(s => s.me.account) after success event
• CORS errors: Ensure redirectUrl matches your app's origin