npm package: @riligar/auth-react
Description: Auth SDK for React with JWT, Mantine UI components, and full authentication flows
Author: Riligar
Latest version: 1.37.0

# Auth React

<p align="center">
    <a href="https://www.npmjs.com/package/@riligar/auth-react" target="_blank"><img src="https://img.shields.io/npm/v/@riligar/auth-react.svg" alt="npm version" /></a>
    <a href="https://www.npmjs.com/package/@riligar/auth-react" target="_blank"><img src="https://img.shields.io/npm/dm/@riligar/auth-react.svg" alt="npm downloads" /></a>
    <a href="https://www.npmjs.com/package/@riligar/auth-react" target="_blank"><img src="https://img.shields.io/npm/l/@riligar/auth-react.svg" alt="license" /></a>
</p>

Auth SDK for React with JWT and JWKS.

## Installation

```bash
bun add @riligar/auth-react
```

## Basic Usage

```jsx
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                |
| `<UserInformation />`   | Flexible user details and account menu       |

### 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

```jsx
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

```bash
bun run build
```