🚀 React SDK
The PasskeyMe React SDK provides inline authentication components that embed directly into your React application, eliminating the need for redirects and giving you complete control over the user experience.
Installation
npm install @passkeyme/react-auth
# or
yarn add @passkeyme/react-auth
# or
pnpm add @passkeyme/react-auth
Quick Start
The PasskeymeAuthPanel
component provides a complete authentication experience with passkeys, OAuth, and password support:
import { PasskeymeAuthPanel } from '@passkeyme/react-auth';
function App() {
const handleAuthSuccess = (user) => {
console.log('User authenticated:', user);
// Store user state, redirect, etc.
};
return (
<div className="app">
<h1>Welcome to My App</h1>
<PasskeymeAuthPanel
appId="your-app-id"
onSuccess={handleAuthSuccess}
onError={(error) => console.error('Auth error:', error)}
theme={{ container: { backgroundColor: '#ffffff' } }}
layout="vertical"
/>
</div>
);
}
PasskeymeAuthPanel Component
The primary component for adding authentication to your React app.
Props
Prop | Type | Required | Description |
---|---|---|---|
appId | string | ✅ | Your PasskeyMe application ID |
onSuccess | (user: User) => void | ✅ | Called when authentication succeeds |
onError | (error: Error) => void | Called when authentication fails | |
theme | 'light' | 'dark' | 'auto' | Visual theme (default: 'auto') | |
layout | 'card' | 'inline' | 'modal' | Component layout style (default: 'card') | |
providers | string[] | Enabled OAuth providers | |
showPasswordAuth | boolean | Enable password authentication (default: true) | |
customStyles | object | Custom CSS-in-JS styles | |
className | string | Additional CSS class names |
Basic Usage
import { PasskeymeAuthPanel } from '@passkeyme/react-auth';
function LoginPage() {
return (
<PasskeymeAuthPanel
appId="your-app-id"
onSuccess={(user) => {
// Handle successful authentication
localStorage.setItem('user', JSON.stringify(user));
window.location.href = '/dashboard';
}}
onError={(error) => {
alert(`Authentication failed: ${error.message}`);
}}
/>
);
}
Theming and Customization
Built-in Themes
// Light theme (uses default theme)
<PasskeymeAuthPanel
theme={{
container: { backgroundColor: '#ffffff' },
title: { color: '#111827' }
}}
/>
// Dark theme
<PasskeymeAuthPanel
theme={{
container: { backgroundColor: '#1f2937', color: '#ffffff' },
title: { color: '#ffffff' },
passkeyButton: { backgroundColor: '#7c3aed' }
}}
/>
// Auto theme based on system preference
<PasskeymeAuthPanel className="auto-theme" />
Custom Styling
<PasskeymeAuthPanel
theme={{
container: {
borderRadius: '12px',
boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
padding: '2rem',
backgroundColor: '#ffffff'
},
passkeyButton: {
borderRadius: '8px',
fontSize: '16px',
backgroundColor: '#7c3aed',
backgroundColorHover: '#6d28d9'
},
title: {
fontSize: '24px',
color: '#111827'
}
}}
/>
CSS Classes
<PasskeymeAuthPanel
className="my-auth-panel"
/>
.my-auth-panel {
max-width: 400px;
margin: 0 auto;
}
.my-auth-panel .passkeyme-button {
background: linear-gradient(45deg, #6366f1, #8b5cf6);
}
Layout Options
Vertical Layout (Default)
<PasskeymeAuthPanel layout="vertical" />
Creates a vertical stack of authentication options.
Horizontal Layout
<PasskeymeAuthPanel layout="horizontal" />
Renders authentication options in a horizontal row.
Grid Layout
<PasskeymeAuthPanel layout="grid" />
Uses a flexible grid layout for OAuth providers.
Spacing Options
<PasskeymeAuthPanel
layout="vertical"
spacing="compact" // "compact" | "normal" | "relaxed"
/>
Authentication Providers
OAuth Providers
<PasskeymeAuthPanel
providers={['google', 'github', 'microsoft', 'apple', 'facebook']}
/>
Available providers:
google
- Google OAuthgithub
- GitHub OAuthmicrosoft
- Microsoft OAuthapple
- Apple Sign Infacebook
- Facebook OAuth
Disable Passkey Authentication
<PasskeymeAuthPanel
enablePasskeys={false}
providers={['google', 'github']}
/>
Event Handling
Success Event
const handleAuthSuccess = (user) => {
console.log('Authenticated user:', {
id: user.id,
email: user.email,
name: user.name,
picture: user.picture,
provider: user.provider,
createdAt: user.createdAt,
lastLoginAt: user.lastLoginAt
});
// Store authentication state
setUser(user);
// Redirect to protected area
navigate('/dashboard');
};
<PasskeymeAuthPanel
onSuccess={handleAuthSuccess}
/>
Error Handling
const handleAuthError = (error) => {
console.error('Authentication error:', error);
switch (error.code) {
case 'USER_CANCELLED':
// User cancelled authentication
break;
case 'PASSKEY_NOT_SUPPORTED':
// Device doesn't support passkeys
showToast('Passkeys not supported on this device');
break;
case 'NETWORK_ERROR':
// Network connectivity issue
showToast('Please check your internet connection');
break;
default:
showToast('Authentication failed. Please try again.');
}
};
<PasskeymeAuthPanel
onError={handleAuthError}
/>
Advanced Usage
Conditional Rendering
function AuthenticatedApp() {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
// Check for existing authentication
const savedUser = localStorage.getItem('user');
if (savedUser) {
setUser(JSON.parse(savedUser));
}
setLoading(false);
}, []);
if (loading) {
return <div>Loading...</div>;
}
if (!user) {
return (
<PasskeymeAuthPanel
appId="your-app-id"
onSuccess={(user) => {
setUser(user);
localStorage.setItem('user', JSON.stringify(user));
}}
/>
);
}
return (
<div>
<h1>Welcome, {user.name}!</h1>
<button onClick={() => {
setUser(null);
localStorage.removeItem('user');
}}>
Logout
</button>
</div>
);
}