@jmruthers/pace-core 0.5.137 → 0.5.140

package/docs/getting-started/examples/basic-auth-app.md

@@ -0,0 +1,196 @@
+# Basic Authentication App
+
+A minimal PACE Core application showing just authentication and basic UI components.
+
+## 🎯 What This Example Shows
+
+- Basic authentication setup
+- Simple login/logout flow
+- Basic dashboard with cards
+- Responsive navigation
+- Minimal code structure
+
+## 📁 Project Structure
+
+```
+src/
+├── App.tsx                 # Main app with providers
+├── lib/
+│   └── supabase.ts        # Supabase client
+├── components/
+│   ├── LoginPage.tsx      # Login form
+│   ├── Dashboard.tsx      # Simple dashboard
+│   └── Navigation.tsx     # Basic navigation
+└── main.tsx               # App entry point
+```
+
+## 🚀 Implementation
+
+### 1. App.tsx - Main Application
+
+```tsx
+import { UnifiedAuthProvider } from '@jmruthers/pace-core';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { supabase } from './lib/supabase';
+import { LoginPage } from './components/LoginPage';
+import { Dashboard } from './components/Dashboard';
+
+function App() {
+  return (
+    <UnifiedAuthProvider 
+      supabaseClient={supabase} 
+      appName="basic-auth-app"
+    >
+      <BrowserRouter>
+        <Routes>
+          <Route path="/login" element={<LoginPage />} />
+          <Route path="/" element={<Dashboard />} />
+        </Routes>
+      </BrowserRouter>
+    </UnifiedAuthProvider>
+  );
+}
+
+export default App;
+```
+
+### 2. lib/supabase.ts - Supabase Client
+
+```typescript
+import { createClient } from '@supabase/supabase-js';
+
+const supabaseUrl = process.env.REACT_APP_SUPABASE_URL!;
+const supabaseAnonKey = process.env.REACT_APP_SUPABASE_ANON_KEY!;
+
+export const supabase = createClient(supabaseUrl, supabaseAnonKey);
+```
+
+### 3. components/LoginPage.tsx - Login Form
+
+```tsx
+import { LoginForm, Card, CardHeader, CardTitle, CardContent } from '@jmruthers/pace-core';
+import { useNavigate } from 'react-router-dom';
+
+export function LoginPage() {
+  const navigate = useNavigate();
+
+  const handleLoginSuccess = () => {
+    navigate('/');
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-sec-50">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle className="text-center">Welcome Back</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <LoginForm onLoginSuccess={handleLoginSuccess} />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+```
+
+### 4. components/Dashboard.tsx - Simple Dashboard
+
+```tsx
+import { Card, CardHeader, CardTitle, CardContent, Button } from '@jmruthers/pace-core';
+import { useUnifiedAuth } from '@jmruthers/pace-core';
+import { useNavigate } from 'react-router-dom';
+
+export function Dashboard() {
+  const { user, signOut } = useUnifiedAuth();
+  const navigate = useNavigate();
+
+  const handleSignOut = async () => {
+    await signOut();
+    navigate('/login');
+  };
+
+  return (
+    <div className="min-h-screen bg-sec-50 p-6">
+      <div className="max-w-4xl mx-auto">
+        {/* Header */}
+        <div className="flex justify-between items-center mb-8">
+          <h1 className="text-3xl font-bold text-sec-900">Dashboard</h1>
+          <div className="flex items-center gap-4">
+            <span className="text-sec-600">Welcome, {user?.email}</span>
+            <Button variant="outline" onClick={handleSignOut}>
+              Sign Out
+            </Button>
+          </div>
+        </div>
+
+        {/* Content Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Getting Started</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sec-600">
+                Welcome to your PACE Core application! This is a basic example showing authentication and UI components.
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Next Steps</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sec-600">
+                Explore the examples to learn about DataTables, forms, navigation, and more advanced features.
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Resources</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sec-600">
+                Check out the documentation for implementation guides, API reference, and best practices.
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+## 🔧 Environment Setup
+
+Create `.env.local`:
+
+```bash
+REACT_APP_SUPABASE_URL=https://your-project.supabase.co
+REACT_APP_SUPABASE_ANON_KEY=your-anon-key-here
+```
+
+## 🎉 What You Get
+
+- ✅ User authentication with Supabase
+- ✅ Protected dashboard route
+- ✅ Responsive UI components
+- ✅ Clean, minimal code structure
+- ✅ Easy to extend and customize
+
+## 🚀 Next Steps
+
+- **Add more features** - Forms, data tables, navigation
+- **Implement RBAC** - Role-based access control
+- **Add organisation support** - Multi-tenant features
+- **Explore components** - See all available UI components
+
+## 📚 Related Documentation
+
+- **[Quick Start](../quick-start.md)** - Build a full-featured app
+- **[Core Concepts](../core-concepts/)** - Understand authentication and RBAC
+- **[API Reference](../api-reference/)** - Explore all components and hooks
+- **[Implementation Guides](../implementation-guides/)** - Advanced patterns