Quick Start Guide

Get up and running with Reclaim Auth JavaScript in your application quickly.

Create Your Application

Go to the Reclaim Identity Dashboard (opens in a new tab)
Click on "Create New Application"
Fill in your application details:
- Basic Information: Enter the basic details of your application.
- Identity Providers: Select the identity providers you want to include in your application. You can think of identity providers as ways to identify the user, for example if you include Google as a provider the user will be asked to login with google in the first screen of the auth pop-up.
- Additional Providers: You can request additional data from the user, the user will be asked to generate a proof for each of the selected additional providers.
- Redirect URIs: Add your application domain (required for security validation)
  - For local development: http://localhost:3000
  - For production: https://yourdomain.com
Click "Create Application" and save your credentials:
- Note your Application ID (this will be your clientId)
- Note your Application Secret (this will be you clientSecret)

Installation

Using NPM

npm install reclaim-identity-js

Using CDN

<script src="https://unpkg.com/reclaim-identity-js@latest"></script>

Basic Implementation

<!DOCTYPE html>
<html>
<head>
    <title>Reclaim Auth Demo</title>
</head>
<body>
    <button id="loginBtn">Sign In</button>
    <div id="userInfo"></div>
 
    <script src="https://unpkg.com/reclaim-identity-js@latest"></script>
    <script>
        const clientId = 'your-client-id';
        const clientSecret = 'your-client-secret'
        const redirectUri = 'your-redirect-uri';
        const reclaimAuth = getReclaimAuth(clientId, clientSecret,redirectUri);
 
        // Handle auth state changes
        reclaimAuth.onAuthStateChanged(user => {
            const userInfo = document.getElementById('userInfo');
            if (user) {
                userInfo.textContent = JSON.stringify(user, null, 2);
            } else {
                userInfo.textContent = 'No user signed in';
            }
        });
 
        // Handle sign in
        document.getElementById('loginBtn').onclick = async () => {
            try {
                const user = await reclaimAuth.signIn();
                console.log('Signed in:', user);
            } catch (error) {
                console.error('Sign in failed:', error);
            }
        };
    </script>
</body>
</html>

Auth Flow

User clicks the sign-in button
A popup window opens with the authentication flow
User completes authentication in the popup
Popup automatically closes
Main application receives the authentication result
User session is established

Testing Your Integration

Host your HTML file (using a local server for development):

npx serve .

Open your browser to the local server URL (typically http://localhost:3000)
Click the "Sign In" button
Complete the authentication in the popup window

Common Issues

Popup Blocked

If the authentication popup is blocked:

Ensure popups are enabled for your domain
Sign-in must be triggered by a user action (click)
Check browser console for popup blocker warnings

CORS Issues

If you're getting CORS errors:

Verify your domain is properly configured in the dashboard
Check that you're using the correct environment URLs

Overview Whitepaper