@dbx-tools/ui-email 0.6.41 → 0.6.42

package/index.ts

@@ -2,10 +2,12 @@
 // Regenerated from the exporting modules in ./src.
 // Hand edits are overwritten on the next watch; this file is read-only.
 
+export * as reactAuthGate from "./src/react/auth-gate.tsx";
 export * as reactEmailApprovalCard from "./src/react/email-approval-card.tsx";
 export * as reactEmailBody from "./src/react/email-body.tsx";
 export * as reactEmailCompose from "./src/react/email-compose.tsx";
 export * as reactFields from "./src/react/fields.ts";
+export type { AuthGateProps } from "./src/react/auth-gate.tsx";
 export { EmailPreview, EmailApprovalCard } from "./src/react/email-approval-card.tsx";
 export type { EmailPreviewProps, EmailApprovalCardProps } from "./src/react/email-approval-card.tsx";
 export { EmailBody } from "./src/react/email-body.tsx";

package/package.json

@@ -24,9 +24,9 @@
     "typescript": "^5.9.3"
   },
   "dependencies": {
-    "@dbx-tools/shared-core": "0.6.41",
-    "@dbx-tools/shared-email": "0.6.41",
-    "@dbx-tools/ui-appkit": "0.6.41",
+    "@dbx-tools/shared-core": "0.6.42",
+    "@dbx-tools/shared-email": "0.6.42",
+    "@dbx-tools/ui-appkit": "0.6.42",
     "lucide-react": "^0.554.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
@@ -36,7 +36,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.6.41",
+  "version": "0.6.42",
   "type": "module",
   "exports": {
     "./react": "./src/react/index.ts",

package/src/react/auth-gate.tsx

@@ -0,0 +1,190 @@
+import { Button, Input } from "@dbx-tools/ui-appkit/react";
+import type { AuthStatus } from "@dbx-tools/shared-email";
+import { MailIcon } from "lucide-react";
+import { type FormEvent, type ReactNode, useCallback, useEffect, useState } from "react";
+
+/**
+ * Email-OTP login gate for an AppKit app fronted by the `@dbx-tools/email` auth
+ * plugin (an app exposed publicly, e.g. through a portr tunnel that bypasses the
+ * Databricks OAuth proxy).
+ *
+ * Wrap the app in `<AuthGate>...</AuthGate>`. It calls the plugin's
+ * `/api/email/auth/*` routes: on mount it checks `status`; if the gate is
+ * disabled or the caller already has a session it renders `children`
+ * immediately, otherwise it shows the email -> code flow and reveals `children`
+ * only after a verified code sets the session cookie.
+ *
+ * Presentational + fetch only: the session lives in an HttpOnly cookie the
+ * browser sends automatically, so this component holds no token. Anti-enumeration
+ * is server-side (every request-code call reports success), so the UI always
+ * advances to the code step after "send code".
+ */
+
+/** Base path the email auth routes are mounted under. */
+const AUTH_BASE = "/api/email/auth";
+
+type Phase = "loading" | "email" | "code" | "authed" | "open";
+
+async function postJson<T>(path: string, body: unknown): Promise<T> {
+  const res = await fetch(path, {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify(body),
+    credentials: "same-origin",
+  });
+  return (await res.json()) as T;
+}
+
+/** Props for {@link AuthGate}. */
+export interface AuthGateProps {
+  /** The app to reveal once the caller is authenticated (or the gate is off). */
+  children: ReactNode;
+  /** Optional heading shown above the login form. */
+  title?: string;
+  /** Optional sub-text shown under the heading. */
+  description?: string;
+}
+
+/**
+ * Gate `children` behind the email-OTP login flow. Renders nothing meaningful
+ * until the initial `status` check resolves; then either the app (authed / gate
+ * off) or the two-step login.
+ */
+export function AuthGate({ children, title, description }: AuthGateProps): ReactNode {
+  const [phase, setPhase] = useState<Phase>("loading");
+  const [email, setEmail] = useState("");
+  const [code, setCode] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [notice, setNotice] = useState<string | null>(null);
+
+  // On mount, ask whether the gate is even on and whether we're already in.
+  useEffect(() => {
+    let cancelled = false;
+    void fetch(`${AUTH_BASE}/status`, { credentials: "same-origin" })
+      .then((res) => res.json() as Promise<AuthStatus>)
+      .then((status) => {
+        if (cancelled) return;
+        if (!status.enabled) setPhase("open");
+        else setPhase(status.authenticated ? "authed" : "email");
+      })
+      .catch(() => {
+        // A failed status check shouldn't hard-lock the UI; show the login form.
+        if (!cancelled) setPhase("email");
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const requestCode = useCallback(
+    async (e: FormEvent) => {
+      e.preventDefault();
+      if (!email.trim() || busy) return;
+      setBusy(true);
+      setNotice(null);
+      try {
+        const result = await postJson<{ ok: true; retryAfter?: number }>(`${AUTH_BASE}/request`, {
+          email: email.trim(),
+        });
+        // Anti-enumeration: always advance to the code step. Surface only a
+        // rate-limit cooldown, which leaks no allow-list state.
+        setNotice(
+          result.retryAfter
+            ? `Please wait ${result.retryAfter}s before requesting another code.`
+            : "If that address is allowed, a code is on its way.",
+        );
+        setPhase("code");
+      } finally {
+        setBusy(false);
+      }
+    },
+    [email, busy],
+  );
+
+  const verifyCode = useCallback(
+    async (e: FormEvent) => {
+      e.preventDefault();
+      if (!code.trim() || busy) return;
+      setBusy(true);
+      setNotice(null);
+      try {
+        const result = await postJson<{ ok: boolean; retryAfter?: number }>(`${AUTH_BASE}/verify`, {
+          email: email.trim(),
+          code: code.trim(),
+        });
+        if (result.ok) {
+          setPhase("authed");
+        } else {
+          setNotice(
+            result.retryAfter
+              ? `Too many attempts. Wait ${result.retryAfter}s and request a new code.`
+              : "That code didn't match. Check it or request a new one.",
+          );
+        }
+      } finally {
+        setBusy(false);
+      }
+    },
+    [code, email, busy],
+  );
+
+  if (phase === "authed" || phase === "open") return <>{children}</>;
+  if (phase === "loading") return null;
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background p-6">
+      <div className="w-full max-w-sm rounded-lg border border-border bg-card p-6 shadow-sm">
+        <div className="mb-4 flex items-center gap-2 text-foreground">
+          <MailIcon className="size-5" aria-hidden />
+          <h1 className="text-lg font-semibold">{title ?? "Sign in"}</h1>
+        </div>
+        <p className="mb-4 text-sm text-muted-foreground">
+          {description ?? "Enter your email to receive a one-time sign-in code."}
+        </p>
+
+        {phase === "email" ? (
+          <form onSubmit={requestCode} className="space-y-3">
+            <Input
+              type="email"
+              autoComplete="email"
+              placeholder="you@company.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+            />
+            <Button type="submit" disabled={busy} className="w-full">
+              {busy ? "Sending…" : "Send code"}
+            </Button>
+          </form>
+        ) : (
+          <form onSubmit={verifyCode} className="space-y-3">
+            <Input
+              inputMode="numeric"
+              autoComplete="one-time-code"
+              placeholder="6-digit code"
+              value={code}
+              onChange={(e) => setCode(e.target.value)}
+              required
+            />
+            <Button type="submit" disabled={busy} className="w-full">
+              {busy ? "Verifying…" : "Verify"}
+            </Button>
+            <button
+              type="button"
+              className="w-full text-center text-xs text-muted-foreground underline"
+              onClick={() => {
+                setPhase("email");
+                setCode("");
+                setNotice(null);
+              }}
+            >
+              Use a different email
+            </button>
+          </form>
+        )}
+
+        {notice ? <p className="mt-3 text-xs text-muted-foreground">{notice}</p> : null}
+      </div>
+    </div>
+  );
+}

package/src/react/index.ts

@@ -1,10 +1,12 @@
 // React surface for `@dbx-tools/ui-email`: a read-only Approve / Deny card for
-// the `send_email` tool's approval flow, the field preview it wraps, and a
-// standard editable compose view for use outside a chat bubble. All three share
-// `./fields` and `./email-body`, so a drafted message renders identically across
-// them. Styled with AppKit tokens.
+// the `send_email` tool's approval flow, the field preview it wraps, a standard
+// editable compose view for use outside a chat bubble, and the `AuthGate`
+// email-OTP login screen for an app fronted by the email auth plugin. The email
+// components share `./fields` and `./email-body`, so a drafted message renders
+// identically across them. Styled with AppKit tokens.
 
 export type { EmailAttachment, EmailMessage } from "@dbx-tools/shared-email";
+export { AuthGate, type AuthGateProps } from "./auth-gate.tsx";
 export {
   EmailApprovalCard,
   EmailPreview,