spine-framework 0.3.40 → 0.3.42

package/.framework/functions/_shared/db.ts

@@ -15,6 +15,7 @@
  */
 
 import { createClient } from '@supabase/supabase-js'
+import WebSocket from 'ws'
 
 // ─── ENVIRONMENT RESOLUTION ──────────────────────────────────────────────────
 
@@ -61,7 +62,8 @@ const dbSchema: string = _env.DB_SCHEMA || 'public'
  * ```
  */
 export const adminDb = createClient(supabaseUrl, supabaseServiceKey, {
-  db: { schema: dbSchema }
+  db: { schema: dbSchema },
+  realtime: { transport: WebSocket as any }
 })
 
 // ─── CHUNK_START: SHARED_DB_GET_USER_DB ──────────────────────────────────────────────
@@ -81,7 +83,8 @@ export const adminDb = createClient(supabaseUrl, supabaseServiceKey, {
 export function getUserDb(jwt: string) {
   return createClient(supabaseUrl, supabaseAnonKey, {
     db: { schema: dbSchema },
-    global: { headers: { Authorization: `Bearer ${jwt}` } }
+    global: { headers: { Authorization: `Bearer ${jwt}` } },
+    realtime: { transport: WebSocket as any }
   })
 }
 // ─── CHUNK_END: SHARED_DB_GET_USER_DB ────────────────────────────────────────────────

package/.framework/functions/_shared/principal.ts

@@ -32,6 +32,7 @@
 
 import { getUserDb, adminDb } from './db'
 import { createClient } from '@supabase/supabase-js'
+import WebSocket from 'ws'
 
 // ─── AUTH CLIENT ─────────────────────────────────────────────────────────────
 
@@ -43,10 +44,8 @@ const supabase = createClient(
   env.SUPABASE_URL || 'https://placeholder.supabase.co',
   env.SUPABASE_ANON_KEY || 'placeholder',
   {
-    auth: {
-      autoRefreshToken: false,
-      persistSession: false
-    }
+    auth: { autoRefreshToken: false, persistSession: false },
+    realtime: { transport: WebSocket as any }
   }
 )
 

package/.framework/src/App.tsx

@@ -3,6 +3,7 @@ import { Routes, Route, Navigate } from 'react-router-dom'
 import { useAuth } from './contexts/AuthContext'
 import { LoadingSpinner } from './components/ui/LoadingSpinner'
 import { LoginPage } from './pages/auth/LoginPage'
+import { RegisterPage } from './pages/auth/RegisterPage'
 import { NotFoundPage } from './pages/NotFoundPage'
 import { DashboardPage } from './pages/DashboardPage'
 import { AppWrapper } from './components/AppWrapper'
@@ -33,6 +34,7 @@ function App() {
       {!user ? (
         <Routes>
           <Route path="/login" element={<LoginPage />} />
+          <Route path="/register" element={<RegisterPage />} />
           <Route path="*" element={<Navigate to="/login" replace />} />
         </Routes>
       ) : (
@@ -76,8 +78,9 @@ function AuthenticatedRouter() {
         <Route path="/" element={<Navigate to={defaultRedirect} replace />} />
         <Route path="/dashboard" element={<DashboardPage />} />
         
-        {/* Login route for authenticated users (redirects to qualified app) */}
+        {/* Login/register routes for authenticated users (redirects to qualified app) */}
         <Route path="/login" element={<LoginPage />} />
+        <Route path="/register" element={<RegisterPage />} />
 
         {/* ── Spine Framework namespace (reserved — no custom app may use this path) ── */}
         <Route path="/spine-framework/admin/*" element={<AdminApp />} />

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

@@ -0,0 +1,163 @@
+/**
+ * @module src/pages/auth/RegisterPage
+ * @audience installer
+ * @layer frontend-page
+ * @stability stable
+ *
+ * Self-registration page. Renders a centred card with email/password/name
+ * inputs. On submit, calls Supabase signUp and navigates to /login with
+ * a confirmation message.
+ */
+
+import React, { useState } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { useAuth } from '../../contexts/AuthContext'
+import { LoadingSpinner } from '../../components/ui/LoadingSpinner'
+import { supabase } from '../../lib/supabase'
+
+export function RegisterPage() {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [fullName, setFullName] = useState('')
+  const [error, setError] = useState('')
+  const [success, setSuccess] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+
+  const navigate = useNavigate()
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+    setSuccess('')
+    setIsLoading(true)
+
+    try {
+      const { error: signUpError } = await supabase.auth.signUp({
+        email,
+        password,
+        options: {
+          data: {
+            full_name: fullName,
+          },
+        },
+      })
+
+      if (signUpError) {
+        setError(signUpError.message)
+        return
+      }
+
+      setSuccess('Account created! Check your email for a confirmation link.')
+      setTimeout(() => navigate('/login'), 3000)
+    } catch (err: any) {
+      setError(err.message || 'Registration failed')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  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">
+            Create your account
+          </h2>
+          <p className="mt-2 text-center text-sm text-slate-600">
+            Already have an account?{' '}
+            <Link to="/login" className="font-medium text-accent-blue hover:text-accent-blue-light">
+              Sign in
+            </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>
+          )}
+
+          {success && (
+            <div className="rounded-md bg-green-50 p-4">
+              <div className="text-sm text-green-800">{success}</div>
+            </div>
+          )}
+
+          <div className="space-y-4">
+            <div>
+              <label htmlFor="fullName" className="block text-sm font-medium text-slate-700">
+                Full name
+              </label>
+              <input
+                id="fullName"
+                name="fullName"
+                type="text"
+                required
+                value={fullName}
+                onChange={(e) => setFullName(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 full name"
+              />
+            </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>
+              <label htmlFor="password" className="block text-sm font-medium text-slate-700">
+                Password
+              </label>
+              <input
+                id="password"
+                name="password"
+                type="password"
+                autoComplete="new-password"
+                required
+                minLength={6}
+                value={password}
+                onChange={(e) => setPassword(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="Choose a password (min 6 characters)"
+              />
+            </div>
+          </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">Creating account...</span>
+                </>
+              ) : (
+                'Create account'
+              )}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

package/package.json

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