lakebed 0.0.2 → 0.0.3

package/src/client.js

@@ -1,16 +1,54 @@
+import { h } from "preact";
 import { useEffect, useState } from "preact/hooks";
 
+const DEFAULT_SHOO_BASE_URL = "https://shoo.dev";
+const AUTH_STORAGE_KEY = "lakebed_identity";
+const LEGACY_SHOO_STORAGE_KEY = "shoo_identity";
+const PKCE_STORAGE_KEY = "lakebed_google_pkce";
+const RETURN_TO_STORAGE_KEY = "lakebed_google_return_to";
+const PKCE_MAX_AGE_MS = 10 * 60 * 1000;
+const encoder = new TextEncoder();
+
 let socket = null;
 let nextRequestId = 1;
-let auth = {
-  userId: "guest:local",
-  displayName: "Local Guest"
-};
+let auth = createGuestAuth("local");
 const authListeners = new Set();
 const queryValues = new Map();
 const queryListeners = new Map();
 const pending = new Map();
 const activeSubscriptions = new Set();
+let authInitPromise = null;
+let authInitialized = false;
+
+function toGuestName(name) {
+  return (
+    String(name ?? "local")
+      .replace(/^guest:/, "")
+      .trim()
+      .replace(/[^a-zA-Z0-9_.-]+/g, "-")
+      .replace(/^-+|-+$/g, "")
+      .toLowerCase() || "local"
+  );
+}
+
+function toDisplayName(name) {
+  return toGuestName(name)
+    .split(/[-_\s.]+/)
+    .filter(Boolean)
+    .map((part) => `${part[0]?.toUpperCase() ?? ""}${part.slice(1)}`)
+    .join(" ");
+}
+
+function createGuestAuth(name) {
+  const guestName = toGuestName(name);
+  return {
+    displayName: toDisplayName(guestName),
+    isAuthenticated: false,
+    isGuest: true,
+    provider: "guest",
+    userId: `guest:${guestName}`
+  };
+}
 
 function emitAuth() {
   for (const listener of authListeners) {
@@ -47,6 +85,308 @@ function send(message) {
   );
 }
 
+function basePath() {
+  return window.__LAKEBED_BASE_PATH__ ?? "";
+}
+
+function authConfig() {
+  return window.__LAKEBED_AUTH__ ?? {};
+}
+
+function callbackPath() {
+  return `${basePath()}/auth/callback`.replace(/\/{2,}/g, "/");
+}
+
+function currentRoute() {
+  return `${window.location.pathname}${window.location.search}${window.location.hash}`;
+}
+
+function normalizeReturnTo(value) {
+  if (!value) {
+    return null;
+  }
+
+  try {
+    const parsed = new URL(value, window.location.origin);
+    if (parsed.origin !== window.location.origin) {
+      return null;
+    }
+
+    const route = `${parsed.pathname}${parsed.search}${parsed.hash}`;
+    if (!route.startsWith("/") || route.startsWith("//")) {
+      return null;
+    }
+
+    return route;
+  } catch {
+    return null;
+  }
+}
+
+function fallbackRoute() {
+  return basePath() || "/";
+}
+
+function deriveRedirectUri(path) {
+  return new URL(path, window.location.origin).toString();
+}
+
+function deriveClientIdFromRedirectUri(redirectUri) {
+  return `origin:${new URL(redirectUri).origin}`;
+}
+
+function resolveGoogleAuthOptions(options = {}) {
+  const resolvedCallbackPath = normalizeReturnTo(options.callbackPath) ?? callbackPath();
+  const redirectUri = options.redirectUri ?? deriveRedirectUri(resolvedCallbackPath);
+  return {
+    callbackPath: resolvedCallbackPath,
+    clientId: options.clientId ?? deriveClientIdFromRedirectUri(redirectUri),
+    redirectUri,
+    returnTo: normalizeReturnTo(options.returnTo) ?? currentRoute(),
+    shooBaseUrl: String(options.shooBaseUrl ?? authConfig().shooBaseUrl ?? DEFAULT_SHOO_BASE_URL).replace(/\/+$/g, "")
+  };
+}
+
+function randomString(length = 64) {
+  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~";
+  const random = crypto.getRandomValues(new Uint8Array(length));
+  let value = "";
+  for (let index = 0; index < random.length; index += 1) {
+    value += chars[random[index] % chars.length];
+  }
+  return value;
+}
+
+function bytesToBase64Url(bytes) {
+  let binary = "";
+  for (const byte of bytes) {
+    binary += String.fromCharCode(byte);
+  }
+  return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/g, "");
+}
+
+function decodeBase64Url(value) {
+  const normalized = value.replace(/-/g, "+").replace(/_/g, "/");
+  const padded = normalized.padEnd(Math.ceil(normalized.length / 4) * 4, "=");
+  return atob(padded);
+}
+
+function parseJson(value) {
+  try {
+    return JSON.parse(value);
+  } catch {
+    return null;
+  }
+}
+
+export function decodeIdentityClaims(idToken) {
+  if (!idToken) {
+    return null;
+  }
+
+  const parts = idToken.split(".");
+  if (parts.length < 2) {
+    return null;
+  }
+
+  return parseJson(decodeBase64Url(parts[1]));
+}
+
+function readStoredIdentity() {
+  const raw = window.localStorage.getItem(AUTH_STORAGE_KEY) ?? window.localStorage.getItem(LEGACY_SHOO_STORAGE_KEY);
+  if (!raw) {
+    return { userId: null };
+  }
+
+  const parsed = parseJson(raw);
+  if (!parsed || typeof parsed !== "object") {
+    return { userId: null };
+  }
+
+  const token = typeof parsed.token === "string" ? parsed.token : undefined;
+  const claims = decodeIdentityClaims(token);
+  if (typeof claims?.exp === "number" && claims.exp * 1000 <= Date.now()) {
+    clearStoredIdentity();
+    return { userId: null };
+  }
+
+  return {
+    token,
+    userId: typeof parsed.userId === "string" ? parsed.userId : (typeof parsed.pairwiseSub === "string" ? parsed.pairwiseSub : null)
+  };
+}
+
+function persistIdentity(userId, token, expiresIn) {
+  window.localStorage.setItem(
+    AUTH_STORAGE_KEY,
+    JSON.stringify({
+      expiresIn,
+      receivedAt: Date.now(),
+      token,
+      userId
+    })
+  );
+}
+
+function clearStoredIdentity() {
+  window.localStorage.removeItem(AUTH_STORAGE_KEY);
+  window.localStorage.removeItem(LEGACY_SHOO_STORAGE_KEY);
+}
+
+function storedAuthToken() {
+  return readStoredIdentity().token ?? "";
+}
+
+function createGoogleAuthFromToken(token) {
+  const claims = decodeIdentityClaims(token);
+  const pairwiseSub = claims?.pairwise_sub ?? claims?.sub;
+  if (!pairwiseSub) {
+    return null;
+  }
+
+  return {
+    displayName: claims.name ?? claims.email ?? "Google User",
+    email: claims.email,
+    emailVerified: claims.email_verified,
+    isAuthenticated: true,
+    isGuest: false,
+    name: claims.name,
+    picture: claims.picture,
+    provider: "google",
+    userId: `google:${pairwiseSub}`
+  };
+}
+
+async function createPkceBundle() {
+  const verifier = randomString(64);
+  const state = randomString(32);
+  const digest = await crypto.subtle.digest("SHA-256", encoder.encode(verifier));
+  return {
+    challenge: bytesToBase64Url(new Uint8Array(digest)),
+    state,
+    verifier
+  };
+}
+
+function createSignInUrl(options, bundle) {
+  const url = new URL("/authorize", options.shooBaseUrl);
+  url.searchParams.set("client_id", options.clientId);
+  url.searchParams.set("redirect_uri", options.redirectUri);
+  url.searchParams.set("state", bundle.state);
+  url.searchParams.set("code_challenge", bundle.challenge);
+  url.searchParams.set("code_challenge_method", "S256");
+  url.searchParams.set("pii", "true");
+  return url.toString();
+}
+
+function parseCallback(url = window.location.href) {
+  const parsed = new URL(url);
+  const code = parsed.searchParams.get("code");
+  const state = parsed.searchParams.get("state");
+  if (!code || !state) {
+    return null;
+  }
+  return { code, state };
+}
+
+function clearCallbackParams(url = window.location.href) {
+  const next = new URL(url);
+  next.searchParams.delete("code");
+  next.searchParams.delete("state");
+  next.searchParams.delete("error");
+  window.history.replaceState({}, "", next.toString());
+}
+
+function popReturnTo() {
+  const value = normalizeReturnTo(window.sessionStorage.getItem(RETURN_TO_STORAGE_KEY));
+  window.sessionStorage.removeItem(RETURN_TO_STORAGE_KEY);
+  return value;
+}
+
+async function exchangeCode({ code, codeVerifier, options }) {
+  const body = new URLSearchParams({
+    client_id: options.clientId,
+    code,
+    code_verifier: codeVerifier,
+    grant_type: "authorization_code",
+    redirect_uri: options.redirectUri
+  });
+  const response = await fetch(new URL("/token", options.shooBaseUrl), {
+    body,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded"
+    },
+    method: "POST"
+  });
+
+  if (!response.ok) {
+    const details = await response.text();
+    throw new Error(`Google sign-in token exchange failed (${response.status}): ${details || "no details"}`);
+  }
+
+  return response.json();
+}
+
+async function handleGoogleCallback() {
+  const callback = parseCallback();
+  if (!callback) {
+    return null;
+  }
+
+  const rawPkce = window.sessionStorage.getItem(PKCE_STORAGE_KEY);
+  const parsedPkce = rawPkce ? parseJson(rawPkce) : null;
+  if (!parsedPkce?.state || !parsedPkce?.verifier) {
+    throw new Error("Missing Google sign-in verifier. Start sign-in again.");
+  }
+
+  if (typeof parsedPkce.createdAt === "number" && Date.now() - parsedPkce.createdAt > PKCE_MAX_AGE_MS) {
+    window.sessionStorage.removeItem(PKCE_STORAGE_KEY);
+    throw new Error("Google sign-in verifier expired. Start sign-in again.");
+  }
+
+  if (parsedPkce.state !== callback.state) {
+    throw new Error("Google sign-in state mismatch.");
+  }
+
+  const options = resolveGoogleAuthOptions();
+  const token = await exchangeCode({
+    code: callback.code,
+    codeVerifier: parsedPkce.verifier,
+    options
+  });
+  if (!token?.id_token || !token?.pairwise_sub) {
+    throw new Error("Google sign-in token response was missing identity claims.");
+  }
+  persistIdentity(token.pairwise_sub, token.id_token, token.expires_in);
+  window.sessionStorage.removeItem(PKCE_STORAGE_KEY);
+
+  const localAuth = createGoogleAuthFromToken(token.id_token);
+  if (localAuth) {
+    auth = localAuth;
+    emitAuth();
+  }
+
+  const returnTo = popReturnTo() ?? fallbackRoute();
+  clearCallbackParams();
+  window.location.replace(returnTo);
+  return token;
+}
+
+function ensureAuthInitialized() {
+  if (authInitialized) {
+    return Promise.resolve();
+  }
+
+  authInitPromise ??= handleGoogleCallback()
+    .catch((error) => {
+      console.error("[lakebed] Google sign-in failed", error);
+    })
+    .finally(() => {
+      authInitialized = true;
+    });
+  return authInitPromise;
+}
+
 function request(op, payload) {
   const id = nextRequestId++;
   send({ id, op, ...payload });
@@ -61,24 +401,30 @@ function connect() {
     return socket;
   }
 
+  void ensureAuthInitialized();
+
   const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-  const basePath = window.__LAKEBED_BASE_PATH__ ?? "";
-  const url = new URL(`${protocol}//${window.location.host}${basePath}/__lakebed/ws`);
+  const url = new URL(`${protocol}//${window.location.host}${basePath()}/__lakebed/ws`);
   const guestName = new URLSearchParams(window.location.search).get("lakebed_guest");
   if (guestName) {
     url.searchParams.set("lakebed_guest", guestName);
   }
+  const token = storedAuthToken();
+  if (token) {
+    url.searchParams.set("lakebed_token", token);
+  }
 
   socket = new WebSocket(url);
+  const currentSocket = socket;
 
-  socket.addEventListener("open", () => {
+  currentSocket.addEventListener("open", () => {
     send({ op: "auth.get" });
     for (const name of activeSubscriptions) {
       send({ op: "query.subscribe", name });
     }
   });
 
-  socket.addEventListener("message", (event) => {
+  currentSocket.addEventListener("message", (event) => {
     const message = JSON.parse(String(event.data));
 
     if (message.op === "auth.result") {
@@ -104,8 +450,16 @@ function connect() {
     }
   });
 
-  socket.addEventListener("close", () => {
+  currentSocket.addEventListener("close", () => {
+    if (socket !== currentSocket) {
+      return;
+    }
+
     window.setTimeout(() => {
+      if (socket !== currentSocket) {
+        return;
+      }
+
       socket = null;
       connect();
     }, 500);
@@ -114,10 +468,19 @@ function connect() {
   return socket;
 }
 
+function reconnect() {
+  if (socket && socket.readyState !== WebSocket.CLOSED && socket.readyState !== WebSocket.CLOSING) {
+    socket.close();
+  }
+  socket = null;
+  connect();
+}
+
 export function useAuth() {
   const [value, setValue] = useState(auth);
 
   useEffect(() => {
+    void ensureAuthInitialized();
     connect();
     authListeners.add(setValue);
     return () => {
@@ -128,6 +491,79 @@ export function useAuth() {
   return value;
 }
 
+export async function signInWithGoogle(options = {}) {
+  const resolved = resolveGoogleAuthOptions(options);
+  const bundle = await createPkceBundle();
+  window.sessionStorage.setItem(
+    PKCE_STORAGE_KEY,
+    JSON.stringify({
+      createdAt: Date.now(),
+      state: bundle.state,
+      verifier: bundle.verifier
+    })
+  );
+  window.sessionStorage.setItem(
+    RETURN_TO_STORAGE_KEY,
+    normalizeReturnTo(resolved.returnTo) === resolved.callbackPath ? fallbackRoute() : (normalizeReturnTo(resolved.returnTo) ?? fallbackRoute())
+  );
+
+  const url = createSignInUrl(resolved, bundle);
+  window.location.assign(url);
+  return { bundle, url };
+}
+
+export function signOut() {
+  clearStoredIdentity();
+  auth = createGuestAuth(new URLSearchParams(window.location.search).get("lakebed_guest") ?? "local");
+  emitAuth();
+  reconnect();
+}
+
+export function getIdentity() {
+  return readStoredIdentity();
+}
+
+export function SignInWithGoogle({
+  children = "Sign in with Google",
+  className = "",
+  clientId,
+  callbackPath,
+  disabled,
+  onClick,
+  redirectUri,
+  requestPii: _requestPii,
+  requestProfile: _requestProfile,
+  returnTo,
+  shooBaseUrl,
+  type = "button",
+  ...props
+} = {}) {
+  return h(
+    "button",
+    {
+      className,
+      disabled,
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented || disabled) {
+          return;
+        }
+
+        void signInWithGoogle({
+          callbackPath,
+          clientId,
+          redirectUri,
+          returnTo,
+          shooBaseUrl
+        });
+      },
+      type,
+      ...props
+    },
+    children
+  );
+}
+
 export function useQuery(name) {
   const [value, setValue] = useState(queryValues.get(name) ?? []);
 

package/src/server.d.ts

@@ -12,6 +12,13 @@ export type TableDefinition = {
 export type AuthContext = {
   userId: string;
   displayName: string;
+  provider: "guest" | "google";
+  isGuest: boolean;
+  isAuthenticated: boolean;
+  email?: string;
+  emailVerified?: boolean;
+  name?: string;
+  picture?: string;
 };
 
 export type LogContext = {