Documentation - lemma.id

Quick Start

This guide will help you integrate Lemma authentication into your website in just a few minutes.

Prerequisites

You'll need a Lemma developer account. Sign up here to get your API key.

Step 1: Add the SDK

Include the Lemma SDK in your HTML:

HTML

<!-- Add to your <head> -->
<script src="https://lemma.id/static/js/lemma-wallet.js"></script>

Or install via npm:

Terminal

npm install @lemma/wallet-sdk

Step 2: Initialize

Initialize the wallet with your site configuration:

JavaScript

const wallet = new LemmaWallet({
    siteId: 'your-site-id',     // From developer dashboard
    apiKey: 'your-api-key',      // From developer dashboard
    debug: true                  // Enable console logging
});

// Initialize the wallet
await wallet.init();

Step 3: Add Sign-In Button

Add a sign-in button that triggers the wallet flow:

HTML

<button id="sign-in-btn">Sign in with Lemma</button>

JavaScript

document.getElementById('sign-in-btn').addEventListener('click', async () => {
    // Redirect to Lemma wallet
    await wallet.startRedirectFlow({
        returnUrl: window.location.href,
        permissions: ['basic']  // Optional: request permissions
    });
});

Step 4: Handle the Return

When the user returns from the wallet, check for authentication:

JavaScript

// On page load, check if returning from wallet
document.addEventListener('DOMContentLoaded', async () => {
    const result = await wallet.checkRedirectReturn();
    
    if (result.authenticated) {
        // User is signed in
        const ppid = await wallet.derivePPID();
        console.log('User PPID:', ppid);
        
        // Update your UI
        showUserDashboard(ppid);
    }
});

Complete Example

Here's everything together:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
    <script src="https://lemma.id/static/js/lemma-wallet.js"></script>
</head>
<body>
    <div id="guest">
        <button id="sign-in-btn">Sign in with Lemma</button>
    </div>
    <div id="authenticated" style="display: none;">
        <p>Welcome! Your ID: <span id="user-id"></span></p>
    </div>
    
    <script>
    (async () => {
        const wallet = new LemmaWallet({
            siteId: 'your-site-id',
            apiKey: 'your-api-key'
        });
        await wallet.init();
        
        // Check if returning from auth
        const result = await wallet.checkRedirectReturn();
        if (result.authenticated) {
            document.getElementById('guest').style.display = 'none';
            document.getElementById('authenticated').style.display = 'block';
            document.getElementById('user-id').textContent = await wallet.derivePPID();
        }
        
        // Sign-in button
        document.getElementById('sign-in-btn').addEventListener('click', () => {
            wallet.startRedirectFlow({ returnUrl: window.location.href });
        });
    })();
    </script>
</body>
</html>