Overview

Implementing Reclaim Identity Authentication

Overview

This guide walks you through setting up and implementing Reclaim Identity authentication in your web application. You'll learn how to create an application, install the necessary dependencies, and implement user authentication.

Creating Your Application

Step 1: Initial Setup

Navigate to the Reclaim Identity Dashboard
Click "Create New Application"

Step 2: Configure Application Settings

Complete the following sections:

Basic Information
- Enter your application name and description
Identity Providers
- Select authentication methods (e.g., Google, Email)
- These determine how users can sign in to your application
Additional Providers
- Choose extra data verification methods
- Users will generate proofs for each selected provider
Redirect URIs
- Add authorized domains for security:
  - Development: http://localhost:3000
  - Production: https://yourdomain.com

Step 3: Save Credentials

After creating your application, securely store:

Application ID (clientId)
Application Secret (clientSecret)

Dashboard Application Creation

Installation

Choose one of these installation methods:

NPM Installation

npm install reclaim-identity-js

CDN Integration

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

Implementation Guide

Basic Implementation Example

<!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>

Authentication Flow Explained

Initiation: User clicks the sign-in button
Authentication Window: A popup opens displaying authentication options
User Authentication: User completes the authentication process
Completion: Popup closes automatically
Session Establishment: Main application receives authentication data
Ready State: User session becomes active

Testing Instructions

Set Up Local Environment
npx serve .
Access Application
- Open your browser
- Navigate to http://localhost:3000
Test Authentication
- Click the "Sign In" button
- Complete the authentication process
- Verify user data appears in the interface

Troubleshooting Guide

If authentication popup fails to open:

Enable popups for your application domain
Ensure sign-in is triggered by user interaction
Review browser console for blocking notifications

If experiencing CORS issues:

Confirm domain configuration in dashboard
Verify correct environment URL usage
Check redirect URI matches exactly

Additional Support

For further assistance:

Review browser console for error messages
Verify credentials are correctly configured
Ensure all required providers are enabled

Overview

On this page