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
            apiUrl="https://your-api.com"
            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