Riligar Auth React Skill

This skill provides a complete workflow for integrating authentication and permissions using the @riligar/auth-react SDK.

Core Integration Workflow

1. Installation

Install the SDK and its core dependencies (Mantine & Tabler Icons) using bun:

bun add @riligar/auth-react @mantine/core @mantine/hooks @mantine/notifications @tabler/icons-react

2. Environment Variables

Set up your Public Key in your environment files.

[!IMPORTANT] Always use the Public Key (pk_...) in the frontend. Never expose your Secret Key.

# .env.development
VITE_AUTH_API_KEY=pk_test_your_public_key

# .env.production
VITE_AUTH_API_KEY=pk_live_your_public_key

3. AuthProvider Setup

Wrap your application (usually in main.jsx or App.jsx) with the AuthProvider and MantineProvider.

import { AuthProvider } from '@riligar/auth-react'
import { MantineProvider } from '@mantine/core'

ReactDOM.createRoot(document.getElementById('root')).render(
    <MantineProvider theme={yourTheme}>
        <AuthProvider apiKey={import.meta.env.VITE_AUTH_API_KEY}>
            <App />
        </AuthProvider>
    </MantineProvider>
)

Ready-to-Use Templates

Use these assets to quickly scaffold a complete authentication flow:

• Routing Architecture: Comprehensive routes.jsx showing Public vs Protected patterns.
• Login & Signup: Generic signin.jsx and signup.jsx templates.
• Email Verification: verify-email.jsx handler.
• Utility Wrappers: auth-loader.jsx, require-feature.jsx, and layout.jsx.

Specialized Guides

• Hooks & UI Components: Comprehensive list of useAuth, useSignIn, and pre-built Mantine components. See hooks-and-components.md.
• Route Protection: How to use <Protect />, <SignedIn>, and active route guards. See route-protection.md.
• Core Concepts: Understanding B2C/B2B models and API key security. See concepts.md.

Common Tasks

Checking Auth State

Use useAuth() to access user data and authentication status.

const { user, isAuthenticated, loading } = useAuth()

Protecting a Dashboard

The recommended pattern is to use the Protected Group pattern with React Router as shown in routes.jsx.

// Nested routes under <Protect /> guarantee that all sub-routes are guarded.
<Route element={<Protect fallback={<AuthLoader />} />}>
    <Route
        path="/"
        element={<Layout />}
    >
        <Route
            index
            element={<Home />}
        />
    </Route>
</Route>