@siran/auth-react-sdk

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

Installation

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

Usage

Setup the AuthProvider

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 (
    <AuthProvider authEngine={authEngine}>
      <YourApp />
    </AuthProvider>
  );
}

Using the Auth Hooks

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

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

  const handleLogin = async () => {
    await signIn('[email protected]', 'password');
  };

  if (isLoading) return <div>Loading...</div>;
  if (isAuthenticated) return <div>Welcome, {user.displayName}!</div>;

  return (
    <div>
      <button onClick={handleLogin}>Sign In</button>
      {error && <div>Error: {error}</div>}
    </div>
  );
}

Protected Routes

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

function Dashboard() {
  return (
    <ProtectedRoute>
      <h1>Dashboard</h1>
      {/* Only visible to authenticated users */}
    </ProtectedRoute>
  );
}

API Reference

AuthProvider

Wrap your app with AuthProvider to provide authentication context.

Props:

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

useAuth Hook

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

Auth Method Hooks

• 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

ProtectedRoute Component

Renders children only when user is authenticated.

Props:

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

License

MIT