Reclaim Identity is a React-based authentication module that provides an easy-to-use interface for authenticating users with the Reclaim Protocol. It manages the OAuth 2.0 flow, handling user sign-in, token management, and user data retrieval within your React application.
- React-friendly authentication flow
- OAuth 2.0 authentication with popup window
- Automatic token management
- User data retrieval and caching
- Event-based auth state changes
- TypeScript support
You can install the Reclaim Identity package using npm:
npm i identity-react
Or using yarn:
yarn add identity-react
In your React application, typically in a context provider or a top-level component:
import React from 'react';
import { getReclaimAuth } from 'identity-react';
const clientId = 'your-client-id';
const redirectUri = 'your-redirect-uri';
const auth = getReclaimAuth(clientId, redirectUri);
function App() {
// Your app code
}
import React, { useState, useEffect } from 'react';
import { getReclaimAuth } from 'identity-react';
const clientId = 'your-client-id';
const redirectUri = 'your-redirect-uri';
function AuthComponent() {
const [user, setUser] = useState(null);
const auth = getReclaimAuth(clientId, redirectUri);
useEffect(() => {
const unsubscribe = auth.onAuthStateChanged((newUser) => {
setUser(newUser);
});
return () => unsubscribe();
}, []);
const handleSignIn = async () => {
try {
await auth.signIn();
} catch (error) {
console.error('Sign in failed:', error);
}
};
const handleSignOut = async () => {
try {
await auth.signOut();
} catch (error) {
console.error('Sign out failed:', error);
}
};
return (
<div>
{user ? (
<>
<p>Welcome, {user.id}</p>
<button onClick={handleSignOut}>Sign Out</button>
</>
) : (
<button onClick={handleSignIn}>Sign In</button>
)}
</div>
);
}
You can create a custom hook to simplify the use of ReclaimAuth across your React components:
import { useState, useEffect } from 'react';
import { getReclaimAuth } from 'identity-react';
const clientId = 'your-client-id';
const redirectUri = 'your-redirect-uri';
export function useReclaimAuth() {
const [user, setUser] = useState(null);
const auth = getReclaimAuth(clientId, redirectUri);
useEffect(() => {
const unsubscribe = auth.onAuthStateChanged(setUser);
return () => unsubscribe();
}, []);
return {
user,
signIn: auth.signIn,
signOut: auth.signOut,
getCurrentUser: auth.getCurrentUser,
};
}
Then use it in your components:
function AuthComponent() {
const { user, signIn, signOut } = useReclaimAuth();
// Rest of your component code
}
Returns the singleton instance of ReclaimAuth. clientId
and redirectUri
are only required on the first call.
Initiates the sign-in process, opening a popup for authentication. Returns a Promise that resolves with the user data.
Returns the current signed-in user, or null if no user is signed in.
Sets up a listener for changes in authentication state. Returns a function to unsubscribe from the events.
Signs out the current user.
interface ReclaimUser {
id: string;
data: Map<string, string>;
}
The ReclaimAuth module uses the following configuration options:
-
clientId
: Your Reclaim Protocol client ID. -
redirectUri
: The URI to redirect to after authentication.
These should be provided when first calling getReclaimAuth()
.
The module uses the following environment variables:
-
NODE_ENV
: Set to 'production' for production environment.
ReclaimAuth is compatible with modern browsers that support ES6+ features. For older browser support, consider using appropriate polyfills.
- The module uses secure practices like CSRF protection and secure cookie handling.
- Always use HTTPS in production environments.
If you encounter issues:
- Ensure you're using the latest version of the package.
- Check that your
clientId
andredirectUri
are correct. - Verify that you're calling
getReclaimAuth()
with the required parameters on first use. - For network-related issues, check your browser's console for more details.