"]
+ }
+}
+```
+
+#### Communication Fails Between Page and Extension
+
+**Symptoms**: Initialization succeeds but verification doesn't start
+
+**Debugging**:
+
+1. Check content script is loaded on the page:
+```javascript
+// In page console
+window.addEventListener('message', (event) => {
+ console.log('Message received:', event.data);
+});
+```
+
+2. Verify CORS for server config:
+```javascript
+// Backend
+app.use(cors({
+ origin: process.env.ALLOWED_ORIGINS.split(','),
+ credentials: true
+}));
+```
+
+3. Check for CSP blocking communication:
+```html
+
+
+```
+
+### Build Tool Issues
+
+#### Vite Re-bundling SDK Assets
+
+**Symptoms**: Build errors related to SDK bundles
+
+**Solution**: Ensure assets are in public directory and not imported:
+
+```javascript
+// â Don't do this
+import contentScript from '@reclaimprotocol/browser-extension-sdk/content/content.bundle.js';
+
+// â
Reference from public directory via manifest
+{
+ "content_scripts": [
+ {
+ "js": ["reclaim-browser-extension-sdk/content/content.bundle.js"]
+ }
+ ]
+}
+```
+
+#### Create React App (CRA) Issues
+
+**Symptoms**: Build fails or SDK doesn't work after build
+
+**Solutions**:
+
+1. Verify public folder structure:
+```bash
+public/
+âââ reclaim-browser-extension-sdk/
+â âââ content/
+â âââ offscreen/
+â âââ interceptor/
+âââ manifest.json
+```
+
+2. Use correct paths in manifest:
+```json
+{
+ "content_scripts": [
+ {
+ "js": ["reclaim-browser-extension-sdk/content/content.bundle.js"]
+ // NOT: "public/reclaim-browser-extension-sdk/..."
+ }
+ ]
+}
+```
+
+### Environment Variable Issues
+
+#### Variables Not Loading
+
+**Symptoms**: `undefined` values for environment variables
+
+**Solutions**:
+
+1. Check variable prefix:
+```javascript
+// Vite
+import.meta.env.VITE_RECLAIM_APP_ID // â
+process.env.VITE_RECLAIM_APP_ID // â
+
+// CRA
+process.env.REACT_APP_RECLAIM_APP_ID // â
+import.meta.env.REACT_APP_... // â
+```
+
+2. Restart dev server after changing `.env`:
+```bash
+# Stop server (Ctrl+C)
+npm run dev
+```
+
+3. Verify `.env` file location:
+```bash
+# Should be in project root
+ls -la .env.local
+```
+
+## Debugging Tools
+
+### Enable Debug Mode
+
+Create a debug utility:
+
+```javascript
+const DEBUG = import.meta.env.MODE === 'development';
+
+export const debug = {
+ log: (...args) => DEBUG && console.log('[DEBUG]', ...args),
+ error: (...args) => DEBUG && console.error('[ERROR]', ...args),
+ warn: (...args) => DEBUG && console.warn('[WARN]', ...args)
+};
+
+// Usage
+debug.log('Initializing SDK with', { APP_ID, providerId });
+```
+
+### Log All SDK Events
+
+```javascript
+const request = await reclaimExtensionSDK.init(...);
+
+['started', 'completed', 'error'].forEach(eventName => {
+ request.on(eventName, (data) => {
+ console.log(`[${eventName.toUpperCase()}]`, {
+ timestamp: new Date().toISOString(),
+ data
+ });
+ });
+});
+```
+
+### Check Extension State
+
+```javascript
+// In extension background
+chrome.management.getSelf((info) => {
+ console.log('Extension info:', {
+ enabled: info.enabled,
+ version: info.version,
+ permissions: info.permissions
+ });
+});
+```
+
+## Performance Issues
+
+### Slow Proof Generation
+
+**Symptoms**: Verification takes a long time
+
+**Possible Causes**:
+1. WebAssembly not loading properly
+2. Offscreen document not created
+3. Network issues
+
+**Solutions**:
+
+1. Verify WASM loading:
+```javascript
+// Check CSP allows WASM
+console.log(document.querySelector('meta[http-equiv="Content-Security-Policy"]'));
+```
+
+2. Monitor offscreen document:
+```javascript
+// Log offscreen creation
+chrome.offscreen.createDocument(...).then(() => {
+ console.log('âąī¸ Offscreen created at', Date.now());
+});
+```
+
+### Extension Slowing Down Browser
+
+**Symptoms**: Browser becomes sluggish
+
+**Solution**: Check for memory leaks:
+
+```javascript
+// Cleanup after verification
+request.on("completed", (proofs) => {
+ // Process proofs
+ handleProofs(proofs);
+
+ // Clear references
+ request = null;
+});
+
+request.on("error", (error) => {
+ // Handle error
+ handleError(error);
+
+ // Clear references
+ request = null;
+});
+```
+
+## Getting Help
+
+If you've tried everything and still have issues:
+
+1. **Check Console Logs**:
+ - Extension popup console
+ - Background service worker console
+ - Web page console (for web integration)
+ - Provider tab console
+
+2. **Gather Information**:
+ - Extension version
+ - Browser version
+ - SDK version
+ - Error messages
+ - Steps to reproduce
+
+3. **Test in Isolation**:
+ - Create a minimal reproduction
+ - Test with basic credentials
+ - Try different providers
+
+4. **Community Support**:
+ - [GitHub Issues](https://github.com/reclaimprotocol/reclaim-browser-extension-sdk/issues)
+ - [Discord Community](https://discord.gg/reclaim) (if available)
+ - [Documentation](https://docs.reclaimprotocol.org)
+
+## Prevention Checklist
+
+Before deploying:
+
+- â
Tested in both development and production builds
+- â
Verified all environment variables are set
+- â
Tested extension installation flow
+- â
Implemented proper error handling
+- â
Added user-friendly error messages
+- â
Tested with multiple providers
+- â
Verified proof validation on backend
+- â
Tested edge cases (cancellation, timeout, etc.)
+- â
Checked for memory leaks
+- â
Reviewed console for warnings
+
+## Additional Resources
+
+- [Extension Integration Guide](/browser-extension/extension-integration)
+- [Web Integration Guide](/browser-extension/web-integration)
+- [Chrome Extension Documentation](https://developer.chrome.com/docs/extensions/)
+- [Manifest V3 Migration](https://developer.chrome.com/docs/extensions/mv3/intro/)
diff --git a/content/docs/browser-extension/web-integration/index.mdx b/content/docs/browser-extension/web-integration/index.mdx
new file mode 100644
index 0000000..49bd062
--- /dev/null
+++ b/content/docs/browser-extension/web-integration/index.mdx
@@ -0,0 +1,247 @@
+---
+title: Web Integration (Optional)
+description: Integrate Reclaim verification into your website through a compatible browser extension
+---
+
+
+**Optional Integration**: This section is for websites that want to integrate with an extension built using the Reclaim Browser Extension SDK. If you're building an extension with popup/sidepanel verification, use [Extension Integration](/browser-extension/extension-integration) instead.
+
+
+## Overview
+
+Trigger Reclaim verification from your website through an installed browser extension. Users can verify without leaving your site - the extension handles all verification logic.
+
+## When to Use This
+
+Choose web integration if:
+
+- đ **You have a website** (not building an extension)
+- đ **Users have a compatible extension** built with this SDK
+- đ¨ **You control the website UI** (extension handles verification)
+- đ **You want in-page verification** without redirects
+
+## How It Works
+
+The web integration establishes communication between your website and the Reclaim browser extension:
+
+```mermaid
+graph LR
+ A[Your Website] -->|Initialize SDK| B[Extension Content Script]
+ B -->|Request Verification| C[Extension Background]
+ C -->|Create| D[Offscreen Document]
+ C -->|Open| E[Provider Tab]
+ D -->|Generate| F[Proof]
+ F -->|Return| A
+```
+
+### Flow Breakdown
+
+1. **Your Website**: Calls SDK with extension ID
+2. **Content Script Bridge**: Receives request from webpage
+3. **Extension Background**: Orchestrates verification
+4. **Offscreen Document**: Generates proofs
+5. **Provider Tab**: Handles authentication
+6. **Proofs Returned**: Sent back to your website
+
+## Prerequisites
+
+Before integrating, ensure you have:
+
+- â
Completed the [Installation guide](/browser-extension/installation)
+- â
Obtained API credentials from the [API Key guide](/api-key)
+- â
Access to a Reclaim-compatible browser extension (or built one using [Extension Integration](/browser-extension/extension-integration))
+- â
A web application (React, Vue, vanilla JavaScript, etc.)
+
+
+**Extension Requirement**: Users must have a Reclaim-compatible extension installed. You can either:
+1. Build your own extension using [Extension Integration](/browser-extension/extension-integration)
+2. Use the official Reclaim extension (if available)
+3. Partner with existing extension providers
+
+
+## Key Differences from Extension Integration
+
+| Aspect | Extension Integration | Web Integration |
+|--------|----------------------|-----------------|
+| **Who builds** | You build the extension | You use existing extension |
+| **User installs** | Your extension | Any compatible extension |
+| **Control** | Full control | Limited to verification API |
+| **UI Location** | Extension popup/panel | Your website |
+| **Complexity** | Higher (extension dev) | Lower (just web code) |
+
+## Extension ID
+
+The most important configuration for web integration is the **Extension ID**. This identifies which browser extension will handle verification requests.
+
+### Finding the Extension ID
+
+For Chrome extensions:
+
+1. Navigate to `chrome://extensions`
+2. Enable "Developer mode" (top-right toggle)
+3. Find the extension
+4. Copy the ID (shown under the extension name)
+
+**Example ID**: `abcdefghijklmnopqrstuvwxyz123456`
+
+### Storing the Extension ID
+
+**Development**:
+```javascript
+// .env.local
+VITE_RECLAIM_EXTENSION_ID=abcdefghijklmnopqrstuvwxyz123456
+```
+
+**Production**:
+```javascript
+// Use environment variables or configuration
+const EXTENSION_ID = process.env.REACT_APP_RECLAIM_EXTENSION_ID;
+```
+
+
+**Extension ID Changes**: The extension ID changes between development and production builds. Ensure you use the correct ID for each environment.
+
+
+## Architecture Benefits
+
+### For Developers
+
+- â
**No Extension Development**: Just integrate SDK in your web app
+- â
**Faster Integration**: Standard web development workflow
+- â
**Framework Agnostic**: Works with React, Vue, Angular, vanilla JS
+- â
**Easier Updates**: Update your website without extension review process
+
+### For Users
+
+- â
**Single Extension**: One extension works across multiple websites
+- â
**No Page Reloads**: Verification happens in-place
+- â
**Trusted Source**: Extension from verified publisher
+- â
**Consistent UX**: Familiar verification flow across sites
+
+## Security Considerations
+
+### Extension Trust
+
+Users must trust the browser extension since it:
+- Handles sensitive authentication flows
+- Generates cryptographic proofs
+- Has access to provider credentials
+
+**Best Practices**:
+- Use well-known, audited extensions
+- Clearly communicate which extension is required
+- Provide extension installation instructions
+- Verify extension authenticity
+
+### Website Security
+
+Your website should:
+- Validate proofs server-side (never trust client-side proofs alone)
+- Use HTTPS for all communication
+- Implement Content Security Policy (CSP)
+- Handle extension not installed gracefully
+
+## Browser Compatibility
+
+Web integration works in browsers supporting Chrome extensions:
+
+| Browser | Support | Notes |
+|---------|---------|-------|
+| Chrome | â
| Full support |
+| Edge | â
| Chrome Web Store extensions work |
+| Brave | â
| Chrome Web Store extensions work |
+| Opera | â
| Chrome Web Store extensions work |
+| Firefox | âŗ | Coming soon (Firefox addons) |
+| Safari | âŗ | Coming soon (Safari extensions) |
+
+## Integration Approaches
+
+You have two approaches for web integration:
+
+### 1. Direct Client-Side Integration (Quick Start)
+
+Pass credentials directly in your frontend code. **Not recommended for production**.
+
+**Pros**:
+- â
Fastest to implement
+- â
No backend required
+- â
Good for prototypes
+
+**Cons**:
+- â Exposes application secret
+- â Not secure for production
+- â Credentials visible in client code
+
+[Quick Start Guide â](/browser-extension/web-integration/setup#quick-start)
+
+### 2. Server-Side Configuration (Production)
+
+Generate verification requests on your backend, only pass configuration to frontend.
+
+**Pros**:
+- â
Secure - secrets stay on server
+- â
Backend validation
+- â
User authorization
+- â
Production-ready
+
+**Cons**:
+- â Requires backend API
+- â More complex setup
+
+[Production Setup â](/browser-extension/web-integration/setup#production-setup)
+
+
+**Production Warning**: Never expose your Application Secret in client-side code. Always use server-side configuration for production deployments.
+
+
+## Example Use Cases
+
+### DeFi Applications
+
+Verify user credentials before token operations:
+```javascript
+// Verify Twitter account before claiming tokens
+const proofs = await verifyWithReclaim("twitter-profile");
+await claimTokens(proofs);
+```
+
+### Social Platforms
+
+Authenticate users with provider credentials:
+```javascript
+// Verify GitHub account for developer community
+const proofs = await verifyWithReclaim("github-login");
+await createProfile(proofs);
+```
+
+### Identity Verification
+
+Proof of account ownership:
+```javascript
+// Verify Google account ownership
+const proofs = await verifyWithReclaim("google-login");
+await linkAccount(proofs);
+```
+
+## Next Steps
+
+Proceed to setup and implementation:
+
+1. **[Setup](/browser-extension/web-integration/setup)** - Configure SDK in your web application
+2. **[Usage](/browser-extension/web-integration/usage)** - Implement verification flows
+3. **[Troubleshooting](/browser-extension/troubleshooting)** - Common issues and solutions
+
+## Extension Installation Guide
+
+For users of your website, provide clear instructions:
+
+```markdown
+### Install the Reclaim Extension
+
+1. Visit the [Chrome Web Store](https://chrome.google.com/webstore)
+2. Search for "Reclaim Protocol"
+3. Click "Add to Chrome"
+4. Return to this page and click "Verify"
+```
+
+Or detect and prompt automatically (covered in [Usage guide](/browser-extension/web-integration/usage#checking-extension-installation)).
diff --git a/content/docs/browser-extension/web-integration/meta.json b/content/docs/browser-extension/web-integration/meta.json
new file mode 100644
index 0000000..8e32a70
--- /dev/null
+++ b/content/docs/browser-extension/web-integration/meta.json
@@ -0,0 +1,4 @@
+{
+ "title": "Web Integration (Optional)",
+ "pages": ["setup", "usage"]
+}
diff --git a/content/docs/browser-extension/web-integration/setup.mdx b/content/docs/browser-extension/web-integration/setup.mdx
new file mode 100644
index 0000000..b9642de
--- /dev/null
+++ b/content/docs/browser-extension/web-integration/setup.mdx
@@ -0,0 +1,829 @@
+---
+title: Setup
+description: Configure the Reclaim Browser Extension SDK in your web application
+---
+
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+## Prerequisites
+
+- â
[Installation guide](/browser-extension/installation) completed
+- â
[API credentials](/api-key) obtained
+- â
Extension ID of the Reclaim-compatible extension
+- â
Web application (React, Vue, vanilla JS)
+
+## Installation
+
+
+```bash tab="npm"
+npm install @reclaimprotocol/browser-extension-sdk
+```
+
+```bash tab="yarn"
+yarn add @reclaimprotocol/browser-extension-sdk
+```
+
+
+
+## Environment Variables
+
+Create `.env.local` in your project root:
+
+
+```bash tab="Vite"
+VITE_RECLAIM_APP_ID=YOUR_APPLICATION_ID
+VITE_RECLAIM_APP_SECRET=YOUR_APPLICATION_SECRET # Dev only!
+VITE_RECLAIM_EXTENSION_ID=YOUR_EXTENSION_ID
+```
+
+```bash tab="Create React App"
+REACT_APP_RECLAIM_APP_ID=YOUR_APPLICATION_ID
+REACT_APP_RECLAIM_APP_SECRET=YOUR_APPLICATION_SECRET # Dev only!
+REACT_APP_RECLAIM_EXTENSION_ID=YOUR_EXTENSION_ID
+```
+
+```bash tab="Next.js"
+NEXT_PUBLIC_RECLAIM_APP_ID=YOUR_APPLICATION_ID
+RECLAIM_APP_SECRET=YOUR_APPLICATION_SECRET # Server-side only
+NEXT_PUBLIC_RECLAIM_EXTENSION_ID=YOUR_EXTENSION_ID
+# NEVER put secret in NEXT_PUBLIC_ variables
+```
+
+
+
+
+ **Security**: Never commit `.env.local` to version control. Add to `.gitignore`: ```bash .env.local .env.*.local ```
+
+
+## Quick Start Setup (Development Only)
+
+For rapid prototyping and development, you can initialize verification directly with credentials.
+
+
+ **Development Only**: This approach exposes your application secret in client-side code. Only use for development and testing. Never
+ deploy to production with this method.
+
+
+### Vanilla JavaScript
+
+```javascript
+import { reclaimExtensionSDK } from "@reclaimprotocol/browser-extension-sdk";
+
+const APP_ID = import.meta.env.VITE_RECLAIM_APP_ID;
+const APP_SECRET = import.meta.env.VITE_RECLAIM_APP_SECRET; // Dev only!
+const EXTENSION_ID = import.meta.env.VITE_RECLAIM_EXTENSION_ID;
+
+async function initializeVerification(providerId) {
+ try {
+ // Initialize with extension ID
+ const request = await reclaimExtensionSDK.init(APP_ID, APP_SECRET, providerId, {
+ extensionID: EXTENSION_ID,
+ });
+
+ // Configure the request (optional)
+ request.setAppCallbackUrl("https://your.server/receive-proofs");
+ request.setParams({ userId: "user123", action: "login" });
+ request.addContext("0x0", "web app verification");
+
+ console.log({ request });
+
+ // Set up event handlers
+ request.on("started", ({ sessionId }) => {
+ console.log("Verification started:", sessionId);
+ });
+
+ request.on("completed", (proofs) => {
+ console.log("Verification completed:", proofs);
+ // Handle proofs
+ });
+
+ request.on("error", (error) => {
+ console.error("Verification error:", error);
+ // Handle error
+ });
+
+ // Start verification
+ const proofs = await request.startVerification();
+ console.log("startVerification (promise)", proofs);
+ } catch (error) {
+ console.error("Failed to initialize:", error);
+ }
+}
+
+// Use it
+initializeVerification("google-login");
+```
+
+### React Example
+
+```javascript
+import { useState } from "react";
+import { reclaimExtensionSDK } from "@reclaimprotocol/browser-extension-sdk";
+
+function ReclaimVerification() {
+ const [proofs, setProofs] = useState(null);
+ const [error, setError] = useState(null);
+ const [loading, setLoading] = useState(false);
+
+ const APP_ID = import.meta.env.VITE_RECLAIM_APP_ID;
+ const APP_SECRET = import.meta.env.VITE_RECLAIM_APP_SECRET; // Dev only!
+ const EXTENSION_ID = import.meta.env.VITE_RECLAIM_EXTENSION_ID;
+
+ const handleVerification = async () => {
+ setLoading(true);
+ setError(null);
+
+ try {
+ const request = await reclaimExtensionSDK.init(APP_ID, APP_SECRET, "google-login", {
+ extensionID: EXTENSION_ID,
+ });
+
+ // Configure the request (optional)
+ request.setAppCallbackUrl("https://your.server/receive-proofs");
+ request.setParams({ userId: "user123", action: "login" });
+ request.addContext("0x0", "react app verification");
+
+ request.on("started", ({ sessionId }) => {
+ console.log("Verification started:", sessionId);
+ });
+
+ request.on("completed", (proofs) => {
+ console.log("Proofs:", proofs);
+ setProofs(proofs);
+ setLoading(false);
+ });
+
+ request.on("error", (err) => {
+ console.error("Error:", err);
+ setError(err.message || String(err));
+ setLoading(false);
+ });
+
+ const proofs = await request.startVerification();
+ console.log("startVerification (promise)", proofs);
+ } catch (err) {
+ setError(err.message || String(err));
+ setLoading(false);
+ }
+ };
+
+ return (
+
+
+
+ {error &&
Error: {error}
}
+
+ {proofs && (
+
+
Verification Successful!
+
{JSON.stringify(proofs, null, 2)}
+
+ )}
+
Checking extension...
;
+ }
+
+ if (!extensionInstalled) {
+ return (
+
+ );
+ }
+
+ return (
+
+
+
+ );
+}
+```
+
+## Next Steps
+
+With setup complete, learn how to implement verification flows:
+
+**[Implement Verification â](/browser-extension/web-integration/usage)**
diff --git a/content/docs/browser-extension/web-integration/usage.mdx b/content/docs/browser-extension/web-integration/usage.mdx
new file mode 100644
index 0000000..7d0cfa7
--- /dev/null
+++ b/content/docs/browser-extension/web-integration/usage.mdx
@@ -0,0 +1,821 @@
+---
+title: Usage
+description: Implement Reclaim verification flows in your web application
+---
+
+## Overview
+
+This guide demonstrates how to implement complete verification flows in your web application, including initialization, event handling, UI states, and error management.
+
+## Prerequisites
+
+- â
Completed [Installation](/browser-extension/installation)
+- â
Completed [Setup](/browser-extension/web-integration/setup)
+- â
Extension installed and extension ID configured
+- â
API credentials from [API Key guide](/api-key)
+
+## Basic Implementation
+
+### Simple Verification Flow
+
+The simplest implementation triggers verification and handles the result:
+
+```javascript
+import { reclaimExtensionSDK } from "@reclaimprotocol/browser-extension-sdk";
+
+const APP_ID = import.meta.env.VITE_RECLAIM_APP_ID;
+const APP_SECRET = import.meta.env.VITE_RECLAIM_APP_SECRET;
+const EXTENSION_ID = import.meta.env.VITE_RECLAIM_EXTENSION_ID;
+
+async function verifyUser(providerId) {
+ try {
+ // Initialize request
+ const request = await reclaimExtensionSDK.init(APP_ID, APP_SECRET, providerId, {
+ extensionID: EXTENSION_ID,
+ });
+
+ // Configure the request (optional)
+ request.setAppCallbackUrl("https://your.server/receive-proofs");
+ request.setParams({ userId: "user123", action: "login" });
+ request.addContext("0x0", "web verification");
+
+ console.log({ request });
+
+ // Handle events
+ request.on("started", ({ sessionId }) => {
+ console.log("đ Verification started:", sessionId);
+ });
+
+ request.on("completed", (proofs) => {
+ console.log("â
Verification successful!");
+ console.log("Proofs:", proofs);
+ // Process proofs
+ });
+
+ request.on("error", (error) => {
+ console.error("â Verification failed:", error);
+ // Handle error
+ });
+
+ // Start verification (also returns a promise)
+ const proofs = await request.startVerification();
+ console.log("startVerification (promise)", proofs);
+ } catch (error) {
+ console.error("Failed to initialize:", error);
+ }
+}
+
+// Trigger verification
+verifyUser("google-login");
+```
+
+## SDK API Reference
+
+### Initialization Methods
+
+#### `reclaimExtensionSDK.init()`
+
+Initialize a new verification request with credentials.
+
+```javascript
+const request = await reclaimExtensionSDK.init(appId, appSecret, providerId, {
+ extensionID: EXTENSION_ID,
+});
+```
+
+**Parameters**:
+
+- `appId` (string): Your application ID from Reclaim dashboard
+- `appSecret` (string): Your application secret (keep secure!)
+- `providerId` (string): ID of the provider to verify (e.g., `"google-login"`)
+- `options` (object): Configuration options
+ - `extensionID` (string): Required - Browser extension ID
+
+**Returns**: Promise that resolves to a `ReclaimRequest` object
+
+---
+
+#### `reclaimExtensionSDK.fromConfig()`
+
+Initialize from a pre-generated configuration (recommended for production).
+
+```javascript
+const requestConfig = await fetchFromBackend(); // Get config from your server
+const request = reclaimExtensionSDK.fromConfig(requestConfig, {
+ extensionID: EXTENSION_ID,
+});
+```
+
+**Parameters**:
+
+- `requestConfig` (object): Configuration object from backend
+- `options` (object): Configuration options
+ - `extensionID` (string): Required - Browser extension ID
+
+**Returns**: `ReclaimRequest` object
+
+**Use Case**: When using server-side request generation for better security
+
+---
+
+#### `reclaimExtensionSDK.isExtensionInstalled()`
+
+Check if the Reclaim extension is installed in the user's browser.
+
+```javascript
+const isInstalled = await reclaimExtensionSDK.isExtensionInstalled({
+ extensionID: EXTENSION_ID,
+});
+```
+
+**Parameters**:
+
+- `options` (object): Configuration options
+ - `extensionID` (string): Required - Browser extension ID
+
+**Returns**: Promise that resolves to `true` if installed, `false` otherwise
+
+**Use Case**: Check extension status before starting verification to show appropriate UI
+
+---
+
+#### `reclaimExtensionSDK.getVersion()`
+
+Get the current version of the Reclaim Extension SDK.
+
+```javascript
+const version = reclaimExtensionSDK.getVersion();
+console.log("SDK Version:", version);
+```
+
+**Parameters**: None
+
+**Returns**: String containing the SDK version (e.g., `"1.0.0"`)
+
+**Use Case**:
+
+- Display SDK version in your application
+- Log version information for debugging
+- Check SDK version for compatibility
+
+---
+
+### Request Object Methods
+
+After calling `reclaimExtensionSDK.init()` or `fromConfig()`, you receive a `request` object with these methods:
+
+#### `request.setAppCallbackUrl()`
+
+Set a callback URL where proofs will be sent automatically.
+
+```javascript
+request.setAppCallbackUrl("https://your.server/receive-proofs");
+```
+
+**Parameters**:
+
+- `url` (string): Your backend endpoint to receive proofs
+
+**Use Case**: Automatically send proofs to your server when verification completes
+
+---
+
+#### `request.setParams()`
+
+Add custom parameters to the verification request.
+
+```javascript
+request.setParams({
+ userId: "user123",
+ action: "login",
+ timestamp: Date.now(),
+});
+```
+
+**Parameters**:
+
+- `params` (object): Custom key-value pairs to include with the proof
+
+**Use Case**: Pass additional context or metadata with the verification
+
+---
+
+#### `request.addContext()`
+
+Add context information to the verification.
+
+```javascript
+request.addContext("0x0", "web app verification");
+```
+
+**Parameters**:
+
+- `address` (string): Context address or identifier
+- `message` (string): Context message or description
+
+**Use Case**: Add on-chain context or additional verification metadata
+
+---
+
+#### `request.startVerification()`
+
+Start the verification process and return a promise that resolves with proofs.
+
+```javascript
+const proofs = await request.startVerification();
+console.log("Verification complete:", proofs);
+```
+
+**Returns**: Promise that resolves with proof data when verification completes
+
+**Use Case**:
+
+- Get proofs via promise instead of event listeners
+- Use with async/await for cleaner code flow
+- Combine with event listeners for both immediate and async handling
+
+**Note**: You can use both the promise return value AND event listeners together. The `completed` event will fire, and the promise will resolve with the same proof data.
+
+---
+
+#### `request.on()`
+
+Register event listeners for verification lifecycle events.
+
+```javascript
+request.on("started", ({ sessionId }) => {
+ console.log("Verification started:", sessionId);
+});
+
+request.on("completed", (proofs) => {
+ console.log("Proofs received:", proofs);
+});
+
+request.on("error", (error) => {
+ console.error("Error:", error);
+});
+```
+
+**Parameters**:
+
+- `event` (string): Event name (`"started"`, `"completed"`, or `"error"`)
+- `callback` (function): Function to call when event fires
+
+**Available Events**:
+
+- `started`: Fired when verification session begins (payload: `{ sessionId }`)
+- `completed`: Fired when verification succeeds (payload: `proofs` object)
+- `error`: Fired when verification fails or is cancelled (payload: `error` object/string)
+
+---
+
+### Complete Usage Example
+
+```javascript
+// Initialize the request
+const request = await reclaimExtensionSDK.init(APP_ID, APP_SECRET, "google-login", { extensionID: EXTENSION_ID });
+
+// Configure the request
+request.setAppCallbackUrl("https://your.server/receive-proofs");
+request.setParams({ userId: "user123", action: "verify_email" });
+request.addContext("0x0", "email verification");
+
+// Set up event listeners
+request.on("started", ({ sessionId }) => {
+ console.log("Session started:", sessionId);
+});
+
+request.on("completed", (proofs) => {
+ console.log("Verification complete:", proofs);
+ // Send to backend, update UI, etc.
+});
+
+request.on("error", (error) => {
+ console.error("Verification failed:", error);
+});
+
+// Start verification (also returns a promise)
+const proofs = await request.startVerification();
+console.log("Got proofs via promise:", proofs);
+```
+
+## React Implementation
+
+### Complete React Component
+
+Production-ready React component with full state management:
+
+```javascript
+import { useState, useEffect } from "react";
+import { reclaimExtensionSDK } from "@reclaimprotocol/browser-extension-sdk";
+
+function ReclaimVerification({ providerId = "google-login" }) {
+ const [state, setState] = useState({
+ extensionInstalled: null,
+ isVerifying: false,
+ proofs: null,
+ error: null,
+ sessionId: null,
+ });
+
+ const EXTENSION_ID = import.meta.env.VITE_RECLAIM_EXTENSION_ID;
+
+ // Check extension on mount
+ useEffect(() => {
+ checkExtension();
+ }, []);
+
+ const checkExtension = async () => {
+ try {
+ const installed = await reclaimExtensionSDK.isExtensionInstalled({
+ extensionID: EXTENSION_ID,
+ });
+ setState((prev) => ({ ...prev, extensionInstalled: installed }));
+ } catch (error) {
+ console.error("Extension check failed:", error);
+ setState((prev) => ({ ...prev, extensionInstalled: false }));
+ }
+ };
+
+ const startVerification = async () => {
+ setState((prev) => ({
+ ...prev,
+ isVerifying: true,
+ error: null,
+ proofs: null,
+ }));
+
+ try {
+ // Get config from server (production approach)
+ const config = await fetchServerConfig(providerId);
+
+ const request = reclaimExtensionSDK.fromConfig(config, {
+ extensionID: EXTENSION_ID,
+ });
+
+ // Configure the request (optional)
+ request.setAppCallbackUrl("https://your.server/receive-proofs");
+ request.setParams({ userId: "user123", action: "verify" });
+ request.addContext("0x0", "react app verification");
+
+ console.log({ request });
+
+ // Handle events
+ request.on("started", ({ sessionId }) => {
+ console.log("Session started:", sessionId);
+ setState((prev) => ({ ...prev, sessionId }));
+ });
+
+ request.on("completed", async (proofs) => {
+ console.log("Verification completed:", proofs);
+
+ // Validate on server
+ const validated = await validateOnServer(proofs);
+
+ if (validated) {
+ setState((prev) => ({
+ ...prev,
+ proofs,
+ isVerifying: false,
+ error: null,
+ }));
+ } else {
+ throw new Error("Server validation failed");
+ }
+ });
+
+ request.on("error", (error) => {
+ console.error("Verification error:", error);
+ setState((prev) => ({
+ ...prev,
+ error: error.message || String(error),
+ isVerifying: false,
+ }));
+ });
+
+ const proofs = await request.startVerification();
+ console.log("startVerification (promise)", proofs);
+ } catch (error) {
+ setState((prev) => ({
+ ...prev,
+ error: error.message || String(error),
+ isVerifying: false,
+ }));
+ }
+ };
+
+ // Render states
+ if (state.extensionInstalled === null) {
+ return (
+
+
Checking extension...
+
+
Extension Required
+
Please install the Reclaim extension to continue.
+
+ Install Extension
+
+
+
+
â
Verification Successful!
+
+
+ Provider: {providerId}
+
+
+ Session: {state.sessionId}
+
+
+
+ View Proofs
+ {JSON.stringify(state.proofs, null, 2)}
+
+
+
+
+ {state.sessionId &&
Session: {state.sessionId}
}
+
+ {state.error && (
+
+ Error: {state.error}
+
+ )}
+
Please install the extension
;
+ }
+
+ if (proofs) {
+ return (
+
+
â
Verified successfully!
+
+
+
+ {error &&
Error: {error}
}
+
+
Select Provider to Verify
+
+
+ {providers.map((provider) => (
+
+ ))}
+
+
+ {selectedProvider &&
setSelectedProvider(null)} />}
+