@omg-dev/sdk 0.4.24

package/src/auth/login.tsx

@@ -0,0 +1,267 @@
+// @omg-dev/sdk/auth — Drop-in login UI: email code + passkey.
+//
+// Sign-in is a 6-digit emailed code (no magic-link redirect): the session is
+// created in the same browser context that typed the code, so it works in
+// installed PWAs (iOS standalone PWAs can't share Safari's cookies) and when
+// the email is read on another device.
+//
+// Styled with shadcn's *semantic* Tailwind tokens (bg-card, bg-primary,
+// text-foreground, border, etc.) which resolve to CSS variables that
+// `shadcn init` writes into the app's globals.css. The component picks
+// up whatever theme the host app uses — light, dark, branded — without
+// importing any shadcn components (those live in apps/<x>/src/components/ui
+// and aren't shipped via npm).
+//
+// Apps that want a fully custom layout can compose `useAuth()` directly.
+
+import { useRef, useState, type FormEvent } from "react"
+import { useAuth } from "./react"
+import { mailAppForEmail } from "./mail-apps"
+
+// Dependency-free spinner — inherits color via `currentColor`, sized by the caller.
+function Spinner({ className = "" }: { className?: string }) {
+  return (
+    <svg
+      className={`animate-spin ${className}`}
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden="true"
+    >
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z" />
+    </svg>
+  )
+}
+
+const CODE_LENGTH = 6
+
+export function VibesLogin({
+  title = "Sign in",
+  subtitle = "Sign in to continue.",
+}: {
+  title?: string
+  subtitle?: string
+}) {
+  const { sendSignInCode, verifySignInCode, signInWithPasskey } = useAuth()
+  const [email, setEmail] = useState("")
+  const [stage, setStage] = useState<"email" | "code">("email")
+  const [code, setCode] = useState("")
+  const [error, setError] = useState<string | null>(null)
+  // Track *which* action is in flight so each button shows its own spinner.
+  const [pending, setPending] = useState<"send" | "verify" | "passkey" | null>(null)
+  const busy = pending !== null
+  // Guard against double-verify when the 6th digit lands while a submit is in flight.
+  const verifyingRef = useRef(false)
+
+  const mailApp = mailAppForEmail(email)
+
+  async function onSendCode(e: FormEvent) {
+    e.preventDefault()
+    if (!email.trim() || busy) return
+    setPending("send"); setError(null)
+    try {
+      await sendSignInCode(email.trim())
+      setCode("")
+      setStage("code")
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to send code")
+    } finally {
+      setPending(null)
+    }
+  }
+
+  async function verify(next: string) {
+    if (verifyingRef.current) return
+    verifyingRef.current = true
+    setPending("verify"); setError(null)
+    try {
+      await verifySignInCode(email.trim(), next)
+      // Success: the session signal refetches useSession; the guard/dialog
+      // hosting this component unmounts it. Nothing left to do here.
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Invalid code")
+      setCode("")
+    } finally {
+      verifyingRef.current = false
+      setPending(null)
+    }
+  }
+
+  function onCodeChange(raw: string) {
+    const digits = raw.replace(/\D/g, "").slice(0, CODE_LENGTH)
+    setCode(digits)
+    if (digits.length === CODE_LENGTH && !busy) void verify(digits)
+  }
+
+  async function onResend() {
+    if (busy) return
+    setPending("send"); setError(null)
+    try {
+      await sendSignInCode(email.trim())
+      setCode("")
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to send code")
+    } finally {
+      setPending(null)
+    }
+  }
+
+  async function onPasskey() {
+    if (busy) return
+    setPending("passkey"); setError(null)
+    try {
+      await signInWithPasskey()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Passkey sign-in failed")
+    } finally {
+      setPending(null)
+    }
+  }
+
+  return (
+    <div className="flex min-h-[60vh] w-full items-center justify-center p-6">
+      <div className="w-full max-w-sm space-y-6 rounded-2xl border bg-card p-6 text-card-foreground shadow-sm">
+        <div className="space-y-1.5">
+          <h2 className="text-lg font-semibold tracking-tight">{title}</h2>
+          {stage === "code" ? (
+            <p className="text-sm text-muted-foreground">
+              Enter the code sent to{" "}
+              <span className="font-medium text-foreground">{email.trim()}</span>.
+            </p>
+          ) : subtitle ? (
+            <p className="text-sm text-muted-foreground">{subtitle}</p>
+          ) : null}
+        </div>
+
+        {stage === "code" ? (
+          <div className="space-y-3">
+            <form
+              onSubmit={(e) => {
+                e.preventDefault()
+                if (code.length === CODE_LENGTH && !busy) void verify(code)
+              }}
+              className="space-y-3"
+            >
+              <input
+                type="text"
+                inputMode="numeric"
+                autoComplete="one-time-code"
+                pattern="[0-9]*"
+                maxLength={CODE_LENGTH}
+                placeholder="000000"
+                value={code}
+                onChange={(e) => onCodeChange(e.target.value)}
+                disabled={busy}
+                autoFocus
+                aria-label="Sign-in code"
+                className="flex h-12 w-full rounded-md border bg-background px-3 py-2 text-center font-mono text-xl tracking-[0.5em] shadow-sm placeholder:text-muted-foreground/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+              />
+              <button
+                type="submit"
+                disabled={busy || code.length !== CODE_LENGTH}
+                className="inline-flex h-10 w-full items-center justify-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+              >
+                {pending === "verify" ? (
+                  <>
+                    <Spinner className="h-4 w-4" />
+                    Signing in…
+                  </>
+                ) : (
+                  "Sign in"
+                )}
+              </button>
+            </form>
+
+            {mailApp ? (
+              <a
+                href={mailApp.url}
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex h-10 w-full items-center justify-center gap-2 rounded-md border bg-background px-4 py-2 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
+              >
+                {mailApp.label}
+              </a>
+            ) : null}
+
+            <div className="flex items-center justify-between text-xs text-muted-foreground">
+              <button
+                type="button"
+                onClick={onResend}
+                disabled={busy}
+                className="transition-colors hover:text-foreground disabled:opacity-50"
+              >
+                {pending === "send" ? "Sending…" : "Resend code"}
+              </button>
+              <button
+                type="button"
+                onClick={() => {
+                  setStage("email"); setCode(""); setError(null)
+                }}
+                disabled={busy}
+                className="transition-colors hover:text-foreground disabled:opacity-50"
+              >
+                Change email
+              </button>
+            </div>
+          </div>
+        ) : (
+          <form onSubmit={onSendCode} className="space-y-3">
+            <input
+              type="email"
+              required
+              placeholder="you@example.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              disabled={busy}
+              className="flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+            />
+            <button
+              type="submit"
+              disabled={busy}
+              className="inline-flex h-10 w-full items-center justify-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+            >
+              {pending === "send" ? (
+                <>
+                  <Spinner className="h-4 w-4" />
+                  Sending…
+                </>
+              ) : (
+                "Send code"
+              )}
+            </button>
+          </form>
+        )}
+
+        {stage === "email" ? (
+          <>
+            <div className="flex items-center gap-3 text-xs text-muted-foreground">
+              <div className="h-px flex-1 bg-border" />
+              or
+              <div className="h-px flex-1 bg-border" />
+            </div>
+
+            <button
+              type="button"
+              onClick={onPasskey}
+              disabled={busy}
+              className="inline-flex h-10 w-full items-center justify-center gap-2 rounded-md border bg-background px-4 py-2 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+            >
+              {pending === "passkey" ? (
+                <>
+                  <Spinner className="h-4 w-4" />
+                  Signing in…
+                </>
+              ) : (
+                "Sign in with passkey"
+              )}
+            </button>
+          </>
+        ) : null}
+
+        {error ? (
+          <div className="text-sm text-destructive">{error}</div>
+        ) : null}
+      </div>
+    </div>
+  )
+}

package/src/auth/mail-apps.ts

@@ -0,0 +1,52 @@
+// @omg-dev/sdk/auth — "Open mail app" helper.
+//
+// Maps an email address to its webmail inbox so the post-send screen can
+// offer a one-tap jump to wherever the code landed. Webmail URLs (not
+// platform URL schemes) on purpose: they work from regular tabs AND from
+// installed PWAs on every OS, and on mobile the OS hands them to the
+// installed native app when one is registered for the domain.
+
+export interface MailApp {
+  /** Stable provider key, e.g. "gmail" */
+  provider: string
+  /** Short button label, e.g. "Open Gmail" */
+  label: string
+  /** Webmail inbox URL */
+  url: string
+}
+
+const PROVIDERS: Array<{ pattern: RegExp; app: MailApp }> = [
+  {
+    pattern: /^(gmail|googlemail)\./,
+    app: { provider: "gmail", label: "Open Gmail", url: "https://mail.google.com/mail/u/0/" },
+  },
+  {
+    pattern: /^(outlook|hotmail|live|msn)\./,
+    app: { provider: "outlook", label: "Open Outlook", url: "https://outlook.live.com/mail/" },
+  },
+  {
+    pattern: /^(yahoo|ymail|rocketmail)\./,
+    app: { provider: "yahoo", label: "Open Yahoo", url: "https://mail.yahoo.com/" },
+  },
+  {
+    pattern: /^(icloud|me|mac)\./,
+    app: { provider: "icloud", label: "Open iCloud Mail", url: "https://www.icloud.com/mail/" },
+  },
+  {
+    pattern: /^(proton|protonmail|pm)\./,
+    app: { provider: "proton", label: "Open Proton", url: "https://mail.proton.me/" },
+  },
+]
+
+/**
+ * Returns the webmail app for the address's provider, or null for custom
+ * domains (no reliable way to know where their mail is hosted).
+ */
+export function mailAppForEmail(email: string): MailApp | null {
+  const domain = email.split("@")[1]?.toLowerCase().trim() ?? ""
+  if (!domain) return null
+  for (const { pattern, app } of PROVIDERS) {
+    if (pattern.test(domain)) return app
+  }
+  return null
+}

package/src/auth/react.tsx

@@ -0,0 +1,248 @@
+// @omg-dev/sdk/auth — React provider and hooks
+
+import { createContext, useContext, useEffect, useState, useCallback, useMemo, type ReactNode } from "react"
+import type { VibesAuthClient, VibesUser } from "./client"
+import { createVibesAuth, deriveAppId } from "./client"
+import { setAuthContext } from "./bridge"
+import { VibesAuthAutoPrompt } from "./auto-prompt"
+
+export interface VibesAuthContextValue {
+  /** Current user, or null if not signed in */
+  user: VibesUser | null
+  /** Whether the session is still loading */
+  loading: boolean
+  /** Current JWT token for API calls */
+  token: string | null
+  /** Sign out and clear session */
+  signOut: () => Promise<void>
+  /** Refresh the JWT token */
+  refreshToken: () => Promise<string | null>
+  /** The underlying auth client for advanced use (magic link, passkey sign-in) */
+  client: VibesAuthClient
+}
+
+const VibesAuthContext = createContext<VibesAuthContextValue | null>(null)
+
+export function VibesAuthProvider({
+  client: providedClient,
+  appId,
+  authUrl,
+  autoPrompt = true,
+  children,
+}: {
+  /** Pre-built auth client. When omitted, one is built from `appId`/`authUrl`
+   * (or auto-derived from window.location.host for *.omgs.app /
+   * *.apps.omg.dev). */
+  client?: VibesAuthClient
+  appId?: string
+  authUrl?: string
+  /**
+   * Auto-open the login UI whenever any SDK request hits the server's
+   * auth-required signal (REST 401 / WS `auth_required`). On by default —
+   * pass `false` to manage sign-in entirely through <VibesAuthGuard> /
+   * <VibesLogin> / useAuth() instead.
+   */
+  autoPrompt?: boolean
+  children: ReactNode
+}) {
+  const client = useMemo(() => {
+    if (providedClient) return providedClient
+    const id = appId ?? deriveAppId() ?? "local"
+    return createVibesAuth({ appId: id, authUrl })
+  }, [providedClient, appId, authUrl])
+
+  const { data: session, isPending } = client.authClient.useSession()
+  const [token, setToken] = useState<string | null>(null)
+  // True once the session check + first getToken() attempt have settled. Data
+  // hooks read this (via the bridge) to tell a transient startup
+  // `auth_required` apart from a genuinely signed-out user.
+  const [authReady, setAuthReady] = useState(false)
+
+  // Fetch JWT when session becomes available. Gate on isPending so we don't
+  // mark auth "ready" (or clear the token) while the session is still
+  // resolving — that window is exactly when the token race surfaced a scary
+  // error before.
+  useEffect(() => {
+    if (isPending) return
+    if (!session?.user) {
+      setToken(null)
+      client.clearToken()
+      setAuthReady(true)
+      return
+    }
+    let cancelled = false
+    client.getToken().then((t) => {
+      if (cancelled) return
+      setToken(t)
+      setAuthReady(true)
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [isPending, session?.user?.id, client])
+
+  // Mirror auth state into the module-scoped bridge so useCollection (which
+  // doesn't take a client prop) can attach Authorization on every fetch.
+  useEffect(() => {
+    setAuthContext({
+      user: session?.user
+        ? {
+            id: session.user.id,
+            email: session.user.email,
+            name: session.user.name ?? undefined,
+          }
+        : null,
+      token,
+      authReady,
+    })
+  }, [session?.user?.id, session?.user?.email, session?.user?.name, token, authReady])
+
+  const signOut = useCallback(async () => {
+    await client.authClient.signOut()
+    client.clearToken()
+    setToken(null)
+  }, [client])
+
+  const refreshToken = useCallback(async () => {
+    const t = await client.getToken()
+    setToken(t)
+    return t
+  }, [client])
+
+  const user: VibesUser | null = session?.user
+    ? {
+        id: session.user.id,
+        email: session.user.email,
+        name: session.user.name ?? undefined,
+      }
+    : null
+
+  const value = useMemo<VibesAuthContextValue>(
+    () => ({ user, loading: isPending, token, signOut, refreshToken, client }),
+    [user?.id, isPending, token, signOut, refreshToken, client]
+  )
+
+  return (
+    <VibesAuthContext.Provider value={value}>
+      {children}
+      {autoPrompt ? <VibesAuthAutoPrompt /> : null}
+    </VibesAuthContext.Provider>
+  )
+}
+
+export function useVibesAuth(): VibesAuthContextValue {
+  const ctx = useContext(VibesAuthContext)
+  if (!ctx) {
+    throw new Error("useVibesAuth must be used within <VibesAuthProvider>")
+  }
+  return ctx
+}
+
+/**
+ * Hook that returns just the JWT token, refreshing it if needed.
+ * Useful for passing to fetch calls.
+ */
+export function useVibesToken(): string | null {
+  const { token } = useVibesAuth()
+  return token
+}
+
+// ── Friendly aliases ──────────────────────────────────────────────────────────
+// `useUser` and `useAuth` map to the documented public surface; they thin-wrap
+// `useVibesAuth` so app code reads naturally without renaming.
+
+export function useUser(): VibesUser | null {
+  return useVibesAuth().user
+}
+
+export interface UseAuthReturn {
+  user: VibesUser | null
+  loading: boolean
+  token: string | null
+  signOut: () => Promise<void>
+  /** Send a magic-link email. Resolves once the request is accepted. */
+  signInWithMagicLink: (email: string, callbackURL?: string) => Promise<void>
+  /**
+   * Email a 6-digit sign-in code. Pair with `verifySignInCode` — the session
+   * is created in-place (no redirect), so it works in installed PWAs and
+   * across devices where a clicked link wouldn't.
+   */
+  sendSignInCode: (email: string) => Promise<void>
+  /** Verify the emailed code and sign in. Rejects on a wrong/expired code. */
+  verifySignInCode: (email: string, code: string) => Promise<void>
+  /** Trigger passkey sign-in. Browser prompts for credential. */
+  signInWithPasskey: () => Promise<void>
+}
+
+export function useAuth(): UseAuthReturn {
+  const { user, loading, token, signOut, client } = useVibesAuth()
+
+  const signInWithMagicLink = useCallback(
+    async (email: string, callbackURL?: string) => {
+      const cb = callbackURL ?? (typeof window !== "undefined" ? window.location.href : undefined)
+      await fetch(`${client.authUrl}/api/auth/sign-in/magic-link`, {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, callbackURL: cb }),
+      })
+    },
+    [client]
+  )
+
+  // Go through the better-auth client (not raw fetch) so the email-otp
+  // plugin's atomListeners fire $sessionSignal on verify and useSession
+  // refetches immediately.
+  const sendSignInCode = useCallback(
+    async (email: string) => {
+      const c = client.authClient as unknown as {
+        emailOtp?: {
+          sendVerificationOtp?: (args: { email: string; type: "sign-in" }) =>
+            Promise<{ error?: { message?: string } | null }>
+        }
+      }
+      if (typeof c.emailOtp?.sendVerificationOtp !== "function") {
+        throw new Error("Email OTP plugin not loaded")
+      }
+      const res = await c.emailOtp.sendVerificationOtp({ email, type: "sign-in" })
+      if (res.error) throw new Error(res.error.message ?? "Failed to send code")
+    },
+    [client]
+  )
+
+  const verifySignInCode = useCallback(
+    async (email: string, code: string) => {
+      const c = client.authClient as unknown as {
+        signIn?: {
+          emailOtp?: (args: { email: string; otp: string }) =>
+            Promise<{ error?: { message?: string; code?: string } | null }>
+        }
+      }
+      if (typeof c.signIn?.emailOtp !== "function") {
+        throw new Error("Email OTP plugin not loaded")
+      }
+      const res = await c.signIn.emailOtp({ email, otp: code })
+      if (res.error) {
+        const code_ = res.error.code
+        if (code_ === "OTP_EXPIRED") throw new Error("That code expired — request a new one.")
+        if (code_ === "TOO_MANY_ATTEMPTS") throw new Error("Too many attempts — request a new code.")
+        throw new Error(res.error.message ?? "Invalid code")
+      }
+    },
+    [client]
+  )
+
+  const signInWithPasskey = useCallback(async () => {
+    // better-auth client exposes signIn.passkey when the plugin is loaded.
+    const c = client.authClient as unknown as {
+      signIn?: { passkey?: () => Promise<unknown> }
+    }
+    if (typeof c.signIn?.passkey === "function") {
+      await c.signIn.passkey()
+    } else {
+      throw new Error("Passkey plugin not loaded")
+    }
+  }, [client])
+
+  return { user, loading, token, signOut, signInWithMagicLink, sendSignInCode, verifySignInCode, signInWithPasskey }
+}