Riligar dev auth react

Skill riligar/agents-kit/.agent/skills/riligar-dev-auth-react

RiLiGar Agents Kit - Curated collection of AI Agent templates, skills, and rules designed to standardize and supercharge your AI-driven development workflows.

Install

npx -y skills add riligar/agents-kit --skill riligar-dev-auth-react

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Comprehensive guide for integrating the Riligar Auth React SDK into web applications. Use when a user needs to: (1) Set up authentication from scratch, (2) Configure AuthProvider, (3) Implement route protection, (4) Use auth hooks or pre-built UI components, (5) Handle login/signup/profile/magic links in React.

SKILL.md

3.1 KB, as published. Nobody here has run it

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>