Quick Start Guide

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

Important Notes

Current Implementation Details

• Uses popup-based authentication flow (redirect-based flow coming soon)
• Implements Authorization Code Grant (PKCE implementation coming soon)
• Redirect URI is required as a security measure to prevent unauthorized applications from initiating the auth flow
• The authentication happens in a popup window which closes automatically after completion

Create Your Application

1. Go to the Reclaim Identity Dashboard (opens in a new tab)

2. Click on "Create New Application"

3. 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 authorized redirect URIs for your application. This is a required security measure.
     • For local development: http://localhost:3000
     • For production: https://yourdomain.com

     Note: While the current flow uses popups, the redirect URI is still required as a security measure to verify the application's identity.

4. 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

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

Environment Setup

Create a .env file in your project root:

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

Here's a minimal example to get authentication working:

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>
  );
}

Testing Your Integration

1. Start your development server:

npm start
# or
yarn start

2. Open http://localhost:3000 in your browser

3. Click the "Sign In" button

4. You should see:

   • A popup window for authentication
   • Redirect back to your application
   • User information displayed

Next Steps

• Authentication hooks

Common Issues

Popup Blocked

If the authentication popup is blocked, ensure your users:

• Have popups enabled for your domain
• Are clicking the sign-in button (popups triggered on page load are often blocked)

Redirect URI Mismatch

If you get a redirect URI mismatch error:

• Verify the URI in your dashboard matches exactly with your environment variable
• Check for trailing slashes
• Ensure the protocol (http/https) matches

CORS Issues

If you're getting CORS errors:

• Check that your domain is properly configured in the dashboard
• Ensure you're using the correct environment URLs
• Verify your redirect URI is properly whitelisted