@siran/auth-react-sdk

React authentication SDK built on top of @siran/auth-core.

Installation

``bash
npm install @siran/auth-react-sdk react react-dom
`

Usage

$3

`tsx
import React from 'react';
import { AuthProvider } from '@siran/auth-react-sdk';
import { createAuthEngine } from '@siran/auth-core';

const authEngine = createAuthEngine({
// Your auth configuration here
});

function App() {
return (



);
}
`

$3

`tsx
import { useAuth, usePasswordAuth } from '@siran/auth-react-sdk';

function Login() {
const { user, isAuthenticated, isLoading, error } = useAuth();
const { signIn } = usePasswordAuth();

const handleLogin = async () => {
await signIn('user@example.com', 'password');
};

if (isLoading) return

`tsx
import { ProtectedRoute } from '@siran/auth-react-sdk';

function Dashboard() {
return (



Dashboard

- authEngine: An instance of AuthEngine from @siran/auth-core
- children: React.ReactNode

$3

Returns the current authentication state and auth methods.

Returns:

- user: UserAccount | null
- isLoading: boolean
- isAuthenticated: boolean
- error: string | null
- authenticate(method: AuthMethod): Promise
- register(method: AuthMethod): Promise
- logout(): Promise
- clearError(): void

$3

- usePasswordAuth(): For password authentication
- useOtpAuth(): For OTP authentication
- useMagicLinkAuth(): For magic link authentication
- useOAuthAuth(): For OAuth authentication

Each hook provides:

- signIn(...): Authenticate with method
- signUp(...): Register with method
- isLoading: boolean
- error: string | null

$3

Renders children only when user is authenticated.

Props:

- children: React.ReactNode
- fallback?`: React.ReactNode - Shown when not authenticated

License

MIT