@q3assets/auth 0.1.0 → 0.2.0

package/README.md

@@ -1,6 +1,6 @@
-# @q3/auth
+# @q3assets/auth
 
-Shared authentication package for SHIRE project dashboards. Provides M365-safe magic link auth with Supabase.
+Shared authentication package for SHIRE project dashboards. Published to npm as `@q3assets/auth`.
 
 ## What's included
 
@@ -17,38 +17,35 @@ Shared authentication package for SHIRE project dashboards. Provides M365-safe m
 
 ## Consuming from a project dashboard
 
-All SHIRE projects share a filesystem via Dropbox. Shared packages live at `Q3/packages/`. Every project dashboard consumes them the same way — no monorepo, no registry.
+**1. Install:**
 
-**1. Add the dependency** in `package.json`:
-
-```json
-"@q3/auth": "file:../../Q3/packages/auth"
+```bash
+npm install @q3assets/auth
 ```
 
-Path is relative from your dashboard root to this package. From `SHIRE/projects/[PROJECT]/dashboard/` it's always `../../Q3/packages/auth`.
-
-**2. Configure `next.config.ts`:**
+**2. Add `transpilePackages` to `next.config.ts`:**
 
 ```typescript
-import { join } from "path"
-
 const nextConfig = {
-  transpilePackages: ["@q3/auth"],
-  turbopack: {
-    root: join(__dirname, "../.."), // common parent: SHIRE/projects/
-  },
+  transpilePackages: ["@q3assets/auth"],
 }
 ```
 
-`transpilePackages` tells Next.js to compile the package's TypeScript. `turbopack.root` tells Turbopack to trust the shared Dropbox filesystem so it follows the symlink.
+This is required because the package ships TypeScript source. One line, standard Next.js pattern.
 
-**3. Install:** `npm install` — creates a symlink. Changes to this package are picked up immediately.
+**3. Import:**
 
-Import as `@q3/auth/login`, `@q3/auth/confirm`, etc.
+```typescript
+import { Login } from "@q3assets/auth/login"
+import { AuthConfirm } from "@q3assets/auth/confirm"
+import { AuthCallback } from "@q3assets/auth/callback"
+import { createAuthMiddleware } from "@q3assets/auth/middleware"
+import { createBrowserClient } from "@q3assets/auth/clients"
+```
 
 ### Pages and middleware
 
-Create three pages and a middleware. Reference implementation: `Q3/dashboard/src/`
+Create three pages and a middleware. Reference implementation: `SHIRE/projects/Q3/dashboard/src/`
 
 ```
 app/login/page.tsx          → Login component

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@q3assets/auth",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "exports": {
     ".": "./src/index.ts",
     "./login": "./src/login.tsx",
@@ -8,6 +8,8 @@
     "./confirm": "./src/confirm.tsx",
     "./clients": "./src/clients.ts",
     "./admin": "./src/admin.ts",
+    "./admin-panel": "./src/admin-panel.tsx",
+    "./admin-routes": "./src/admin-routes.ts",
     "./middleware": "./src/middleware.ts"
   },
   "dependencies": {

package/src/admin-panel.tsx

@@ -0,0 +1,187 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import type { SupabaseClient } from "@supabase/supabase-js"
+
+interface AppUser {
+  id: string
+  email: string
+  name: string | null
+  role: string
+  created_at: string
+  last_sign_in_at: string | null
+}
+
+interface AdminPanelProps {
+  supabase: SupabaseClient
+  onClose: () => void
+  apiBase?: string
+}
+
+export function AdminPanel({ supabase, onClose, apiBase = "/api/admin/users" }: AdminPanelProps) {
+  const [users, setUsers] = useState<AppUser[]>([])
+  const [loading, setLoading] = useState(true)
+  const [inviteName, setInviteName] = useState("")
+  const [inviteEmail, setInviteEmail] = useState("")
+  const [inviteRole, setInviteRole] = useState<"user" | "admin">("user")
+  const [sending, setSending] = useState(false)
+  const [message, setMessage] = useState("")
+  const [error, setError] = useState("")
+  const [editingUser, setEditingUser] = useState<AppUser | null>(null)
+  const [editName, setEditName] = useState("")
+
+  async function getAuthHeader() {
+    const { data: { session } } = await supabase.auth.getSession()
+    return { Authorization: `Bearer ${session?.access_token}` }
+  }
+
+  async function loadUsers() {
+    const headers = await getAuthHeader()
+    const res = await fetch(apiBase, { headers })
+    const data = await res.json()
+    if (res.ok) {
+      setUsers(data.users)
+      setError("")
+    } else {
+      setError(data.error || "Failed to load users")
+    }
+    setLoading(false)
+  }
+
+  useEffect(() => { loadUsers() }, [])
+
+  async function handleInvite(e: React.FormEvent) {
+    e.preventDefault()
+    setSending(true)
+    setMessage("")
+
+    const headers = await getAuthHeader()
+    const res = await fetch(apiBase, {
+      method: "POST",
+      headers: { ...headers, "Content-Type": "application/json" },
+      body: JSON.stringify({ email: inviteEmail, name: inviteName, role: inviteRole }),
+    })
+
+    const data = await res.json()
+    setSending(false)
+
+    if (res.ok) {
+      setMessage(`Invited ${inviteName || inviteEmail}`)
+      setInviteEmail("")
+      setInviteName("")
+      loadUsers()
+    } else {
+      setMessage(data.error || "Failed to invite")
+    }
+  }
+
+  async function handleRemove(user: AppUser) {
+    if (!confirm(`Remove ${user.email}? This cannot be undone.`)) return
+    const headers = await getAuthHeader()
+    const res = await fetch(`${apiBase}/${user.id}`, { method: "DELETE", headers })
+    if (res.ok) loadUsers()
+    else alert((await res.json()).error || "Failed to remove user")
+  }
+
+  async function handleToggleRole(user: AppUser) {
+    const newRole = user.role === "admin" ? "user" : "admin"
+    const headers = await getAuthHeader()
+    const res = await fetch(`${apiBase}/${user.id}`, {
+      method: "PATCH",
+      headers: { ...headers, "Content-Type": "application/json" },
+      body: JSON.stringify({ role: newRole }),
+    })
+    if (res.ok) loadUsers()
+    else alert((await res.json()).error || "Failed to update role")
+  }
+
+  async function handleSaveName(user: AppUser) {
+    const headers = await getAuthHeader()
+    const res = await fetch(`${apiBase}/${user.id}`, {
+      method: "PATCH",
+      headers: { ...headers, "Content-Type": "application/json" },
+      body: JSON.stringify({ name: editName }),
+    })
+    if (res.ok) { setEditingUser(null); setEditName(""); loadUsers() }
+    else alert((await res.json()).error || "Failed to update name")
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex justify-end">
+      <div className="absolute inset-0 bg-black/50" onClick={onClose} />
+      <div className="relative w-full max-w-lg overflow-y-auto bg-[var(--bg)] border-l border-[var(--border)] shadow-2xl">
+        <div className="sticky top-0 z-10 flex items-center justify-between border-b border-[var(--border)] bg-[var(--bg)] px-5 py-4">
+          <h2 className="text-lg font-semibold">Admin</h2>
+          <button onClick={onClose} className="rounded-lg p-1.5 text-[var(--text-muted)] hover:bg-[var(--bg-card)] hover:text-[var(--text)]">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 6L6 18M6 6l12 12" /></svg>
+          </button>
+        </div>
+
+        <div className="p-5 space-y-6">
+          <div className="rounded-xl border border-[var(--border)] bg-[var(--bg-card)] p-4">
+            <h3 className="text-sm font-medium mb-3">Invite User</h3>
+            <form onSubmit={handleInvite} className="space-y-3">
+              <input type="text" value={inviteName} onChange={(e) => setInviteName(e.target.value)} placeholder="Name (required)" required className="w-full rounded-lg border border-[var(--border)] bg-[var(--bg)] px-3 py-2 text-sm text-[var(--text)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent)] focus:outline-none focus:ring-1 focus:ring-[var(--accent)]" />
+              <input type="email" value={inviteEmail} onChange={(e) => setInviteEmail(e.target.value)} placeholder="email@example.com" required className="w-full rounded-lg border border-[var(--border)] bg-[var(--bg)] px-3 py-2 text-sm text-[var(--text)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent)] focus:outline-none focus:ring-1 focus:ring-[var(--accent)]" />
+              <div className="flex items-center gap-3">
+                <select value={inviteRole} onChange={(e) => setInviteRole(e.target.value as "user" | "admin")} className="rounded-lg border border-[var(--border)] bg-[var(--bg)] px-3 py-2 text-sm text-[var(--text)] focus:border-[var(--accent)] focus:outline-none">
+                  <option value="user">User</option>
+                  <option value="admin">Admin</option>
+                </select>
+                <button type="submit" disabled={sending} className="flex-1 rounded-lg bg-[var(--accent)] px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-[var(--accent-light)] disabled:opacity-50">
+                  {sending ? "Sending..." : "Send Invite"}
+                </button>
+              </div>
+              {message && <p className="text-xs text-[var(--text-muted)]">{message}</p>}
+            </form>
+          </div>
+
+          <div>
+            <h3 className="text-sm font-medium mb-3">Users ({users.length})</h3>
+            {error && <p className="mb-3 text-sm text-[var(--danger)]">{error}</p>}
+            {loading ? (
+              <p className="text-sm text-[var(--text-muted)]">Loading...</p>
+            ) : users.length === 0 ? (
+              <p className="text-sm text-[var(--text-muted)]">No users yet.</p>
+            ) : (
+              <div className="space-y-2">
+                {users.map((user) => (
+                  <div key={user.id} className="rounded-lg border border-[var(--border)] bg-[var(--bg-card)] px-4 py-3">
+                    {editingUser?.id === user.id ? (
+                      <div className="flex items-center gap-2">
+                        <input type="text" value={editName} onChange={(e) => setEditName(e.target.value)} placeholder="Name" autoFocus onKeyDown={(e) => { if (e.key === "Enter") handleSaveName(user); if (e.key === "Escape") { setEditingUser(null); setEditName("") } }} className="flex-1 rounded-lg border border-[var(--border)] bg-[var(--bg)] px-3 py-1.5 text-sm text-[var(--text)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent)] focus:outline-none focus:ring-1 focus:ring-[var(--accent)]" />
+                        <button onClick={() => handleSaveName(user)} className="rounded-lg bg-[var(--accent)] px-3 py-1.5 text-xs font-medium text-white hover:bg-[var(--accent-light)]">Save</button>
+                        <button onClick={() => { setEditingUser(null); setEditName("") }} className="rounded-lg px-3 py-1.5 text-xs text-[var(--text-muted)] hover:text-[var(--text)]">Cancel</button>
+                      </div>
+                    ) : (
+                      <div className="flex items-center justify-between">
+                        <div className="min-w-0 flex-1">
+                          <button onClick={() => { setEditingUser(user); setEditName(user.name || "") }} className="text-sm font-medium truncate hover:text-[var(--accent)] transition-colors text-left" title="Click to edit name">
+                            {user.name || user.email}
+                          </button>
+                          <p className="text-xs text-[var(--text-muted)] truncate">
+                            {user.name ? user.email : null}
+                            {user.name && user.last_sign_in_at ? " · " : ""}
+                            {user.last_sign_in_at ? `Last login ${new Date(user.last_sign_in_at).toLocaleDateString()}` : "Never logged in"}
+                          </p>
+                        </div>
+                        <div className="flex items-center gap-2 ml-3">
+                          <button onClick={() => handleToggleRole(user)} className={`rounded-full px-2.5 py-0.5 text-xs font-medium transition-colors ${user.role === "admin" ? "bg-indigo-900/50 text-indigo-300 hover:bg-indigo-900/70" : "bg-zinc-800 text-zinc-300 hover:bg-zinc-700"}`}>
+                            {user.role}
+                          </button>
+                          <button onClick={() => handleRemove(user)} className="rounded-lg p-1 text-[var(--text-muted)] hover:text-[var(--danger)] transition-colors" title="Remove user">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14" /></svg>
+                          </button>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/admin-routes.ts

@@ -0,0 +1,73 @@
+import { createAdminClient, requireAdmin } from "./admin"
+
+function json(data: any, status = 200) {
+  return new Response(JSON.stringify(data), {
+    status,
+    headers: { "Content-Type": "application/json" },
+  })
+}
+
+export async function handleListUsers(request: Request) {
+  const user = await requireAdmin(request)
+  if (!user) return json({ error: "Unauthorized" }, 401)
+
+  const admin = createAdminClient()
+  const { data, error } = await admin.auth.admin.listUsers()
+  if (error) return json({ error: error.message }, 500)
+
+  const users = data.users.map((u) => ({
+    id: u.id,
+    email: u.email,
+    name: u.user_metadata?.name || null,
+    role: u.user_metadata?.role || u.app_metadata?.role || "user",
+    created_at: u.created_at,
+    last_sign_in_at: u.last_sign_in_at,
+  }))
+
+  return json({ users })
+}
+
+export async function handleInviteUser(request: Request) {
+  const user = await requireAdmin(request)
+  if (!user) return json({ error: "Unauthorized" }, 401)
+
+  const { email, name, role } = await request.json()
+  if (!email) return json({ error: "Email required" }, 400)
+
+  const admin = createAdminClient()
+  const siteUrl = new URL(request.url).origin
+
+  const { data, error } = await admin.auth.admin.inviteUserByEmail(email, {
+    redirectTo: `${siteUrl}/auth/confirm`,
+    data: { name: name || email.split("@")[0], role: role || "user" },
+  })
+
+  if (error) return json({ error: error.message }, 500)
+  return json({ user: data.user })
+}
+
+export async function handleUpdateUser(request: Request, userId: string) {
+  const user = await requireAdmin(request)
+  if (!user) return json({ error: "Unauthorized" }, 401)
+
+  const body = await request.json()
+  const admin = createAdminClient()
+
+  const update: any = {}
+  if (body.role) update.app_metadata = { role: body.role }
+  if (body.name !== undefined) update.user_metadata = { name: body.name }
+
+  const { error } = await admin.auth.admin.updateUserById(userId, update)
+  if (error) return json({ error: error.message }, 500)
+  return json({ ok: true })
+}
+
+export async function handleDeleteUser(request: Request, userId: string) {
+  const user = await requireAdmin(request)
+  if (!user) return json({ error: "Unauthorized" }, 401)
+
+  const admin = createAdminClient()
+  const { error } = await admin.auth.admin.deleteUser(userId)
+  if (error) return json({ error: error.message }, 500)
+  return json({ ok: true })
+}

package/src/admin.ts

@@ -1,52 +1,44 @@
+import { createClient } from "@supabase/supabase-js"
 import type { SupabaseClient } from "@supabase/supabase-js"
 
-/**
- * Check if the requesting user is an admin. Reads the session from the
- * Authorization header (browser client sends this automatically via cookies
- * or bearer token). Checks for an `is_admin` flag in user metadata.
- *
- * Usage in Next.js API route:
- *   const { user, error } = await requireAdmin(supabase, request)
- *   if (error) return new Response(error, { status: 403 })
- */
-export async function requireAdmin(
-  supabase: SupabaseClient,
-  request: Request
-): Promise<{ user: any; error: string | null }> {
+export function createAdminClient(
+  url?: string,
+  serviceRoleKey?: string
+): SupabaseClient {
+  const u = url || process.env.NEXT_PUBLIC_SUPABASE_URL!
+  const k = serviceRoleKey || process.env.SUPABASE_SERVICE_ROLE_KEY
+  if (!k) throw new Error("SUPABASE_SERVICE_ROLE_KEY not configured")
+  return createClient(u, k, {
+    auth: { autoRefreshToken: false, persistSession: false },
+  })
+}
+
+export async function requireAdmin(request: Request): Promise<any | null> {
   const authHeader = request.headers.get("authorization")
-  if (!authHeader) {
-    return { user: null, error: "Not authenticated" }
-  }
+  if (!authHeader?.startsWith("Bearer ")) return null
 
-  const token = authHeader.replace("Bearer ", "")
-  const {
-    data: { user },
-    error,
-  } = await supabase.auth.getUser(token)
+  const token = authHeader.slice(7)
+  const supabase = createClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+  )
 
-  if (error || !user) {
-    return { user: null, error: "Invalid session" }
-  }
+  const { data: { user }, error } = await supabase.auth.getUser(token)
+  if (error || !user) return null
 
-  const isAdmin = user.app_metadata?.is_admin === true
-  if (!isAdmin) {
-    return { user: null, error: "Forbidden" }
-  }
+  const role = user.user_metadata?.role || user.app_metadata?.role
+  if (role !== "admin" && user.app_metadata?.is_admin !== true) return null
 
-  return { user, error: null }
+  return user
 }
 
-/**
- * Invite a user by email using the service-role client.
- * Sets redirect to /auth/confirm for M365 safety.
- */
 export async function inviteUser(
-  serviceClient: SupabaseClient,
+  adminClient: SupabaseClient,
   email: string,
   siteUrl: string,
   metadata?: Record<string, any>
 ) {
-  return serviceClient.auth.admin.inviteUserByEmail(email, {
+  return adminClient.auth.admin.inviteUserByEmail(email, {
     redirectTo: `${siteUrl}/auth/confirm`,
     data: metadata,
   })

package/src/index.ts

@@ -2,5 +2,7 @@ export { Login } from "./login"
 export { AuthCallback } from "./callback"
 export { AuthConfirm } from "./confirm"
 export { createBrowserClient, createServiceClient } from "./clients"
-export { requireAdmin, inviteUser } from "./admin"
+export { createAdminClient, requireAdmin, inviteUser } from "./admin"
+export { AdminPanel } from "./admin-panel"
+export { handleListUsers, handleInviteUser, handleUpdateUser, handleDeleteUser } from "./admin-routes"
 export { createAuthMiddleware } from "./middleware"