Auth React

Auth SDK for React with JWT and JWKS.

Installation

bun add @riligar/auth-react

Basic Usage

import { AuthProvider, useAuth, useSignIn, Protect, SignedIn, SignedOut, SignIn } from '@riligar/auth-react'

// 1. Wrap your app with AuthProvider
function App() {
    return (
        <AuthProvider apiKey="your-api-key">
            <Routes>
                <Route
                    path="/login"
                    element={<SignIn />}
                />
                <Route element={<Protect />}>
                    <Route
                        path="/"
                        element={<Home />}
                    />
                </Route>
            </Routes>
        </AuthProvider>
    )
}

// 2. Use control components for conditional rendering
function Header() {
    return (
        <header>
            <SignedIn>
                <UserMenu />
            </SignedIn>
            <SignedOut>
                <SignInButton />
            </SignedOut>
        </header>
    )
}

Components

Authentication Components

| Component | Description | | ----------------------- | -------------------------------------------- | | <SignIn /> | Sign in form with email/password, magic link | | <SignUp /> | Registration form | | <MagicLink /> | Magic link request form | | <MagicLinkCallback /> | Magic link verification | | <ForgotPassword /> | Password reset request | | <ResetPassword /> | Password reset form | | <VerifyEmail /> | Email verification | | <UserProfile /> | User profile management modal |

Control Components

| Component | Description | | --------------- | -------------------------------------------- | | <SignedIn> | Renders children only when authenticated | | <SignedOut> | Renders children only when NOT authenticated | | <AuthLoading> | Renders children while auth is loading | | <AuthLoaded> | Renders children when auth has loaded | | <Protect /> | Protected route wrapper |

Unstyled Buttons

| Component | Description | | ------------------- | ------------------------- | | <SignInButton /> | Navigates to sign-in page | | <SignUpButton /> | Navigates to sign-up page | | <SignOutButton /> | Signs out the user |

Hooks

const { user, loading, error, isAuthenticated } = useAuth()
const { user, updateProfile, changePassword, changeEmail } = useUser()
const signIn = useSignIn()
const signUp = useSignUp()
const signOut = useSignOut()

Features

• ✅ JWT Tokens - Secure token-based authentication
• ✅ JWKS - Signature verification with /.well-known/jwks.json
• ✅ Auto refresh - Tokens renewed automatically
• ✅ Social login - OAuth provider support
• ✅ Cross-tab sync - Synchronized state across tabs
• ✅ Route protection - Protected routes automatically
• ✅ Control components - Clerk-style conditional rendering
• ✅ SSR friendly - Server-side rendering compatible

Backwards Compatibility

The following deprecated aliases are still available:

| Deprecated | Use Instead | | -------------------- | ------------------- | | SignInForm | SignIn | | SignUpForm | SignUp | | MagicLinkForm | MagicLink | | MagicLinkVerify | MagicLinkCallback | | ForgotPasswordForm | ForgotPassword | | ResetPasswordForm | ResetPassword | | VerifyEmailCard | VerifyEmail | | AccountModal | UserProfile | | ProtectedRoute | Protect | | useProfile | useUser |

Backend Configuration

The SDK expects your backend to expose:

• /.well-known/jwks.json - Public keys for JWT verification
• /auth/sign-in - Login (returns { token, user })
• /auth/sign-up - Registration (returns { token, user })
• /auth/sign-out - Logout
• /auth/refresh - Token renewal
• /auth/sign-in/:provider - Social login

Build

bun run build