@kairosauth/react

React Provider, hooks, and components for KairosAuth authentication.

Install

npm install @kairosauth/react @kairosauth/sdk

Quick Start

import { KairosAuthProvider, useKairosAuth, LoginButton } from "@kairosauth/react";

function App() {
  return (
    <KairosAuthProvider projectId="ka_proj_xxx" apiKey="ka_test_xxx">
      <LoginPage />
    </KairosAuthProvider>
  );
}

function LoginPage() {
  const { user, isAuthenticated, logout } = useKairosAuth();

  if (isAuthenticated) {
    return (
      <div>
        <p>Welcome, {user.email}</p>
        <button onClick={logout}>Logout</button>
      </div>
    );
  }

  return <LoginButton />;
}

Hooks

| Hook | Description | |------|-------------| | useKairosAuth() | Full auth state + actions (register, login, logout) | | useAuthPhase() | Current auth phase (idle, otp, webauthn, done) | | useSession() | Session info (token, expiry, refresh) | | useOTP() | OTP-specific actions (submit, resend, countdown) | | usePasskeys() | Passkey management (create, list, delete) |

Components

| Component | Description | |-----------|-------------| | LoginButton | Pre-styled login trigger | | OTPInput | 8-box OTP verification input | | AuthStatus | Current auth state indicator | | AuthGuard | Render children only if authenticated | | PasskeyManager | List and manage registered passkeys |

Hosted Auth (OAuth-style)

import { loginWithRedirect, parseRedirectResult } from "@kairosauth/react";

// Redirect to KairosAuth hosted login
loginWithRedirect({ clientId: "ka_xxx", redirectUri: "https://myapp.com/callback" });

// Handle callback
const result = parseRedirectResult(window.location);

Requirements

• React >= 18.0.0
• @kairosauth/sdk >= 0.1.0

License

MIT