Overview

Important Notes

Current Implementation Details

Authentication Flow: Currently uses popup-based authentication (redirect-based flow in development)

Security Protocol: Implements Authorization Code Grant for secure authentication

Security Requirements:

Redirect URI is mandatory for security verification

Authentication occurs in a secure popup window with automatic closure

PKCE (Proof Key for Code Exchange) implementation planned for enhanced security

Create Your Application

Step 1: Access Dashboard

Navigate to the Reclaim Identity Dashboard

Step 2: Initialize Application

Click "Create New Application"

Step 3: Configure Settings

Complete the following configuration sections:

Basic Information
- Enter your application's core details (name, description)
Identity Providers
- Select authentication methods (e.g., Google, Email)
- These determine user login options in the auth popup
Additional Providers
- Configure extra data collection requirements
- Users will generate proofs for each selected provider
Redirect URIs
- Add authorized callback URLs:
  - Development: http://localhost:3000
  - Production: https://yourdomain.com
Security Note: Redirect URIs are mandatory security components, even with popup-based flow.

Step 4: Save Credentials

After creation, securely store your:

Application ID (clientId)
Application Secret (clientSecret)

Dashboard Application Creation Interface

Implementation Guide

Installation

npm install identity-react
# or
yarn add identity-react

Environment Configuration

Create a .env file in your project root with these required variables:

REACT_APP_RECLAIM_CLIENT_ID=your_application_id
REACT_APP_RECLAIM_CLIENT_SECRET=you_client_secret
REACT_APP_RECLAIM_REDIRECT_URI=your_redirect_uri

Basic Implementation Example

Here's a minimal implementation demonstrating core authentication functionality:

import React from 'react';
import getReclaimAuth, { ReclaimUser } from 'identity-react';
 
const auth = getReclaimAuth(
  process.env.REACT_APP_RECLAIM_CLIENT_ID,
  process.env.REACT_APP_RECLAIM_CLIENT_SECRET,
  process.env.REACT_APP_RECLAIM_REDIRECT_URI
);
 
function App() {
  const [user, setUser] = React.useState<ReclaimUser | null>(null);
  React.useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(setUser);
    return () => unsubscribe();
  }, []);
 
  const handleSignIn = async () => {
    try {
      await auth.signIn();
    } catch (error) {
      console.error('Sign in failed:', error);
    }
  };
 
  return (
    <div>
      {user ? (
      <div>
        <p>Welcome, {user.id}!</p>
        <pre>{JSON.stringify(user.userData, null, 2)}</pre>
        <pre>{JSON.stringify(user.additionalData, null, 2)}</pre>
      </div>
      ) : (
        <button onClick={handleSignIn}>Sign In</button>
      )}
    </div>
  );
}