@segmentstream-cloud/app 0.2.0 → 0.3.0

package/dist/ui/store.js

@@ -0,0 +1,155 @@
+"use client";
+import { createAuthClient } from "@neondatabase/auth/next";
+import { NOT_INVITED, SegmentStreamApiError, apiErrorFrom, readJson } from "../errors.js";
+import { ME_PATH, parseMe } from "../me.js";
+/** The Neon Auth API the app serves from `app/src/app/api/auth/[...path]/route.ts`. */
+export const AUTH_API_PATH = "/api/auth";
+/** The app's sign-in page. */
+export const SIGN_IN_PAGE = "/sign-in";
+export { NOT_INVITED };
+export const LOADING_USER = { status: "loading", user: null, error: null };
+export const SIGNED_OUT_USER = { status: "signed-out", user: null, error: null };
+const SERVER_SNAPSHOT = { session: { status: "loading" }, users: new Map() };
+let snapshot = SERVER_SNAPSHOT;
+let sessionLoad = null;
+const loadingUsers = new Set();
+const listeners = new Set();
+let client;
+/** The Neon Auth browser client, created on first use. It talks to the app's `/api/auth`. */
+export function authClient() {
+    client ??= createAuthClient();
+    return client;
+}
+function update(change) {
+    snapshot = { ...snapshot, ...change };
+    for (const listener of listeners) {
+        listener();
+    }
+}
+export function subscribe(listener) {
+    listeners.add(listener);
+    sessionLoad ??= loadSession();
+    return () => {
+        listeners.delete(listener);
+    };
+}
+export function getSnapshot() {
+    return snapshot;
+}
+export function getServerSnapshot() {
+    return SERVER_SNAPSHOT;
+}
+/** Reads the session again, after signing in or out. */
+export function refreshSession() {
+    sessionLoad = loadSession();
+    return sessionLoad;
+}
+/** Forgets the session and every `/me` answer, after signing out. */
+export function clearSession() {
+    loadingUsers.clear();
+    update({ session: { status: "signed-out" }, users: new Map() });
+}
+async function loadSession() {
+    let session;
+    try {
+        const response = await fetch(`${AUTH_API_PATH}/get-session`, {
+            credentials: "same-origin",
+            cache: "no-store",
+            headers: { accept: "application/json" },
+        });
+        session = response.ok
+            ? sessionFrom(await readJson(response))
+            : response.status === 401
+                ? { status: "signed-out" }
+                : { status: "unavailable" };
+    }
+    catch {
+        session = { status: "unavailable" };
+    }
+    update({ session });
+}
+function sessionFrom(payload) {
+    if (typeof payload !== "object" || payload === null) {
+        return { status: "signed-out" };
+    }
+    const { session, user } = payload;
+    if (typeof session !== "object" ||
+        session === null ||
+        typeof user !== "object" ||
+        user === null) {
+        return { status: "signed-out" };
+    }
+    const { id: sessionId } = session;
+    const { id, email, name } = user;
+    if (typeof sessionId !== "string" || typeof id !== "string") {
+        return { status: "signed-out" };
+    }
+    return {
+        status: "signed-in",
+        sessionId,
+        user: {
+            id,
+            email: typeof email === "string" ? email : null,
+            name: typeof name === "string" ? name : null,
+        },
+    };
+}
+/** Starts loading `/me` for a session unless it is loaded or loading. */
+export function ensureUser(sessionId) {
+    if (snapshot.users.has(sessionId) || loadingUsers.has(sessionId)) {
+        return;
+    }
+    loadingUsers.add(sessionId);
+    void loadUser().then((state) => {
+        if (!loadingUsers.delete(sessionId)) {
+            return; // Signed out meanwhile.
+        }
+        update({ users: new Map(snapshot.users).set(sessionId, state) });
+    });
+}
+/** The session's JWT from Neon Auth, then the ontology's account of the user. */
+async function loadUser() {
+    try {
+        const tokenResponse = await fetch(`${AUTH_API_PATH}/token`, {
+            credentials: "same-origin",
+            cache: "no-store",
+            headers: { accept: "application/json" },
+        });
+        if (tokenResponse.status === 401) {
+            return SIGNED_OUT_USER;
+        }
+        const tokenPayload = await readJson(tokenResponse);
+        const token = typeof tokenPayload === "object" && tokenPayload !== null
+            ? tokenPayload.token
+            : undefined;
+        if (!tokenResponse.ok || typeof token !== "string" || token === "") {
+            return failed("auth_unavailable", 503, "Neon Auth did not issue a token. Try again.");
+        }
+        const response = await fetch(ME_PATH, {
+            cache: "no-store",
+            headers: { accept: "application/json", authorization: `Bearer ${token}` },
+        });
+        const payload = await readJson(response);
+        if (!response.ok) {
+            return {
+                status: "error",
+                user: null,
+                error: apiErrorFrom(response.status, payload, "The ontology service rejected the user."),
+            };
+        }
+        const user = parseMe(payload);
+        return user === null
+            ? failed("ontology_invalid_response", 502, "GET /api/ontology/me answered an unexpected body.")
+            : { status: "signed-in", user, error: null };
+    }
+    catch (error) {
+        return failed("ontology_unreachable", 503, "The app's ontology could not be reached.", error);
+    }
+}
+function failed(code, status, detail, cause) {
+    return {
+        status: "error",
+        user: null,
+        error: new SegmentStreamApiError({ code, status, detail, retryable: true, cause }),
+    };
+}

package/dist/ui/styles.css

@@ -0,0 +1,249 @@
+/*
+ * @segmentstream-cloud/app/ui: neutral styles for the sign-in form and the user menu.
+ * Each rule is one class, so the app's own class selectors override it; the custom properties
+ * below change colours, radius and font in one place.
+ */
+
+:root {
+  --ss-font: inherit;
+  --ss-text: #111111;
+  --ss-muted: #5f5f5f;
+  --ss-surface: #ffffff;
+  --ss-border: #d4d4d4;
+  --ss-accent: #111111;
+  --ss-accent-text: #ffffff;
+  --ss-danger: #b42318;
+  --ss-focus: #2563eb;
+  --ss-radius: 0.5rem;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --ss-text: #f5f5f5;
+    --ss-muted: #a3a3a3;
+    --ss-surface: #171717;
+    --ss-border: #3f3f3f;
+    --ss-accent: #f5f5f5;
+    --ss-accent-text: #111111;
+    --ss-danger: #f97066;
+    --ss-focus: #60a5fa;
+  }
+}
+
+.ss-card {
+  box-sizing: border-box;
+  width: min(24rem, 100%);
+  margin: 0 auto;
+  padding: 2rem;
+  border: 1px solid var(--ss-border);
+  border-radius: calc(var(--ss-radius) * 2);
+  background: var(--ss-surface);
+  color: var(--ss-text);
+  font-family: var(--ss-font);
+}
+
+.ss-title {
+  margin: 0 0 0.5rem;
+  font-size: 1.5rem;
+  line-height: 1.25;
+}
+
+.ss-text {
+  margin: 0 0 1.25rem;
+  color: var(--ss-muted);
+  line-height: 1.5;
+}
+
+.ss-text strong {
+  color: var(--ss-text);
+}
+
+.ss-form {
+  display: grid;
+  gap: 1rem;
+}
+
+.ss-field {
+  display: grid;
+  gap: 0.375rem;
+}
+
+.ss-label {
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.ss-input {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0.625rem 0.75rem;
+  border: 1px solid var(--ss-border);
+  border-radius: var(--ss-radius);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+}
+
+.ss-input--code {
+  font-size: 1.5rem;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.5em;
+  text-align: center;
+}
+
+.ss-input[aria-invalid="true"] {
+  border-color: var(--ss-danger);
+}
+
+.ss-input:focus-visible,
+.ss-button:focus-visible,
+.ss-link:focus-visible,
+.ss-user-menu-trigger:focus-visible {
+  outline: 2px solid var(--ss-focus);
+  outline-offset: 2px;
+}
+
+.ss-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 0.625rem 1rem;
+  border: 1px solid var(--ss-accent);
+  border-radius: var(--ss-radius);
+  background: var(--ss-accent);
+  color: var(--ss-accent-text);
+  font: inherit;
+  font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.ss-button--secondary {
+  background: transparent;
+  color: var(--ss-text);
+  border-color: var(--ss-border);
+}
+
+.ss-button:disabled,
+.ss-link:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.ss-link {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--ss-text);
+  font: inherit;
+  font-size: 0.875rem;
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+  cursor: pointer;
+}
+
+.ss-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  align-items: center;
+  margin-top: 1.25rem;
+}
+
+.ss-error {
+  margin: 0;
+  color: var(--ss-danger);
+  font-size: 0.875rem;
+}
+
+.ss-notice {
+  margin: 0;
+  color: var(--ss-muted);
+  font-size: 0.875rem;
+}
+
+.ss-user-menu {
+  position: relative;
+  display: inline-block;
+  color: var(--ss-text);
+  font-family: var(--ss-font);
+}
+
+.ss-user-menu-trigger {
+  display: inline-flex;
+  gap: 0.5rem;
+  align-items: center;
+  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
+  border: 1px solid var(--ss-border);
+  border-radius: 999px;
+  cursor: pointer;
+  list-style: none;
+}
+
+.ss-user-menu-trigger::-webkit-details-marker {
+  display: none;
+}
+
+.ss-avatar {
+  display: inline-grid;
+  place-items: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  background: var(--ss-accent);
+  color: var(--ss-accent-text);
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
+.ss-user-menu-label {
+  max-width: 12rem;
+  overflow: hidden;
+  font-size: 0.875rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ss-user-menu-panel {
+  position: absolute;
+  right: 0;
+  z-index: 10;
+  display: grid;
+  gap: 0.5rem;
+  min-width: 14rem;
+  margin-top: 0.5rem;
+  padding: 1rem;
+  border: 1px solid var(--ss-border);
+  border-radius: var(--ss-radius);
+  background: var(--ss-surface);
+  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
+}
+
+.ss-user-menu-name {
+  margin: 0;
+  font-weight: 600;
+}
+
+.ss-user-menu-email {
+  margin: 0;
+  color: var(--ss-muted);
+  font-size: 0.875rem;
+  overflow-wrap: anywhere;
+}
+
+.ss-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ss-badge {
+  padding: 0.125rem 0.5rem;
+  border: 1px solid var(--ss-border);
+  border-radius: 999px;
+  font-size: 0.75rem;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@segmentstream-cloud/app",
-  "version": "0.2.0",
-  "description": "Sign-in, sessions, and warehouse data access for SegmentStream workspace apps built with Next.js.",
+  "version": "0.3.0",
+  "description": "Sign-in, users, permissions, the ontology client and warehouse data access for SegmentStream workspace apps built with Next.js.",
   "license": "Apache-2.0",
   "author": "SegmentStream",
   "homepage": "https://segmentstream.com",
@@ -13,14 +13,21 @@
   "keywords": [
     "segmentstream",
     "nextjs",
-    "authentication"
+    "authentication",
+    "neon-auth",
+    "ontology"
   ],
   "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
-    }
+    },
+    "./ui": {
+      "types": "./dist/ui/index.d.ts",
+      "import": "./dist/ui/index.js"
+    },
+    "./ui/styles.css": "./dist/ui/styles.css"
   },
   "files": [
     "dist",
@@ -28,26 +35,36 @@
     "LICENSE",
     "NOTICE"
   ],
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "engines": {
     "node": ">=20"
   },
   "scripts": {
-    "build": "rm -rf dist && tsc -p tsconfig.build.json",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && cp src/ui/styles.css dist/ui/styles.css",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "lint": "eslint src tests --config ../../eslint.config.mjs",
     "test": "vitest run",
     "prepack": "npm run build"
   },
   "dependencies": {
+    "@neondatabase/auth": "0.5.0-beta",
     "jose": "^6.2.12"
   },
   "peerDependencies": {
-    "next": ">=16.0.0"
+    "next": ">=16.0.0",
+    "react": ">=19.0.0"
   },
   "devDependencies": {
+    "@testing-library/react": "^16.3.2",
     "@types/node": "^24",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "jsdom": "^28.1.0",
     "next": "16.3.8",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
     "typescript": "^5.9",
     "vitest": "^4.1.11"
   },