From 2e693de7fa32e09ca37eda1bf40b0cffa061d9c4 Mon Sep 17 00:00:00 2001
From: Z User <z@container>
Date: Fri, 27 Mar 2026 22:27:46 +0000
Subject: [PATCH] Add Auth0 authentication and user dashboard

- Add Auth0 SPA SDK integration for authentication
- Create login/logout flow with Auth0
- Add user dashboard page with:
  - Profile display and editing
  - Credits balance and transaction history
  - API key management (create/revoke)
  - Account settings
- Add API client for backend communication
- Update navbar with Login/Dashboard buttons
- Preserve existing landing page design

Configuration:
- Auth0 Domain: dev-t13zhs74oltgqtfxf.auth0.com
- API base: /api (proxied through Caddy)
---
 dashboard.html | 488 +++++++++++++++++++++++++++++++++++++++++++++++++
 index.html     |  61 ++++++-
 js/api.js      | 177 ++++++++++++++++++
 js/auth.js     | 176 ++++++++++++++++++
 js/config.js   |  38 ++++
 5 files changed, 937 insertions(+), 3 deletions(-)
 create mode 100644 dashboard.html
 create mode 100644 js/api.js
 create mode 100644 js/auth.js
 create mode 100644 js/config.js
diff --git a/dashboard.html b/dashboard.html
new file mode 100644
index 0000000..6f972c7
--- /dev/null
+++ b/dashboard.html
@@ -0,0 +1,488 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dashboard • Moxiegen</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600&display=swap');
+        
+        :root {
+            --dark-background: #0F172A;
+            --dark-surface: #1E293B;
+            --dark-primary-text: #F8FAFC;
+            --dark-secondary-text: #94A3B8;
+            --dark-accent-primary: #38BDF8;
+            --dark-accent-neural: #A5B4FC;
+            --dark-border: #334155;
+        }
+        
+        body {
+            background: var(--dark-background);
+            color: var(--dark-primary-text);
+            font-family: 'Inter', sans-serif;
+        }
+        
+        .text-gradient {
+            background: linear-gradient(135deg, var(--dark-accent-primary), var(--dark-accent-neural));
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        
+        .btn-primary {
+            background: linear-gradient(135deg, var(--dark-accent-primary), var(--dark-accent-neural));
+            transition: all 0.3s ease;
+        }
+        
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 30px -10px rgba(56, 189, 248, 0.4);
+        }
+        
+        .card {
+            background: var(--dark-surface);
+            border: 1px solid var(--dark-border);
+            transition: all 0.3s ease;
+        }
+        
+        .card:hover {
+            border-color: var(--dark-accent-primary);
+        }
+        
+        .loading-skeleton {
+            background: linear-gradient(90deg, var(--dark-surface) 0%, var(--dark-border) 50%, var(--dark-surface) 100%);
+            background-size: 200% 100%;
+            animation: skeleton 1.5s ease-in-out infinite;
+        }
+        
+        @keyframes skeleton {
+            0% { background-position: 200% 0; }
+            100% { background-position: -200% 0; }
+        }
+        
+        .api-key-mask {
+            font-family: monospace;
+            letter-spacing: 2px;
+        }
+        
+        .copy-btn {
+            transition: all 0.2s ease;
+        }
+        
+        .copy-btn:hover {
+            background: var(--dark-accent-primary);
+            color: var(--dark-background);
+        }
+        
+        .toast {
+            animation: slideIn 0.3s ease, fadeOut 0.3s ease 2.7s;
+        }
+        
+        @keyframes slideIn {
+            from { transform: translateX(100%); opacity: 0; }
+            to { transform: translateX(0); opacity: 1; }
+        }
+        
+        @keyframes fadeOut {
+            from { opacity: 1; }
+            to { opacity: 0; }
+        }
+    </style>
+</head>
+<body class="min-h-screen">
+    <!-- Navigation -->
+    <nav class="border-b border-slate-800 bg-slate-950/80 backdrop-blur-lg sticky top-0 z-50">
+        <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
+            <div class="flex items-center gap-3">
+                <a href="index.html">
+                    <img src="logo.svg" alt="Moxiegen" class="h-10 w-auto" onerror="this.src='logo.png'">
+                </a>
+                <span class="font-semibold text-2xl" style="font-family: 'Space Grotesk', sans-serif;">Moxiegen</span>
+            </div>
+            
+            <div class="flex items-center gap-4">
+                <div id="userInfo" class="flex items-center gap-3">
+                    <div class="text-right">
+                        <div id="userName" class="font-medium"></div>
+                        <div id="userEmail" class="text-sm text-slate-400"></div>
+                    </div>
+                    <div id="userAvatar" class="w-10 h-10 rounded-full bg-gradient-to-br from-[#38BDF8] to-[#A5B4FC] flex items-center justify-center font-semibold text-slate-950"></div>
+                </div>
+                <button onclick="logout()" class="px-4 py-2 text-sm font-medium text-slate-400 hover:text-white border border-slate-700 hover:border-slate-500 rounded-lg transition-all">
+                    Logout
+                </button>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="max-w-7xl mx-auto px-6 py-8">
+        <!-- Welcome Section -->
+        <div class="mb-8">
+            <h1 class="text-3xl font-semibold mb-2">Welcome back, <span id="welcomeName" class="text-gradient">User</span></h1>
+            <p class="text-slate-400">Manage your API keys, credits, and account settings.</p>
+        </div>
+
+        <!-- Stats Grid -->
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+            <!-- Credits -->
+            <div class="card rounded-2xl p-6">
+                <div class="flex items-center justify-between mb-4">
+                    <span class="text-slate-400 text-sm font-medium uppercase tracking-wider">Credits</span>
+                    <span class="text-2xl">💰</span>
+                </div>
+                <div id="creditsBalance" class="text-4xl font-bold text-gradient">--</div>
+                <p class="text-slate-400 text-sm mt-2">Available balance</p>
+            </div>
+
+            <!-- API Keys -->
+            <div class="card rounded-2xl p-6">
+                <div class="flex items-center justify-between mb-4">
+                    <span class="text-slate-400 text-sm font-medium uppercase tracking-wider">API Keys</span>
+                    <span class="text-2xl">🔑</span>
+                </div>
+                <div id="apiKeyCount" class="text-4xl font-bold text-gradient">--</div>
+                <p class="text-slate-400 text-sm mt-2">Active keys</p>
+            </div>
+
+            <!-- Subscription -->
+            <div class="card rounded-2xl p-6">
+                <div class="flex items-center justify-between mb-4">
+                    <span class="text-slate-400 text-sm font-medium uppercase tracking-wider">Plan</span>
+                    <span class="text-2xl">⚡</span>
+                </div>
+                <div id="subscriptionPlan" class="text-4xl font-bold text-gradient capitalize">--</div>
+                <p id="subscriptionStatus" class="text-slate-400 text-sm mt-2">--</p>
+            </div>
+        </div>
+
+        <!-- Main Panels -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <!-- API Keys Panel -->
+            <div class="card rounded-2xl p-6">
+                <div class="flex items-center justify-between mb-6">
+                    <h2 class="text-xl font-semibold">API Keys</h2>
+                    <button onclick="createApiKey()" class="btn-primary px-4 py-2 text-sm font-medium text-slate-950 rounded-lg flex items-center gap-2">
+                        <span>+</span> Create Key
+                    </button>
+                </div>
+                
+                <div id="apiKeysList" class="space-y-3">
+                    <div class="loading-skeleton h-16 rounded-lg"></div>
+                    <div class="loading-skeleton h-16 rounded-lg"></div>
+                </div>
+                
+                <div id="noApiKeys" class="hidden text-center py-8 text-slate-400">
+                    <p class="mb-4">No API keys yet</p>
+                    <button onclick="createApiKey()" class="text-[#38BDF8] hover:underline">Create your first API key</button>
+                </div>
+            </div>
+
+            <!-- Recent Activity Panel -->
+            <div class="card rounded-2xl p-6">
+                <h2 class="text-xl font-semibold mb-6">Recent Activity</h2>
+                
+                <div id="activityList" class="space-y-3">
+                    <div class="loading-skeleton h-14 rounded-lg"></div>
+                    <div class="loading-skeleton h-14 rounded-lg"></div>
+                    <div class="loading-skeleton h-14 rounded-lg"></div>
+                </div>
+                
+                <div id="noActivity" class="hidden text-center py-8 text-slate-400">
+                    <p>No recent activity</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Account Settings -->
+        <div class="card rounded-2xl p-6 mt-6">
+            <h2 class="text-xl font-semibold mb-6">Account Settings</h2>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                    <label class="block text-sm text-slate-400 mb-2">Display Name</label>
+                    <input type="text" id="settingsName" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-3 outline-none focus:border-[#38BDF8] transition-colors" placeholder="Your name">
+                </div>
+                <div>
+                    <label class="block text-sm text-slate-400 mb-2">Email</label>
+                    <input type="email" id="settingsEmail" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-3 outline-none focus:border-[#38BDF8] transition-colors" disabled>
+                </div>
+            </div>
+            
+            <div class="flex items-center gap-4 mt-6">
+                <button onclick="saveSettings()" class="btn-primary px-6 py-2 text-sm font-medium text-slate-950 rounded-lg">
+                    Save Changes
+                </button>
+                <button onclick="deactivateAccount()" class="px-6 py-2 text-sm font-medium text-red-400 hover:text-red-300 border border-red-400/30 hover:border-red-400 rounded-lg transition-colors">
+                    Deactivate Account
+                </button>
+            </div>
+        </div>
+    </main>
+
+    <!-- Toast Container -->
+    <div id="toastContainer" class="fixed bottom-6 right-6 z-50 space-y-2"></div>
+
+    <!-- Scripts -->
+    <script src="js/config.js"></script>
+    <script src="js/auth.js"></script>
+    <script src="js/api.js"></script>
+    <script>
+        // Initialize on page load
+        document.addEventListener('DOMContentLoaded', async () => {
+            try {
+                // Initialize auth
+                await moxieAuth.init();
+                
+                // Check if authenticated
+                if (!moxieAuth.isAuthenticated) {
+                    // Redirect to login
+                    await moxieAuth.login(window.location.href);
+                    return;
+                }
+
+                // Load user data
+                await loadDashboard();
+                
+            } catch (error) {
+                console.error('Initialization error:', error);
+                showToast('Failed to initialize. Please refresh.', 'error');
+            }
+        });
+
+        async function loadDashboard() {
+            try {
+                // Get user profile from API
+                const profileResponse = await moxieAPI.getProfile();
+                const user = profileResponse.data.user;
+                
+                // Update UI with user info
+                updateUserUI(user);
+                
+                // Load credits
+                const creditsResponse = await moxieAPI.getCredits(1, 5);
+                document.getElementById('creditsBalance').textContent = creditsResponse.data.credits.toLocaleString();
+                
+                // Update activity list
+                updateActivityList(creditsResponse.data.transactions);
+                
+                // Load API keys
+                const keysResponse = await moxieAPI.getApiKeys();
+                document.getElementById('apiKeyCount').textContent = keysResponse.data.keys.length;
+                updateApiKeysList(keysResponse.data.keys);
+                
+                // Update subscription
+                document.getElementById('subscriptionPlan').textContent = user.subscription_tier || 'Free';
+                document.getElementById('subscriptionStatus').textContent = user.subscription_status || 'No active subscription';
+                
+                // Update settings form
+                document.getElementById('settingsName').value = user.name || '';
+                document.getElementById('settingsEmail').value = user.email || '';
+                
+            } catch (error) {
+                console.error('Failed to load dashboard:', error);
+                showToast('Failed to load dashboard data', 'error');
+            }
+        }
+
+        function updateUserUI(user) {
+            document.getElementById('userName').textContent = user.name || 'User';
+            document.getElementById('userEmail').textContent = user.email || '';
+            document.getElementById('welcomeName').textContent = user.name || 'User';
+            
+            // Avatar
+            const avatar = document.getElementById('userAvatar');
+            if (user.picture) {
+                avatar.innerHTML = `<img src="${user.picture}" class="w-full h-full rounded-full object-cover">`;
+            } else {
+                avatar.textContent = (user.name || 'U').charAt(0).toUpperCase();
+            }
+        }
+
+        function updateApiKeysList(keys) {
+            const container = document.getElementById('apiKeysList');
+            const noKeys = document.getElementById('noApiKeys');
+            
+            if (keys.length === 0) {
+                container.innerHTML = '';
+                noKeys.classList.remove('hidden');
+                return;
+            }
+            
+            noKeys.classList.add('hidden');
+            
+            container.innerHTML = keys.map(key => `
+                <div class="flex items-center justify-between bg-slate-800/50 rounded-lg p-4">
+                    <div>
+                        <div class="font-medium">${escapeHtml(key.name)}</div>
+                        <div class="text-sm text-slate-400">
+                            Created ${new Date(key.created_at).toLocaleDateString()}
+                            ${key.last_used ? ` • Last used ${new Date(key.last_used).toLocaleDateString()}` : ''}
+                        </div>
+                    </div>
+                    <button onclick="revokeKey('${key.id}')" class="px-3 py-1 text-sm text-red-400 hover:text-red-300 hover:bg-red-400/10 rounded transition-colors">
+                        Revoke
+                    </button>
+                </div>
+            `).join('');
+        }
+
+        function updateActivityList(transactions) {
+            const container = document.getElementById('activityList');
+            const noActivity = document.getElementById('noActivity');
+            
+            if (!transactions || transactions.length === 0) {
+                container.innerHTML = '';
+                noActivity.classList.remove('hidden');
+                return;
+            }
+            
+            noActivity.classList.add('hidden');
+            
+            container.innerHTML = transactions.slice(0, 5).map(tx => `
+                <div class="flex items-center justify-between bg-slate-800/50 rounded-lg p-4">
+                    <div>
+                        <div class="font-medium">${escapeHtml(tx.description || 'Credit transaction')}</div>
+                        <div class="text-sm text-slate-400">${new Date(tx.created_at).toLocaleString()}</div>
+                    </div>
+                    <div class="font-mono ${tx.amount > 0 ? 'text-green-400' : 'text-red-400'}">
+                        ${tx.amount > 0 ? '+' : ''}${tx.amount}
+                    </div>
+                </div>
+            `).join('');
+        }
+
+        async function createApiKey() {
+            const name = prompt('Enter a name for this API key:', 'My API Key');
+            if (!name) return;
+            
+            try {
+                const response = await moxieAPI.createApiKey(name);
+                const key = response.data.key;
+                
+                // Show the key (only time it will be visible)
+                showToast('API key created! Copy it now - it won\'t be shown again.', 'success');
+                
+                // Show modal with key
+                showApiKeyModal(key);
+                
+                // Refresh list
+                const keysResponse = await moxieAPI.getApiKeys();
+                document.getElementById('apiKeyCount').textContent = keysResponse.data.keys.length;
+                updateApiKeysList(keysResponse.data.keys);
+                
+            } catch (error) {
+                showToast('Failed to create API key: ' + error.message, 'error');
+            }
+        }
+
+        function showApiKeyModal(key) {
+            const modal = document.createElement('div');
+            modal.className = 'fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4';
+            modal.innerHTML = `
+                <div class="bg-slate-800 rounded-2xl p-6 max-w-lg w-full">
+                    <h3 class="text-xl font-semibold mb-4">API Key Created</h3>
+                    <p class="text-slate-400 mb-4">Copy this key now. It won't be shown again.</p>
+                    <div class="bg-slate-900 rounded-lg p-4 mb-4">
+                        <code class="text-[#38BDF8] break-all text-sm">${escapeHtml(key.key)}</code>
+                    </div>
+                    <div class="flex gap-3">
+                        <button onclick="navigator.clipboard.writeText('${escapeHtml(key.key)}'); this.textContent='Copied!';" 
+                                class="btn-primary px-4 py-2 text-sm font-medium text-slate-950 rounded-lg">
+                            Copy to Clipboard
+                        </button>
+                        <button onclick="this.closest('.fixed').remove()" 
+                                class="px-4 py-2 text-sm font-medium text-slate-400 hover:text-white border border-slate-700 rounded-lg">
+                            Close
+                        </button>
+                    </div>
+                </div>
+            `;
+            document.body.appendChild(modal);
+            modal.addEventListener('click', (e) => {
+                if (e.target === modal) modal.remove();
+            });
+        }
+
+        async function revokeKey(keyId) {
+            if (!confirm('Are you sure you want to revoke this API key? This action cannot be undone.')) return;
+            
+            try {
+                await moxieAPI.revokeApiKey(keyId);
+                showToast('API key revoked', 'success');
+                
+                // Refresh list
+                const keysResponse = await moxieAPI.getApiKeys();
+                document.getElementById('apiKeyCount').textContent = keysResponse.data.keys.length;
+                updateApiKeysList(keysResponse.data.keys);
+                
+            } catch (error) {
+                showToast('Failed to revoke API key: ' + error.message, 'error');
+            }
+        }
+
+        async function saveSettings() {
+            const name = document.getElementById('settingsName').value.trim();
+            
+            try {
+                await moxieAPI.updateProfile({ name });
+                showToast('Settings saved', 'success');
+                
+                // Update UI
+                document.getElementById('userName').textContent = name || 'User';
+                document.getElementById('welcomeName').textContent = name || 'User';
+                
+            } catch (error) {
+                showToast('Failed to save settings: ' + error.message, 'error');
+            }
+        }
+
+        async function deactivateAccount() {
+            if (!confirm('Are you sure you want to deactivate your account? This action cannot be undone.')) return;
+            if (!confirm('This will permanently delete your account and all associated data. Continue?')) return;
+            
+            try {
+                await moxieAPI.deactivateAccount();
+                showToast('Account deactivated', 'success');
+                await logout();
+                
+            } catch (error) {
+                showToast('Failed to deactivate account: ' + error.message, 'error');
+            }
+        }
+
+        async function logout() {
+            try {
+                await moxieAuth.logout();
+            } catch (error) {
+                console.error('Logout error:', error);
+                window.location.href = 'index.html';
+            }
+        }
+
+        function showToast(message, type = 'info') {
+            const container = document.getElementById('toastContainer');
+            const toast = document.createElement('div');
+            
+            const bgColor = type === 'error' ? 'bg-red-500/20 border-red-500/50' : 
+                           type === 'success' ? 'bg-green-500/20 border-green-500/50' : 
+                           'bg-slate-800 border-slate-700';
+            
+            toast.className = `toast ${bgColor} border rounded-lg px-4 py-3 text-sm max-w-sm`;
+            toast.textContent = message;
+            
+            container.appendChild(toast);
+            
+            setTimeout(() => toast.remove(), 3000);
+        }
+
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+    </script>
+</body>
+</html>
diff --git a/index.html b/index.html
index fe25986..4ce6a4a 100644
--- a/index.html
+++ b/index.html
@@ -724,21 +724,35 @@
     <nav id="navbar" class="border-b border-slate-800 bg-slate-950/80 backdrop-blur-lg sticky top-0 z-50">
         <div class="max-w-screen-2xl mx-auto px-8 py-5 flex items-center justify-between">
             <!-- Logo + Brand -->
-            <div class="flex items-center gap-x-3">
+            <a href="index.html" class="flex items-center gap-x-3">
                 <img src="logo.svg" 
                      alt="Moxiegen" 
                      class="h-11 w-auto logo-glow"
                      onerror="this.onerror=null; this.src='logo.png';">
                 <span class="font-semibold text-3xl tracking-[-1px] text-white" style="font-family: 'Space Grotesk', sans-serif;">Moxiegen</span>
-            </div>
+            </a>
             
             <!-- Navigation -->
             <div class="flex items-center gap-x-8 text-sm font-medium">
                 <a href="#benefits" class="nav-link hover:text-[#38BDF8]">How It Works</a>
                 <a href="#moxy" class="nav-link hover:text-[#38BDF8]">See Moxy Go</a>
                 <a href="#licensing" class="nav-link hover:text-[#38BDF8]">Licensing</a>
+                
+                <!-- Auth buttons -->
+                <div id="authButtons" class="flex items-center gap-x-4">
+                    <!-- Login button (shown when not authenticated) -->
+                    <button id="loginBtn" onclick="login()" class="hidden ripple px-6 py-2.5 bg-white text-slate-950 font-semibold rounded-3xl hover:bg-[#38BDF8] hover:text-white btn-primary">
+                        Login
+                    </button>
+                    
+                    <!-- Dashboard button (shown when authenticated) -->
+                    <a id="dashboardBtn" href="dashboard.html" class="hidden ripple px-6 py-2.5 bg-white text-slate-950 font-semibold rounded-3xl hover:bg-[#38BDF8] hover:text-white btn-primary">
+                        Dashboard
+                    </a>
+                </div>
+                
                 <button onclick="document.getElementById('contact').scrollIntoView({ behavior: 'smooth' })"
-                        class="ripple px-6 py-2.5 bg-white text-slate-950 font-semibold rounded-3xl hover:bg-[#38BDF8] hover:text-white btn-primary">
+                        class="ripple px-6 py-2.5 border border-white/30 hover:border-[#38BDF8] font-semibold rounded-3xl">
                     Contact Us
                 </button>
             </div>
@@ -1196,7 +1210,48 @@
             initTiltEffect();
             initSmoothScroll();
             animateCounters();
+            initAuth();
         });
+
+        // ============================================
+        // AUTHENTICATION
+        // ============================================
+        async function initAuth() {
+            try {
+                await moxieAuth.init();
+                updateAuthUI();
+            } catch (error) {
+                console.error('Auth init error:', error);
+                // Show login button on error
+                document.getElementById('loginBtn').classList.remove('hidden');
+            }
+        }
+
+        function updateAuthUI() {
+            const loginBtn = document.getElementById('loginBtn');
+            const dashboardBtn = document.getElementById('dashboardBtn');
+            
+            if (moxieAuth.isAuthenticated) {
+                loginBtn.classList.add('hidden');
+                dashboardBtn.classList.remove('hidden');
+            } else {
+                loginBtn.classList.remove('hidden');
+                dashboardBtn.classList.add('hidden');
+            }
+        }
+
+        async function login() {
+            try {
+                await moxieAuth.login(window.location.origin + '/dashboard.html');
+            } catch (error) {
+                console.error('Login error:', error);
+                alert('Failed to login. Please try again.');
+            }
+        }
     </script>
+
+    <!-- Auth Scripts -->
+    <script src="js/config.js"></script>
+    <script src="js/auth.js"></script>
 </body>
 </html>
diff --git a/js/api.js b/js/api.js
new file mode 100644
index 0000000..5f2273e
--- /dev/null
+++ b/js/api.js
@@ -0,0 +1,177 @@
+/**
+ * Moxiegen API Client
+ * Handles all API calls to the backend with authentication
+ */
+
+class MoxieAPI {
+    constructor() {
+        this.baseUrl = CONFIG.api.baseUrl;
+    }
+
+    /**
+     * Make authenticated API request
+     */
+    async request(endpoint, options = {}) {
+        const token = await moxieAuth.getToken();
+
+        const headers = {
+            'Content-Type': 'application/json',
+            ...options.headers
+        };
+
+        if (token) {
+            headers['Authorization'] = `Bearer ${token}`;
+        }
+
+        const url = endpoint.startsWith('http') ? endpoint : this.baseUrl + endpoint;
+
+        try {
+            const response = await fetch(url, {
+                ...options,
+                headers
+            });
+
+            const data = await response.json();
+
+            if (!response.ok) {
+                throw new APIError(data.message || 'Request failed', response.status, data);
+            }
+
+            return data;
+
+        } catch (error) {
+            if (error instanceof APIError) {
+                throw error;
+            }
+            throw new APIError(error.message, 0, { error: error.message });
+        }
+    }
+
+    /**
+     * GET request
+     */
+    async get(endpoint) {
+        return this.request(endpoint, { method: 'GET' });
+    }
+
+    /**
+     * POST request
+     */
+    async post(endpoint, data) {
+        return this.request(endpoint, {
+            method: 'POST',
+            body: JSON.stringify(data)
+        });
+    }
+
+    /**
+     * PUT request
+     */
+    async put(endpoint, data) {
+        return this.request(endpoint, {
+            method: 'PUT',
+            body: JSON.stringify(data)
+        });
+    }
+
+    /**
+     * DELETE request
+     */
+    async delete(endpoint, data) {
+        return this.request(endpoint, {
+            method: 'DELETE',
+            body: data ? JSON.stringify(data) : undefined
+        });
+    }
+
+    // ============================================
+    // User Endpoints
+    // ============================================
+
+    /**
+     * Get current user profile
+     */
+    async getProfile() {
+        return this.get(CONFIG.api.endpoints.me);
+    }
+
+    /**
+     * Update user profile
+     */
+    async updateProfile(data) {
+        return this.put(CONFIG.api.endpoints.me, data);
+    }
+
+    /**
+     * Deactivate account
+     */
+    async deactivateAccount() {
+        return this.delete(CONFIG.api.endpoints.me);
+    }
+
+    // ============================================
+    // Credits Endpoints
+    // ============================================
+
+    /**
+     * Get credits balance and history
+     */
+    async getCredits(page = 1, limit = 10) {
+        return this.get(`${CONFIG.api.endpoints.credits}?page=${page}&limit=${limit}`);
+    }
+
+    // ============================================
+    // API Keys Endpoints
+    // ============================================
+
+    /**
+     * Get all API keys
+     */
+    async getApiKeys() {
+        return this.get(CONFIG.api.endpoints.apiKeys);
+    }
+
+    /**
+     * Create new API key
+     */
+    async createApiKey(name = 'API Key') {
+        return this.post(CONFIG.api.endpoints.apiKeys, { name });
+    }
+
+    /**
+     * Revoke API key
+     */
+    async revokeApiKey(keyId) {
+        return this.delete(`${CONFIG.api.endpoints.apiKeys}/${keyId}`);
+    }
+
+    // ============================================
+    // Health Check
+    // ============================================
+
+    /**
+     * Check API health
+     */
+    async checkHealth() {
+        return this.get(CONFIG.api.endpoints.health);
+    }
+}
+
+/**
+ * Custom API Error class
+ */
+class APIError extends Error {
+    constructor(message, status, data) {
+        super(message);
+        this.name = 'APIError';
+        this.status = status;
+        this.data = data;
+    }
+}
+
+// Create singleton instance
+const moxieAPI = new MoxieAPI();
+
+// Export for use in other modules
+window.moxieAPI = moxieAPI;
+window.APIError = APIError;
diff --git a/js/auth.js b/js/auth.js
new file mode 100644
index 0000000..ce61de7
--- /dev/null
+++ b/js/auth.js
@@ -0,0 +1,176 @@
+/**
+ * Moxiegen Authentication Module
+ * Handles Auth0 authentication, login/logout, and token management
+ */
+
+class MoxieAuth {
+    constructor() {
+        this.auth0Client = null;
+        this.isAuthenticated = false;
+        this.user = null;
+        this.token = null;
+        this.isInitialized = false;
+    }
+
+    /**
+     * Initialize Auth0 client
+     */
+    async init() {
+        if (this.isInitialized) return;
+
+        try {
+            // Dynamically load Auth0 SPA SDK if not already loaded
+            if (typeof auth0 === 'undefined') {
+                await this.loadScript('https://cdn.auth0.com/js/auth0-spa-js/2.0/auth0-spa-js.production.js');
+            }
+
+            // Create Auth0 client
+            this.auth0Client = await auth0.createAuth0Client({
+                domain: CONFIG.auth0.domain,
+                clientId: CONFIG.auth0.clientId,
+                authorizationParams: {
+                    audience: CONFIG.auth0.audience,
+                    redirect_uri: CONFIG.auth0.redirectUri
+                },
+                cacheLocation: 'localstorage',
+                useRefreshTokens: true
+            });
+
+            // Check if coming back from Auth0 redirect
+            const query = window.location.search;
+            if (query.includes('code=') && query.includes('state=')) {
+                await this.auth0Client.handleRedirectCallback();
+                // Remove query params from URL
+                window.history.replaceState({}, document.title, window.location.pathname);
+            }
+
+            // Check authentication status
+            this.isAuthenticated = await this.auth0Client.isAuthenticated();
+
+            if (this.isAuthenticated) {
+                this.user = await this.auth0Client.getUser();
+                this.token = await this.auth0Client.getTokenSilently();
+            }
+
+            this.isInitialized = true;
+            console.log('Auth0 initialized. Authenticated:', this.isAuthenticated);
+
+        } catch (error) {
+            console.error('Failed to initialize Auth0:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Load external script
+     */
+    loadScript(src) {
+        return new Promise((resolve, reject) => {
+            const script = document.createElement('script');
+            script.src = src;
+            script.onload = resolve;
+            script.onerror = reject;
+            document.head.appendChild(script);
+        });
+    }
+
+    /**
+     * Login - redirect to Auth0
+     */
+    async login(returnTo = null) {
+        if (!this.auth0Client) {
+            await this.init();
+        }
+
+        await this.auth0Client.loginWithRedirect({
+            authorizationParams: {
+                audience: CONFIG.auth0.audience,
+                redirect_uri: returnTo || CONFIG.auth0.redirectUri
+            }
+        });
+    }
+
+    /**
+     * Logout
+     */
+    async logout() {
+        if (!this.auth0Client) {
+            await this.init();
+        }
+
+        // Clear local state
+        this.isAuthenticated = false;
+        this.user = null;
+        this.token = null;
+
+        // Logout from Auth0
+        await this.auth0Client.logout({
+            logoutParams: {
+                returnTo: CONFIG.auth0.logoutUri
+            }
+        });
+    }
+
+    /**
+     * Get access token (silently refreshes if needed)
+     */
+    async getToken() {
+        if (!this.auth0Client) {
+            await this.init();
+        }
+
+        if (!this.isAuthenticated) {
+            return null;
+        }
+
+        try {
+            this.token = await this.auth0Client.getTokenSilently();
+            return this.token;
+        } catch (error) {
+            console.error('Failed to get token:', error);
+            // Token might be expired, try to re-authenticate
+            this.isAuthenticated = false;
+            return null;
+        }
+    }
+
+    /**
+     * Get current user
+     */
+    async getUser() {
+        if (!this.auth0Client) {
+            await this.init();
+        }
+        return this.user;
+    }
+
+    /**
+     * Check if user is authenticated
+     */
+    async checkAuth() {
+        if (!this.auth0Client) {
+            await this.init();
+        }
+        this.isAuthenticated = await this.auth0Client.isAuthenticated();
+        if (this.isAuthenticated) {
+            this.user = await this.auth0Client.getUser();
+            this.token = await this.auth0Client.getTokenSilently();
+        }
+        return this.isAuthenticated;
+    }
+
+    /**
+     * Check if user has specific role
+     */
+    hasRole(role) {
+        if (!this.user) return false;
+        const roles = this.user['https://moxiegen.client.guacamolebox.net/roles'] || [];
+        return roles.includes(role);
+    }
+}
+
+// Create singleton instance
+const moxieAuth = new MoxieAuth();
+
+// Export for use in other modules
+window.moxieAuth = moxieAuth;
diff --git a/js/config.js b/js/config.js
new file mode 100644
index 0000000..5f02da5
--- /dev/null
+++ b/js/config.js
@@ -0,0 +1,38 @@
+/**
+ * Moxiegen Frontend Configuration
+ * Update these values to match your Auth0 and API settings
+ */
+
+const CONFIG = {
+    // Auth0 Configuration
+    auth0: {
+        domain: 'dev-t13zhs74oltgqtfxf.auth0.com',
+        clientId: 'YOUR_CLIENT_ID', // Replace with your Auth0 Client ID
+        audience: 'https://dev-t13zhs74oltgqtfxf.auth0.com/api/v2/',
+        redirectUri: window.location.origin + '/dashboard.html',
+        logoutUri: window.location.origin
+    },
+
+    // API Configuration
+    api: {
+        baseUrl: '/api', // Proxied through Caddy
+        endpoints: {
+            me: '/users/me',
+            credits: '/users/credits',
+            apiKeys: '/users/api-keys',
+            health: '/health'
+        }
+    },
+
+    // App Configuration
+    app: {
+        name: 'Moxiegen',
+        version: '2.0.0'
+    }
+};
+
+// Freeze config to prevent modifications
+Object.freeze(CONFIG);
+Object.freeze(CONFIG.auth0);
+Object.freeze(CONFIG.api);
+Object.freeze(CONFIG.app);
