Skip to content

Commit 42acafa

Browse files
ciro-macielciro-maciel
committed
feat: enhance auth-react skill with mantine integration and templates
1 parent c43b22c commit 42acafa

File tree

5 files changed

+172
-43
lines changed

5 files changed

+172
-43
lines changed

‎.agent/skills/riligar-dev-auth-react/SKILL.md‎

Lines changed: 28 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ This skill provides a complete workflow for integrating authentication and permi
1111

1212
### 1. Installation
1313

14-
Install the SDK using bun (preferred) or npm:
14+
Install the SDK and its core dependencies (Mantine & Tabler Icons) using bun:
1515

1616
```bash
17-
bun add @riligar/auth-react
17+
bun add @riligar/auth-react @mantine/core @mantine/hooks @mantine/notifications @tabler/icons-react
1818
```
1919

2020
### 2. Environment Variables
@@ -34,19 +34,29 @@ VITE_AUTH_API_KEY=pk_live_your_public_key
3434

3535
### 3. AuthProvider Setup
3636

37-
Wrap your application (usually in `main.jsx` or `App.jsx`) with the `AuthProvider`.
37+
Wrap your application (usually in `main.jsx` or `App.jsx`) with the `AuthProvider` and `MantineProvider`.
3838

3939
```jsx
4040
import { AuthProvider } from '@riligar/auth-react'
41+
import { MantineProvider } from '@mantine/core'
4142

4243
ReactDOM.createRoot(document.getElementById('root')).render(
43-
<AuthProvider apiKey={import.meta.env.VITE_AUTH_API_KEY}>
44-
<App />
45-
</AuthProvider>
44+
<MantineProvider theme={yourTheme}>
45+
<AuthProvider apiKey={import.meta.env.VITE_AUTH_API_KEY}>
46+
<App />
47+
</AuthProvider>
48+
</MantineProvider>
4649
)
4750
```
4851
49-
For more setup patterns, see [setup-snippets.js](assets/setup-snippets.js).
52+
## Ready-to-Use Templates
53+
54+
Use these assets to quickly scaffold a complete authentication flow:
55+
56+
- **Routing Architecture**: Comprehensive [routes.jsx](assets/routes.jsx) showing Public vs Protected patterns.
57+
- **Login & Signup**: Generic [signin.jsx](assets/signin.jsx) and [signup.jsx](assets/signup.jsx) templates.
58+
- **Email Verification**: [verify-email.jsx](assets/verify-email.jsx) handler.
59+
- **Utility Wrappers**: [auth-loader.jsx](assets/auth-loader.jsx), [require-feature.jsx](assets/require-feature.jsx), and [layout.jsx](assets/layout.jsx).
5060
5161
## Specialized Guides
5262
@@ -64,25 +74,21 @@ Use `useAuth()` to access user data and authentication status.
6474
const { user, isAuthenticated, loading } = useAuth()
6575
```
6676
67-
### Adding a Login Form
68-
69-
Simply drop the `<SignIn />` component. Use `variant="modal"` if you want it in a popup.
70-
71-
```jsx
72-
<SignIn />
73-
// or
74-
<SignIn variant="modal" opened={isOpen} onClose={() => setIsOpen(false)} />
75-
```
76-
7777
### Protecting a Dashboard
7878
79-
Wrap your sub-routes with `<Protect />`.
79+
The recommended pattern is to use the **Protected Group** pattern with React Router as shown in [routes.jsx](assets/routes.jsx).
8080
8181
```jsx
82-
<Route element={<Protect redirectTo="/login" />}>
82+
// Nested routes under <Protect /> guarantee that all sub-routes are guarded.
83+
<Route element={<Protect fallback={<AuthLoader />} />}>
8384
<Route
84-
path="/dashboard"
85-
element={<Dashboard />}
86-
/>
85+
path="/"
86+
element={<Layout />}
87+
>
88+
<Route
89+
index
90+
element={<Home />}
91+
/>
92+
</Route>
8793
</Route>
8894
```

‎.agent/skills/riligar-dev-auth-react/assets/auth-loader.jsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { Center, Loader, Stack, Text } from '@mantine/core'
2+
3+
/**
4+
* AuthLoader Component
5+
*
6+
* Standard loading screen used during authentication state transitions
7+
* (e.g., checking tokens on initial load or redirects).
8+
*/
9+
export default function AuthLoader() {
10+
return (
11+
<Center h="100vh">
12+
<Stack
13+
align="center"
14+
gap="md"
15+
>
16+
<Loader
17+
size="lg"
18+
variant="dots"
19+
color="brand"
20+
/>
21+
<Text
22+
size="sm"
23+
c="dimmed"
24+
fw={500}
25+
>
26+
Verificando acesso...
27+
</Text>
28+
</Stack>
29+
</Center>
30+
)
31+
}

‎.agent/skills/riligar-dev-auth-react/assets/layout.jsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { AppShell, Burger, Group, Text } from '@mantine/core'
2+
import { useDisclosure } from '@mantine/hooks'
3+
import { Outlet } from 'react-router-dom'
4+
5+
/**
6+
* Layout Component
7+
*
8+
* Standard Dashboard layout using Mantine AppShell.
9+
* Provides the structure for sidebars, headers, and main content area.
10+
*/
11+
export default function Layout() {
12+
const [opened, { toggle }] = useDisclosure()
13+
14+
return (
15+
<AppShell
16+
header={{ height: 60 }}
17+
navbar={{
18+
width: 300,
19+
breakpoint: 'sm',
20+
collapsed: { mobile: !opened },
21+
}}
22+
padding="md"
23+
>
24+
<AppShell.Header>
25+
<Group
26+
h="100%"
27+
px="md"
28+
>
29+
<Burger
30+
opened={opened}
31+
onClick={toggle}
32+
hiddenFrom="sm"
33+
size="sm"
34+
/>
35+
<Text fw={700}>Dashboard</Text>
36+
</Group>
37+
</AppShell.Header>
38+
39+
<AppShell.Navbar p="md">
40+
{/* Navigation links go here */}
41+
<Text
42+
size="sm"
43+
c="dimmed"
44+
>
45+
Navigation Menu
46+
</Text>
47+
</AppShell.Navbar>
48+
49+
<AppShell.Main>
50+
<Outlet />
51+
</AppShell.Main>
52+
</AppShell>
53+
)
54+
}

‎.agent/skills/riligar-dev-auth-react/assets/require-feature.jsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { useAuth } from '@riligar/auth-react'
2+
import { Navigate } from 'react-router-dom'
3+
import AuthLoader from './auth-loader'
4+
5+
/**
6+
* RequireFeature Wrapper
7+
*
8+
* Protects routes based on specific user attributes or feature flags.
9+
* This is an example of how to extend authentication with business logic.
10+
*/
11+
export default function RequireFeature({ children }) {
12+
const { user, isAuthenticated, loading } = useAuth()
13+
14+
if (loading) {
15+
return <AuthLoader />
16+
}
17+
18+
if (!isAuthenticated) {
19+
return (
20+
<Navigate
21+
to="/auth/signin"
22+
replace
23+
/>
24+
)
25+
}
26+
27+
// Example logic: Ensure user has a setup complete or a specific role
28+
// if (!user.onboardingCompleted) {
29+
// return <Navigate to="/onboarding" replace />
30+
// }
31+
32+
return children
33+
}

‎.agent/skills/riligar-dev-auth-react/references/route-protection.md‎

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -13,33 +13,38 @@ Use these components to control access to specific parts of your application.
1313

1414
## Usage Patterns
1515

16-
### Protecting Routes (React Router)
16+
### Protecting Routes (createBrowserRouter)
17+
18+
The most robust way to protect routes in a Riligar app is using the **Protected Group** pattern with `createBrowserRouter`. This ensures consistent layout and authentication guards.
1719

1820
```jsx
19-
import { Protect, SignIn } from '@riligar/auth-react'
20-
import { Routes, Route } from 'react-router-dom'
21-
22-
;<Routes>
23-
<Route
24-
path="/login"
25-
element={<SignIn />}
26-
/>
27-
28-
<Route element={<Protect redirectTo="/login" />}>
29-
<Route
30-
path="/dashboard"
31-
element={<Dashboard />}
32-
/>
33-
<Route
34-
path="/settings"
35-
element={<Settings />}
36-
/>
37-
</Route>
38-
</Routes>
21+
import { createBrowserRouter, Navigate } from 'react-router-dom'
22+
import { Protect } from '@riligar/auth-react'
23+
import AuthLoader from '../components/auth-loader.jsx'
24+
import Layout from '../components/layout.jsx'
25+
26+
export const router = createBrowserRouter([
27+
// Public paths
28+
{ path: '/auth/signin', element: <SignIn /> },
29+
30+
// Protected paths
31+
{
32+
element: <Protect fallback={<AuthLoader />} />,
33+
children: [
34+
{
35+
path: '/',
36+
element: <Layout />,
37+
children: [{ index: true, element: <Dashboard /> }],
38+
},
39+
],
40+
},
41+
])
3942
```
4043

4144
### Conditional UI Elements
4245

46+
Use these wrappers inside your components (headers, sidebars, etc.) for granular visibility.
47+
4348
```jsx
4449
import { SignedIn, SignedOut, AuthLoading } from '@riligar/auth-react'
4550

0 commit comments

Comments
 (0)