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.
This skill provides a complete workflow for integrating authentication and permissions using the @riligar/auth-react SDK.
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
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
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>
)
Use these assets to quickly scaffold a complete authentication flow:
useAuth, useSignIn, and pre-built Mantine components. See hooks-and-components.md.<Protect />, <SignedIn>, and active route guards. See route-protection.md.Use useAuth() to access user data and authentication status.
const { user, isAuthenticated, loading } = useAuth()
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>