React UI components and hooks for EmbarkAI — secure authentication and Account Abstraction wallet with MPC key management.

npm install @embarkai/ui-kit
import { LumiaPassportProvider, ConnectWalletButton } from '@embarkai/ui-kit';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
const queryClient = new QueryClient();
function App() {
return (
<QueryClientProvider client={queryClient}>
<LumiaPassportProvider projectId="your-project-id">
<ConnectWalletButton />
</LumiaPassportProvider>
</QueryClientProvider>
);
}
- Multiple auth methods — Email OTP, Passkey/WebAuthn, Telegram, External wallets
- MPC key management — Distributed key generation with iframe isolation
- Account Abstraction — ERC-4337 smart contract wallets
- Pre-built components — Ready-to-use React UI with customizable themes
- Transaction management — Send transactions, sign messages, deploy accounts
- Multi-chain support — Switch between supported chains via UI
- i18n — Built-in multilanguage support via i18next
| Component |
Description |
LumiaPassportProvider |
Main provider — wrap your app |
LumiaPassportSessionProvider |
Session state provider |
ConnectWalletButton |
Authentication button with full UI |
ThemeToggle |
Light/dark theme switcher |
| Hook |
Description |
useLumiaPassportAccountSession |
Current user session |
useLumiaPassportAddress |
Current wallet address |
useLumiaPassportBalance |
Wallet balance data |
useLumiaPassportActiveChainId |
Active chain ID |
useLumiaPassportLoadingStatus |
Auth loading state |
useLumiaPassportOpen |
Programmatic dialog control |
useLumiaPassportColorMode |
Theme mode control |
useSendTransaction |
Send transactions |
| Function |
Description |
sendUserOperation |
Direct UserOp submission |
prepareUserOperation |
Prepare UserOp for backend submission |
deployAccount |
Deploy smart account contract |
signTypedData |
Sign EIP-712 structured data |
Community
MIT