Deploy Next.js signup Space

.dockerignore

@@ -0,0 +1,8 @@
+.git
+.gitignore
+.next
+.env
+.env.*
+node_modules
+npm-debug.log*
+.DS_Store

.gitignore

@@ -3,21 +3,39 @@
 # dependencies
 /node_modules
 /.pnp
-.pnp.js
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
 
 # testing
 /coverage
 
+# next.js
+/.next/
+/out/
+
 # production
 /build
 
 # misc
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+*.pem
 
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

AGENTS.md

@@ -0,0 +1,5 @@
+<!-- BEGIN:nextjs-agent-rules -->
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+<!-- END:nextjs-agent-rules -->

CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

Dockerfile

@@ -0,0 +1,33 @@
+FROM node:20-bookworm-slim AS deps
+
+WORKDIR /app
+
+COPY package.json package-lock.json ./
+RUN npm ci
+
+FROM node:20-bookworm-slim AS builder
+
+WORKDIR /app
+
+ENV NEXT_TELEMETRY_DISABLED=1
+
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+RUN npm run build
+
+FROM node:20-bookworm-slim AS runner
+
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV PORT=7860
+ENV HOSTNAME=0.0.0.0
+
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+
+EXPOSE 7860
+
+CMD ["node", "server.js"]

README.md

@@ -1,83 +1,45 @@
 ---
-title: Signup
-emoji: 🐠
-colorFrom: indigo
-colorTo: red
-sdk: static
-pinned: false
-app_build_command: npm run build
-app_file: build/index.html
-license: apache-2.0
-short_description: Sign up to Humanity's Last Hackathon
+title: Humanity's Last Hackathon Signup
+emoji: "🖥️"
+colorFrom: gray
+colorTo: gray
+sdk: docker
+app_port: 7860
 ---
 
-# Getting Started with Create React App
+# Humanity's Last Hackathon Signup
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+Black-and-white Next.js landing page for **Humanity's Last Hackathon**.
 
-## Available Scripts
+The current production flow is intentionally minimal:
 
-In the project directory, you can run:
+1. Open the signup page.
+2. Click **Sign up with Hugging Face**.
+3. Continue on the official Hugging Face registration link.
 
-### `npm start`
+## Stack
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+- Next.js 16 App Router
+- TypeScript
+- CSS modules
+- Docker-based Hugging Face Space deployment
 
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
+## Local Development
 
-### `npm test`
+```bash
+npm install
+npm run dev
+```
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+Open `http://localhost:3000`.
 
-### `npm run build`
+## Verification
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+```bash
+npm run lint
+npm run build
+```
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+## Deployment
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
-
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
-
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `npm run build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+This repository is configured as a **Docker Space** and serves the Next.js app on port `7860`.

eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

next.config.ts

@@ -0,0 +1,23 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  output: "standalone",
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "cdn-avatars.huggingface.co",
+      },
+      {
+        protocol: "https",
+        hostname: "www.gravatar.com",
+      },
+      {
+        protocol: "https",
+        hostname: "avatars.githubusercontent.com",
+      },
+    ],
+  },
+};
+
+export default nextConfig;

package.json

@@ -1,39 +1,26 @@
 {
-  "name": "react-template",
+  "name": "hlh-signup-app",
   "version": "0.1.0",
   "private": true,
-  "dependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^13.5.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
-  },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+  "dependencies": {
+    "@huggingface/hub": "^2.11.0",
+    "next": "16.2.4",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "zod": "^4.3.6"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.2.4",
+    "typescript": "^5"
   }
 }

src/app/api/auth/huggingface/callback/route.ts

@@ -0,0 +1,96 @@
+import { NextRequest, NextResponse } from "next/server";
+
+import {
+  createSignupRecord,
+  exchangeCodeForToken,
+  fetchUserInfo,
+  fetchViewer,
+  getAppUrl,
+  getOAuthRedirectUri,
+  storeSignupRecord,
+} from "@/lib/huggingface";
+import {
+  clearOAuthCookies,
+  clearSessionCookie,
+  readOAuthCookies,
+  setSessionCookie,
+} from "@/lib/session";
+
+export const runtime = "nodejs";
+
+function redirectWithAuthError(request: NextRequest, code: string) {
+  const response = NextResponse.redirect(new URL(`/?error=${code}`, getAppUrl(request)));
+  clearOAuthCookies(response);
+  clearSessionCookie(response);
+  return response;
+}
+
+export async function GET(request: NextRequest) {
+  const url = new URL(request.url);
+  const providerError = url.searchParams.get("error");
+
+  if (providerError) {
+    return redirectWithAuthError(
+      request,
+      providerError === "access_denied" ? "oauth_denied" : "oauth_failed",
+    );
+  }
+
+  const code = url.searchParams.get("code");
+  const returnedState = url.searchParams.get("state");
+  const { state, verifier } = readOAuthCookies(request);
+
+  if (!code || !returnedState || !state || returnedState !== state || !verifier) {
+    return redirectWithAuthError(request, "oauth_state");
+  }
+
+  try {
+    const token = await exchangeCodeForToken({
+      code,
+      codeVerifier: verifier,
+      redirectUri: getOAuthRedirectUri(request),
+    });
+
+    const [userInfo, viewer] = await Promise.all([
+      fetchUserInfo(token.access_token),
+      fetchViewer(token.access_token),
+    ]);
+
+    const session = {
+      id: userInfo.sub,
+      username: userInfo.preferred_username || viewer.name,
+      name: userInfo.name.trim() || viewer.fullname || viewer.name,
+      email: userInfo.email ?? viewer.email,
+      emailVerified: userInfo.email_verified ?? viewer.emailVerified,
+      avatarUrl: userInfo.picture || viewer.avatarUrl,
+      profileUrl: userInfo.profile || `${process.env.HF_HUB_URL ?? "https://huggingface.co"}/${viewer.name}`,
+      website: userInfo.website ?? null,
+      isPro: userInfo.isPro ?? viewer.isPro,
+      registrationComplete: false,
+    };
+
+    try {
+      await storeSignupRecord(createSignupRecord({ session }));
+
+      const response = NextResponse.redirect(new URL("/?signed_up=1", getAppUrl(request)));
+      clearOAuthCookies(response);
+      setSessionCookie(response, {
+        ...session,
+        registrationComplete: true,
+      });
+
+      return response;
+    } catch (error) {
+      console.error(error);
+
+      const response = NextResponse.redirect(new URL("/?error=signup_store", getAppUrl(request)));
+      clearOAuthCookies(response);
+      setSessionCookie(response, session);
+
+      return response;
+    }
+  } catch (error) {
+    console.error(error);
+    return redirectWithAuthError(request, "oauth_exchange");
+  }
+}

src/app/api/auth/huggingface/start/route.ts

@@ -0,0 +1,23 @@
+import { NextRequest, NextResponse } from "next/server";
+
+import { createOAuthAuthorizationUrl } from "@/lib/huggingface";
+import { createOpaqueToken, createPkcePair, setOAuthCookies } from "@/lib/session";
+
+export const runtime = "nodejs";
+
+export async function GET(request: NextRequest) {
+  const state = createOpaqueToken(24);
+  const { verifier, challenge } = createPkcePair();
+
+  const response = NextResponse.redirect(
+    createOAuthAuthorizationUrl({
+      state,
+      codeChallenge: challenge,
+      request,
+    }),
+  );
+
+  setOAuthCookies(response, state, verifier);
+
+  return response;
+}

src/app/api/auth/logout/route.ts

@@ -0,0 +1,13 @@
+import { NextRequest, NextResponse } from "next/server";
+
+import { getAppUrl } from "@/lib/huggingface";
+import { clearOAuthCookies, clearSessionCookie } from "@/lib/session";
+
+export const runtime = "nodejs";
+
+export async function GET(request: NextRequest) {
+  const response = NextResponse.redirect(new URL("/", getAppUrl(request)));
+  clearOAuthCookies(response);
+  clearSessionCookie(response);
+  return response;
+}

src/app/api/signup/route.ts

@@ -0,0 +1,46 @@
+import { NextRequest, NextResponse } from "next/server";
+
+import { createSignupRecord, storeSignupRecord } from "@/lib/huggingface";
+import { parseSessionCookie, SESSION_COOKIE_NAME, setSessionCookie } from "@/lib/session";
+
+export const runtime = "nodejs";
+
+export async function POST(request: NextRequest) {
+  const session = parseSessionCookie(request.cookies.get(SESSION_COOKIE_NAME)?.value);
+
+  if (!session) {
+    return NextResponse.json(
+      {
+        error: "Authenticate with Hugging Face before completing signup.",
+      },
+      { status: 401 },
+    );
+  }
+
+  try {
+    const record = createSignupRecord({ session });
+
+    const saved = await storeSignupRecord(record);
+
+    const response = NextResponse.json({
+      ok: true,
+      repo: saved.repoName,
+      path: saved.path,
+    });
+
+    setSessionCookie(response, {
+      ...session,
+      registrationComplete: true,
+    });
+
+    return response;
+  } catch (error) {
+    console.error(error);
+    return NextResponse.json(
+      {
+        error: "Failed to write the signup record to Hugging Face.",
+      },
+      { status: 500 },
+    );
+  }
+}

src/app/globals.css

@@ -0,0 +1,57 @@
+:root {
+  --background: #020202;
+  --foreground: #f4f4f4;
+  --muted: #9b9b9b;
+  --border: rgba(255, 255, 255, 0.18);
+  --panel: rgba(7, 7, 7, 0.92);
+  --panel-strong: rgba(12, 12, 12, 0.98);
+  --shadow: rgba(0, 0, 0, 0.48);
+}
+
+html {
+  height: 100%;
+  color-scheme: dark;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: clip;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--foreground);
+  background: var(--background);
+  font-family: var(--font-ibm-plex-mono), monospace;
+  background-image:
+    radial-gradient(circle at top left, rgba(255, 255, 255, 0.06), transparent 28%),
+    radial-gradient(circle at top right, rgba(255, 255, 255, 0.04), transparent 24%),
+    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+  background-size: auto, auto, 38px 38px, 38px 38px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button,
+input,
+textarea {
+  font: inherit;
+}
+
+::selection {
+  background: #ffffff;
+  color: #000000;
+}

src/app/layout.tsx

@@ -0,0 +1,28 @@
+import type { Metadata } from "next";
+import { IBM_Plex_Mono } from "next/font/google";
+import "./globals.css";
+
+const ibmPlexMono = IBM_Plex_Mono({
+  display: "swap",
+  subsets: ["latin"],
+  variable: "--font-ibm-plex-mono",
+  weight: ["400", "500", "600", "700"],
+});
+
+export const metadata: Metadata = {
+  title: "Humanity's Last Hackathon | Signup",
+  description:
+    "Simple Hugging Face OAuth signup app for Humanity's Last Hackathon, with private dataset registration storage.",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className={ibmPlexMono.variable}>
+      <body>{children}</body>
+    </html>
+  );
+}

src/app/page.module.css

@@ -0,0 +1,308 @@
+.page {
+  min-height: 100vh;
+  padding: 40px 20px 72px;
+}
+
+.shell {
+  width: min(1120px, 100%);
+  margin: 0 auto;
+  display: grid;
+  gap: 28px;
+}
+
+.hero {
+  display: grid;
+  gap: 14px;
+  max-width: 860px;
+}
+
+.eyebrow {
+  font-size: 0.78rem;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.title {
+  font-size: clamp(2.3rem, 7vw, 4.6rem);
+  line-height: 0.95;
+  letter-spacing: -0.05em;
+  text-transform: uppercase;
+}
+
+.subtitle {
+  max-width: 760px;
+  font-size: 1rem;
+  line-height: 1.7;
+  color: #c6c6c6;
+}
+
+.heroMeta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.heroMeta span {
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.03);
+  padding: 10px 12px;
+  font-size: 0.76rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.05fr);
+  gap: 20px;
+}
+
+.panel {
+  border: 1px solid var(--border);
+  background: linear-gradient(180deg, rgba(20, 20, 20, 0.96), rgba(8, 8, 8, 0.96));
+  box-shadow: 0 28px 70px var(--shadow);
+  padding: 24px;
+  display: grid;
+  align-content: start;
+  gap: 18px;
+}
+
+.panelLabel {
+  font-size: 0.74rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.panelTitle {
+  font-size: clamp(1.35rem, 3vw, 2rem);
+  line-height: 1.05;
+}
+
+.panelCopy {
+  color: #d0d0d0;
+  line-height: 1.7;
+}
+
+.list {
+  display: grid;
+  gap: 12px;
+  padding-left: 18px;
+  color: #d0d0d0;
+  line-height: 1.7;
+}
+
+.noteBlock {
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.03);
+  padding: 16px;
+  display: grid;
+  gap: 8px;
+}
+
+.noteTitle {
+  font-size: 0.76rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.noteBody {
+  font-size: 1rem;
+}
+
+.noteFoot {
+  color: var(--muted);
+  font-size: 0.86rem;
+  line-height: 1.6;
+}
+
+.profileCard {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.03);
+  padding: 18px;
+}
+
+.avatar {
+  width: 72px;
+  height: 72px;
+  object-fit: cover;
+  border: 1px solid var(--border);
+  background: #111111;
+}
+
+.profileCopy {
+  display: grid;
+  gap: 6px;
+}
+
+.profileName {
+  font-size: 1.1rem;
+}
+
+.profileMeta {
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+.inlineLink {
+  width: fit-content;
+  color: #ffffff;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  font-size: 0.86rem;
+}
+
+.detailGrid {
+  display: grid;
+  gap: 12px;
+}
+
+.detailRow {
+  display: grid;
+  gap: 6px;
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.02);
+  padding: 14px 16px;
+}
+
+.detailLabel {
+  font-size: 0.74rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.detailValue {
+  line-height: 1.55;
+  word-break: break-word;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+}
+
+.primaryButton,
+.secondaryButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 50px;
+  padding: 0 18px;
+  border: 1px solid var(--border);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-size: 0.76rem;
+  transition:
+    background 0.18s ease,
+    color 0.18s ease,
+    border-color 0.18s ease,
+    transform 0.18s ease;
+}
+
+.primaryButton {
+  background: #ffffff;
+  color: #000000;
+}
+
+.primaryButton:disabled {
+  opacity: 0.6;
+  cursor: wait;
+}
+
+.secondaryButton {
+  background: transparent;
+  color: #ffffff;
+}
+
+.successBadge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+  padding: 0 14px;
+  border: 1px solid rgba(255, 255, 255, 0.35);
+  background: rgba(255, 255, 255, 0.08);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-size: 0.72rem;
+}
+
+.status {
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.03);
+  padding: 14px 16px;
+  line-height: 1.6;
+  color: #d8d8d8;
+}
+
+.statusInfo {
+  border-color: rgba(255, 255, 255, 0.22);
+}
+
+.statusSuccess {
+  border-color: rgba(255, 255, 255, 0.42);
+  color: #ffffff;
+}
+
+.statusError {
+  border-color: rgba(255, 255, 255, 0.42);
+  background: rgba(255, 255, 255, 0.08);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .primaryButton:hover,
+  .secondaryButton:hover {
+    transform: translateY(-1px);
+  }
+
+  .primaryButton:hover {
+    background: transparent;
+    color: #ffffff;
+  }
+
+  .secondaryButton:hover {
+    background: rgba(255, 255, 255, 0.08);
+  }
+}
+
+@media (max-width: 900px) {
+  .grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 720px) {
+  .page {
+    padding: 24px 14px 40px;
+  }
+
+  .heroMeta span {
+    width: 100%;
+  }
+
+  .panel {
+    padding: 18px;
+  }
+
+  .profileCard {
+    align-items: flex-start;
+  }
+
+  .actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .primaryButton,
+  .secondaryButton,
+  .successBadge {
+    width: 100%;
+  }
+}

src/app/page.tsx

@@ -0,0 +1,9 @@
+import { getSessionFromCookies } from "@/lib/session";
+
+import SignupPanel from "./signup-panel";
+
+export default async function Home() {
+  const session = await getSessionFromCookies();
+
+  return <SignupPanel session={session} />;
+}

src/app/signup-panel.tsx

@@ -0,0 +1,244 @@
+"use client";
+
+import Image from "next/image";
+import { useState } from "react";
+import { useSearchParams } from "next/navigation";
+
+import type { SignupSession } from "@/lib/session";
+
+import styles from "./page.module.css";
+
+interface SignupPanelProps {
+  session: SignupSession | null;
+}
+
+interface StatusState {
+  kind: "idle" | "info" | "success" | "error";
+  message: string;
+}
+
+const HACKATHON_SIGNUP_URL =
+  "https://huggingface.co/organizations/humanitys-last-hackathon/share/ItCCmUCGldPpHioCeqQcymUPTDXuwEepwV";
+
+function getQueryStatus(params: URLSearchParams, session: SignupSession | null): StatusState | null {
+  const error = params.get("error");
+  const signedUp = params.get("signed_up") === "1";
+
+  if (error === "oauth_denied") {
+    return {
+      kind: "error",
+      message: "Hugging Face authorization was denied before signup completed.",
+    };
+  }
+
+  if (error === "oauth_state") {
+    return {
+      kind: "error",
+      message: "The Hugging Face login session expired. Start the signup flow again.",
+    };
+  }
+
+  if (error === "oauth_exchange") {
+    return {
+      kind: "error",
+      message: "The server could not complete the Hugging Face OAuth handshake.",
+    };
+  }
+
+  if (error === "signup_store") {
+    return {
+      kind: "error",
+      message: "Your Hugging Face account was read successfully, but the signup record could not be written.",
+    };
+  }
+
+  if (signedUp || session?.registrationComplete) {
+    return {
+      kind: "success",
+      message: "You are signed up. Your Hugging Face profile details were added to the private roster.",
+    };
+  }
+
+  if (session) {
+    return {
+      kind: "info",
+      message: "Your Hugging Face account is connected. Finish signup to write your profile details to the roster.",
+    };
+  }
+
+  return null;
+}
+
+export default function SignupPanel({ session }: SignupPanelProps) {
+  const searchParams = useSearchParams();
+  const [submissionStatus, setSubmissionStatus] = useState<StatusState>({
+    kind: "idle",
+    message: "",
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const status = submissionStatus.kind !== "idle" ? submissionStatus : getQueryStatus(searchParams, session);
+  const isRegistered =
+    submissionStatus.kind === "success" ||
+    searchParams.get("signed_up") === "1" ||
+    session?.registrationComplete === true;
+
+  async function handleSignup() {
+    setIsSubmitting(true);
+    setSubmissionStatus({
+      kind: "info",
+      message: "Writing your Hugging Face profile details into the private signup dataset...",
+    });
+
+    try {
+      const response = await fetch("/api/signup", {
+        method: "POST",
+      });
+
+      const payload = (await response.json().catch(() => null)) as { error?: string } | null;
+
+      if (!response.ok) {
+        setSubmissionStatus({
+          kind: "error",
+          message: payload?.error ?? "Signup failed before the roster write completed.",
+        });
+        return;
+      }
+
+      setSubmissionStatus({
+        kind: "success",
+        message: "You are signed up. Your Hugging Face profile details were added to the private roster.",
+      });
+    } catch {
+      setSubmissionStatus({
+        kind: "error",
+        message: "Network failure while trying to write the signup record.",
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  return (
+    <div className={styles.page}>
+      <main className={styles.shell}>
+        <section className={styles.hero}>
+          <p className={styles.eyebrow}>OpenAi + Hugging Face + GPU Mode</p>
+          <h1 className={styles.title}>Humanity&apos;s Last Hackathon</h1>
+          <p className={styles.subtitle}>
+            Sign up to the hardest most AGI pilled hackathon of 2026. Your task is to liberate AI models from the cloud, by optimizing kernels. <b>Your tools are Codex by OpenAI, Hugging Face, and pure mac metal silicon.</b>
+          </p>
+          <div className={styles.heroMeta}>
+            <span>Launch: May 4th, 2026</span>
+            <span>Format: Qualify online for the final battle</span>
+          </div>
+        </section>
+
+        <section className={styles.grid}>
+          <article className={styles.panel}>
+            <p className={styles.panelLabel}>What You&apos;re Signing Up For</p>
+            <h2 className={styles.panelTitle}>Three weeks of ML systems work aimed at the hardest kernel problems.</h2>
+            <ul className={styles.list}>
+              <li>Week 1: fundamental inference and onboarding through a fun optimization task.</li>
+              <li>Week 2: scaling production inference on the latest hardware.</li>
+              <li>Week 3: a frontier systems engineering challenge around state-of-the-art kernels.</li>
+            </ul>
+
+            {/* <div className={styles.noteBlock}>
+              <p className={styles.noteTitle}>OAuth scope</p>
+              <p className={styles.noteBody}>openid profile email</p>
+              <p className={styles.noteFoot}>
+                GitHub and X are not requested. The signup uses only the details Hugging Face exposes in the basic
+                profile flow.
+              </p>
+            </div> */}
+          </article>
+
+          <section className={styles.panel}>
+            <p className={styles.panelLabel}>Signup</p>
+            <h2 className={styles.panelTitle}>Register with your Hugging Face account.</h2>
+
+            {!session ? (
+              <>
+                <p className={styles.panelCopy}>
+                  Continue on Hugging Face to open the official Humanity&apos;s Last Hackathon signup page.
+                </p>
+                <div className={styles.actions}>
+                  <a className={styles.primaryButton} href={HACKATHON_SIGNUP_URL}>
+                    Sign up with Hugging Face
+                  </a>
+                </div>
+              </>
+            ) : (
+              <>
+                <div className={styles.profileCard}>
+                  <Image
+                    alt={`${session.username} avatar`}
+                    className={styles.avatar}
+                    height={72}
+                    src={session.avatarUrl}
+                    width={72}
+                  />
+                  <div className={styles.profileCopy}>
+                    <p className={styles.profileName}>{session.name}</p>
+                    <p className={styles.profileMeta}>@{session.username}</p>
+                    <a className={styles.inlineLink} href={session.profileUrl} rel="noreferrer" target="_blank">
+                      View Hugging Face profile
+                    </a>
+                  </div>
+                </div>
+
+                <div className={styles.detailGrid}>
+                  <div className={styles.detailRow}>
+                    <span className={styles.detailLabel}>Email</span>
+                    <span className={styles.detailValue}>{session.email}</span>
+                  </div>
+                  <div className={styles.detailRow}>
+                    <span className={styles.detailLabel}>Email verified</span>
+                    <span className={styles.detailValue}>{session.emailVerified ? "Yes" : "No"}</span>
+                  </div>
+                  <div className={styles.detailRow}>
+                    <span className={styles.detailLabel}>Website</span>
+                    <span className={styles.detailValue}>{session.website ?? "Not set on profile"}</span>
+                  </div>
+                  <div className={styles.detailRow}>
+                    <span className={styles.detailLabel}>Plan</span>
+                    <span className={styles.detailValue}>{session.isPro ? "Pro" : "Free"}</span>
+                  </div>
+                </div>
+
+                <div className={styles.actions}>
+                  {!isRegistered ? (
+                    <button className={styles.primaryButton} disabled={isSubmitting} onClick={handleSignup} type="button">
+                      {isSubmitting ? "Signing up..." : "Complete signup"}
+                    </button>
+                  ) : (
+                    <span className={styles.successBadge}>Signed up</span>
+                  )}
+                  <a className={styles.secondaryButton} href="/api/auth/logout">
+                    {isRegistered ? "Use another account" : "Disconnect"}
+                  </a>
+                </div>
+              </>
+            )}
+
+            {status ? (
+              <div
+                className={[
+                  styles.status,
+                  status.kind === "error" ? styles.statusError : "",
+                  status.kind === "success" ? styles.statusSuccess : "",
+                  status.kind === "info" ? styles.statusInfo : "",
+                ]
+                  .filter(Boolean)
+                  .join(" ")}
+              >
+                {status.message}
+              </div>
+            ) : null}
+          </section>
+        </section>
+      </main>
+    </div>
+  );
+}

src/lib/huggingface.ts

@@ -0,0 +1,255 @@
+import { createRepo, repoExists, uploadFile, whoAmI } from "@huggingface/hub";
+import type { NextRequest } from "next/server";
+import { z } from "zod";
+
+import type { SignupSession } from "./session";
+
+const DEFAULT_HUB_URL = "https://huggingface.co";
+const OAUTH_SCOPE = "openid profile email";
+const EVENT_NAME = "Humanity's Last Hackathon";
+const EVENT_OBJECTIVE = "Write Mac Metal kernels with Codex.";
+
+const tokenResponseSchema = z.object({
+  access_token: z.string().min(1),
+  expires_in: z.number().int().positive(),
+  scope: z.string().min(1),
+  token_type: z.string().min(1),
+});
+
+const userInfoSchema = z.object({
+  sub: z.string().min(1),
+  name: z.string(),
+  preferred_username: z.string().min(1),
+  email: z.string().email().optional(),
+  email_verified: z.boolean().optional(),
+  picture: z.string().url(),
+  profile: z.string().url(),
+  website: z.string().url().optional(),
+  isPro: z.boolean(),
+});
+
+export interface SignupRecord {
+  schemaVersion: 2;
+  event: {
+    name: string;
+    objective: string;
+  };
+  signedUpAt: string;
+  source: {
+    type: "huggingface-oauth";
+    scope: string;
+  };
+  participant: {
+    hf: {
+      id: string;
+      username: string;
+      fullName: string;
+      email: string;
+      emailVerified: boolean;
+      avatarUrl: string;
+      profileUrl: string;
+      website: string | null;
+      isPro: boolean;
+    };
+  };
+}
+
+function getHubUrl(): string {
+  return (process.env.HF_HUB_URL?.trim() || DEFAULT_HUB_URL).replace(/\/+$/, "");
+}
+
+function requireEnv(name: string): string {
+  const value = process.env[name]?.trim();
+
+  if (!value) {
+    throw new Error(`Missing ${name}.`);
+  }
+
+  return value;
+}
+
+export function getAppUrl(request?: NextRequest): string {
+  const configured = process.env.APP_URL?.trim();
+
+  if (configured) {
+    return configured.replace(/\/+$/, "");
+  }
+
+  if (!request) {
+    return "http://localhost:3000";
+  }
+
+  const forwardedProto = request.headers.get("x-forwarded-proto");
+  const forwardedHost = request.headers.get("x-forwarded-host") ?? request.headers.get("host");
+
+  if (forwardedProto && forwardedHost) {
+    return `${forwardedProto}://${forwardedHost}`;
+  }
+
+  return new URL(request.url).origin;
+}
+
+export function getOAuthRedirectUri(request?: NextRequest): string {
+  return `${getAppUrl(request)}/api/auth/huggingface/callback`;
+}
+
+export function createOAuthAuthorizationUrl(params: {
+  state: string;
+  codeChallenge: string;
+  request?: NextRequest;
+}): string {
+  const search = new URLSearchParams({
+    client_id: requireEnv("HF_OAUTH_CLIENT_ID"),
+    redirect_uri: getOAuthRedirectUri(params.request),
+    response_type: "code",
+    scope: OAUTH_SCOPE,
+    state: params.state,
+    code_challenge: params.codeChallenge,
+    code_challenge_method: "S256",
+  });
+
+  return `${getHubUrl()}/oauth/authorize?${search.toString()}`;
+}
+
+export async function exchangeCodeForToken(params: {
+  code: string;
+  codeVerifier: string;
+  redirectUri: string;
+}) {
+  const response = await fetch(`${getHubUrl()}/oauth/token`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+    },
+    body: new URLSearchParams({
+      grant_type: "authorization_code",
+      code: params.code,
+      redirect_uri: params.redirectUri,
+      client_id: requireEnv("HF_OAUTH_CLIENT_ID"),
+      client_secret: requireEnv("HF_OAUTH_CLIENT_SECRET"),
+      code_verifier: params.codeVerifier,
+    }),
+  });
+
+  if (!response.ok) {
+    throw new Error(`Hugging Face token exchange failed with status ${response.status}.`);
+  }
+
+  return tokenResponseSchema.parse(await response.json());
+}
+
+export async function fetchUserInfo(accessToken: string) {
+  const response = await fetch(`${getHubUrl()}/oauth/userinfo`, {
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(`Hugging Face userinfo failed with status ${response.status}.`);
+  }
+
+  return userInfoSchema.parse(await response.json());
+}
+
+export async function fetchViewer(accessToken: string) {
+  const viewer = await whoAmI({ accessToken });
+
+  if (viewer.type !== "user") {
+    throw new Error("Expected a user account from Hugging Face OAuth.");
+  }
+
+  return viewer;
+}
+
+export function createSignupRecord(params: { session: SignupSession }): SignupRecord {
+  const signedUpAt = new Date().toISOString();
+
+  return {
+    schemaVersion: 2,
+    event: {
+      name: EVENT_NAME,
+      objective: EVENT_OBJECTIVE,
+    },
+    signedUpAt,
+    source: {
+      type: "huggingface-oauth",
+      scope: OAUTH_SCOPE,
+    },
+    participant: {
+      hf: {
+        id: params.session.id,
+        username: params.session.username,
+        fullName: params.session.name,
+        email: params.session.email,
+        emailVerified: params.session.emailVerified,
+        avatarUrl: params.session.avatarUrl,
+        profileUrl: params.session.profileUrl,
+        website: params.session.website,
+        isPro: params.session.isPro,
+      },
+    },
+  };
+}
+
+function createDatasetReadme(): string {
+  return `---
+tags:
+- private
+- registrations
+- hackathon
+---
+
+# Humanity's Last Hackathon Signups
+
+Private registration dataset for the Humanity's Last Hackathon landing page.
+
+- Event: ${EVENT_NAME}
+- Objective: ${EVENT_OBJECTIVE}
+- Source: simple Hugging Face OAuth signup app
+
+Each participant record is stored at \`signups/<hf-user-id>.json\`.
+`;
+}
+
+export async function storeSignupRecord(record: SignupRecord) {
+  const repo = {
+    type: "dataset" as const,
+    name: requireEnv("HF_DATASET_REPO"),
+  };
+
+  const accessToken = requireEnv("HF_DATASET_WRITE_TOKEN");
+  const filePath = `signups/${record.participant.hf.id}.json`;
+
+  if (!(await repoExists({ repo, accessToken }))) {
+    await createRepo({
+      repo,
+      accessToken,
+      private: true,
+      files: [
+        {
+          path: "README.md",
+          content: new Blob([createDatasetReadme()], { type: "text/markdown" }),
+        },
+      ],
+    });
+  }
+
+  await uploadFile({
+    repo,
+    accessToken,
+    file: {
+      path: filePath,
+      content: new Blob([`${JSON.stringify(record, null, 2)}\n`], {
+        type: "application/json",
+      }),
+    },
+    commitTitle: `Register ${record.participant.hf.username} for Humanity's Last Hackathon`,
+    commitDescription: "Write or update a signup record from the Hugging Face OAuth signup app.",
+  });
+
+  return {
+    repoName: repo.name,
+    path: filePath,
+  };
+}

src/lib/session.ts

@@ -0,0 +1,135 @@
+import { createHash, createHmac, randomBytes, timingSafeEqual } from "node:crypto";
+
+import { cookies } from "next/headers";
+import type { NextRequest, NextResponse } from "next/server";
+import { z } from "zod";
+
+export const SESSION_COOKIE_NAME = "hlh_signup_session";
+export const OAUTH_STATE_COOKIE_NAME = "hlh_signup_oauth_state";
+export const OAUTH_VERIFIER_COOKIE_NAME = "hlh_signup_oauth_verifier";
+
+const OAUTH_COOKIE_MAX_AGE_SECONDS = 60 * 10;
+const SESSION_COOKIE_MAX_AGE_SECONDS = 60 * 60 * 24 * 30;
+
+const signupSessionSchema = z.object({
+  id: z.string().min(1),
+  username: z.string().min(1),
+  name: z.string().min(1),
+  email: z.string().email(),
+  emailVerified: z.boolean(),
+  avatarUrl: z.string().url(),
+  profileUrl: z.string().url(),
+  website: z.string().url().nullable(),
+  isPro: z.boolean(),
+  registrationComplete: z.boolean().default(false),
+});
+
+export type SignupSession = z.infer<typeof signupSessionSchema>;
+
+function getSessionSecret(): string {
+  const secret = process.env.SESSION_SECRET?.trim();
+
+  if (!secret) {
+    throw new Error("Missing SESSION_SECRET.");
+  }
+
+  return secret;
+}
+
+function getCookieOptions(maxAge?: number) {
+  return {
+    httpOnly: true,
+    sameSite: "lax" as const,
+    secure: process.env.NODE_ENV === "production",
+    path: "/",
+    ...(typeof maxAge === "number" ? { maxAge } : {}),
+  };
+}
+
+function encodeJsonPayload(value: unknown): string {
+  return Buffer.from(JSON.stringify(value), "utf8").toString("base64url");
+}
+
+function decodeJsonPayload(value: string): unknown {
+  return JSON.parse(Buffer.from(value, "base64url").toString("utf8"));
+}
+
+function signPayload(payload: string): string {
+  return createHmac("sha256", getSessionSecret()).update(payload).digest("base64url");
+}
+
+function verifyPayload(payload: string, signature: string): boolean {
+  const expected = Buffer.from(signPayload(payload), "utf8");
+  const actual = Buffer.from(signature, "utf8");
+
+  if (expected.length !== actual.length) {
+    return false;
+  }
+
+  return timingSafeEqual(expected, actual);
+}
+
+export function createOpaqueToken(bytes = 32): string {
+  return randomBytes(bytes).toString("base64url");
+}
+
+export function createPkcePair(): { verifier: string; challenge: string } {
+  const verifier = createOpaqueToken(48);
+  const challenge = createHash("sha256").update(verifier).digest("base64url");
+
+  return { verifier, challenge };
+}
+
+export function parseSessionCookie(value?: string | null): SignupSession | null {
+  if (!value) {
+    return null;
+  }
+
+  const [payload, signature] = value.split(".");
+
+  if (!payload || !signature || !verifyPayload(payload, signature)) {
+    return null;
+  }
+
+  try {
+    return signupSessionSchema.parse(decodeJsonPayload(payload));
+  } catch {
+    return null;
+  }
+}
+
+export async function getSessionFromCookies(): Promise<SignupSession | null> {
+  const cookieStore = await cookies();
+  return parseSessionCookie(cookieStore.get(SESSION_COOKIE_NAME)?.value);
+}
+
+export function setSessionCookie(response: NextResponse, session: SignupSession) {
+  const payload = encodeJsonPayload(session);
+  const signedValue = `${payload}.${signPayload(payload)}`;
+
+  response.cookies.set(SESSION_COOKIE_NAME, signedValue, getCookieOptions(SESSION_COOKIE_MAX_AGE_SECONDS));
+}
+
+export function clearSessionCookie(response: NextResponse) {
+  response.cookies.set(SESSION_COOKIE_NAME, "", getCookieOptions(0));
+}
+
+export function setOAuthCookies(response: NextResponse, state: string, verifier: string) {
+  response.cookies.set(OAUTH_STATE_COOKIE_NAME, state, getCookieOptions(OAUTH_COOKIE_MAX_AGE_SECONDS));
+  response.cookies.set(OAUTH_VERIFIER_COOKIE_NAME, verifier, getCookieOptions(OAUTH_COOKIE_MAX_AGE_SECONDS));
+}
+
+export function readOAuthCookies(request: NextRequest): {
+  state: string | null;
+  verifier: string | null;
+} {
+  return {
+    state: request.cookies.get(OAUTH_STATE_COOKIE_NAME)?.value ?? null,
+    verifier: request.cookies.get(OAUTH_VERIFIER_COOKIE_NAME)?.value ?? null,
+  };
+}
+
+export function clearOAuthCookies(response: NextResponse) {
+  response.cookies.set(OAUTH_STATE_COOKIE_NAME, "", getCookieOptions(0));
+  response.cookies.set(OAUTH_VERIFIER_COOKIE_NAME, "", getCookieOptions(0));
+}

tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}