feat(register/onboard): real phone OTP verification via Twilio (SDK 0.2.6)

Replaces the mock verify step (which accepted any 6 digits) with a real SMS
OTP: addPhone() → Supabase/Twilio texts a code → verifyPhone() confirms it.

- Registration creates the auth account when leaving the Account step, so the
  phone can be attached + verified against a live Supabase session; finish()
  no longer double-registers.
- Onboarding gains a real phone-verify step (Profile → Verify → Address).
- Email is trusted without an OTP in both flows (Supabase auto-confirms on
  signup; Google verifies for onboarding), matching project config.
- Bump @abe-kap/appshell-sdk to ^0.2.6.

.gitignore

@@ -41,3 +41,4 @@ yarn-error.log*
 next-env.d.ts
 
 .vercel
+.env*.local

package.json

@@ -9,7 +9,7 @@
     "lint": "eslint"
   },
   "dependencies": {
-    "@abe-kap/appshell-sdk": "^0.2.0",
+    "@abe-kap/appshell-sdk": "^0.2.6",
     "clsx": "^2.1.1",
     "lucide-react": "^1.21.0",
     "next": "16.2.9",

src/app/dashboard/dashboard.css

@@ -106,6 +106,11 @@
   .sb-user .av { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; flex: 0 0 30px; }
   .sb-user .nm { font-size: 12.5px; font-weight: 600; }
   .sb-user .rl { font-size: 11px; color: var(--faint); }
+  .sb-user .nm, .sb-user .rl { max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .sb-user-menu { position: absolute; bottom: 56px; left: 12px; right: 12px; z-index: 30; padding: 6px; border-radius: 12px; border: 1px solid var(--border-2); background: var(--panel); box-shadow: var(--shadow), 0 8px 30px -12px rgba(0,0,0,0.55); animation: ds-rise 0.14s ease; }
+  .sb-user-menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: none; color: var(--text-2); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left; }
+  .sb-user-menu button:hover { background: var(--panel-2); }
+  .sb-user-menu button.danger { color: var(--red, #ef4444); }
   
   /* ---- main ---- */
   .dash-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

src/app/portal/onboarding/page.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth, useAppShell } from "@abe-kap/appshell-sdk/react";
+import { PortalAside, PanelBrand } from "@/components/portal/parts";
+import { RegisterFlow } from "@/components/portal/register-flow";
+import { CookieBanner } from "@/components/portal/bits";
+import { isShellConfigured } from "@/lib/appshell";
+
+/**
+ * Post-OAuth onboarding — a first-time Google user completes their CRM profile
+ * (everything except email, which Google already verified).
+ *
+ * This screen is ONLY a step in the OAuth → onboarding handoff: the login page
+ * stashes the verified email in `sessionStorage` right before routing here. Any
+ * other way in — a typed URL, a fresh tab, a lost session — has no handoff hint
+ * (and possibly no session), so we bounce back to sign in rather than showing an
+ * empty form.
+ */
+export default function OnboardingPage() {
+  const router = useRouter();
+  const { status } = useAuth();
+  const { ready } = useAppShell();
+  const [allowed, setAllowed] = useState(false);
+
+  useEffect(() => {
+    if (!isShellConfigured()) { setAllowed(true); return; } // local dev without the Shell
+    if (!ready) return;                                     // wait for session restore
+    let hasHandoff = false;
+    try { hasHandoff = !!sessionStorage.getItem("onboard_email"); } catch { /* ignore */ }
+    if (status === "unauthenticated" || !hasHandoff) {
+      router.replace("/portal/login");
+      return;
+    }
+    setAllowed(true);
+  }, [ready, status, router]);
+
+  if (!allowed) return <main className="portal-main"><span className="portal-grid" /></main>;
+
+  return (
+    <main className="portal-main">
+      <span className="portal-grid" />
+      <div className="portal-split anim-in">
+        <PortalAside />
+        <section className="portal-panel">
+          <div style={{ width: "100%", maxWidth: 420 }}>
+            <PanelBrand />
+            <RegisterFlow mode="onboard" />
+          </div>
+        </section>
+      </div>
+      <CookieBanner />
+    </main>
+  );
+}

src/components/dashboard/auth-gate.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect } from "react";
 import { useRouter } from "next/navigation";
-import { useAuth } from "@abe-kap/appshell-sdk/react";
+import { useAuth, useAppShell } from "@abe-kap/appshell-sdk/react";
 import { isShellConfigured } from "@/lib/appshell";
 
 /**
@@ -14,16 +14,21 @@ import { isShellConfigured } from "@/lib/appshell";
 export function AuthGate({ children }: { children: React.ReactNode }) {
   const router = useRouter();
   const { status } = useAuth();
+  const { ready } = useAppShell();
   const shell = isShellConfigured();
 
   useEffect(() => {
-    if (shell && status === "unauthenticated") router.replace("/portal/login");
-  }, [shell, status, router]);
+    // Only bounce to login once the SDK has finished booting AND restore() has
+    // resolved to unauthenticated. Redirecting while boot is still in flight would
+    // drop a perfectly valid session on reload (the status is transiently not-yet
+    // "authenticated" during boot).
+    if (shell && ready && status === "unauthenticated") router.replace("/portal/login");
+  }, [shell, ready, status, router]);
 
-  if (shell && status !== "authenticated") {
+  if (shell && (!ready || status !== "authenticated")) {
     return (
       <div style={{ minHeight: "60vh", display: "grid", placeItems: "center", color: "var(--muted, #888)" }}>
-        {status === "loading" ? "Loading your workspace…" : "Redirecting to sign in…"}
+        {ready && status === "unauthenticated" ? "Redirecting to sign in…" : "Loading your workspace…"}
       </div>
     );
   }

src/components/dashboard/sidebar.tsx

@@ -1,9 +1,16 @@
 "use client";
 
-import { ChevronsUpDown } from "lucide-react";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { ChevronsUpDown, LogOut } from "lucide-react";
+import { useAuth } from "@abe-kap/appshell-sdk/react";
 import { Icon } from "./ui";
 import { user } from "./account-data";
 
+function initialsOf(name: string): string {
+  return name.split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0]).join("").toUpperCase() || "?";
+}
+
 export type NavItem = { key: string; label: string; icon: string; subtitle?: string };
 export type NavGroup = { title: string; items: NavItem[] };
 
@@ -61,6 +68,22 @@ export const NAV_GROUPS: NavGroup[] = [
 export const NAV_ITEMS: NavItem[] = NAV_GROUPS.flatMap((g) => g.items);
 
 export function Sidebar({ active, onSelect }: { active: string; onSelect: (k: string) => void }) {
+  const router = useRouter();
+  const { user: me, logout, context } = useAuth();
+  const [menuOpen, setMenuOpen] = useState(false);
+  // Real signed-in identity from the App Context Envelope; fall back to the static
+  // demo user only when the Shell isn't wired.
+  const roleLabel = context?.scope?.role ? context.scope.role.charAt(0).toUpperCase() + context.scope.role.slice(1) : "";
+  const name = me?.displayName || user.name;
+  const initials = me ? initialsOf(me.displayName) : user.initials;
+  const secondary = me?.email || roleLabel || user.role;
+
+  async function signOut() {
+    setMenuOpen(false);
+    try { await logout(); } catch { /* ignore — proceed to portal either way */ }
+    router.replace("/portal/login");
+  }
+
   return (
     <aside className="dash-sidebar">
       <div className="dash-brand">
@@ -82,12 +105,20 @@ export function Sidebar({ active, onSelect }: { active: string; onSelect: (k: st
         ))}
       </nav>
 
-      <div className="sb-foot">
-        <button className="sb-user">
-          <span className="av" style={{ background: user.avatarGradient, display: "grid", placeItems: "center", color: "#fff", fontWeight: 700, fontSize: 12 }}>{user.initials}</span>
-          <div style={{ flex: 1, textAlign: "left" }}>
-            <div className="nm">{user.name}</div>
-            <div className="rl">{user.role}</div>
+      <div className="sb-foot" style={{ position: "relative" }}>
+        {menuOpen && (
+          <>
+            <div className="tm-menu-scrim" onClick={() => setMenuOpen(false)} />
+            <div className="sb-user-menu" role="menu">
+              <button className="danger" onClick={signOut}><LogOut size={15} /> Sign out</button>
+            </div>
+          </>
+        )}
+        <button className="sb-user" onClick={() => setMenuOpen((o) => !o)} aria-haspopup="menu" aria-expanded={menuOpen}>
+          <span className="av" style={{ background: user.avatarGradient, display: "grid", placeItems: "center", color: "#fff", fontWeight: 700, fontSize: 12 }}>{initials}</span>
+          <div style={{ flex: 1, textAlign: "left", minWidth: 0 }}>
+            <div className="nm">{name}</div>
+            <div className="rl" style={{ overflow: "hidden", textOverflow: "ellipsis" }}>{secondary}</div>
           </div>
           <ChevronsUpDown size={15} />
         </button>

src/components/dashboard/topbar.tsx

@@ -1,20 +1,33 @@
 "use client";
 
-import { Sun, Moon, ChevronDown } from "lucide-react";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Sun, Moon, ChevronDown, LogOut } from "lucide-react";
+import { useAuth } from "@abe-kap/appshell-sdk/react";
 import { Icon } from "./ui";
 import { user } from "./account-data";
-import { useAuth } from "@abe-kap/appshell-sdk/react";
 
 function initialsOf(name: string): string {
-  return name.split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0]).join("").toUpperCase();
+  return name.split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0]).join("").toUpperCase() || "?";
 }
 
 export function Topbar({ theme, onToggle, title, subtitle }: { theme: "dark" | "light"; onToggle: () => void; title: string; subtitle: string }) {
   // When signed in through the Shell, show the real identity from the App Context
   // Envelope; otherwise fall back to the static demo user.
-  const { user: me } = useAuth();
+  const router = useRouter();
+  const { user: me, logout, context } = useAuth();
+  const [menuOpen, setMenuOpen] = useState(false);
+  const roleLabel = context?.scope?.role ? context.scope.role.charAt(0).toUpperCase() + context.scope.role.slice(1) : "";
   const name = me?.displayName || user.name;
   const initials = me ? initialsOf(me.displayName) : user.initials;
+  const secondary = me?.email || roleLabel || user.role;
+
+  async function signOut() {
+    setMenuOpen(false);
+    try { await logout(); } catch { /* ignore */ }
+    router.replace("/portal/login");
+  }
+
   return (
     <header className="dash-topbar">
       <div className="dash-title">
@@ -30,14 +43,24 @@ export function Topbar({ theme, onToggle, title, subtitle }: { theme: "dark" | "
           <Icon name="bell" size={18} />
           <span style={{ position: "absolute", top: 9, right: 10, width: 7, height: 7, borderRadius: 99, background: "var(--orange)", border: "2px solid var(--panel)" }} />
         </button>
-        <button className="top-user">
-          <span className="av" style={{ background: user.avatarGradient, display: "grid", placeItems: "center", color: "#fff", fontWeight: 700, fontSize: 12 }}>{initials}</span>
-          <div style={{ textAlign: "left" }}>
-            <div className="nm">{name}</div>
-            <div className="rl">{user.role}</div>
-          </div>
-          <ChevronDown size={16} />
-        </button>
+        <div className="top-user-wrap" style={{ position: "relative" }}>
+          <button className="top-user" onClick={() => setMenuOpen((o) => !o)} aria-haspopup="menu" aria-expanded={menuOpen}>
+            <span className="av" style={{ background: user.avatarGradient, display: "grid", placeItems: "center", color: "#fff", fontWeight: 700, fontSize: 12 }}>{initials}</span>
+            <div style={{ textAlign: "left", minWidth: 0 }}>
+              <div className="nm">{name}</div>
+              <div className="rl" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: 150 }}>{secondary}</div>
+            </div>
+            <ChevronDown size={16} />
+          </button>
+          {menuOpen && (
+            <>
+              <div className="tm-menu-scrim" onClick={() => setMenuOpen(false)} />
+              <div className="tm-menu-pop" role="menu">
+                <button className="danger" onClick={signOut}><LogOut size={15} /> Sign out</button>
+              </div>
+            </>
+          )}
+        </div>
       </div>
     </header>
   );

src/components/portal/bits.tsx

@@ -145,18 +145,13 @@ export function startSocial(provider: "google" | "microsoft" | "apple"): boolean
   if (url) { window.location.href = url; return true; }
   return false;
 }
-export function SocialButtons({ onPick, verb = "Continue" }: { onPick: (p: "google" | "microsoft" | "apple") => void; verb?: string }) {
+export function SocialButtons({ onPick, verb = "Continue" }: { onPick: (p: "google") => void; verb?: string }) {
+  // Only Google is offered (Microsoft/Apple intentionally hidden).
   return (
     <div className="col gap-3">
       <button className="btn btn-oauth" type="button" onClick={() => onPick("google")}>
         <GoogleMark /> {verb} with Google
       </button>
-      <button className="btn btn-oauth" type="button" onClick={() => onPick("microsoft")}>
-        <MicrosoftMark /> {verb} with Microsoft / Outlook
-      </button>
-      <button className="btn btn-oauth" type="button" onClick={() => onPick("apple")}>
-        <AppleMark /> {verb} with Apple
-      </button>
     </div>
   );
 }

src/components/portal/login-flow.tsx

@@ -9,7 +9,7 @@ import {
   PasswordStrength,
 } from "./bits";
 import { lookupAccount, maskEmail, type Account } from "./data";
-import { useAuth } from "@abe-kap/appshell-sdk/react";
+import { useAuth, useAppShell } from "@abe-kap/appshell-sdk/react";
 import { isShellConfigured } from "@/lib/appshell";
 
 // Map the portal's social button ids to Supabase OAuth provider ids.
@@ -24,13 +24,26 @@ const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
 export function LoginFlow() {
   const router = useRouter();
-  const { login, loginWithOAuth, completeOAuthLogin } = useAuth();
+  const { login, loginWithOAuth, completeOAuthLogin, getUserEmail } = useAuth();
+  const { ready, sdk } = useAppShell();
   const [step, setStep] = useState<Step>("identify");
   const [email, setEmail] = useState("");
   const [account, setAccount] = useState<Account | null>(null);
   const [provider, setProvider] = useState<string>("");
   const [remember, setRemember] = useState(false);
   const [flash, setFlash] = useState<string>("");
+  const [otpChannel, setOtpChannel] = useState<"email" | "sms">("email");
+
+  // Minimal account stand-in for passwordless entry points (Shell mode).
+  function blankAccount(): Account {
+    return { firstName: "", name: "", initials: "", hasPasskey: false, hasTotp: false, hasPush: false, maskedEmail: maskEmail(email || ""), maskedPhone: "", maskedWa: "" };
+  }
+  // Direct "sign in with phone" → the one-time-code screen, SMS preselected.
+  function startPhoneLogin() {
+    setAccount(blankAccount());
+    setOtpChannel("sms");
+    replace("otp");
+  }
 
   /* ---- history hash sync ---- */
   function push(s: Step) {
@@ -58,11 +71,31 @@ export function LoginFlow() {
     if (!isShellConfigured()) return;
     const code = new URLSearchParams(window.location.search).get("code");
     if (!code) return;
+    // Wait until the SDK has booted — completeOAuthLogin no-ops (returns null) if
+    // sdk.auth isn't ready yet, and this effect only re-runs when `ready` flips.
+    if (!ready) { setStep("connecting"); return; }
     setStep("connecting");
     completeOAuthLogin(code)
-      .then((ace) => { if (ace) router.replace("/dashboard"); else replace("identify"); })
-      .catch(() => { setFlash("Sign-in with that provider didn't complete. Try again."); replace("identify"); });
-  }, [completeOAuthLogin, router]);
+      .then(async (ace) => {
+        if (!ace) { replace("identify"); return; }
+        // First-time Google user (no CRM profile yet) → complete onboarding; an
+        // existing profile → straight to the dashboard.
+        let registered = false;
+        try {
+          const st = await sdk.query<{ registered: boolean }>("crm.account.registrationStatus");
+          registered = !!st?.registered;
+        } catch { registered = false; }
+        window.history.replaceState({}, "", "/portal/login");
+        if (registered) { router.replace("/dashboard"); return; }
+        // Capture the verified email now (session is fresh) so onboarding prefills it.
+        try { const em = await getUserEmail(); if (em) sessionStorage.setItem("onboard_email", em); } catch { /* ignore */ }
+        router.replace("/portal/onboarding");
+      })
+      .catch(() => {
+        setFlash("Google sign-in didn't complete. Please try again.");
+        replace("identify");
+      });
+  }, [ready, completeOAuthLogin, router, sdk, getUserEmail]);
 
   /* ---- auth resolution ---- */
   function afterAuth(factor: "password" | "passkey" | "otp" | "totp" | "push" | "social") {
@@ -100,6 +133,7 @@ export function LoginFlow() {
         hasPasskey: false, hasTotp: false, hasPush: false,
         maskedEmail: maskEmail(email), maskedPhone: "", maskedWa: "",
       });
+      setOtpChannel("email");
       replace("password");
       return;
     }
@@ -116,14 +150,18 @@ export function LoginFlow() {
   /* =================================================================== */
   return (
     <div className="card anim-fade-up" key={step}>
-      {step === "identify" && <Identify email={email} setEmail={setEmail} onSocial={onSocial} onEmail={identifyEmail} toRegister={() => router.push("/portal/register")} />}
+      {step === "identify" && (
+        <>
+          {flash && <div style={{ marginBottom: 16 }}><FlashNote tone="error">{flash}</FlashNote></div>}
+          <Identify email={email} setEmail={setEmail} onSocial={onSocial} onEmail={identifyEmail} onPhone={startPhoneLogin} toRegister={() => router.push("/portal/register")} />
+        </>
+      )}
 
       {step === "connecting" && (
         <div className="interstitial">
           <Spinner lg />
           <div>
             <h1 style={{ fontSize: 20 }}>{provider ? `Connecting to ${cap(provider)}…` : "Looking up your account…"}</h1>
-            {provider && <p className="sub" style={{ marginTop: 6 }}>Demo mode — no provider keys configured.</p>}
           </div>
         </div>
       )}
@@ -162,11 +200,11 @@ export function LoginFlow() {
       )}
 
       {step === "password" && account && (
-        <Password account={account} email={email} login={login} onAuthenticated={() => router.replace("/dashboard")} flash={flash} onBack={back} onForgot={() => push("fp_confirm")} onOtp={() => replace("otp")} onLocked={() => setFlash("This account is temporarily locked.")} onOk={() => afterAuth("password")} />
+        <Password account={account} email={email} login={login} onAuthenticated={() => router.replace("/dashboard")} flash={flash} onBack={back} onForgot={() => push("fp_confirm")} onOtp={() => { setOtpChannel("email"); replace("otp"); }} onLocked={() => setFlash("This account is temporarily locked.")} onOk={() => afterAuth("password")} />
       )}
 
       {step === "otp" && account && (
-        <OtpVerify account={account} email={email} remember={remember} setRemember={setRemember} onBack={back} onVerified={() => afterAuth("otp")} onAuthenticated={() => router.replace("/dashboard")} />
+        <OtpVerify account={account} email={email} initialChannel={otpChannel} remember={remember} setRemember={setRemember} onBack={back} onVerified={() => afterAuth("otp")} onAuthenticated={() => router.replace("/dashboard")} />
       )}
 
       {step === "another" && account && (
@@ -230,9 +268,9 @@ export function LoginFlow() {
 
 /* ============================ screens ============================ */
 
-function Identify({ email, setEmail, onSocial, onEmail, toRegister }: {
+function Identify({ email, setEmail, onSocial, onEmail, onPhone, toRegister }: {
   email: string; setEmail: (v: string) => void;
-  onSocial: (p: "google" | "microsoft" | "apple") => void; onEmail: () => void; toRegister: () => void;
+  onSocial: (p: "google") => void; onEmail: () => void; onPhone: () => void; toRegister: () => void;
 }) {
   const [showEmail, setShowEmail] = useState(false);
   const valid = EMAIL_RE.test(email);
@@ -263,6 +301,9 @@ function Identify({ email, setEmail, onSocial, onEmail, toRegister }: {
             </button>
           </form>
         )}
+        {isShellConfigured() && (
+          <button className="link" style={{ marginTop: 14, display: "block" }} onClick={onPhone}><Icon name="sms" size={15} /> Sign in with a phone number instead</button>
+        )}
       </div>
 
       <p className="foot-note">New homeowner or contractor? <button className="link" onClick={toRegister}>Register here</button></p>
@@ -271,7 +312,6 @@ function Identify({ email, setEmail, onSocial, onEmail, toRegister }: {
         <span><Icon name="shield" size={13} /> Licensed &amp; Insured</span>
         <span><Icon name="check" size={13} /> Drone-Powered</span>
       </div>
-      <p className="demo-hint">Demo: any email signs in; an email starting with “new” shows “not found”.</p>
     </div>
   );
 }
@@ -306,7 +346,6 @@ function Passkey({ account, onBack, onPassword, onAnother, onSuccess, onFail }:
         <button className="link" onClick={onPassword}>Use your password instead</button>
         <button className="link" onClick={onAnother}>Try another way</button>
       </div>
-      <p className="demo-hint">Demo: passkey always succeeds here.</p>
       <button hidden onClick={onFail} />
     </div>
   );
@@ -357,20 +396,19 @@ function Password({ account, email, login, onAuthenticated, flash, onBack, onFor
       </form>
       <div className="row between" style={{ marginTop: 16 }}>
         <button className="link" onClick={onForgot}>Forgot password?</button>
-        <button className="link" onClick={onOtp}>Sign in using email OTP</button>
+        <button className="link" onClick={onOtp}>Sign in with a one-time code</button>
       </div>
-      {!isShellConfigured() && <p className="demo-hint">Demo: any password works; type “wrong” to see the lockout. Password always needs 2-step next.</p>}
     </div>
   );
 }
 
-function OtpVerify({ account, email, remember, setRemember, onBack, onVerified, onAuthenticated }: {
-  account: Account; email: string; remember: boolean; setRemember: (v: boolean) => void; onBack: () => void; onVerified: () => void; onAuthenticated: () => void;
+function OtpVerify({ account, email, initialChannel = "email", remember, setRemember, onBack, onVerified, onAuthenticated }: {
+  account: Account; email: string; initialChannel?: "email" | "sms"; remember: boolean; setRemember: (v: boolean) => void; onBack: () => void; onVerified: () => void; onAuthenticated: () => void;
 }) {
   const { sendEmailOtp, verifyEmailOtp, sendPhoneOtp, verifyPhoneOtp } = useAuth();
   const shell = isShellConfigured();
   // In Shell mode only email + SMS are real Supabase OTP channels; hide WhatsApp.
-  const [channel, setChannel] = useState<"email" | "sms" | "wa">("email");
+  const [channel, setChannel] = useState<"email" | "sms" | "wa">(initialChannel);
   const [phone, setPhone] = useState("");
   const [sent, setSent] = useState(false);
   const [busy, setBusy] = useState(false);
@@ -440,7 +478,6 @@ function OtpVerify({ account, email, remember, setRemember, onBack, onVerified,
         <span />
       </div>
       <RememberDevice checked={remember} onChange={setRemember} note="2-step is still required at each sign-in." />
-      {!shell && <p className="demo-hint">Demo: any 6 digits verify; “000000” shows an error.</p>}
     </div>
   );
 }
@@ -495,7 +532,6 @@ function Totp({ remember, setRemember, onBack, onVerified }: { remember: boolean
         {setupKey ? "Enter a 6-digit code instead" : "Enter setup key instead"}
       </button>
       <RememberDevice checked={remember} onChange={setRemember} />
-      <p className="demo-hint">Demo: any 6 digits verify; “000000” fails.</p>
     </div>
   );
 }
@@ -514,7 +550,6 @@ function PushApprove({ onBack, onApproved, onCancel }: { onBack: () => void; onA
       <p className="sub" style={{ textAlign: "center" }}>{approved ? "Your sign-in was approved." : "We sent a notification to your mobile app. Approve it to continue."}</p>
       <div className="interstitial">{approved ? <Icon name="check" size={30} /> : <Spinner lg />}</div>
       {!approved && <button className="btn" onClick={onCancel}>Cancel</button>}
-      <p className="demo-hint">Demo: auto-approves after ~3 seconds.</p>
     </div>
   );
 }
@@ -598,7 +633,6 @@ function ForgotCode({ onBack, onOk }: { onBack: () => void; onOk: () => void })
       <div style={{ marginTop: 18 }}><OtpBoxes onComplete={(c) => (c === "000000" ? setError(true) : onOk())} error={error} /></div>
       {error && <div style={{ marginTop: 12 }}><FlashNote tone="error">Incorrect code.</FlashNote></div>}
       <div style={{ marginTop: 14 }}><ResendLink seconds={30} /></div>
-      <p className="demo-hint">Demo: any 6 digits work; “000000” fails.</p>
     </div>
   );
 }

src/components/portal/register-flow.tsx

@@ -5,7 +5,7 @@ import { useRouter } from "next/navigation";
 import { Icon, Avatar } from "./icons";
 import {
   StepBack, FlashNote, Badge, OtpBoxes, ResendLink, RememberDevice,
-  SocialButtons, startSocial, PasswordStrength, LegalModal,
+  PasswordStrength, LegalModal,
 } from "./bits";
 import {
   countryCodes, relationshipOptions, addressCountries,
@@ -19,12 +19,20 @@ type Addr = { line1?: string; line2?: string; city?: string; state?: string; pos
 const STEPS = ["Account", "Verify", "Address"];
 const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
-export function RegisterFlow() {
+export function RegisterFlow({ mode = "register" }: { mode?: "register" | "onboard" }) {
+  // "onboard" = an already-authenticated OAuth (Google) user completing their CRM
+  // profile: email is skipped (Google-verified), the auth account already exists so
+  // we only SET a password + persist the profile, and the OTP-verify step is skipped.
+  const onboard = mode === "onboard";
   const router = useRouter();
-  const { register } = useAuth();
+  const { register, setPassword, getUserEmail, addPhone, verifyPhone } = useAuth();
   const { sdk } = useAppShell();
   const [step, setStep] = useState(0);
   const [submitErr, setSubmitErr] = useState("");
+  // Verifying a phone via Supabase needs a live session. Onboarding already has one
+  // (Google OAuth); registration creates the account when leaving the Account step,
+  // then attaches + verifies the phone on it. `creating` guards the Account button.
+  const [creating, setCreating] = useState(false);
 
   // address (lifted from StepAddress/AddressBlock so finish() can persist it)
   const [regAddr, setRegAddr] = useState<Addr>({});
@@ -46,10 +54,20 @@ export function RegisterFlow() {
   const [termsOk, setTermsOk] = useState(false);
   const [privacyOk, setPrivacyOk] = useState(false);
 
-  // verify step
-  const [emailVerified, setEmailVerified] = useState(false);
+  // verify step (email is trusted without an OTP — see verifyValid below)
   const [phoneVerified, setPhoneVerified] = useState(false);
 
+  // Onboarding: prefill the verified email — from the session-storage hint the login
+  // page stashed at OAuth time, then confirmed via the live Supabase session.
+  useEffect(() => {
+    if (!onboard) return;
+    try { const cached = sessionStorage.getItem("onboard_email"); if (cached) setEmail(cached); } catch { /* ignore */ }
+    getUserEmail().then((e) => { if (e) setEmail(e); }).catch(() => { /* ignore */ });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [onboard]);
+
+  const STEP_LABELS = onboard ? ["Profile", "Verify", "Address"] : STEPS;
+
   const isSelf = relationship === "Customer" || relationship === "Owner";
   const isEmployee = relationship === "Employee";
   const country = countryCodes.find((c) => c.code === cc)!;
@@ -61,7 +79,26 @@ export function RegisterFlow() {
     first.trim() && last.trim() && EMAIL_RE.test(sso?.email || email) && phoneOk && pwOk &&
     termsOk && privacyOk && (isSelf || (alloeIdOk && (isEmployee || (alloeFirst.trim() && alloeLast.trim()))));
 
-  const step2Valid = emailVerified && phoneVerified;
+  // Email is already trusted in both flows (registration: Supabase auto-confirms on
+  // signup; onboarding: Google-verified), so the Verify step only gates on the phone.
+  const verifyValid = phoneVerified;
+
+  // Registration: create the auth account when leaving the Account step, so the phone
+  // can be attached + verified against a live session at the Verify step. Onboarding
+  // is already authenticated, so it just advances.
+  async function leaveAccountStep() {
+    if (onboard || !isShellConfigured() || sso) { setStep(1); return; }
+    setSubmitErr("");
+    setCreating(true);
+    try {
+      await register(email, pw);
+      setStep(1);
+    } catch {
+      setSubmitErr("We couldn't create that account. The email may already be registered.");
+    } finally {
+      setCreating(false);
+    }
+  }
 
   async function finish() {
     const finalEmail = sso?.email || email;
@@ -76,10 +113,12 @@ export function RegisterFlow() {
 
     if (isShellConfigured()) {
       setSubmitErr("");
-      // 1) Auth account — appshell → Supabase (SSO users already have a session).
-      if (!sso) {
-        try { await register(finalEmail, pw); }
-        catch { setSubmitErr("We couldn't create that account. The email may already be registered."); return; }
+      // 1) Auth account already exists at this point — registration created it when
+      //    leaving the Account step; onboarding users signed in via Google. Onboarding
+      //    additionally sets a password so email+password login works too (the phone was
+      //    just verified against the same live session).
+      if (onboard && pw) {
+        try { await setPassword(pw); } catch { /* non-fatal — the profile still saves */ }
       }
       // 2) Persist the full CRM registration payload to be-crm (name, phone, persona,
       //    allottee, both addresses, consent). Non-fatal: the auth account exists either way.
@@ -97,38 +136,44 @@ export function RegisterFlow() {
           mailingSameAsRegistered: mailingSame,
           consentTerms: termsOk, consentPrivacy: privacyOk,
         });
-      } catch (e) {
-        console.warn("crm.account.register failed (continuing):", e);
+      } catch {
+        if (onboard) { setSubmitErr("Couldn't save your profile. Please try again."); return; }
+        // register mode: non-fatal — the auth account exists; the profile can be filled in later.
       }
     }
+    // Consume the OAuth→onboarding handoff so a stale hint can't re-open onboarding.
+    try { sessionStorage.removeItem("onboard_email"); } catch { /* ignore */ }
     router.push("/dashboard");
   }
 
   return (
     <div className="card anim-fade-up">
-      <Stepper current={step} />
+      <Stepper current={step} labels={STEP_LABELS} />
 
       {step === 0 && (
-        <StepAccount
-          sso={sso} setSso={setSso} email={email} setEmail={setEmail}
-          first={first} setFirst={setFirst} last={last} setLast={setLast}
-          cc={cc} setCc={setCc} phone={phone} setPhone={setPhone} phoneOk={phoneOk} country={country}
-          pw={pw} setPw={setPw}
-          relationship={relationship} setRelationship={setRelationship} isSelf={isSelf}
-          alloeNo={alloeNo} setAlloeNo={setAlloeNo} alloeIdOk={alloeIdOk}
-          alloeFirst={alloeFirst} setAlloeFirst={setAlloeFirst} alloeLast={alloeLast} setAlloeLast={setAlloeLast}
-          termsOk={termsOk} setTermsOk={setTermsOk} privacyOk={privacyOk} setPrivacyOk={setPrivacyOk}
-          valid={!!step0Valid}
-          onContinue={() => setStep(1)} toLogin={() => router.push("/portal/login")}
-        />
+        <>
+          {submitErr && <div style={{ marginBottom: 14 }}><FlashNote tone="error">{submitErr}</FlashNote></div>}
+          <StepAccount
+            onboard={onboard} creating={creating}
+            sso={sso} setSso={setSso} email={email} setEmail={setEmail}
+            first={first} setFirst={setFirst} last={last} setLast={setLast}
+            cc={cc} setCc={setCc} phone={phone} setPhone={setPhone} phoneOk={phoneOk} country={country}
+            pw={pw} setPw={setPw}
+            relationship={relationship} setRelationship={setRelationship} isSelf={isSelf}
+            alloeNo={alloeNo} setAlloeNo={setAlloeNo} alloeIdOk={alloeIdOk}
+            alloeFirst={alloeFirst} setAlloeFirst={setAlloeFirst} alloeLast={alloeLast} setAlloeLast={setAlloeLast}
+            termsOk={termsOk} setTermsOk={setTermsOk} privacyOk={privacyOk} setPrivacyOk={setPrivacyOk}
+            valid={!!step0Valid}
+            onContinue={leaveAccountStep} toLogin={() => router.push("/portal/login")}
+          />
+        </>
       )}
 
       {step === 1 && (
         <StepVerify
-          emailValue={sso?.email || email} cc={cc} phone={phone} country={country}
-          emailVerified={emailVerified} setEmailVerified={setEmailVerified}
+          cc={cc} phone={phone} country={country}
           phoneVerified={phoneVerified} setPhoneVerified={setPhoneVerified}
-          valid={step2Valid} onBack={() => setStep(0)} onContinue={() => setStep(2)}
+          valid={verifyValid} onBack={() => setStep(0)} onContinue={() => setStep(2)}
         />
       )}
 
@@ -153,28 +198,19 @@ function StepAccount(p: {
   alloeNo: string; setAlloeNo: (v: string) => void; alloeIdOk: boolean;
   alloeFirst: string; setAlloeFirst: (v: string) => void; alloeLast: string; setAlloeLast: (v: string) => void;
   termsOk: boolean; setTermsOk: (v: boolean) => void; privacyOk: boolean; setPrivacyOk: (v: boolean) => void;
-  valid: boolean; onContinue: () => void; toLogin: () => void;
+  valid: boolean; onContinue: () => void; toLogin: () => void; onboard?: boolean; creating?: boolean;
 }) {
-  const [phase, setPhase] = useState<"sso" | "profile">("sso");
+  // Onboarding (OAuth) starts on the profile step — email is already known + verified.
+  const [phase, setPhase] = useState<"sso" | "profile">(p.onboard ? "profile" : "sso");
   const [modal, setModal] = useState<null | "terms" | "privacy">(null);
 
-  function pickSso(provider: "google" | "microsoft" | "apple") {
-    if (startSocial(provider)) return;
-    const mockEmail = `you@${provider === "microsoft" ? "outlook.com" : provider + ".com"}`;
-    p.setSso({ provider, email: mockEmail });
-    p.setEmail(mockEmail);
-    setPhase("profile");
-  }
-
   if (phase === "sso") {
     const valid = EMAIL_RE.test(p.email);
     return (
       <div>
         <h1>Create your account</h1>
-        <p className="sub">Sign up with a provider or your email to get started.</p>
+        <p className="sub">Enter your email to get started.</p>
         <div style={{ marginTop: 20 }}>
-          <SocialButtons onPick={pickSso} verb="Sign up" />
-          <div className="divider">or continue with email</div>
           <form onSubmit={(e) => { e.preventDefault(); if (valid) { p.setSso(null); setPhase("profile"); } }}>
             <div className="field">
               <label className="label">Email address</label>
@@ -196,12 +232,13 @@ function StepAccount(p: {
       <h1>Complete your profile</h1>
       <p className="sub">Tell us a bit about you to set up your account.</p>
 
-      <div style={{ marginTop: 16 }}>
-        {p.sso ? (
-          <div className="conn-banner conn-green"><Icon name="check" size={16} /> Connected with {cap(p.sso.provider)} · {p.sso.email}</div>
-        ) : (
-          <div className="conn-banner conn-blue"><Icon name="mail" size={16} /> Creating account for {p.email}</div>
-        )}
+      <div className="field" style={{ marginTop: 16 }}>
+        <label className="label">Email address</label>
+        <div className="input-wrap">
+          <span className="input-ico"><Icon name="mail" size={17} /></span>
+          <input className="input" type="email" value={p.email} disabled readOnly aria-label="Email address" />
+        </div>
+        <span className="faint" style={{ fontSize: 12 }}>{p.onboard ? "Verified with Google — this can't be changed." : "The email you're registering with."}</span>
       </div>
 
       <div className="row gap-3" style={{ marginTop: 18, alignItems: "center" }}>
@@ -299,7 +336,9 @@ function StepAccount(p: {
 
       {!p.valid && <p className="hint-line">Fill all required fields and accept both documents to continue.</p>}
 
-      <button className="btn btn-primary" style={{ marginTop: 14 }} disabled={!p.valid} onClick={p.onContinue}>Create Account &amp; Verify <Icon name="arrowR" size={16} /></button>
+      <button className="btn btn-primary" style={{ marginTop: 14 }} disabled={!p.valid || p.creating} onClick={p.onContinue}>
+        {p.creating ? "Creating account…" : p.onboard ? "Continue" : "Create Account & Verify"} {!p.creating && <Icon name="arrowR" size={16} />}
+      </button>
 
       {modal === "terms" && <LegalModal doc={TERMS} onClose={() => setModal(null)} onReviewed={() => { reviewed.terms = true; setModal(null); }} />}
       {modal === "privacy" && <LegalModal doc={PRIVACY} onClose={() => setModal(null)} onReviewed={() => { reviewed.privacy = true; setModal(null); }} />}
@@ -309,10 +348,13 @@ function StepAccount(p: {
 // module-level reviewed flags (per mount lifetime) — enables the checkboxes after a doc is read
 const reviewed = { terms: false, privacy: false };
 
-/* ====================== STEP 1 — VERIFY ====================== */
+/* ====================== STEP 1 — VERIFY PHONE ======================
+   Email is already trusted (registration: Supabase auto-confirms on signup;
+   onboarding: Google-verified), so this step only verifies the phone via a real
+   SMS OTP: addPhone() → Twilio texts a code → verifyPhone() confirms it. Both
+   run against the live Supabase session established in the previous step. */
 function StepVerify(p: {
-  emailValue: string; cc: string; phone: string; country: typeof countryCodes[number];
-  emailVerified: boolean; setEmailVerified: (v: boolean) => void;
+  cc: string; phone: string; country: typeof countryCodes[number];
   phoneVerified: boolean; setPhoneVerified: (v: boolean) => void;
   valid: boolean; onBack: () => void; onContinue: () => void;
 }) {
@@ -320,12 +362,11 @@ function StepVerify(p: {
   return (
     <div>
       <StepBack onClick={p.onBack} />
-      <h1>Verify email &amp; phone</h1>
-      <p className="sub">Confirm both so we can secure your account.</p>
+      <h1>Verify your phone</h1>
+      <p className="sub">We&apos;ll text a one-time code to confirm your number. Your email is already verified.</p>
 
       <div className="col gap-4" style={{ marginTop: 16 }}>
-        <VerifyChannel kind="email" initial={p.emailValue} country={p.country} cc={p.cc} initialPhone={p.phone} verified={p.emailVerified} onVerified={() => p.setEmailVerified(true)} />
-        <VerifyChannel kind="phone" initial={p.emailValue} country={p.country} cc={p.cc} initialPhone={p.phone} verified={p.phoneVerified} onVerified={() => p.setPhoneVerified(true)} />
+        <PhoneVerify cc={p.cc} country={p.country} initialPhone={p.phone} verified={p.phoneVerified} onVerified={() => p.setPhoneVerified(true)} />
       </div>
 
       <div style={{ marginTop: 14 }}><RememberDevice checked={remember} onChange={setRemember} /></div>
@@ -334,40 +375,47 @@ function StepVerify(p: {
   );
 }
 
-type SendState = "idle" | "sending" | "ok" | "invalid_email" | "mailbox_full" | "bounce_risk" | "invalid_mobile";
-function VerifyChannel({ kind, initial, country, cc, initialPhone, verified, onVerified }: {
-  kind: "email" | "phone"; initial: string; country: typeof countryCodes[number]; cc: string; initialPhone: string;
+type SendState = "idle" | "sending" | "sent" | "invalid_mobile" | "send_error";
+function PhoneVerify({ cc, country, initialPhone, verified, onVerified }: {
+  cc: string; country: typeof countryCodes[number]; initialPhone: string;
   verified: boolean; onVerified: () => void;
 }) {
-  const [value, setValue] = useState(kind === "email" ? initial : initialPhone);
-  const [via, setVia] = useState<"primary" | "wa">("primary");
+  const { addPhone, verifyPhone } = useAuth();
+  const [value, setValue] = useState(initialPhone);
   const [state, setState] = useState<SendState>("idle");
-  const [otpError, setOtpError] = useState(false);
-  const primaryLabel = kind === "email" ? "Email" : "SMS";
+  const [otpError, setOtpError] = useState("");
+  const e164 = `${cc}${value.replace(/\D/g, "")}`;
 
-  function send() {
+  async function send() {
+    if (value.replace(/\D/g, "").length !== country.digits) { setState("invalid_mobile"); return; }
     setState("sending");
-    setTimeout(() => {
-      if (kind === "email") {
-        if (!EMAIL_RE.test(value)) return setState("invalid_email");
-        if (value.includes("full")) return setState("mailbox_full");
-        if (value.includes("bo")) return setState("bounce_risk");
-        return setState("ok");
-      } else {
-        if (value.replace(/\D/g, "").length !== country.digits) return setState("invalid_mobile");
-        return setState("ok");
-      }
-    }, 700);
+    setOtpError("");
+    try {
+      await addPhone(e164);         // Supabase → Twilio sends the SMS OTP
+      setState("sent");
+    } catch {
+      setState("send_error");
+    }
+  }
+
+  async function submit(code: string) {
+    setOtpError("");
+    try {
+      await verifyPhone(e164, code); // confirm the OTP (phone_change)
+      onVerified();
+    } catch {
+      setOtpError("That code didn't match. Check the SMS and try again.");
+    }
   }
 
   if (verified) {
     return (
       <div className="vchannel verified">
         <div className="row between">
-          <span className="row gap-2" style={{ fontWeight: 600, fontSize: 14 }}><Icon name={kind === "email" ? "mail" : "phone"} size={16} /> {kind === "email" ? "Email" : "Mobile"}</span>
+          <span className="row gap-2" style={{ fontWeight: 600, fontSize: 14 }}><Icon name="phone" size={16} /> Mobile</span>
           <Badge tone="green"><Icon name="check" size={12} /> Verified</Badge>
         </div>
-        <p className="faint" style={{ fontSize: 12.5, marginTop: 8 }}>{kind === "email" ? value : `${cc} ${value}`}</p>
+        <p className="faint" style={{ fontSize: 12.5, marginTop: 8 }}>{cc} {value}</p>
       </div>
     );
   }
@@ -375,46 +423,36 @@ function VerifyChannel({ kind, initial, country, cc, initialPhone, verified, onV
   return (
     <div className="vchannel">
       <div className="row between" style={{ marginBottom: 12 }}>
-        <span className="row gap-2" style={{ fontWeight: 600, fontSize: 14 }}><Icon name={kind === "email" ? "mail" : "phone"} size={16} /> {kind === "email" ? "Email address" : "Mobile number"}</span>
+        <span className="row gap-2" style={{ fontWeight: 600, fontSize: 14 }}><Icon name="phone" size={16} /> Mobile number</span>
       </div>
 
-      {kind === "email" ? (
-        <input className="input" value={value} onChange={(e) => { setValue(e.target.value); setState("idle"); }} placeholder="you@example.com" />
-      ) : (
-        <div className="phone-row">
-          <span className="input cc-select" style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 7 }}>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img className="cc-flag-img static" src={flagUrl(country.flag)} alt={country.name} width={22} height={16} />
-            {cc}
-          </span>
-          <input className="input grow" inputMode="numeric" value={value} onChange={(e) => { setValue(e.target.value.replace(/\D/g, "")); setState("idle"); }} placeholder={country.example} />
-        </div>
-      )}
+      <div className="phone-row">
+        <span className="input cc-select" style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 7 }}>
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img className="cc-flag-img static" src={flagUrl(country.flag)} alt={country.name} width={22} height={16} />
+          {cc}
+        </span>
+        <input className="input grow" inputMode="numeric" value={value} disabled={state === "sent"} onChange={(e) => { setValue(e.target.value.replace(/\D/g, "")); setState("idle"); }} placeholder={country.example} />
+      </div>
 
       <div className="row between" style={{ marginTop: 12 }}>
-        <div className="seg">
-          <button className={via === "primary" ? "on" : ""} onClick={() => setVia("primary")}>{primaryLabel}</button>
-          <button className={via === "wa" ? "on" : ""} onClick={() => setVia("wa")}><Icon name="whatsapp" size={14} /> WhatsApp</button>
-        </div>
-        <button className="btn btn-sm" style={{ width: "auto" }} disabled={state === "sending" || state === "ok"} onClick={send}>
-          {state === "sending" ? "Sending…" : "Send code"}
+        <span className="faint" style={{ fontSize: 12 }}>Standard SMS rates may apply.</span>
+        <button className="btn btn-sm" style={{ width: "auto" }} disabled={state === "sending" || state === "sent"} onClick={send}>
+          {state === "sending" ? "Sending…" : state === "sent" ? "Sent" : "Send code"}
         </button>
       </div>
 
-      {state === "ok" && <p className="faint" style={{ fontSize: 12, marginTop: 10 }}>OTP sent via {via === "wa" ? "WhatsApp" : primaryLabel}.</p>}
-      {state === "invalid_email" && <div style={{ marginTop: 10 }}><FlashNote tone="error">That email address looks invalid.</FlashNote></div>}
-      {state === "mailbox_full" && <div style={{ marginTop: 10 }}><FlashNote tone="warn">This mailbox appears full — try another email.</FlashNote></div>}
-      {state === "bounce_risk" && <div style={{ marginTop: 10 }}><FlashNote tone="warn">High bounce risk for this address.</FlashNote></div>}
+      {state === "sent" && <p className="faint" style={{ fontSize: 12, marginTop: 10 }}>Code sent to {cc} {value} by SMS.</p>}
       {state === "invalid_mobile" && <div style={{ marginTop: 10 }}><FlashNote tone="error">Enter a valid {country.digits}-digit mobile number.</FlashNote></div>}
+      {state === "send_error" && <div style={{ marginTop: 10 }}><FlashNote tone="error">Couldn&apos;t send the code. Check the number and try again.</FlashNote></div>}
 
-      {state === "ok" && (
+      {state === "sent" && (
         <div style={{ marginTop: 14 }}>
-          <OtpBoxes onComplete={(c) => { if (c === "000000") setOtpError(true); else { setOtpError(false); onVerified(); } }} error={otpError} />
-          {otpError && <div style={{ marginTop: 10 }}><FlashNote tone="error">Incorrect code.</FlashNote></div>}
-          <div style={{ marginTop: 12 }}><ResendLink seconds={60} /></div>
+          <OtpBoxes onComplete={submit} error={!!otpError} />
+          {otpError && <div style={{ marginTop: 10 }}><FlashNote tone="error">{otpError}</FlashNote></div>}
+          <div style={{ marginTop: 12 }}><ResendLink seconds={60} onResend={send} /></div>
         </div>
       )}
-      <p className="demo-hint">Demo: any 6 digits verify; “000000” fails. Email with “full”/“bo” shows send errors.</p>
     </div>
   );
 }
@@ -592,10 +630,10 @@ function AddressBlock({ idPrefix, onChange }: { idPrefix: string; onChange?: (a:
 }
 
 /* ====================== stepper ====================== */
-function Stepper({ current }: { current: number }) {
+function Stepper({ current, labels = STEPS }: { current: number; labels?: string[] }) {
   return (
     <div className="steps">
-      {STEPS.map((label, i) => {
+      {labels.map((label, i) => {
         const done = i < current, on = i === current;
         return (
           <div key={label} style={{ display: "contents" }}>