spine-framework 0.3.101 → 0.3.103

package/.framework/src/App.tsx

@@ -4,6 +4,8 @@ import { useAuth } from './contexts/AuthContext'
 import { LoadingSpinner } from './components/ui/LoadingSpinner'
 import { LoginPage } from './pages/auth/LoginPage'
 import { RegisterPage } from './pages/auth/RegisterPage'
+import { ForgotPasswordPage } from './pages/auth/ForgotPasswordPage'
+import { AuthConfirmPage } from './pages/auth/AuthConfirmPage'
 import { PendingApprovalPage } from './pages/auth/PendingApprovalPage'
 import { NotFoundPage } from './pages/NotFoundPage'
 import { SetupPage } from './pages/SetupPage'
@@ -36,6 +38,8 @@ function App() {
         <Routes>
           <Route path="/login" element={<LoginPage />} />
           <Route path="/register" element={<RegisterPage />} />
+          <Route path="/forgot-password" element={<ForgotPasswordPage />} />
+          <Route path="/auth/confirm" element={<AuthConfirmPage />} />
           {/* / shows setup instructions when no user is logged in */}
           <Route path="/" element={<SetupPage />} />
           <Route path="*" element={<Navigate to="/login" replace />} />
@@ -109,6 +113,8 @@ function AuthenticatedRouter() {
         {/* Auth routes: redirect handled by useEffect above, but keep as fallback */}
         <Route path="/login" element={<Navigate to={defaultRedirect} replace />} />
         <Route path="/register" element={<RegisterPage />} />
+        <Route path="/forgot-password" element={<ForgotPasswordPage />} />
+        <Route path="/auth/confirm" element={<AuthConfirmPage />} />
 
         {/* Dynamic app routes — no framework opinions about / or /dashboard */}
         {sorted.map(app => {

package/.framework/src/contexts/AppContext.tsx

@@ -148,7 +148,9 @@ export function AppsRegistryProvider({ children }: AppsRegistryProviderProps) {
   const appMatchesDomain = (app: AppRecord): boolean => {
     const domain = environment === 'preview' ? app.preview_domain : app.prod_domain
     if (!domain) return true
-    return currentHost === domain.split(':')[0]
+    // Accept both "hostname.com" and "https://hostname.com" formats
+    const hostname = domain.includes('://') ? new URL(domain).hostname : domain.split(':')[0]
+    return currentHost === hostname
   }
 
   const routableApps = apps.filter(

package/.framework/src/hooks/useApps.ts

@@ -73,7 +73,9 @@ export function useApps(): UseAppsResult {
       const appMatchesDomain = (app: AppRecord): boolean => {
         const domain = environment === 'preview' ? app.preview_domain : app.prod_domain
         if (!domain) return true
-        return currentHost === domain.split(':')[0]
+        // Accept both "hostname.com" and "https://hostname.com" formats
+        const hostname = domain.includes('://') ? new URL(domain).hostname : domain.split(':')[0]
+        return currentHost === hostname
       }
 
       // Filter by user's roles: include app if user has any of the required_roles,

package/.framework/src/pages/auth/AuthConfirmPage.tsx

@@ -0,0 +1,288 @@
+/**
+ * @module src/pages/auth/AuthConfirmPage
+ * @audience installer
+ * @layer frontend-page
+ * @stability stable
+ *
+ * Universal auth callback page. Handles two token types delivered by Supabase
+ * via email link, both arriving as query params on `/auth/confirm`:
+ *
+ *   type=signup   — email confirmation after registration
+ *   type=recovery — password-reset link from ForgotPasswordPage
+ *
+ * Flow:
+ *   1. On mount, read `token_hash` and `type` from the URL search params.
+ *   2. Call `supabase.auth.verifyOtp({ token_hash, type })` to exchange the
+ *      token for a live session. Supabase fires `SIGNED_IN` via
+ *      `onAuthStateChange`, which triggers `fetchUserContext` in AuthContext.
+ *   3a. signup  → navigate to "/" (AuthenticatedRouter takes over).
+ *   3b. recovery → show a "set new password" form.
+ *       On submit call `supabase.auth.updateUser({ password })`, then navigate.
+ *
+ * Error cases:
+ *   - Token missing/malformed — show error + link back to login.
+ *   - Token expired (>1 h)    — show error + link to /forgot-password to retry.
+ *   - Password too short      — inline validation, never sent to Supabase.
+ *
+ * @seeAlso src/pages/auth/ForgotPasswordPage.tsx (generates recovery links)
+ * @seeAlso src/pages/auth/RegisterPage.tsx        (generates signup links)
+ * @seeAlso src/contexts/AuthContext.tsx           (onAuthStateChange handler)
+ */
+
+import React, { useState, useEffect } from 'react'
+import { Link, useNavigate, useSearchParams } from 'react-router-dom'
+import { supabase } from '../../lib/supabase'
+import { LoadingSpinner } from '../../components/ui/LoadingSpinner'
+
+// ─── TYPES ────────────────────────────────────────────────────────────────────
+
+type Stage =
+  | 'verifying'         // exchanging token with Supabase
+  | 'signup_success'    // signup confirmed — brief success then redirect
+  | 'set_password'      // recovery: show new-password form
+  | 'password_saved'    // recovery: update succeeded — brief success then redirect
+  | 'error'             // unrecoverable error
+
+// ─── COMPONENT ────────────────────────────────────────────────────────────────
+
+export function AuthConfirmPage() {
+  const [searchParams] = useSearchParams()
+  const navigate = useNavigate()
+
+  const tokenHash = searchParams.get('token_hash')
+  const type = searchParams.get('type') as 'signup' | 'recovery' | string | null
+
+  const [stage, setStage] = useState<Stage>('verifying')
+  const [errorMessage, setErrorMessage] = useState('')
+
+  // New-password form state
+  const [newPassword, setNewPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [passwordError, setPasswordError] = useState('')
+  const [isSaving, setIsSaving] = useState(false)
+
+  // ── Token exchange on mount ──────────────────────────────────────────────
+  useEffect(() => {
+    if (!tokenHash || !type) {
+      setErrorMessage('Invalid or missing confirmation link. Please request a new one.')
+      setStage('error')
+      return
+    }
+
+    ;(async () => {
+      const { error } = await supabase.auth.verifyOtp({
+        token_hash: tokenHash,
+        type: type as any,
+      })
+
+      if (error) {
+        // Common GoTrue error messages — surface human-friendly versions
+        if (error.message.includes('expired') || error.message.includes('otp_expired')) {
+          setErrorMessage('This link has expired. Links are valid for 1 hour.')
+        } else if (error.message.includes('invalid')) {
+          setErrorMessage('This link is invalid or has already been used.')
+        } else {
+          setErrorMessage(error.message)
+        }
+        setStage('error')
+        return
+      }
+
+      if (type === 'recovery') {
+        setStage('set_password')
+      } else {
+        // signup, invite, magic_link — session is live, go to app
+        setStage('signup_success')
+        setTimeout(() => navigate('/', { replace: true }), 1500)
+      }
+    })()
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // ── Save new password ────────────────────────────────────────────────────
+  const handleSetPassword = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setPasswordError('')
+
+    if (newPassword.length < 8) {
+      setPasswordError('Password must be at least 8 characters.')
+      return
+    }
+    if (newPassword !== confirmPassword) {
+      setPasswordError('Passwords do not match.')
+      return
+    }
+
+    setIsSaving(true)
+    try {
+      const { error } = await supabase.auth.updateUser({ password: newPassword })
+      if (error) {
+        setPasswordError(error.message)
+        return
+      }
+      setStage('password_saved')
+      setTimeout(() => navigate('/', { replace: true }), 1500)
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  // ── Render ───────────────────────────────────────────────────────────────
+
+  if (stage === 'verifying') {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-slate-50">
+        <div className="text-center space-y-4">
+          <LoadingSpinner className="w-8 h-8 mx-auto" />
+          <p className="text-slate-600">Verifying your link...</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (stage === 'error') {
+    const isExpired = errorMessage.includes('expired')
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-slate-50 px-4">
+        <div className="max-w-md w-full text-center space-y-6">
+          <div className="mx-auto h-16 w-16 flex items-center justify-center rounded-full bg-red-100">
+            <svg className="h-8 w-8 text-red-600" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
+            </svg>
+          </div>
+          <div className="space-y-2">
+            <h1 className="text-2xl font-semibold text-slate-900">Link problem</h1>
+            <p className="text-slate-600">{errorMessage}</p>
+          </div>
+          <div className="space-y-3">
+            {isExpired ? (
+              <Link
+                to="/forgot-password"
+                className="block w-full py-2 px-4 rounded-[5px] bg-slate-900 text-white text-sm font-medium hover:bg-slate-800 text-center"
+              >
+                Request a new link
+              </Link>
+            ) : null}
+            <Link to="/login" className="block text-sm text-accent-blue hover:text-accent-blue-light">
+              Back to sign in
+            </Link>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (stage === 'signup_success') {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-slate-50 px-4">
+        <div className="text-center space-y-4">
+          <div className="mx-auto h-16 w-16 flex items-center justify-center rounded-full bg-green-100">
+            <svg className="h-8 w-8 text-green-600" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+            </svg>
+          </div>
+          <h1 className="text-2xl font-semibold text-slate-900">Email confirmed!</h1>
+          <p className="text-slate-600">Taking you to the app...</p>
+          <LoadingSpinner className="w-5 h-5 mx-auto" />
+        </div>
+      </div>
+    )
+  }
+
+  if (stage === 'password_saved') {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-slate-50 px-4">
+        <div className="text-center space-y-4">
+          <div className="mx-auto h-16 w-16 flex items-center justify-center rounded-full bg-green-100">
+            <svg className="h-8 w-8 text-green-600" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+            </svg>
+          </div>
+          <h1 className="text-2xl font-semibold text-slate-900">Password updated!</h1>
+          <p className="text-slate-600">Taking you to the app...</p>
+          <LoadingSpinner className="w-5 h-5 mx-auto" />
+        </div>
+      </div>
+    )
+  }
+
+  // stage === 'set_password'
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-slate-50 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full space-y-8">
+        <div>
+          <div className="mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-slate-900">
+            <span className="text-white font-bold text-xl">S</span>
+          </div>
+          <h2 className="mt-6 text-center text-3xl font-extrabold text-slate-900">
+            Set a new password
+          </h2>
+          <p className="mt-2 text-center text-sm text-slate-600">
+            Choose a strong password for your account.
+          </p>
+        </div>
+
+        <form className="mt-8 space-y-6" onSubmit={handleSetPassword}>
+          {passwordError && (
+            <div className="rounded-md bg-red-50 p-4">
+              <div className="text-sm text-red-800">{passwordError}</div>
+            </div>
+          )}
+
+          <div className="space-y-4">
+            <div>
+              <label htmlFor="new-password" className="block text-sm font-medium text-slate-700">
+                New password
+              </label>
+              <input
+                id="new-password"
+                name="new-password"
+                type="password"
+                autoComplete="new-password"
+                required
+                minLength={8}
+                value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)}
+                className="mt-1 block w-full px-3 py-2 border border-slate-300 rounded-[5px] shadow-sm placeholder-slate-400 focus:outline-none focus:ring-accent-blue focus:border-accent-blue sm:text-sm"
+                placeholder="At least 8 characters"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="confirm-password" className="block text-sm font-medium text-slate-700">
+                Confirm new password
+              </label>
+              <input
+                id="confirm-password"
+                name="confirm-password"
+                type="password"
+                autoComplete="new-password"
+                required
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                className="mt-1 block w-full px-3 py-2 border border-slate-300 rounded-[5px] shadow-sm placeholder-slate-400 focus:outline-none focus:ring-accent-blue focus:border-accent-blue sm:text-sm"
+                placeholder="Repeat your new password"
+              />
+            </div>
+          </div>
+
+          <div>
+            <button
+              type="submit"
+              disabled={isSaving}
+              className="group relative w-full flex justify-center py-2 px-4 border border-transparent rounded-[5px] shadow-sm text-sm font-medium text-white bg-slate-900 hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-blue disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {isSaving ? (
+                <>
+                  <LoadingSpinner size="sm" />
+                  <span className="ml-2">Saving...</span>
+                </>
+              ) : (
+                'Save new password'
+              )}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

package/.framework/src/pages/auth/ForgotPasswordPage.tsx

@@ -0,0 +1,146 @@
+/**
+ * @module src/pages/auth/ForgotPasswordPage
+ * @audience installer
+ * @layer frontend-page
+ * @stability stable
+ *
+ * Password-reset request page. Collects the user's email address and calls
+ * `supabase.auth.resetPasswordForEmail`, passing `emailRedirectTo` so the
+ * link in the email returns the user to the correct origin (local dev,
+ * Netlify preview, Cortex, Portal — whatever they're currently on).
+ *
+ * Supabase sends a recovery email whose link resolves to:
+ *   <origin>/auth/confirm?token_hash=...&type=recovery
+ *
+ * That page (AuthConfirmPage) then handles the token exchange and prompts
+ * the user to set a new password.
+ *
+ * @seeAlso src/pages/auth/AuthConfirmPage.tsx (token exchange + new-password form)
+ * @seeAlso src/pages/auth/LoginPage.tsx       (links here via /forgot-password)
+ */
+
+import React, { useState } from 'react'
+import { Link } from 'react-router-dom'
+import { supabase } from '../../lib/supabase'
+import { LoadingSpinner } from '../../components/ui/LoadingSpinner'
+
+export function ForgotPasswordPage() {
+  const [email, setEmail] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [submitted, setSubmitted] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+    setIsLoading(true)
+
+    try {
+      const { error: resetError } = await supabase.auth.resetPasswordForEmail(email, {
+        redirectTo: `${window.location.origin}/auth/confirm`,
+      })
+
+      if (resetError) {
+        setError(resetError.message)
+        return
+      }
+
+      setSubmitted(true)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  if (submitted) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-slate-50 py-12 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-md w-full text-center space-y-6">
+          <div className="mx-auto h-16 w-16 flex items-center justify-center rounded-full bg-green-100">
+            <svg className="h-8 w-8 text-green-600" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
+            </svg>
+          </div>
+          <div className="space-y-2">
+            <h1 className="text-2xl font-semibold text-slate-900">Check your email</h1>
+            <p className="text-slate-600">
+              We sent a password reset link to <span className="font-medium">{email}</span>.
+            </p>
+          </div>
+          <div className="rounded-md bg-slate-100 border border-slate-200 p-4 text-sm text-slate-700 text-left space-y-1">
+            <p>The link expires in 1 hour.</p>
+            <p>If you don't see it, check your spam folder.</p>
+          </div>
+          <Link to="/login" className="block text-sm text-accent-blue hover:text-accent-blue-light">
+            Back to sign in
+          </Link>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-slate-50 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full space-y-8">
+        <div>
+          <div className="mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-slate-900">
+            <span className="text-white font-bold text-xl">S</span>
+          </div>
+          <h2 className="mt-6 text-center text-3xl font-extrabold text-slate-900">
+            Reset your password
+          </h2>
+          <p className="mt-2 text-center text-sm text-slate-600">
+            Enter your email and we'll send you a reset link.
+          </p>
+        </div>
+
+        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+          {error && (
+            <div className="rounded-md bg-red-50 p-4">
+              <div className="text-sm text-red-800">{error}</div>
+            </div>
+          )}
+
+          <div>
+            <label htmlFor="email" className="block text-sm font-medium text-slate-700">
+              Email address
+            </label>
+            <input
+              id="email"
+              name="email"
+              type="email"
+              autoComplete="email"
+              required
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="mt-1 block w-full px-3 py-2 border border-slate-300 rounded-[5px] shadow-sm placeholder-slate-400 focus:outline-none focus:ring-accent-blue focus:border-accent-blue sm:text-sm"
+              placeholder="Enter your email"
+            />
+          </div>
+
+          <div>
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="group relative w-full flex justify-center py-2 px-4 border border-transparent rounded-[5px] shadow-sm text-sm font-medium text-white bg-slate-900 hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-blue disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {isLoading ? (
+                <>
+                  <LoadingSpinner size="sm" />
+                  <span className="ml-2">Sending...</span>
+                </>
+              ) : (
+                'Send reset link'
+              )}
+            </button>
+          </div>
+
+          <div className="text-center">
+            <Link to="/login" className="text-sm text-accent-blue hover:text-accent-blue-light">
+              Back to sign in
+            </Link>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

package/.framework/src/pages/auth/RegisterPage.tsx

@@ -229,7 +229,10 @@ export function RegisterPage() {
       const { data: signUpData, error: signUpError } = await supabase.auth.signUp({
         email: invitePreview?.email ?? email,
         password,
-        options: { data: { full_name: fullName } },
+        options: {
+          data: { full_name: fullName },
+          emailRedirectTo: `${window.location.origin}/auth/confirm`,
+        },
       })
 
       if (signUpError) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spine-framework",
-  "version": "0.3.101",
+  "version": "0.3.103",
   "description": "Multi-tenant, modular application platform for modern SaaS systems",
   "type": "module",
   "bin": {