@nominalso/vibe-auth 0.2.4 → 0.3.0

package/dist/index.d.ts

@@ -202,9 +202,34 @@ interface InteractiveAuth {
     signInInteractive(): Promise<SignInResult>;
 }
 
-/** The subset of `VibeAppBridge` this module needs — structural, not a hard dependency. */
+/**
+ * The subset of `VibeAppBridge` this module needs — structural, not a hard
+ * dependency.
+ *
+ * `onAuthChange` is **optional in the type and required at runtime**, which
+ * looks wrong until you see what forced it: the method is `@internal` in
+ * `@nominalso/vibe-bridge` and `stripInternal` removes it from that package's
+ * published `.d.ts`. A real `VibeAppBridge` therefore does not structurally
+ * satisfy a type that demands it, and `wireHostAuth(bridge)` stopped
+ * compiling for every app on bridge >= 0.12 — the exact combination the
+ * compatibility promise covers.
+ *
+ * Optional makes the call compile again; `wireHostAuth` then throws if the
+ * method really is absent, so the mistake is loud rather than a silent no-op
+ * that drops host-session lockstep (a user staying signed in after a Nominal
+ * logout, which is not a failure to discover in production).
+ */
 interface AuthBridgeLike {
-    onAuthChange(cb: (auth: {
+    /**
+     * Not used here — it anchors the type. With `onAuthChange` optional this
+     * interface would have no required member, making it a *weak type*: TypeScript
+     * then demands the argument share at least one property, and a `VibeAppBridge`
+     * (whose `onAuthChange` is stripped) shares none, so the call still would not
+     * compile. `connect` is public on every bridge, so requiring it fixes that and
+     * says what we actually mean — "this is a bridge".
+     */
+    connect(): Promise<unknown>;
+    onAuthChange?(cb: (auth: {
         authenticated: boolean;
         userId?: string;
         tenant?: string;
@@ -322,6 +347,30 @@ interface WireVibeAppOptions<Ctx extends HostContextLike> {
      */
     onSubrouteRequest?: (subroute: string) => void;
 }
+/**
+ * Why the handshake ended the way it did.
+ *
+ * `hostContext` resolving `null` is deliberately not an error — a standalone
+ * preview is the normal way to run a Vibe App outside Nominal. But it collapses
+ * two situations an app usually wants to treat differently:
+ *
+ * - **`standalone`** — nothing was ever going to answer (not embedded, or the
+ *   OAuth callback document). Expected. Render the "open this from Nominal"
+ *   state, quietly.
+ * - **`failed`** — the app *is* embedded and the host did not answer. A real
+ *   fault worth surfacing, with `error` carrying the underlying `BridgeError`.
+ *
+ * Without this, an app that shows an error on a null context cries wolf on
+ * every dev load, and one that stays silent hides genuine breakage.
+ */
+type HostOutcome = {
+    kind: 'connected';
+} | {
+    kind: 'standalone';
+} | {
+    kind: 'failed';
+    error: unknown;
+};
 interface VibeAppWiring<Ctx extends HostContextLike> {
     /** The bridge you passed in, returned so one import covers the whole module. */
     bridge: VibeBridgeLike;
@@ -332,6 +381,19 @@ interface VibeAppWiring<Ctx extends HostContextLike> {
      * to interactive sign-in on its own.
      */
     hostContext: Promise<Ctx | null>;
+    /**
+     * Why the handshake ended as it did — the distinction `hostContext`'s `null`
+     * cannot carry. Settles at the same time as `hostContext`, and like it,
+     * **never rejects**.
+     *
+     * @example
+     * ```ts
+     * const outcome = await hostOutcome
+     * if (outcome.kind === 'failed') showError(outcome.error)   // embedded, host silent
+     * else if (outcome.kind === 'standalone') showOpenFromNominal()
+     * ```
+     */
+    hostOutcome: Promise<HostOutcome>;
     /** Current host context; `null` before connect resolves and when standalone. */
     getHostContext(): Ctx | null;
     /** Subscribe to context changes. Returns an unsubscribe function. */
@@ -452,4 +514,4 @@ declare function createVibeAuth(userConfig: VibeAuthConfig): VibeAuth;
 
 declare const RESULT_MESSAGE_TYPE = "silent-auth-result";
 
-export { type AuthBridgeLike, type AuthGateProps, type AuthResult, AuthResultKind, type HostContextLike, type HostPrincipal, RESULT_MESSAGE_TYPE, type ResetPayloadLike, type ResolvedVibeAuthConfig, type ResolvedVibeAuthTimeouts, type SignInAuthenticated, type SignInFailed, SignInFailureReason, SignInKind, type SignInRedirecting, type SignInResult, type VibeAppWiring, type VibeAuth, type VibeAuthConfig, type VibeAuthTimeouts, type VibeBridgeLike, type WireVibeAppOptions, createVibeAuth };
+export { type AuthBridgeLike, type AuthGateProps, type AuthResult, AuthResultKind, type HostContextLike, type HostOutcome, type HostPrincipal, RESULT_MESSAGE_TYPE, type ResetPayloadLike, type ResolvedVibeAuthConfig, type ResolvedVibeAuthTimeouts, type SignInAuthenticated, type SignInFailed, SignInFailureReason, SignInKind, type SignInRedirecting, type SignInResult, type VibeAppWiring, type VibeAuth, type VibeAuthConfig, type VibeAuthTimeouts, type VibeBridgeLike, type WireVibeAppOptions, createVibeAuth };

package/dist/index.js

@@ -472,28 +472,108 @@ function createAuthGate(config, silentAuth, interactiveAuth, hostAuth) {
   const { supabase, callbackPath, timeouts } = config;
   const RETURNING_FROM_OAUTH = typeof window !== "undefined" && (new URLSearchParams(window.location.search).has("code") || window.location.hash.includes("access_token"));
   const IS_CALLBACK_PATH = typeof window !== "undefined" && window.location.pathname === callbackPath;
+  const SPIN_CLASS = "nominal-vibe-auth-spin";
+  function Spinner({ size = 18 }) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("style", { children: `
+          @keyframes ${SPIN_CLASS} { to { transform: rotate(360deg) } }
+          .${SPIN_CLASS} { animation: ${SPIN_CLASS} 700ms linear infinite; transform-origin: 50% 50% }
+          @media (prefers-reduced-motion: reduce) { .${SPIN_CLASS} { animation-duration: 2.4s } }
+        ` }),
+      /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          className: SPIN_CLASS,
+          width: size,
+          height: size,
+          viewBox: "0 0 24 24",
+          fill: "none",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: "12",
+                cy: "12",
+                r: "9",
+                stroke: "currentColor",
+                strokeOpacity: "0.18",
+                strokeWidth: "3"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M21 12a9 9 0 0 0-9-9",
+                stroke: "currentColor",
+                strokeWidth: "3",
+                strokeLinecap: "round"
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+  const SCREEN = {
+    display: "grid",
+    placeItems: "center",
+    height: "100vh",
+    fontFamily: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+    color: "#3f3f46",
+    background: "#fafafa"
+  };
   function DefaultFullScreenLoader() {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { style: SCREEN, children: /* @__PURE__ */ jsxs(
       "div",
       {
-        style: { display: "grid", placeItems: "center", height: "100vh", fontFamily: "sans-serif" },
-        children: "Fetching your data\u2026"
+        style: { display: "flex", alignItems: "center", gap: 10, fontSize: 14 },
+        role: "status",
+        "aria-live": "polite",
+        children: [
+          /* @__PURE__ */ jsx(Spinner, {}),
+          /* @__PURE__ */ jsx("span", { children: "Fetching your data\u2026" })
+        ]
       }
-    );
+    ) });
   }
   function DefaultSignInScreen() {
     const [pending, setPending] = useState(false);
     const [failure, setFailure] = useState(null);
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { style: SCREEN, children: /* @__PURE__ */ jsxs(
       "div",
       {
-        style: { display: "grid", placeItems: "center", height: "100vh", fontFamily: "sans-serif" },
-        children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
-          /* @__PURE__ */ jsx(
+        style: {
+          textAlign: "center",
+          background: "#fff",
+          border: "1px solid #e4e4e7",
+          borderRadius: 12,
+          padding: "28px 32px",
+          boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
+          maxWidth: 340
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
             "button",
             {
               type: "button",
               disabled: pending,
+              style: {
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: 8,
+                minWidth: 168,
+                padding: "10px 20px",
+                fontFamily: "inherit",
+                fontSize: 14,
+                fontWeight: 500,
+                color: "#fff",
+                background: pending ? "#71717a" : "#18181b",
+                border: "none",
+                borderRadius: 8,
+                cursor: pending ? "default" : "pointer"
+              },
               onClick: () => {
                 setPending(true);
                 setFailure(null);
@@ -502,13 +582,16 @@ function createAuthGate(config, silentAuth, interactiveAuth, hostAuth) {
                   if (result.kind !== "redirecting" /* Redirecting */) setPending(false);
                 });
               },
-              children: pending ? "Opening sign-in\u2026" : "Sign in"
+              children: [
+                pending ? /* @__PURE__ */ jsx(Spinner, { size: 15 }) : null,
+                pending ? "Opening sign-in\u2026" : "Sign in"
+              ]
             }
           ),
-          failure ? /* @__PURE__ */ jsx("p", { style: { fontSize: 12, marginTop: 8 }, children: failure === "popup-blocked" /* PopupBlocked */ ? "Your browser blocked the sign-in popup. Allow popups for this site and try again." : "Sign-in didn't complete. Please try again." }) : null
-        ] })
+          failure ? /* @__PURE__ */ jsx("p", { style: { fontSize: 12.5, lineHeight: 1.5, marginTop: 14, color: "#a1a1aa" }, children: failure === "popup-blocked" /* PopupBlocked */ ? "Your browser blocked the sign-in popup. Allow popups for this site and try again." : "Sign-in didn't complete. Please try again." }) : null
+        ]
       }
-    );
+    ) });
   }
   function AuthGate({ children, signInScreen, loader }) {
     const [isCallback, setIsCallback] = useState(false);
@@ -674,6 +757,11 @@ function createHostAuth(config, silentAuth) {
     for (const listener of [...seedListeners]) listener(principal);
   }
   function wireHostAuth(bridge) {
+    if (typeof bridge?.onAuthChange !== "function") {
+      throw new TypeError(
+        "[vibe-auth] wireHostAuth(bridge) requires a VibeAppBridge \u2014 the object passed has no onAuthChange. Prefer wireVibeApp(bridge), which performs the whole handshake."
+      );
+    }
     hostWired = true;
     return bridge.onAuthChange((auth) => {
       if (!auth.authenticated) {
@@ -704,6 +792,15 @@ function createHostAuth(config, silentAuth) {
 }
 
 // src/wireVibeApp.ts
+function classifyConnectFailure(error) {
+  const code = error?.code;
+  if (code === "PARENT_ORIGIN_UNRESOLVED") return { kind: "standalone" };
+  if (code === "TIMEOUT") {
+    const framed = typeof window !== "undefined" && window.parent !== window;
+    return framed ? { kind: "failed", error } : { kind: "standalone" };
+  }
+  return { kind: "failed", error };
+}
 function createWireVibeApp(config, hostAuth) {
   return function wireVibeApp(bridge, options = {}) {
     const listeners = /* @__PURE__ */ new Set();
@@ -719,21 +816,31 @@ function createWireVibeApp(config, hostAuth) {
     if (options.onSubrouteRequest) bridge.onSubrouteRequest?.(options.onSubrouteRequest);
     hostAuth.wireHostAuth(bridge);
     const noHost = typeof window === "undefined" || window.location.pathname === config.callbackPath;
-    const hostContext = noHost ? Promise.resolve(null) : bridge.connect().then((ctx) => {
+    let settleOutcome;
+    const hostOutcome = new Promise((resolve) => {
+      settleOutcome = resolve;
+    });
+    const hostContext = noHost ? (settleOutcome({ kind: "standalone" }), Promise.resolve(null)) : bridge.connect().then((ctx) => {
       const next = ctx;
       hostAuth.seedLastUserId(next.user.id, next.tenant);
       if (next.enableDataReset && options.onDataReset) {
         bridge.onDataReset?.(options.onDataReset);
       }
       publish(next);
+      settleOutcome({ kind: "connected" });
       return next;
     }).catch((error) => {
-      console.warn("[vibe-auth] host connect failed", error);
+      const outcome = classifyConnectFailure(error);
+      if (outcome.kind === "failed") {
+        console.warn("[vibe-auth] host connect failed", error);
+      }
+      settleOutcome(outcome);
       return null;
     });
     return {
       bridge,
       hostContext,
+      hostOutcome,
       getHostContext: () => current,
       subscribeHostContext: (listener) => {
         listeners.add(listener);