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 /> | The whole way in: asks for the email, then takes the emailed code | | <UserProfile /> | User profile management modal | | <UserInformation /> | Flexible user details and account menu |

There is one screen. Sign-up, magic link, password reset and email verification were four answers to the same question — does this person control this inbox? — and three of them answered it with a URL. The code answers it with none, and the account is created, and verified, the first time one is presented.

Signing in

<SignIn
    authenticatedRedirect="/"       // where to send someone who already has a session
    onCodeSent={email => notify(`Code sent to ${email}`)}
    onSuccess={(user, { result, redirectHandled }) => notify(`Welcome ${user?.email}`)}
    onError={error => notify(error.message)} {/* error.code traz o identificador estável */}
/>

• onSuccess receives the user first; the raw API response is result.
• redirectHandled is true when an OAuth ?redirect= was already applied — the SDK executes it before calling you, so it is information, not a duty.
• A wrong code fails with error.details.attemptsLeft; five wrong tries destroy the request and the person asks for a new code.
• Nothing here builds a callback URL. There is no destination to validate, and none to hijack.

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 | | <SignOutButton /> | Signs out the user |

Hooks

const { user, loading, error, isAuthenticated } = useAuth()
const { user, updateProfile } = useUser()
const { requestCode, verifyCode, sending, verifying } = useSignIn()
const signOut = useSignOut()

// The two steps, and nothing else:
await requestCode(email)          // a code goes out by email
await verifyCode(email, code)     // the code becomes a session

Features

• ✅ JWT Tokens - Secure token-based authentication
• ✅ JWKS - Signature verification with /.well-known/jwks.json
• ✅ Auto refresh - Tokens renewed automatically
• ✅ One way in - An emailed code, for people and agents alike; no password to leak
• ✅ Cross-tab sync - Synchronized state across tabs
• ✅ Route protection - Protected routes automatically
• ✅ Control components - Clerk-style conditional rendering
• ✅ SSR friendly - Server-side rendering compatible

Removed in 4.0.0

Along with the password, magic link, reset and verification flows:

| Removed | Use instead | | ------------------------------------------------------------------ | ---------------------------------------- | | signUp, signIn, sendMagicLink, verifyMagicLink | requestCode + verifyCode | | forgotPassword, resetPassword, changePassword | — there is no password | | verifyEmail, resendVerification | — presenting the code already verifies | | changeEmail | the email is the credential | | socialRedirect | — never existed in the worker | | <SignUp>, <MagicLink>, <MagicLinkCallback> | <SignIn> | | <ForgotPassword>, <ResetPassword>, <VerifyEmail> | <SignIn> | | <SignUpButton> | <SignInButton> | | useSignUp, useMagicLink, usePasswordReset | useSignIn | | useEmailVerification | useSignIn | | SignInForm, AccountModal, ProtectedRoute, useProfile | SignIn, UserProfile, Protect, useUser |