React authentication SDK built on top of @siran/auth-core.
npm install @siran/auth-react-sdkReact authentication SDK built on top of @siran/auth-core.
``bash`
npm install @siran/auth-react-sdk react react-dom
`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 (
);
}
`
`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
return (
$3
`tsx
import { ProtectedRoute } from '@siran/auth-react-sdk';function Dashboard() {
return (
Dashboard
{/ Only visible to authenticated users /}
);
}
`API Reference
$3
Wrap your app with AuthProvider to provide authentication context.
Props:
-
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 authenticationEach 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 authenticatedMIT