feat: implement proper HF OAuth flow

- Add /oauth/authorize route that builds the correct HF OAuth URL
with client_id, redirect_uri, state (CSRF protection)
- Add /auth/callback route that exchanges code for access token,
stores it in httpOnly cookie, redirects to /editor
- Use OAUTH_CLIENT_ID, OAUTH_CLIENT_SECRET, OPENID_PROVIDER_URL
env vars injected by HF when hf_oauth: true
- isOAuthEnabled now checks for both SPACE_ID and OAUTH_CLIENT_ID

Made-with: Cursor

backend/src/auth.ts

@@ -1,4 +1,6 @@
 import { whoAmI, type WhoAmIUser } from "@huggingface/hub";
+import { randomBytes } from "crypto";
+import type { Request, Response, NextFunction } from "express";
 
 export interface AuthUser {
   name: string;
@@ -7,10 +9,112 @@ export interface AuthUser {
   canEdit: boolean;
 }
 
+// HF injects these env vars when hf_oauth: true is in README
 const SPACE_ID = process.env.SPACE_ID || "";
+const SPACE_HOST = process.env.SPACE_HOST || "";
+const OAUTH_CLIENT_ID = process.env.OAUTH_CLIENT_ID || "";
+const OAUTH_CLIENT_SECRET = process.env.OAUTH_CLIENT_SECRET || "";
+const OAUTH_SCOPES = process.env.OAUTH_SCOPES || "openid profile";
+const OPENID_PROVIDER_URL = process.env.OPENID_PROVIDER_URL || "https://huggingface.co";
+
+const COOKIE_NAME = "hf_access_token";
 
 export function isOAuthEnabled(): boolean {
-  return Boolean(SPACE_ID);
+  return Boolean(SPACE_ID && OAUTH_CLIENT_ID);
+}
+
+function getRedirectUri(): string {
+  if (SPACE_HOST) return `https://${SPACE_HOST}/auth/callback`;
+  return "http://localhost:8080/auth/callback";
+}
+
+// In-memory state store for CSRF protection (short-lived)
+const pendingStates = new Map<string, number>();
+
+function cleanupStates() {
+  const now = Date.now();
+  for (const [state, ts] of pendingStates) {
+    if (now - ts > 10 * 60 * 1000) pendingStates.delete(state);
+  }
+}
+
+/**
+ * GET /oauth/authorize - redirect user to HF login
+ */
+export function handleOAuthAuthorize(_req: Request, res: Response) {
+  cleanupStates();
+  const state = randomBytes(16).toString("hex");
+  pendingStates.set(state, Date.now());
+
+  const params = new URLSearchParams({
+    client_id: OAUTH_CLIENT_ID,
+    redirect_uri: getRedirectUri(),
+    response_type: "code",
+    scope: OAUTH_SCOPES,
+    state,
+  });
+
+  res.redirect(`${OPENID_PROVIDER_URL}/oauth/authorize?${params}`);
+}
+
+/**
+ * GET /auth/callback - exchange code for token, set cookie, redirect to editor
+ */
+export async function handleOAuthCallback(req: Request, res: Response) {
+  const { code, state } = req.query as { code?: string; state?: string };
+
+  if (!code || !state || !pendingStates.has(state)) {
+    res.status(400).send("Invalid OAuth callback");
+    return;
+  }
+  pendingStates.delete(state);
+
+  try {
+    const tokenRes = await fetch(`${OPENID_PROVIDER_URL}/oauth/token`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+        Authorization: `Basic ${Buffer.from(`${OAUTH_CLIENT_ID}:${OAUTH_CLIENT_SECRET}`).toString("base64")}`,
+      },
+      body: new URLSearchParams({
+        grant_type: "authorization_code",
+        code,
+        redirect_uri: getRedirectUri(),
+      }),
+    });
+
+    if (!tokenRes.ok) {
+      const text = await tokenRes.text();
+      console.error("[auth] token exchange failed:", tokenRes.status, text);
+      res.status(500).send("OAuth token exchange failed");
+      return;
+    }
+
+    const tokenData = (await tokenRes.json()) as { access_token: string; expires_in?: number };
+    const maxAge = (tokenData.expires_in || 28800) * 1000;
+
+    res.cookie(COOKIE_NAME, tokenData.access_token, {
+      httpOnly: true,
+      secure: true,
+      sameSite: "none",
+      maxAge,
+      path: "/",
+    });
+
+    res.redirect("/editor");
+  } catch (err) {
+    console.error("[auth] callback error:", err);
+    res.status(500).send("OAuth callback error");
+  }
+}
+
+/**
+ * Extract access token from cookie header string.
+ */
+export function extractToken(cookieHeader: string | undefined): string | undefined {
+  if (!cookieHeader) return undefined;
+  const match = cookieHeader.match(new RegExp(`(?:^|;\\s*)${COOKIE_NAME}=([^;]+)`));
+  return match ? match[1] : undefined;
 }
 
 /**
@@ -44,15 +148,6 @@ export async function resolveUser(
 
 /**
  * Check if user has write access to the Space repo.
- *
- * Strategy:
- * 1. If the user owns the Space namespace, grant access.
- * 2. If the user belongs to the org that owns the Space, check via
- *    the /api/spaces/{id} endpoint which returns the user's role
- *    when authenticated (the "role" field is present for members).
- * 3. For public Spaces, try the /settings endpoint as a write-access probe.
- *
- * Falls back to false on any error.
  */
 async function checkWriteAccess(
   accessToken: string,
@@ -63,10 +158,8 @@ async function checkWriteAccess(
   try {
     const spaceOwner = SPACE_ID.split("/")[0];
 
-    // Owner of the Space namespace has write access
     if (spaceOwner === username) return true;
 
-    // Check if user is a member of the org with write/admin role
     const res = await fetch(
       `https://huggingface.co/api/organizations/${spaceOwner}/members`,
       { headers: { Authorization: `Bearer ${accessToken}` } }
@@ -85,12 +178,3 @@ async function checkWriteAccess(
     return false;
   }
 }
-
-/**
- * Extract access token from cookie header string.
- */
-export function extractToken(cookieHeader: string | undefined): string | undefined {
-  if (!cookieHeader) return undefined;
-  const match = cookieHeader.match(/(?:^|;\s*)access-token=([^;]+)/);
-  return match ? match[1] : undefined;
-}

backend/src/server.ts

@@ -17,7 +17,7 @@ import {
   schedulePush,
   flushAll,
 } from "./hf-storage.js";
-import { resolveUser, extractToken, isOAuthEnabled } from "./auth.js";
+import { resolveUser, extractToken, isOAuthEnabled, handleOAuthAuthorize, handleOAuthCallback } from "./auth.js";
 import { publishDocument } from "./publisher/index.js";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
@@ -100,6 +100,13 @@ const { app } = expressWebsockets(express());
 
 app.use(express.json({ limit: "1mb" }));
 
+// ---------- OAuth routes ----------
+
+if (oauthEnabled) {
+  app.get("/oauth/authorize", handleOAuthAuthorize);
+  app.get("/auth/callback", handleOAuthCallback);
+}
+
 // ---------- Auth ----------
 
 app.get("/api/auth/status", async (req, res) => {