adding approval gate for closed beta

backend/db/migration_add_is_approved.sql

@@ -0,0 +1 @@
+ALTER TABLE public.users ADD COLUMN IF NOT EXISTS is_approved BOOLEAN NOT NULL DEFAULT false;

backend/db/supabase_schema.sql

@@ -10,11 +10,12 @@ CREATE TABLE IF NOT EXISTS users (
  email TEXT,
  streak_count INTEGER DEFAULT 0,
  last_active_date TEXT,
- room_id TEXT,
- created_at TIMESTAMPTZ DEFAULT now(),
- google_id TEXT UNIQUE,
- avatar_url TEXT,
- auth_provider TEXT DEFAULT 'google'
+ room_id TEXT,
+ created_at TIMESTAMPTZ DEFAULT now(),
+ google_id TEXT UNIQUE,
+ avatar_url TEXT,
+ auth_provider TEXT DEFAULT 'google',
+ is_approved BOOLEAN NOT NULL DEFAULT false
 );
 
 CREATE INDEX IF NOT EXISTS idx_users_google_id ON users(google_id);

backend/routes/auth.py

@@ -68,6 +68,15 @@ def _generate_pkce_pair():
  return code_verifier, code_challenge
 
 
+@router.get("/me")
+def get_me(user_id: str = Query(...)):
+ """Return approval status for a given user_id (used by Next.js session API route)."""
+ user = table("users").select("id,is_approved", filters={"id": f"eq.{user_id}"})
+ if not user:
+ raise HTTPException(status_code=404, detail="User not found")
+ return {"user_id": user_id, "is_approved": bool(user[0]["is_approved"])}
+
+
 @router.get("/google")
 def google_login():
  """Redirect to Google consent screen with identity + calendar scopes."""
@@ -117,19 +126,21 @@ def google_callback(code: str = Query(...), state: str = Query(None)):
  )
 
  # Determine user_id: check if this Google ID already exists
- existing = table("users").select("id", filters={"google_id": f"eq.{google_id}"})
+ existing = table("users").select("id,is_approved", filters={"google_id": f"eq.{google_id}"})
  if existing:
  user_id = existing[0]["id"]
+ is_approved = existing[0]["is_approved"]
  # Update name/avatar in case they changed
  table("users").update(
  {"name": name, "avatar_url": avatar_url, "email": email},
  filters={"id": f"eq.{user_id}"},
  )
  else:
  # Check if a user with this email exists (migration from old system)
- email_match = table("users").select("id", filters={"email": f"eq.{email}"})
+ email_match = table("users").select("id,is_approved", filters={"email": f"eq.{email}"})
  if email_match:
  user_id = email_match[0]["id"]
+ is_approved = email_match[0]["is_approved"]
  table("users").update(
  {
  "google_id": google_id,
@@ -142,6 +153,7 @@ def google_callback(code: str = Query(...), state: str = Query(None)):
  else:
  # Create new user
  user_id = f"user_{google_id}"
+ is_approved = False
  table("users").insert({
  "id": user_id,
  "name": name,
@@ -162,10 +174,14 @@ def google_callback(code: str = Query(...), state: str = Query(None)):
  on_conflict="user_id",
  )
 
+ if not is_approved:
+ return RedirectResponse(f"{FRONTEND_URL}/pending")
+
  # Redirect to frontend with user info
  params = urlencode({
  "user_id": user_id,
  "name": name,
  "avatar": avatar_url,
+ "is_approved": "true",
  })
  return RedirectResponse(f"{FRONTEND_URL}/signin/callback?{params}")

frontend/src/app/api/auth/session/route.ts

@@ -0,0 +1,55 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { signSession, SESSION_MAX_AGE } from '@/lib/sessionToken';
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL;
+
+export async function POST(request: NextRequest) {
+ if (!API_URL) {
+ return NextResponse.json({ error: 'NEXT_PUBLIC_API_URL not configured' }, { status: 500 });
+ }
+
+ const { userId } = await request.json();
+ if (!userId || typeof userId !== 'string') {
+ return NextResponse.json({ error: 'Missing userId' }, { status: 400 });
+ }
+
+ // Verify with the backend that the user exists and is approved.
+ let approved = false;
+ try {
+ const controller = new AbortController();
+ const timeout = setTimeout(() => controller.abort(), 3000);
+ let res: Response;
+ try {
+ res = await fetch(`${API_URL}/auth/me?user_id=${encodeURIComponent(userId)}`, { signal: controller.signal });
+ } finally {
+ clearTimeout(timeout);
+ }
+ if (!res.ok) {
+ return NextResponse.json({ error: 'User not found' }, { status: 401 });
+ }
+ const data = await res.json();
+ approved = data.is_approved === true;
+ } catch {
+ return NextResponse.json({ error: 'Backend unreachable' }, { status: 502 });
+ }
+
+ if (!approved) {
+ return NextResponse.json({ error: 'Not approved' }, { status: 403 });
+ }
+
+ const token = await signSession(userId);
+ const response = NextResponse.json({ ok: true });
+ response.cookies.set('sapling_session', token, {
+ httpOnly: true,
+ sameSite: 'lax',
+ path: '/',
+ maxAge: SESSION_MAX_AGE,
+ });
+ return response;
+}
+
+export async function DELETE() {
+ const response = NextResponse.json({ ok: true });
+ response.cookies.set('sapling_session', '', { httpOnly: true, maxAge: 0, path: '/' });
+ return response;
+}

frontend/src/app/pending/page.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import Image from 'next/image';
+import { useUser } from '@/context/UserContext';
+
+export default function PendingPage() {
+ const router = useRouter();
+ const { signOut } = useUser();
+
+ async function handleSignOut() {
+ await signOut();
+ router.replace('/signin');
+ }
+
+ return (
+ <div style={{
+ minHeight: '100vh',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ background: 'var(--bg-base, #0d1117)',
+ color: 'var(--brand-text1, #e6edf3)',
+ padding: '24px',
+ }}>
+ <Image
+ src="/sapling-word-icon.png"
+ alt="Sapling"
+ width={140}
+ height={40}
+ style={{ marginBottom: '40px', objectFit: 'contain' }}
+ />
+ <h1 style={{
+ fontSize: '28px',
+ fontWeight: 600,
+ marginBottom: '12px',
+ textAlign: 'center',
+ letterSpacing: '-0.02em',
+ }}>
+ You&apos;re on the waitlist
+ </h1>
+ <p style={{
+ fontSize: '15px',
+ color: 'var(--brand-text2, #8b949e)',
+ textAlign: 'center',
+ maxWidth: '340px',
+ lineHeight: 1.6,
+ marginBottom: '40px',
+ }}>
+ We&apos;ll reach out when your access is approved.
+ </p>
+ <button
+ onClick={handleSignOut}
+ style={{
+ background: 'transparent',
+ border: '1px solid rgba(255,255,255,0.15)',
+ color: 'var(--brand-text2, #8b949e)',
+ padding: '10px 24px',
+ borderRadius: '8px',
+ fontSize: '14px',
+ cursor: 'pointer',
+ transition: 'border-color 0.2s, color 0.2s',
+ }}
+ onMouseEnter={e => {
+ (e.currentTarget as HTMLButtonElement).style.borderColor = 'rgba(255,255,255,0.35)';
+ (e.currentTarget as HTMLButtonElement).style.color = 'var(--brand-text1, #e6edf3)';
+ }}
+ onMouseLeave={e => {
+ (e.currentTarget as HTMLButtonElement).style.borderColor = 'rgba(255,255,255,0.15)';
+ (e.currentTarget as HTMLButtonElement).style.color = 'var(--brand-text2, #8b949e)';
+ }}
+ >
+ Sign out
+ </button>
+ </div>
+ );
+}

frontend/src/app/signin/callback/page.tsx

@@ -7,18 +7,36 @@ import { useUser } from '@/context/UserContext';
 function CallbackInner() {
  const searchParams = useSearchParams();
  const router = useRouter();
- const { setActiveUser } = useUser();
+ const { setActiveUser, confirmApproved } = useUser();
 
  useEffect(() => {
  const userId = searchParams.get('user_id');
  const name = searchParams.get('name');
  const avatar = searchParams.get('avatar');
+ const isApproved = searchParams.get('is_approved') === 'true';
+ const error = searchParams.get('error');
+
+ if (error === 'not_approved' || !isApproved) {
+ router.replace('/pending');
+ return;
+ }
 
  if (userId && name) {
  setActiveUser(userId, name, avatar || '');
- router.replace('/');
+ fetch('/api/auth/session', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ userId }),
+ }).then(res => {
+ if (res.ok) {
+ confirmApproved();
+ router.replace('/dashboard');
+ } else {
+ router.replace('/signin');
+ }
+ });
  } else {
- router.replace('/');
+ router.replace('/signin');
  }
  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 

frontend/src/app/signin/page.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { Suspense } from 'react';
+import { useSearchParams } from 'next/navigation';
+import Image from 'next/image';
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:5000';
+
+function SignInInner() {
+ const searchParams = useSearchParams();
+ const error = searchParams.get('error');
+
+ return (
+ <div style={{
+ minHeight: '100vh',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ background: 'var(--bg-base, #0d1117)',
+ padding: '24px',
+ }}>
+ <Image
+ src="/sapling-word-icon.png"
+ alt="Sapling"
+ width={140}
+ height={40}
+ style={{ marginBottom: '40px', objectFit: 'contain' }}
+ />
+
+ {error === 'not_approved' && (
+ <div style={{
+ marginBottom: '24px',
+ padding: '12px 20px',
+ borderRadius: '8px',
+ background: 'rgba(234, 179, 8, 0.12)',
+ border: '1px solid rgba(234, 179, 8, 0.3)',
+ color: '#ca8a04',
+ fontSize: '14px',
+ textAlign: 'center',
+ maxWidth: '360px',
+ }}>
+ Your account is pending approval.
+ </div>
+ )}
+
+ <div style={{
+ background: 'var(--bg-panel, #161b22)',
+ border: '1px solid rgba(255,255,255,0.08)',
+ borderRadius: '16px',
+ padding: '40px',
+ width: '100%',
+ maxWidth: '380px',
+ }}>
+ <h2 style={{
+ fontSize: '22px',
+ fontWeight: 600,
+ color: 'var(--brand-text1, #e6edf3)',
+ textAlign: 'center',
+ marginBottom: '8px',
+ letterSpacing: '-0.02em',
+ }}>
+ Welcome back
+ </h2>
+ <p style={{
+ fontSize: '14px',
+ color: 'var(--brand-text2, #8b949e)',
+ textAlign: 'center',
+ marginBottom: '28px',
+ }}>
+ Sign in to continue
+ </p>
+
+ <button
+ onClick={() => { window.location.href = `${API_URL}/api/auth/google`; }}
+ style={{
+ width: '100%',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ gap: '12px',
+ padding: '12px 20px',
+ background: '#ffffff',
+ border: '1px solid #d1d5db',
+ borderRadius: '10px',
+ fontSize: '14px',
+ fontWeight: 500,
+ color: '#111827',
+ cursor: 'pointer',
+ transition: 'box-shadow 0.2s',
+ }}
+ onMouseEnter={e => { (e.currentTarget as HTMLButtonElement).style.boxShadow = '0 2px 8px rgba(0,0,0,0.12)'; }}
+ onMouseLeave={e => { (e.currentTarget as HTMLButtonElement).style.boxShadow = 'none'; }}
+ >
+ <svg width="18" height="18" viewBox="0 0 24 24">
+ <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" />
+ <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
+ <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
+ <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
+ </svg>
+ Continue with Google
+ </button>
+ </div>
+ </div>
+ );
+}
+
+export default function SignInPage() {
+ return (
+ <Suspense fallback={<div style={{ minHeight: '100vh', background: '#0d1117' }} />}>
+ <SignInInner />
+ </Suspense>
+ );
+}

frontend/src/components/Navbar.tsx

@@ -89,10 +89,10 @@ export default function Navbar() {
  }
  };
 
- const handleSignOut = () => {
+ const handleSignOut = async () => {
  setMenuOpen(false);
  setMobileNavOpen(false);
- signOut();
+await signOut();
  router.push('/');
  };
 

backend/db/migration_add_is_approved.sql

@@ -0,0 +1 @@
+ALTER TABLE public.users ADD COLUMN IF NOT EXISTS is_approved BOOLEAN NOT NULL DEFAULT false;

backend/db/supabase_schema.sql

@@ -10,11 +10,12 @@ CREATE TABLE IF NOT EXISTS users (
  email TEXT,
  streak_count INTEGER DEFAULT 0,
  last_active_date TEXT,
- room_id TEXT,
- created_at TIMESTAMPTZ DEFAULT now(),
- google_id TEXT UNIQUE,
- avatar_url TEXT,
- auth_provider TEXT DEFAULT 'google'
+ room_id TEXT,
+ created_at TIMESTAMPTZ DEFAULT now(),
+ google_id TEXT UNIQUE,
+ avatar_url TEXT,
+ auth_provider TEXT DEFAULT 'google',
+ is_approved BOOLEAN NOT NULL DEFAULT false
 );
 
 CREATE INDEX IF NOT EXISTS idx_users_google_id ON users(google_id);

backend/routes/auth.py

@@ -68,6 +68,15 @@ def _generate_pkce_pair():
  return code_verifier, code_challenge
 
 
+@router.get("/me")
+def get_me(user_id: str = Query(...)):
+ """Return approval status for a given user_id (used by Next.js session API route)."""
+ user = table("users").select("id,is_approved", filters={"id": f"eq.{user_id}"})
+ if not user:
+ raise HTTPException(status_code=404, detail="User not found")
+ return {"user_id": user_id, "is_approved": bool(user[0]["is_approved"])}
+
+
 @router.get("/google")
 def google_login():
  """Redirect to Google consent screen with identity + calendar scopes."""
@@ -117,19 +126,21 @@ def google_callback(code: str = Query(...), state: str = Query(None)):
  )
 
  # Determine user_id: check if this Google ID already exists
- existing = table("users").select("id", filters={"google_id": f"eq.{google_id}"})
+ existing = table("users").select("id,is_approved", filters={"google_id": f"eq.{google_id}"})
  if existing:
  user_id = existing[0]["id"]
+ is_approved = existing[0]["is_approved"]
  # Update name/avatar in case they changed
  table("users").update(
  {"name": name, "avatar_url": avatar_url, "email": email},
  filters={"id": f"eq.{user_id}"},
  )
  else:
  # Check if a user with this email exists (migration from old system)
- email_match = table("users").select("id", filters={"email": f"eq.{email}"})
+ email_match = table("users").select("id,is_approved", filters={"email": f"eq.{email}"})
  if email_match:
  user_id = email_match[0]["id"]
+ is_approved = email_match[0]["is_approved"]
  table("users").update(
  {
  "google_id": google_id,
@@ -142,6 +153,7 @@ def google_callback(code: str = Query(...), state: str = Query(None)):
  else:
  # Create new user
  user_id = f"user_{google_id}"
+ is_approved = False
  table("users").insert({
  "id": user_id,
  "name": name,
@@ -162,10 +174,14 @@ def google_callback(code: str = Query(...), state: str = Query(None)):
  on_conflict="user_id",
  )
 
+ if not is_approved:
+ return RedirectResponse(f"{FRONTEND_URL}/pending")
+
  # Redirect to frontend with user info
  params = urlencode({
  "user_id": user_id,
  "name": name,
  "avatar": avatar_url,
+ "is_approved": "true",
  })
  return RedirectResponse(f"{FRONTEND_URL}/signin/callback?{params}")

frontend/src/app/api/auth/session/route.ts

@@ -0,0 +1,55 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { signSession, SESSION_MAX_AGE } from '@/lib/sessionToken';
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL;
+
+export async function POST(request: NextRequest) {
+ if (!API_URL) {
+ return NextResponse.json({ error: 'NEXT_PUBLIC_API_URL not configured' }, { status: 500 });
+ }
+
+ const { userId } = await request.json();
+ if (!userId || typeof userId !== 'string') {
+ return NextResponse.json({ error: 'Missing userId' }, { status: 400 });
+ }
+
+ // Verify with the backend that the user exists and is approved.
+ let approved = false;
+ try {
+ const controller = new AbortController();
+ const timeout = setTimeout(() => controller.abort(), 3000);
+ let res: Response;
+ try {
+ res = await fetch(`${API_URL}/auth/me?user_id=${encodeURIComponent(userId)}`, { signal: controller.signal });
+ } finally {
+ clearTimeout(timeout);
+ }
+ if (!res.ok) {
+ return NextResponse.json({ error: 'User not found' }, { status: 401 });
+ }
+ const data = await res.json();
+ approved = data.is_approved === true;
+ } catch {
+ return NextResponse.json({ error: 'Backend unreachable' }, { status: 502 });
+ }
+
+ if (!approved) {
+ return NextResponse.json({ error: 'Not approved' }, { status: 403 });
+ }
+
+ const token = await signSession(userId);
+ const response = NextResponse.json({ ok: true });
+ response.cookies.set('sapling_session', token, {
+ httpOnly: true,
+ sameSite: 'lax',
+ path: '/',
+ maxAge: SESSION_MAX_AGE,
+ });
+ return response;
+}
+
+export async function DELETE() {
+ const response = NextResponse.json({ ok: true });
+ response.cookies.set('sapling_session', '', { httpOnly: true, maxAge: 0, path: '/' });
+ return response;
+}

frontend/src/app/pending/page.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import Image from 'next/image';
+import { useUser } from '@/context/UserContext';
+
+export default function PendingPage() {
+ const router = useRouter();
+ const { signOut } = useUser();
+
+ async function handleSignOut() {
+ await signOut();
+ router.replace('/signin');
+ }
+
+ return (
+ <div style={{
+ minHeight: '100vh',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ background: 'var(--bg-base, #0d1117)',
+ color: 'var(--brand-text1, #e6edf3)',
+ padding: '24px',
+ }}>
+ <Image
+ src="/sapling-word-icon.png"
+ alt="Sapling"
+ width={140}
+ height={40}
+ style={{ marginBottom: '40px', objectFit: 'contain' }}
+ />
+ <h1 style={{
+ fontSize: '28px',
+ fontWeight: 600,
+ marginBottom: '12px',
+ textAlign: 'center',
+ letterSpacing: '-0.02em',
+ }}>
+ You&apos;re on the waitlist
+ </h1>
+ <p style={{
+ fontSize: '15px',
+ color: 'var(--brand-text2, #8b949e)',
+ textAlign: 'center',
+ maxWidth: '340px',
+ lineHeight: 1.6,
+ marginBottom: '40px',
+ }}>
+ We&apos;ll reach out when your access is approved.
+ </p>
+ <button
+ onClick={handleSignOut}
+ style={{
+ background: 'transparent',
+ border: '1px solid rgba(255,255,255,0.15)',
+ color: 'var(--brand-text2, #8b949e)',
+ padding: '10px 24px',
+ borderRadius: '8px',
+ fontSize: '14px',
+ cursor: 'pointer',
+ transition: 'border-color 0.2s, color 0.2s',
+ }}
+ onMouseEnter={e => {
+ (e.currentTarget as HTMLButtonElement).style.borderColor = 'rgba(255,255,255,0.35)';
+ (e.currentTarget as HTMLButtonElement).style.color = 'var(--brand-text1, #e6edf3)';
+ }}
+ onMouseLeave={e => {
+ (e.currentTarget as HTMLButtonElement).style.borderColor = 'rgba(255,255,255,0.15)';
+ (e.currentTarget as HTMLButtonElement).style.color = 'var(--brand-text2, #8b949e)';
+ }}
+ >
+ Sign out
+ </button>
+ </div>
+ );
+}

frontend/src/app/signin/callback/page.tsx

@@ -7,18 +7,36 @@ import { useUser } from '@/context/UserContext';
 function CallbackInner() {
  const searchParams = useSearchParams();
  const router = useRouter();
- const { setActiveUser } = useUser();
+ const { setActiveUser, confirmApproved } = useUser();
 
  useEffect(() => {
  const userId = searchParams.get('user_id');
  const name = searchParams.get('name');
  const avatar = searchParams.get('avatar');
+ const isApproved = searchParams.get('is_approved') === 'true';
+ const error = searchParams.get('error');
+
+ if (error === 'not_approved' || !isApproved) {
+ router.replace('/pending');
+ return;
+ }
 
  if (userId && name) {
  setActiveUser(userId, name, avatar || '');
- router.replace('/');
+ fetch('/api/auth/session', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ userId }),
+ }).then(res => {
+ if (res.ok) {
+ confirmApproved();
+ router.replace('/dashboard');
+ } else {
+ router.replace('/signin');
+ }
+ });
  } else {
- router.replace('/');
+ router.replace('/signin');
  }
  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 

frontend/src/app/signin/page.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { Suspense } from 'react';
+import { useSearchParams } from 'next/navigation';
+import Image from 'next/image';
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:5000';
+
+function SignInInner() {
+ const searchParams = useSearchParams();
+ const error = searchParams.get('error');
+
+ return (
+ <div style={{
+ minHeight: '100vh',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ background: 'var(--bg-base, #0d1117)',
+ padding: '24px',
+ }}>
+ <Image
+ src="/sapling-word-icon.png"
+ alt="Sapling"
+ width={140}
+ height={40}
+ style={{ marginBottom: '40px', objectFit: 'contain' }}
+ />
+
+ {error === 'not_approved' && (
+ <div style={{
+ marginBottom: '24px',
+ padding: '12px 20px',
+ borderRadius: '8px',
+ background: 'rgba(234, 179, 8, 0.12)',
+ border: '1px solid rgba(234, 179, 8, 0.3)',
+ color: '#ca8a04',
+ fontSize: '14px',
+ textAlign: 'center',
+ maxWidth: '360px',
+ }}>
+ Your account is pending approval.
+ </div>
+ )}
+
+ <div style={{
+ background: 'var(--bg-panel, #161b22)',
+ border: '1px solid rgba(255,255,255,0.08)',
+ borderRadius: '16px',
+ padding: '40px',
+ width: '100%',
+ maxWidth: '380px',
+ }}>
+ <h2 style={{
+ fontSize: '22px',
+ fontWeight: 600,
+ color: 'var(--brand-text1, #e6edf3)',
+ textAlign: 'center',
+ marginBottom: '8px',
+ letterSpacing: '-0.02em',
+ }}>
+ Welcome back
+ </h2>
+ <p style={{
+ fontSize: '14px',
+ color: 'var(--brand-text2, #8b949e)',
+ textAlign: 'center',
+ marginBottom: '28px',
+ }}>
+ Sign in to continue
+ </p>
+
+ <button
+ onClick={() => { window.location.href = `${API_URL}/api/auth/google`; }}
+ style={{
+ width: '100%',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ gap: '12px',
+ padding: '12px 20px',
+ background: '#ffffff',
+ border: '1px solid #d1d5db',
+ borderRadius: '10px',
+ fontSize: '14px',
+ fontWeight: 500,
+ color: '#111827',
+ cursor: 'pointer',
+ transition: 'box-shadow 0.2s',
+ }}
+ onMouseEnter={e => { (e.currentTarget as HTMLButtonElement).style.boxShadow = '0 2px 8px rgba(0,0,0,0.12)'; }}
+ onMouseLeave={e => { (e.currentTarget as HTMLButtonElement).style.boxShadow = 'none'; }}
+ >
+ <svg width="18" height="18" viewBox="0 0 24 24">
+ <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" />
+ <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
+ <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
+ <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
+ </svg>
+ Continue with Google
+ </button>
+ </div>
+ </div>
+ );
+}
+
+export default function SignInPage() {
+ return (
+ <Suspense fallback={<div style={{ minHeight: '100vh', background: '#0d1117' }} />}>
+ <SignInInner />
+ </Suspense>
+ );
+}

frontend/src/components/Navbar.tsx

@@ -89,10 +89,10 @@ export default function Navbar() {
  }
  };
 
- const handleSignOut = () => {
+ const handleSignOut = async () => {
  setMenuOpen(false);
  setMobileNavOpen(false);
- signOut();
+await signOut();
  router.push('/');
  };
 

backend/db/migration_add_is_approved.sql

@@ -0,0 +1 @@
+ALTER TABLE public.users ADD COLUMN IF NOT EXISTS is_approved BOOLEAN NOT NULL DEFAULT false;

backend/db/supabase_schema.sql

@@ -10,11 +10,12 @@ CREATE TABLE IF NOT EXISTS users (
  email TEXT,
  streak_count INTEGER DEFAULT 0,
  last_active_date TEXT,
- room_id TEXT,
- created_at TIMESTAMPTZ DEFAULT now(),
- google_id TEXT UNIQUE,
- avatar_url TEXT,
- auth_provider TEXT DEFAULT 'google'
+ room_id TEXT,
+ created_at TIMESTAMPTZ DEFAULT now(),
+ google_id TEXT UNIQUE,
+ avatar_url TEXT,
+ auth_provider TEXT DEFAULT 'google',
+ is_approved BOOLEAN NOT NULL DEFAULT false
 );
 
 CREATE INDEX IF NOT EXISTS idx_users_google_id ON users(google_id);

backend/routes/auth.py

@@ -68,6 +68,15 @@ def _generate_pkce_pair():
  return code_verifier, code_challenge
 
 
+@router.get("/me")
+def get_me(user_id: str = Query(...)):
+ """Return approval status for a given user_id (used by Next.js session API route)."""
+ user = table("users").select("id,is_approved", filters={"id": f"eq.{user_id}"})
+ if not user:
+ raise HTTPException(status_code=404, detail="User not found")
+ return {"user_id": user_id, "is_approved": bool(user[0]["is_approved"])}
+
+
 @router.get("/google")
 def google_login():
  """Redirect to Google consent screen with identity + calendar scopes."""
@@ -117,19 +126,21 @@ def google_callback(code: str = Query(...), state: str = Query(None)):
  )
 
  # Determine user_id: check if this Google ID already exists
- existing = table("users").select("id", filters={"google_id": f"eq.{google_id}"})
+ existing = table("users").select("id,is_approved", filters={"google_id": f"eq.{google_id}"})
  if existing:
  user_id = existing[0]["id"]
+ is_approved = existing[0]["is_approved"]
  # Update name/avatar in case they changed
  table("users").update(
  {"name": name, "avatar_url": avatar_url, "email": email},
  filters={"id": f"eq.{user_id}"},
  )
  else:
  # Check if a user with this email exists (migration from old system)
- email_match = table("users").select("id", filters={"email": f"eq.{email}"})
+ email_match = table("users").select("id,is_approved", filters={"email": f"eq.{email}"})
  if email_match:
  user_id = email_match[0]["id"]
+ is_approved = email_match[0]["is_approved"]
  table("users").update(
  {
  "google_id": google_id,
@@ -142,6 +153,7 @@ def google_callback(code: str = Query(...), state: str = Query(None)):
  else:
  # Create new user
  user_id = f"user_{google_id}"
+ is_approved = False
  table("users").insert({
  "id": user_id,
  "name": name,
@@ -162,10 +174,14 @@ def google_callback(code: str = Query(...), state: str = Query(None)):
  on_conflict="user_id",
  )
 
+ if not is_approved:
+ return RedirectResponse(f"{FRONTEND_URL}/pending")
+
  # Redirect to frontend with user info
  params = urlencode({
  "user_id": user_id,
  "name": name,
  "avatar": avatar_url,
+ "is_approved": "true",
  })
  return RedirectResponse(f"{FRONTEND_URL}/signin/callback?{params}")

frontend/src/app/api/auth/session/route.ts

@@ -0,0 +1,55 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { signSession, SESSION_MAX_AGE } from '@/lib/sessionToken';
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL;
+
+export async function POST(request: NextRequest) {
+ if (!API_URL) {
+ return NextResponse.json({ error: 'NEXT_PUBLIC_API_URL not configured' }, { status: 500 });
+ }
+
+ const { userId } = await request.json();
+ if (!userId || typeof userId !== 'string') {
+ return NextResponse.json({ error: 'Missing userId' }, { status: 400 });
+ }
+
+ // Verify with the backend that the user exists and is approved.
+ let approved = false;
+ try {
+ const controller = new AbortController();
+ const timeout = setTimeout(() => controller.abort(), 3000);
+ let res: Response;
+ try {
+ res = await fetch(`${API_URL}/auth/me?user_id=${encodeURIComponent(userId)}`, { signal: controller.signal });
+ } finally {
+ clearTimeout(timeout);
+ }
+ if (!res.ok) {
+ return NextResponse.json({ error: 'User not found' }, { status: 401 });
+ }
+ const data = await res.json();
+ approved = data.is_approved === true;
+ } catch {
+ return NextResponse.json({ error: 'Backend unreachable' }, { status: 502 });
+ }
+
+ if (!approved) {
+ return NextResponse.json({ error: 'Not approved' }, { status: 403 });
+ }
+
+ const token = await signSession(userId);
+ const response = NextResponse.json({ ok: true });
+ response.cookies.set('sapling_session', token, {
+ httpOnly: true,
+ sameSite: 'lax',
+ path: '/',
+ maxAge: SESSION_MAX_AGE,
+ });
+ return response;
+}
+
+export async function DELETE() {
+ const response = NextResponse.json({ ok: true });
+ response.cookies.set('sapling_session', '', { httpOnly: true, maxAge: 0, path: '/' });
+ return response;
+}

frontend/src/app/pending/page.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import Image from 'next/image';
+import { useUser } from '@/context/UserContext';
+
+export default function PendingPage() {
+ const router = useRouter();
+ const { signOut } = useUser();
+
+ async function handleSignOut() {
+ await signOut();
+ router.replace('/signin');
+ }
+
+ return (
+ <div style={{
+ minHeight: '100vh',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ background: 'var(--bg-base, #0d1117)',
+ color: 'var(--brand-text1, #e6edf3)',
+ padding: '24px',
+ }}>
+ <Image
+ src="/sapling-word-icon.png"
+ alt="Sapling"
+ width={140}
+ height={40}
+ style={{ marginBottom: '40px', objectFit: 'contain' }}
+ />
+ <h1 style={{
+ fontSize: '28px',
+ fontWeight: 600,
+ marginBottom: '12px',
+ textAlign: 'center',
+ letterSpacing: '-0.02em',
+ }}>
+ You&apos;re on the waitlist
+ </h1>
+ <p style={{
+ fontSize: '15px',
+ color: 'var(--brand-text2, #8b949e)',
+ textAlign: 'center',
+ maxWidth: '340px',
+ lineHeight: 1.6,
+ marginBottom: '40px',
+ }}>
+ We&apos;ll reach out when your access is approved.
+ </p>
+ <button
+ onClick={handleSignOut}
+ style={{
+ background: 'transparent',
+ border: '1px solid rgba(255,255,255,0.15)',
+ color: 'var(--brand-text2, #8b949e)',
+ padding: '10px 24px',
+ borderRadius: '8px',
+ fontSize: '14px',
+ cursor: 'pointer',
+ transition: 'border-color 0.2s, color 0.2s',
+ }}
+ onMouseEnter={e => {
+ (e.currentTarget as HTMLButtonElement).style.borderColor = 'rgba(255,255,255,0.35)';
+ (e.currentTarget as HTMLButtonElement).style.color = 'var(--brand-text1, #e6edf3)';
+ }}
+ onMouseLeave={e => {
+ (e.currentTarget as HTMLButtonElement).style.borderColor = 'rgba(255,255,255,0.15)';
+ (e.currentTarget as HTMLButtonElement).style.color = 'var(--brand-text2, #8b949e)';
+ }}
+ >
+ Sign out
+ </button>
+ </div>
+ );
+}

frontend/src/app/signin/callback/page.tsx

@@ -7,18 +7,36 @@ import { useUser } from '@/context/UserContext';
 function CallbackInner() {
  const searchParams = useSearchParams();
  const router = useRouter();
- const { setActiveUser } = useUser();
+ const { setActiveUser, confirmApproved } = useUser();
 
  useEffect(() => {
  const userId = searchParams.get('user_id');
  const name = searchParams.get('name');
  const avatar = searchParams.get('avatar');
+ const isApproved = searchParams.get('is_approved') === 'true';
+ const error = searchParams.get('error');
+
+ if (error === 'not_approved' || !isApproved) {
+ router.replace('/pending');
+ return;
+ }
 
  if (userId && name) {
  setActiveUser(userId, name, avatar || '');
- router.replace('/');
+ fetch('/api/auth/session', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ userId }),
+ }).then(res => {
+ if (res.ok) {
+ confirmApproved();
+ router.replace('/dashboard');
+ } else {
+ router.replace('/signin');
+ }
+ });
  } else {
- router.replace('/');
+ router.replace('/signin');
  }
  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 

frontend/src/app/signin/page.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { Suspense } from 'react';
+import { useSearchParams } from 'next/navigation';
+import Image from 'next/image';
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:5000';
+
+function SignInInner() {
+ const searchParams = useSearchParams();
+ const error = searchParams.get('error');
+
+ return (
+ <div style={{
+ minHeight: '100vh',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ background: 'var(--bg-base, #0d1117)',
+ padding: '24px',
+ }}>
+ <Image
+ src="/sapling-word-icon.png"
+ alt="Sapling"
+ width={140}
+ height={40}
+ style={{ marginBottom: '40px', objectFit: 'contain' }}
+ />
+
+ {error === 'not_approved' && (
+ <div style={{
+ marginBottom: '24px',
+ padding: '12px 20px',
+ borderRadius: '8px',
+ background: 'rgba(234, 179, 8, 0.12)',
+ border: '1px solid rgba(234, 179, 8, 0.3)',
+ color: '#ca8a04',
+ fontSize: '14px',
+ textAlign: 'center',
+ maxWidth: '360px',
+ }}>
+ Your account is pending approval.
+ </div>
+ )}
+
+ <div style={{
+ background: 'var(--bg-panel, #161b22)',
+ border: '1px solid rgba(255,255,255,0.08)',
+ borderRadius: '16px',
+ padding: '40px',
+ width: '100%',
+ maxWidth: '380px',
+ }}>
+ <h2 style={{
+ fontSize: '22px',
+ fontWeight: 600,
+ color: 'var(--brand-text1, #e6edf3)',
+ textAlign: 'center',
+ marginBottom: '8px',
+ letterSpacing: '-0.02em',
+ }}>
+ Welcome back
+ </h2>
+ <p style={{
+ fontSize: '14px',
+ color: 'var(--brand-text2, #8b949e)',
+ textAlign: 'center',
+ marginBottom: '28px',
+ }}>
+ Sign in to continue
+ </p>
+
+ <button
+ onClick={() => { window.location.href = `${API_URL}/api/auth/google`; }}
+ style={{
+ width: '100%',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ gap: '12px',
+ padding: '12px 20px',
+ background: '#ffffff',
+ border: '1px solid #d1d5db',
+ borderRadius: '10px',
+ fontSize: '14px',
+ fontWeight: 500,
+ color: '#111827',
+ cursor: 'pointer',
+ transition: 'box-shadow 0.2s',
+ }}
+ onMouseEnter={e => { (e.currentTarget as HTMLButtonElement).style.boxShadow = '0 2px 8px rgba(0,0,0,0.12)'; }}
+ onMouseLeave={e => { (e.currentTarget as HTMLButtonElement).style.boxShadow = 'none'; }}
+ >
+ <svg width="18" height="18" viewBox="0 0 24 24">
+ <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" />
+ <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
+ <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
+ <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
+ </svg>
+ Continue with Google
+ </button>
+ </div>
+ </div>
+ );
+}
+
+export default function SignInPage() {
+ return (
+ <Suspense fallback={<div style={{ minHeight: '100vh', background: '#0d1117' }} />}>
+ <SignInInner />
+ </Suspense>
+ );
+}

frontend/src/components/Navbar.tsx

@@ -89,10 +89,10 @@ export default function Navbar() {
  }
  };
 
- const handleSignOut = () => {
+ const handleSignOut = async () => {
  setMenuOpen(false);
  setMobileNavOpen(false);
- signOut();
+await signOut();
  router.push('/');
  };
 

backend/db/migration_add_is_approved.sql

@@ -0,0 +1 @@
+ALTER TABLE public.users ADD COLUMN IF NOT EXISTS is_approved BOOLEAN NOT NULL DEFAULT false;

backend/db/supabase_schema.sql

@@ -10,11 +10,12 @@ CREATE TABLE IF NOT EXISTS users (
  email TEXT,
  streak_count INTEGER DEFAULT 0,
  last_active_date TEXT,
- room_id TEXT,
- created_at TIMESTAMPTZ DEFAULT now(),
- google_id TEXT UNIQUE,
- avatar_url TEXT,
- auth_provider TEXT DEFAULT 'google'
+ room_id TEXT,
+ created_at TIMESTAMPTZ DEFAULT now(),
+ google_id TEXT UNIQUE,
+ avatar_url TEXT,
+ auth_provider TEXT DEFAULT 'google',
+ is_approved BOOLEAN NOT NULL DEFAULT false
 );
 
 CREATE INDEX IF NOT EXISTS idx_users_google_id ON users(google_id);

backend/routes/auth.py

@@ -68,6 +68,15 @@ def _generate_pkce_pair():
  return code_verifier, code_challenge
 
 
+@router.get("/me")
+def get_me(user_id: str = Query(...)):
+ """Return approval status for a given user_id (used by Next.js session API route)."""
+ user = table("users").select("id,is_approved", filters={"id": f"eq.{user_id}"})
+ if not user:
+ raise HTTPException(status_code=404, detail="User not found")
+ return {"user_id": user_id, "is_approved": bool(user[0]["is_approved"])}
+
+
 @router.get("/google")
 def google_login():
  """Redirect to Google consent screen with identity + calendar scopes."""
@@ -117,19 +126,21 @@ def google_callback(code: str = Query(...), state: str = Query(None)):
  )
 
  # Determine user_id: check if this Google ID already exists
- existing = table("users").select("id", filters={"google_id": f"eq.{google_id}"})
+ existing = table("users").select("id,is_approved", filters={"google_id": f"eq.{google_id}"})
  if existing:
  user_id = existing[0]["id"]
+ is_approved = existing[0]["is_approved"]
  # Update name/avatar in case they changed
  table("users").update(
  {"name": name, "avatar_url": avatar_url, "email": email},
  filters={"id": f"eq.{user_id}"},
  )
  else:
  # Check if a user with this email exists (migration from old system)
- email_match = table("users").select("id", filters={"email": f"eq.{email}"})
+ email_match = table("users").select("id,is_approved", filters={"email": f"eq.{email}"})
  if email_match:
  user_id = email_match[0]["id"]
+ is_approved = email_match[0]["is_approved"]
  table("users").update(
  {
  "google_id": google_id,
@@ -142,6 +153,7 @@ def google_callback(code: str = Query(...), state: str = Query(None)):
  else:
  # Create new user
  user_id = f"user_{google_id}"
+ is_approved = False
  table("users").insert({
  "id": user_id,
  "name": name,
@@ -162,10 +174,14 @@ def google_callback(code: str = Query(...), state: str = Query(None)):
  on_conflict="user_id",
  )
 
+ if not is_approved:
+ return RedirectResponse(f"{FRONTEND_URL}/pending")
+
  # Redirect to frontend with user info
  params = urlencode({
  "user_id": user_id,
  "name": name,
  "avatar": avatar_url,
+ "is_approved": "true",
  })
  return RedirectResponse(f"{FRONTEND_URL}/signin/callback?{params}")

frontend/src/app/api/auth/session/route.ts

@@ -0,0 +1,55 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { signSession, SESSION_MAX_AGE } from '@/lib/sessionToken';
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL;
+
+export async function POST(request: NextRequest) {
+ if (!API_URL) {
+ return NextResponse.json({ error: 'NEXT_PUBLIC_API_URL not configured' }, { status: 500 });
+ }
+
+ const { userId } = await request.json();
+ if (!userId || typeof userId !== 'string') {
+ return NextResponse.json({ error: 'Missing userId' }, { status: 400 });
+ }
+
+ // Verify with the backend that the user exists and is approved.
+ let approved = false;
+ try {
+ const controller = new AbortController();
+ const timeout = setTimeout(() => controller.abort(), 3000);
+ let res: Response;
+ try {
+ res = await fetch(`${API_URL}/auth/me?user_id=${encodeURIComponent(userId)}`, { signal: controller.signal });
+ } finally {
+ clearTimeout(timeout);
+ }
+ if (!res.ok) {
+ return NextResponse.json({ error: 'User not found' }, { status: 401 });
+ }
+ const data = await res.json();
+ approved = data.is_approved === true;
+ } catch {
+ return NextResponse.json({ error: 'Backend unreachable' }, { status: 502 });
+ }
+
+ if (!approved) {
+ return NextResponse.json({ error: 'Not approved' }, { status: 403 });
+ }
+
+ const token = await signSession(userId);
+ const response = NextResponse.json({ ok: true });
+ response.cookies.set('sapling_session', token, {
+ httpOnly: true,
+ sameSite: 'lax',
+ path: '/',
+ maxAge: SESSION_MAX_AGE,
+ });
+ return response;
+}
+
+export async function DELETE() {
+ const response = NextResponse.json({ ok: true });
+ response.cookies.set('sapling_session', '', { httpOnly: true, maxAge: 0, path: '/' });
+ return response;
+}

frontend/src/app/pending/page.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import Image from 'next/image';
+import { useUser } from '@/context/UserContext';
+
+export default function PendingPage() {
+ const router = useRouter();
+ const { signOut } = useUser();
+
+ async function handleSignOut() {
+ await signOut();
+ router.replace('/signin');
+ }
+
+ return (
+ <div style={{
+ minHeight: '100vh',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ background: 'var(--bg-base, #0d1117)',
+ color: 'var(--brand-text1, #e6edf3)',
+ padding: '24px',
+ }}>
+ <Image
+ src="/sapling-word-icon.png"
+ alt="Sapling"
+ width={140}
+ height={40}
+ style={{ marginBottom: '40px', objectFit: 'contain' }}
+ />
+ <h1 style={{
+ fontSize: '28px',
+ fontWeight: 600,
+ marginBottom: '12px',
+ textAlign: 'center',
+ letterSpacing: '-0.02em',
+ }}>
+ You&apos;re on the waitlist
+ </h1>
+ <p style={{
+ fontSize: '15px',
+ color: 'var(--brand-text2, #8b949e)',
+ textAlign: 'center',
+ maxWidth: '340px',
+ lineHeight: 1.6,
+ marginBottom: '40px',
+ }}>
+ We&apos;ll reach out when your access is approved.
+ </p>
+ <button
+ onClick={handleSignOut}
+ style={{
+ background: 'transparent',
+ border: '1px solid rgba(255,255,255,0.15)',
+ color: 'var(--brand-text2, #8b949e)',
+ padding: '10px 24px',
+ borderRadius: '8px',
+ fontSize: '14px',
+ cursor: 'pointer',
+ transition: 'border-color 0.2s, color 0.2s',
+ }}
+ onMouseEnter={e => {
+ (e.currentTarget as HTMLButtonElement).style.borderColor = 'rgba(255,255,255,0.35)';
+ (e.currentTarget as HTMLButtonElement).style.color = 'var(--brand-text1, #e6edf3)';
+ }}
+ onMouseLeave={e => {
+ (e.currentTarget as HTMLButtonElement).style.borderColor = 'rgba(255,255,255,0.15)';
+ (e.currentTarget as HTMLButtonElement).style.color = 'var(--brand-text2, #8b949e)';
+ }}
+ >
+ Sign out
+ </button>
+ </div>
+ );
+}

frontend/src/app/signin/callback/page.tsx

@@ -7,18 +7,36 @@ import { useUser } from '@/context/UserContext';
 function CallbackInner() {
  const searchParams = useSearchParams();
  const router = useRouter();
- const { setActiveUser } = useUser();
+ const { setActiveUser, confirmApproved } = useUser();
 
  useEffect(() => {
  const userId = searchParams.get('user_id');
  const name = searchParams.get('name');
  const avatar = searchParams.get('avatar');
+ const isApproved = searchParams.get('is_approved') === 'true';
+ const error = searchParams.get('error');
+
+ if (error === 'not_approved' || !isApproved) {
+ router.replace('/pending');
+ return;
+ }
 
  if (userId && name) {
  setActiveUser(userId, name, avatar || '');
- router.replace('/');
+ fetch('/api/auth/session', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ userId }),
+ }).then(res => {
+ if (res.ok) {
+ confirmApproved();
+ router.replace('/dashboard');
+ } else {
+ router.replace('/signin');
+ }
+ });
  } else {
- router.replace('/');
+ router.replace('/signin');
  }
  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 

frontend/src/app/signin/page.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { Suspense } from 'react';
+import { useSearchParams } from 'next/navigation';
+import Image from 'next/image';
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:5000';
+
+function SignInInner() {
+ const searchParams = useSearchParams();
+ const error = searchParams.get('error');
+
+ return (
+ <div style={{
+ minHeight: '100vh',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ background: 'var(--bg-base, #0d1117)',
+ padding: '24px',
+ }}>
+ <Image
+ src="/sapling-word-icon.png"
+ alt="Sapling"
+ width={140}
+ height={40}
+ style={{ marginBottom: '40px', objectFit: 'contain' }}
+ />
+
+ {error === 'not_approved' && (
+ <div style={{
+ marginBottom: '24px',
+ padding: '12px 20px',
+ borderRadius: '8px',
+ background: 'rgba(234, 179, 8, 0.12)',
+ border: '1px solid rgba(234, 179, 8, 0.3)',
+ color: '#ca8a04',
+ fontSize: '14px',
+ textAlign: 'center',
+ maxWidth: '360px',
+ }}>
+ Your account is pending approval.
+ </div>
+ )}
+
+ <div style={{
+ background: 'var(--bg-panel, #161b22)',
+ border: '1px solid rgba(255,255,255,0.08)',
+ borderRadius: '16px',
+ padding: '40px',
+ width: '100%',
+ maxWidth: '380px',
+ }}>
+ <h2 style={{
+ fontSize: '22px',
+ fontWeight: 600,
+ color: 'var(--brand-text1, #e6edf3)',
+ textAlign: 'center',
+ marginBottom: '8px',
+ letterSpacing: '-0.02em',
+ }}>
+ Welcome back
+ </h2>
+ <p style={{
+ fontSize: '14px',
+ color: 'var(--brand-text2, #8b949e)',
+ textAlign: 'center',
+ marginBottom: '28px',
+ }}>
+ Sign in to continue
+ </p>
+
+ <button
+ onClick={() => { window.location.href = `${API_URL}/api/auth/google`; }}
+ style={{
+ width: '100%',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ gap: '12px',
+ padding: '12px 20px',
+ background: '#ffffff',
+ border: '1px solid #d1d5db',
+ borderRadius: '10px',
+ fontSize: '14px',
+ fontWeight: 500,
+ color: '#111827',
+ cursor: 'pointer',
+ transition: 'box-shadow 0.2s',
+ }}
+ onMouseEnter={e => { (e.currentTarget as HTMLButtonElement).style.boxShadow = '0 2px 8px rgba(0,0,0,0.12)'; }}
+ onMouseLeave={e => { (e.currentTarget as HTMLButtonElement).style.boxShadow = 'none'; }}
+ >
+ <svg width="18" height="18" viewBox="0 0 24 24">
+ <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" />
+ <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
+ <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
+ <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
+ </svg>
+ Continue with Google
+ </button>
+ </div>
+ </div>
+ );
+}
+
+export default function SignInPage() {
+ return (
+ <Suspense fallback={<div style={{ minHeight: '100vh', background: '#0d1117' }} />}>
+ <SignInInner />
+ </Suspense>
+ );
+}

frontend/src/components/Navbar.tsx

@@ -89,10 +89,10 @@ export default function Navbar() {
  }
  };
 
- const handleSignOut = () => {
+ const handleSignOut = async () => {
  setMenuOpen(false);
  setMobileNavOpen(false);
- signOut();
+await signOut();
  router.push('/');
  };
 

backend/db/migration_add_is_approved.sql

@@ -0,0 +1 @@
+ALTER TABLE public.users ADD COLUMN IF NOT EXISTS is_approved BOOLEAN NOT NULL DEFAULT false;

backend/db/supabase_schema.sql

@@ -10,11 +10,12 @@ CREATE TABLE IF NOT EXISTS users (
  email TEXT,
  streak_count INTEGER DEFAULT 0,
  last_active_date TEXT,
- room_id TEXT,
- created_at TIMESTAMPTZ DEFAULT now(),
- google_id TEXT UNIQUE,
- avatar_url TEXT,
- auth_provider TEXT DEFAULT 'google'
+ room_id TEXT,
+ created_at TIMESTAMPTZ DEFAULT now(),
+ google_id TEXT UNIQUE,
+ avatar_url TEXT,
+ auth_provider TEXT DEFAULT 'google',
+ is_approved BOOLEAN NOT NULL DEFAULT false
 );
 
 CREATE INDEX IF NOT EXISTS idx_users_google_id ON users(google_id);

backend/routes/auth.py

@@ -68,6 +68,15 @@ def _generate_pkce_pair():
  return code_verifier, code_challenge
 
 
+@router.get("/me")
+def get_me(user_id: str = Query(...)):
+ """Return approval status for a given user_id (used by Next.js session API route)."""
+ user = table("users").select("id,is_approved", filters={"id": f"eq.{user_id}"})
+ if not user:
+ raise HTTPException(status_code=404, detail="User not found")
+ return {"user_id": user_id, "is_approved": bool(user[0]["is_approved"])}
+
+
 @router.get("/google")
 def google_login():
  """Redirect to Google consent screen with identity + calendar scopes."""
@@ -117,19 +126,21 @@ def google_callback(code: str = Query(...), state: str = Query(None)):
  )
 
  # Determine user_id: check if this Google ID already exists
- existing = table("users").select("id", filters={"google_id": f"eq.{google_id}"})
+ existing = table("users").select("id,is_approved", filters={"google_id": f"eq.{google_id}"})
  if existing:
  user_id = existing[0]["id"]
+ is_approved = existing[0]["is_approved"]
  # Update name/avatar in case they changed
  table("users").update(
  {"name": name, "avatar_url": avatar_url, "email": email},
  filters={"id": f"eq.{user_id}"},
  )
  else:
  # Check if a user with this email exists (migration from old system)
- email_match = table("users").select("id", filters={"email": f"eq.{email}"})
+ email_match = table("users").select("id,is_approved", filters={"email": f"eq.{email}"})
  if email_match:
  user_id = email_match[0]["id"]
+ is_approved = email_match[0]["is_approved"]
  table("users").update(
  {
  "google_id": google_id,
@@ -142,6 +153,7 @@ def google_callback(code: str = Query(...), state: str = Query(None)):
  else:
  # Create new user
  user_id = f"user_{google_id}"
+ is_approved = False
  table("users").insert({
  "id": user_id,
  "name": name,
@@ -162,10 +174,14 @@ def google_callback(code: str = Query(...), state: str = Query(None)):
  on_conflict="user_id",
  )
 
+ if not is_approved:
+ return RedirectResponse(f"{FRONTEND_URL}/pending")
+
  # Redirect to frontend with user info
  params = urlencode({
  "user_id": user_id,
  "name": name,
  "avatar": avatar_url,
+ "is_approved": "true",
  })
  return RedirectResponse(f"{FRONTEND_URL}/signin/callback?{params}")

frontend/src/app/api/auth/session/route.ts

@@ -0,0 +1,55 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { signSession, SESSION_MAX_AGE } from '@/lib/sessionToken';
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL;
+
+export async function POST(request: NextRequest) {
+ if (!API_URL) {
+ return NextResponse.json({ error: 'NEXT_PUBLIC_API_URL not configured' }, { status: 500 });
+ }
+
+ const { userId } = await request.json();
+ if (!userId || typeof userId !== 'string') {
+ return NextResponse.json({ error: 'Missing userId' }, { status: 400 });
+ }
+
+ // Verify with the backend that the user exists and is approved.
+ let approved = false;
+ try {
+ const controller = new AbortController();
+ const timeout = setTimeout(() => controller.abort(), 3000);
+ let res: Response;
+ try {
+ res = await fetch(`${API_URL}/auth/me?user_id=${encodeURIComponent(userId)}`, { signal: controller.signal });
+ } finally {
+ clearTimeout(timeout);
+ }
+ if (!res.ok) {
+ return NextResponse.json({ error: 'User not found' }, { status: 401 });
+ }
+ const data = await res.json();
+ approved = data.is_approved === true;
+ } catch {
+ return NextResponse.json({ error: 'Backend unreachable' }, { status: 502 });
+ }
+
+ if (!approved) {
+ return NextResponse.json({ error: 'Not approved' }, { status: 403 });
+ }
+
+ const token = await signSession(userId);
+ const response = NextResponse.json({ ok: true });
+ response.cookies.set('sapling_session', token, {
+ httpOnly: true,
+ sameSite: 'lax',
+ path: '/',
+ maxAge: SESSION_MAX_AGE,
+ });
+ return response;
+}
+
+export async function DELETE() {
+ const response = NextResponse.json({ ok: true });
+ response.cookies.set('sapling_session', '', { httpOnly: true, maxAge: 0, path: '/' });
+ return response;
+}

frontend/src/app/pending/page.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import Image from 'next/image';
+import { useUser } from '@/context/UserContext';
+
+export default function PendingPage() {
+ const router = useRouter();
+ const { signOut } = useUser();
+
+ async function handleSignOut() {
+ await signOut();
+ router.replace('/signin');
+ }
+
+ return (
+ <div style={{
+ minHeight: '100vh',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ background: 'var(--bg-base, #0d1117)',
+ color: 'var(--brand-text1, #e6edf3)',
+ padding: '24px',
+ }}>
+ <Image
+ src="/sapling-word-icon.png"
+ alt="Sapling"
+ width={140}
+ height={40}
+ style={{ marginBottom: '40px', objectFit: 'contain' }}
+ />
+ <h1 style={{
+ fontSize: '28px',
+ fontWeight: 600,
+ marginBottom: '12px',
+ textAlign: 'center',
+ letterSpacing: '-0.02em',
+ }}>
+ You&apos;re on the waitlist
+ </h1>
+ <p style={{
+ fontSize: '15px',
+ color: 'var(--brand-text2, #8b949e)',
+ textAlign: 'center',
+ maxWidth: '340px',
+ lineHeight: 1.6,
+ marginBottom: '40px',
+ }}>
+ We&apos;ll reach out when your access is approved.
+ </p>
+ <button
+ onClick={handleSignOut}
+ style={{
+ background: 'transparent',
+ border: '1px solid rgba(255,255,255,0.15)',
+ color: 'var(--brand-text2, #8b949e)',
+ padding: '10px 24px',
+ borderRadius: '8px',
+ fontSize: '14px',
+ cursor: 'pointer',
+ transition: 'border-color 0.2s, color 0.2s',
+ }}
+ onMouseEnter={e => {
+ (e.currentTarget as HTMLButtonElement).style.borderColor = 'rgba(255,255,255,0.35)';
+ (e.currentTarget as HTMLButtonElement).style.color = 'var(--brand-text1, #e6edf3)';
+ }}
+ onMouseLeave={e => {
+ (e.currentTarget as HTMLButtonElement).style.borderColor = 'rgba(255,255,255,0.15)';
+ (e.currentTarget as HTMLButtonElement).style.color = 'var(--brand-text2, #8b949e)';
+ }}
+ >
+ Sign out
+ </button>
+ </div>
+ );
+}

frontend/src/app/signin/callback/page.tsx

@@ -7,18 +7,36 @@ import { useUser } from '@/context/UserContext';
 function CallbackInner() {
  const searchParams = useSearchParams();
  const router = useRouter();
- const { setActiveUser } = useUser();
+ const { setActiveUser, confirmApproved } = useUser();
 
  useEffect(() => {
  const userId = searchParams.get('user_id');
  const name = searchParams.get('name');
  const avatar = searchParams.get('avatar');
+ const isApproved = searchParams.get('is_approved') === 'true';
+ const error = searchParams.get('error');
+
+ if (error === 'not_approved' || !isApproved) {
+ router.replace('/pending');
+ return;
+ }
 
  if (userId && name) {
  setActiveUser(userId, name, avatar || '');
- router.replace('/');
+ fetch('/api/auth/session', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ userId }),
+ }).then(res => {
+ if (res.ok) {
+ confirmApproved();
+ router.replace('/dashboard');
+ } else {
+ router.replace('/signin');
+ }
+ });
  } else {
- router.replace('/');
+ router.replace('/signin');
  }
  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 

frontend/src/app/signin/page.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { Suspense } from 'react';
+import { useSearchParams } from 'next/navigation';
+import Image from 'next/image';
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:5000';
+
+function SignInInner() {
+ const searchParams = useSearchParams();
+ const error = searchParams.get('error');
+
+ return (
+ <div style={{
+ minHeight: '100vh',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ background: 'var(--bg-base, #0d1117)',
+ padding: '24px',
+ }}>
+ <Image
+ src="/sapling-word-icon.png"
+ alt="Sapling"
+ width={140}
+ height={40}
+ style={{ marginBottom: '40px', objectFit: 'contain' }}
+ />
+
+ {error === 'not_approved' && (
+ <div style={{
+ marginBottom: '24px',
+ padding: '12px 20px',
+ borderRadius: '8px',
+ background: 'rgba(234, 179, 8, 0.12)',
+ border: '1px solid rgba(234, 179, 8, 0.3)',
+ color: '#ca8a04',
+ fontSize: '14px',
+ textAlign: 'center',
+ maxWidth: '360px',
+ }}>
+ Your account is pending approval.
+ </div>
+ )}
+
+ <div style={{
+ background: 'var(--bg-panel, #161b22)',
+ border: '1px solid rgba(255,255,255,0.08)',
+ borderRadius: '16px',
+ padding: '40px',
+ width: '100%',
+ maxWidth: '380px',
+ }}>
+ <h2 style={{
+ fontSize: '22px',
+ fontWeight: 600,
+ color: 'var(--brand-text1, #e6edf3)',
+ textAlign: 'center',
+ marginBottom: '8px',
+ letterSpacing: '-0.02em',
+ }}>
+ Welcome back
+ </h2>
+ <p style={{
+ fontSize: '14px',
+ color: 'var(--brand-text2, #8b949e)',
+ textAlign: 'center',
+ marginBottom: '28px',
+ }}>
+ Sign in to continue
+ </p>
+
+ <button
+ onClick={() => { window.location.href = `${API_URL}/api/auth/google`; }}
+ style={{
+ width: '100%',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ gap: '12px',
+ padding: '12px 20px',
+ background: '#ffffff',
+ border: '1px solid #d1d5db',
+ borderRadius: '10px',
+ fontSize: '14px',
+ fontWeight: 500,
+ color: '#111827',
+ cursor: 'pointer',
+ transition: 'box-shadow 0.2s',
+ }}
+ onMouseEnter={e => { (e.currentTarget as HTMLButtonElement).style.boxShadow = '0 2px 8px rgba(0,0,0,0.12)'; }}
+ onMouseLeave={e => { (e.currentTarget as HTMLButtonElement).style.boxShadow = 'none'; }}
+ >
+ <svg width="18" height="18" viewBox="0 0 24 24">
+ <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" />
+ <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
+ <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
+ <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
+ </svg>
+ Continue with Google
+ </button>
+ </div>
+ </div>
+ );
+}
+
+export default function SignInPage() {
+ return (
+ <Suspense fallback={<div style={{ minHeight: '100vh', background: '#0d1117' }} />}>
+ <SignInInner />
+ </Suspense>
+ );
+}

frontend/src/components/Navbar.tsx

@@ -89,10 +89,10 @@ export default function Navbar() {
  }
  };
 
- const handleSignOut = () => {
+ const handleSignOut = async () => {
  setMenuOpen(false);
  setMobileNavOpen(false);
- signOut();
+await signOut();
  router.push('/');
  };
 

backend/db/migration_add_is_approved.sql

@@ -0,0 +1 @@
+ALTER TABLE public.users ADD COLUMN IF NOT EXISTS is_approved BOOLEAN NOT NULL DEFAULT false;

backend/db/supabase_schema.sql

@@ -10,11 +10,12 @@ CREATE TABLE IF NOT EXISTS users (
  email TEXT,
  streak_count INTEGER DEFAULT 0,
  last_active_date TEXT,
- room_id TEXT,
- created_at TIMESTAMPTZ DEFAULT now(),
- google_id TEXT UNIQUE,
- avatar_url TEXT,
- auth_provider TEXT DEFAULT 'google'
+ room_id TEXT,
+ created_at TIMESTAMPTZ DEFAULT now(),
+ google_id TEXT UNIQUE,
+ avatar_url TEXT,
+ auth_provider TEXT DEFAULT 'google',
+ is_approved BOOLEAN NOT NULL DEFAULT false
 );
 
 CREATE INDEX IF NOT EXISTS idx_users_google_id ON users(google_id);

backend/routes/auth.py

@@ -68,6 +68,15 @@ def _generate_pkce_pair():
  return code_verifier, code_challenge
 
 
+@router.get("/me")
+def get_me(user_id: str = Query(...)):
+ """Return approval status for a given user_id (used by Next.js session API route)."""
+ user = table("users").select("id,is_approved", filters={"id": f"eq.{user_id}"})
+ if not user:
+ raise HTTPException(status_code=404, detail="User not found")
+ return {"user_id": user_id, "is_approved": bool(user[0]["is_approved"])}
+
+
 @router.get("/google")
 def google_login():
  """Redirect to Google consent screen with identity + calendar scopes."""
@@ -117,19 +126,21 @@ def google_callback(code: str = Query(...), state: str = Query(None)):
  )
 
  # Determine user_id: check if this Google ID already exists
- existing = table("users").select("id", filters={"google_id": f"eq.{google_id}"})
+ existing = table("users").select("id,is_approved", filters={"google_id": f"eq.{google_id}"})
  if existing:
  user_id = existing[0]["id"]
+ is_approved = existing[0]["is_approved"]
  # Update name/avatar in case they changed
  table("users").update(
  {"name": name, "avatar_url": avatar_url, "email": email},
  filters={"id": f"eq.{user_id}"},
  )
  else:
  # Check if a user with this email exists (migration from old system)
- email_match = table("users").select("id", filters={"email": f"eq.{email}"})
+ email_match = table("users").select("id,is_approved", filters={"email": f"eq.{email}"})
  if email_match:
  user_id = email_match[0]["id"]
+ is_approved = email_match[0]["is_approved"]
  table("users").update(
  {
  "google_id": google_id,
@@ -142,6 +153,7 @@ def google_callback(code: str = Query(...), state: str = Query(None)):
  else:
  # Create new user
  user_id = f"user_{google_id}"
+ is_approved = False
  table("users").insert({
  "id": user_id,
  "name": name,
@@ -162,10 +174,14 @@ def google_callback(code: str = Query(...), state: str = Query(None)):
  on_conflict="user_id",
  )
 
+ if not is_approved:
+ return RedirectResponse(f"{FRONTEND_URL}/pending")
+
  # Redirect to frontend with user info
  params = urlencode({
  "user_id": user_id,
  "name": name,
  "avatar": avatar_url,
+ "is_approved": "true",
  })
  return RedirectResponse(f"{FRONTEND_URL}/signin/callback?{params}")

frontend/src/app/api/auth/session/route.ts

@@ -0,0 +1,55 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { signSession, SESSION_MAX_AGE } from '@/lib/sessionToken';
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL;
+
+export async function POST(request: NextRequest) {
+ if (!API_URL) {
+ return NextResponse.json({ error: 'NEXT_PUBLIC_API_URL not configured' }, { status: 500 });
+ }
+
+ const { userId } = await request.json();
+ if (!userId || typeof userId !== 'string') {
+ return NextResponse.json({ error: 'Missing userId' }, { status: 400 });
+ }
+
+ // Verify with the backend that the user exists and is approved.
+ let approved = false;
+ try {
+ const controller = new AbortController();
+ const timeout = setTimeout(() => controller.abort(), 3000);
+ let res: Response;
+ try {
+ res = await fetch(`${API_URL}/auth/me?user_id=${encodeURIComponent(userId)}`, { signal: controller.signal });
+ } finally {
+ clearTimeout(timeout);
+ }
+ if (!res.ok) {
+ return NextResponse.json({ error: 'User not found' }, { status: 401 });
+ }
+ const data = await res.json();
+ approved = data.is_approved === true;
+ } catch {
+ return NextResponse.json({ error: 'Backend unreachable' }, { status: 502 });
+ }
+
+ if (!approved) {
+ return NextResponse.json({ error: 'Not approved' }, { status: 403 });
+ }
+
+ const token = await signSession(userId);
+ const response = NextResponse.json({ ok: true });
+ response.cookies.set('sapling_session', token, {
+ httpOnly: true,
+ sameSite: 'lax',
+ path: '/',
+ maxAge: SESSION_MAX_AGE,
+ });
+ return response;
+}
+
+export async function DELETE() {
+ const response = NextResponse.json({ ok: true });
+ response.cookies.set('sapling_session', '', { httpOnly: true, maxAge: 0, path: '/' });
+ return response;
+}

frontend/src/app/pending/page.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import Image from 'next/image';
+import { useUser } from '@/context/UserContext';
+
+export default function PendingPage() {
+ const router = useRouter();
+ const { signOut } = useUser();
+
+ async function handleSignOut() {
+ await signOut();
+ router.replace('/signin');
+ }
+
+ return (
+ <div style={{
+ minHeight: '100vh',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ background: 'var(--bg-base, #0d1117)',
+ color: 'var(--brand-text1, #e6edf3)',
+ padding: '24px',
+ }}>
+ <Image
+ src="/sapling-word-icon.png"
+ alt="Sapling"
+ width={140}
+ height={40}
+ style={{ marginBottom: '40px', objectFit: 'contain' }}
+ />
+ <h1 style={{
+ fontSize: '28px',
+ fontWeight: 600,
+ marginBottom: '12px',
+ textAlign: 'center',
+ letterSpacing: '-0.02em',
+ }}>
+ You&apos;re on the waitlist
+ </h1>
+ <p style={{
+ fontSize: '15px',
+ color: 'var(--brand-text2, #8b949e)',
+ textAlign: 'center',
+ maxWidth: '340px',
+ lineHeight: 1.6,
+ marginBottom: '40px',
+ }}>
+ We&apos;ll reach out when your access is approved.
+ </p>
+ <button
+ onClick={handleSignOut}
+ style={{
+ background: 'transparent',
+ border: '1px solid rgba(255,255,255,0.15)',
+ color: 'var(--brand-text2, #8b949e)',
+ padding: '10px 24px',
+ borderRadius: '8px',
+ fontSize: '14px',
+ cursor: 'pointer',
+ transition: 'border-color 0.2s, color 0.2s',
+ }}
+ onMouseEnter={e => {
+ (e.currentTarget as HTMLButtonElement).style.borderColor = 'rgba(255,255,255,0.35)';
+ (e.currentTarget as HTMLButtonElement).style.color = 'var(--brand-text1, #e6edf3)';
+ }}
+ onMouseLeave={e => {
+ (e.currentTarget as HTMLButtonElement).style.borderColor = 'rgba(255,255,255,0.15)';
+ (e.currentTarget as HTMLButtonElement).style.color = 'var(--brand-text2, #8b949e)';
+ }}
+ >
+ Sign out
+ </button>
+ </div>
+ );
+}

frontend/src/app/signin/callback/page.tsx

@@ -7,18 +7,36 @@ import { useUser } from '@/context/UserContext';
 function CallbackInner() {
  const searchParams = useSearchParams();
  const router = useRouter();
- const { setActiveUser } = useUser();
+ const { setActiveUser, confirmApproved } = useUser();
 
  useEffect(() => {
  const userId = searchParams.get('user_id');
  const name = searchParams.get('name');
  const avatar = searchParams.get('avatar');
+ const isApproved = searchParams.get('is_approved') === 'true';
+ const error = searchParams.get('error');
+
+ if (error === 'not_approved' || !isApproved) {
+ router.replace('/pending');
+ return;
+ }
 
  if (userId && name) {
  setActiveUser(userId, name, avatar || '');
- router.replace('/');
+ fetch('/api/auth/session', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ userId }),
+ }).then(res => {
+ if (res.ok) {
+ confirmApproved();
+ router.replace('/dashboard');
+ } else {
+ router.replace('/signin');
+ }
+ });
  } else {
- router.replace('/');
+ router.replace('/signin');
  }
  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 

frontend/src/app/signin/page.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { Suspense } from 'react';
+import { useSearchParams } from 'next/navigation';
+import Image from 'next/image';
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:5000';
+
+function SignInInner() {
+ const searchParams = useSearchParams();
+ const error = searchParams.get('error');
+
+ return (
+ <div style={{
+ minHeight: '100vh',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ background: 'var(--bg-base, #0d1117)',
+ padding: '24px',
+ }}>
+ <Image
+ src="/sapling-word-icon.png"
+ alt="Sapling"
+ width={140}
+ height={40}
+ style={{ marginBottom: '40px', objectFit: 'contain' }}
+ />
+
+ {error === 'not_approved' && (
+ <div style={{
+ marginBottom: '24px',
+ padding: '12px 20px',
+ borderRadius: '8px',
+ background: 'rgba(234, 179, 8, 0.12)',
+ border: '1px solid rgba(234, 179, 8, 0.3)',
+ color: '#ca8a04',
+ fontSize: '14px',
+ textAlign: 'center',
+ maxWidth: '360px',
+ }}>
+ Your account is pending approval.
+ </div>
+ )}
+
+ <div style={{
+ background: 'var(--bg-panel, #161b22)',
+ border: '1px solid rgba(255,255,255,0.08)',
+ borderRadius: '16px',
+ padding: '40px',
+ width: '100%',
+ maxWidth: '380px',
+ }}>
+ <h2 style={{
+ fontSize: '22px',
+ fontWeight: 600,
+ color: 'var(--brand-text1, #e6edf3)',
+ textAlign: 'center',
+ marginBottom: '8px',
+ letterSpacing: '-0.02em',
+ }}>
+ Welcome back
+ </h2>
+ <p style={{
+ fontSize: '14px',
+ color: 'var(--brand-text2, #8b949e)',
+ textAlign: 'center',
+ marginBottom: '28px',
+ }}>
+ Sign in to continue
+ </p>
+
+ <button
+ onClick={() => { window.location.href = `${API_URL}/api/auth/google`; }}
+ style={{
+ width: '100%',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ gap: '12px',
+ padding: '12px 20px',
+ background: '#ffffff',
+ border: '1px solid #d1d5db',
+ borderRadius: '10px',
+ fontSize: '14px',
+ fontWeight: 500,
+ color: '#111827',
+ cursor: 'pointer',
+ transition: 'box-shadow 0.2s',
+ }}
+ onMouseEnter={e => { (e.currentTarget as HTMLButtonElement).style.boxShadow = '0 2px 8px rgba(0,0,0,0.12)'; }}
+ onMouseLeave={e => { (e.currentTarget as HTMLButtonElement).style.boxShadow = 'none'; }}
+ >
+ <svg width="18" height="18" viewBox="0 0 24 24">
+ <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" />
+ <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
+ <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
+ <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
+ </svg>
+ Continue with Google
+ </button>
+ </div>
+ </div>
+ );
+}
+
+export default function SignInPage() {
+ return (
+ <Suspense fallback={<div style={{ minHeight: '100vh', background: '#0d1117' }} />}>
+ <SignInInner />
+ </Suspense>
+ );
+}

frontend/src/components/Navbar.tsx

@@ -89,10 +89,10 @@ export default function Navbar() {
  }
  };
 
- const handleSignOut = () => {
+ const handleSignOut = async () => {
  setMenuOpen(false);
  setMobileNavOpen(false);
- signOut();
+await signOut();
  router.push('/');
  };
 

backend/db/migration_add_is_approved.sql

@@ -0,0 +1 @@
+ALTER TABLE public.users ADD COLUMN IF NOT EXISTS is_approved BOOLEAN NOT NULL DEFAULT false;

backend/db/supabase_schema.sql

@@ -10,11 +10,12 @@ CREATE TABLE IF NOT EXISTS users (
  email TEXT,
  streak_count INTEGER DEFAULT 0,
  last_active_date TEXT,
- room_id TEXT,
- created_at TIMESTAMPTZ DEFAULT now(),
- google_id TEXT UNIQUE,
- avatar_url TEXT,
- auth_provider TEXT DEFAULT 'google'
+ room_id TEXT,
+ created_at TIMESTAMPTZ DEFAULT now(),
+ google_id TEXT UNIQUE,
+ avatar_url TEXT,
+ auth_provider TEXT DEFAULT 'google',
+ is_approved BOOLEAN NOT NULL DEFAULT false
 );
 
 CREATE INDEX IF NOT EXISTS idx_users_google_id ON users(google_id);

backend/routes/auth.py

@@ -68,6 +68,15 @@ def _generate_pkce_pair():
  return code_verifier, code_challenge
 
 
+@router.get("/me")
+def get_me(user_id: str = Query(...)):
+ """Return approval status for a given user_id (used by Next.js session API route)."""
+ user = table("users").select("id,is_approved", filters={"id": f"eq.{user_id}"})
+ if not user:
+ raise HTTPException(status_code=404, detail="User not found")
+ return {"user_id": user_id, "is_approved": bool(user[0]["is_approved"])}
+
+
 @router.get("/google")
 def google_login():
  """Redirect to Google consent screen with identity + calendar scopes."""
@@ -117,19 +126,21 @@ def google_callback(code: str = Query(...), state: str = Query(None)):
  )
 
  # Determine user_id: check if this Google ID already exists
- existing = table("users").select("id", filters={"google_id": f"eq.{google_id}"})
+ existing = table("users").select("id,is_approved", filters={"google_id": f"eq.{google_id}"})
  if existing:
  user_id = existing[0]["id"]
+ is_approved = existing[0]["is_approved"]
  # Update name/avatar in case they changed
  table("users").update(
  {"name": name, "avatar_url": avatar_url, "email": email},
  filters={"id": f"eq.{user_id}"},
  )
  else:
  # Check if a user with this email exists (migration from old system)
- email_match = table("users").select("id", filters={"email": f"eq.{email}"})
+ email_match = table("users").select("id,is_approved", filters={"email": f"eq.{email}"})
  if email_match:
  user_id = email_match[0]["id"]
+ is_approved = email_match[0]["is_approved"]
  table("users").update(
  {
  "google_id": google_id,
@@ -142,6 +153,7 @@ def google_callback(code: str = Query(...), state: str = Query(None)):
  else:
  # Create new user
  user_id = f"user_{google_id}"
+ is_approved = False
  table("users").insert({
  "id": user_id,
  "name": name,
@@ -162,10 +174,14 @@ def google_callback(code: str = Query(...), state: str = Query(None)):
  on_conflict="user_id",
  )
 
+ if not is_approved:
+ return RedirectResponse(f"{FRONTEND_URL}/pending")
+
  # Redirect to frontend with user info
  params = urlencode({
  "user_id": user_id,
  "name": name,
  "avatar": avatar_url,
+ "is_approved": "true",
  })
  return RedirectResponse(f"{FRONTEND_URL}/signin/callback?{params}")

frontend/src/app/api/auth/session/route.ts

@@ -0,0 +1,55 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { signSession, SESSION_MAX_AGE } from '@/lib/sessionToken';
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL;
+
+export async function POST(request: NextRequest) {
+ if (!API_URL) {
+ return NextResponse.json({ error: 'NEXT_PUBLIC_API_URL not configured' }, { status: 500 });
+ }
+
+ const { userId } = await request.json();
+ if (!userId || typeof userId !== 'string') {
+ return NextResponse.json({ error: 'Missing userId' }, { status: 400 });
+ }
+
+ // Verify with the backend that the user exists and is approved.
+ let approved = false;
+ try {
+ const controller = new AbortController();
+ const timeout = setTimeout(() => controller.abort(), 3000);
+ let res: Response;
+ try {
+ res = await fetch(`${API_URL}/auth/me?user_id=${encodeURIComponent(userId)}`, { signal: controller.signal });
+ } finally {
+ clearTimeout(timeout);
+ }
+ if (!res.ok) {
+ return NextResponse.json({ error: 'User not found' }, { status: 401 });
+ }
+ const data = await res.json();
+ approved = data.is_approved === true;
+ } catch {
+ return NextResponse.json({ error: 'Backend unreachable' }, { status: 502 });
+ }
+
+ if (!approved) {
+ return NextResponse.json({ error: 'Not approved' }, { status: 403 });
+ }
+
+ const token = await signSession(userId);
+ const response = NextResponse.json({ ok: true });
+ response.cookies.set('sapling_session', token, {
+ httpOnly: true,
+ sameSite: 'lax',
+ path: '/',
+ maxAge: SESSION_MAX_AGE,
+ });
+ return response;
+}
+
+export async function DELETE() {
+ const response = NextResponse.json({ ok: true });
+ response.cookies.set('sapling_session', '', { httpOnly: true, maxAge: 0, path: '/' });
+ return response;
+}

frontend/src/app/pending/page.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import Image from 'next/image';
+import { useUser } from '@/context/UserContext';
+
+export default function PendingPage() {
+ const router = useRouter();
+ const { signOut } = useUser();
+
+ async function handleSignOut() {
+ await signOut();
+ router.replace('/signin');
+ }
+
+ return (
+ <div style={{
+ minHeight: '100vh',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ background: 'var(--bg-base, #0d1117)',
+ color: 'var(--brand-text1, #e6edf3)',
+ padding: '24px',
+ }}>
+ <Image
+ src="/sapling-word-icon.png"
+ alt="Sapling"
+ width={140}
+ height={40}
+ style={{ marginBottom: '40px', objectFit: 'contain' }}
+ />
+ <h1 style={{
+ fontSize: '28px',
+ fontWeight: 600,
+ marginBottom: '12px',
+ textAlign: 'center',
+ letterSpacing: '-0.02em',
+ }}>
+ You&apos;re on the waitlist
+ </h1>
+ <p style={{
+ fontSize: '15px',
+ color: 'var(--brand-text2, #8b949e)',
+ textAlign: 'center',
+ maxWidth: '340px',
+ lineHeight: 1.6,
+ marginBottom: '40px',
+ }}>
+ We&apos;ll reach out when your access is approved.
+ </p>
+ <button
+ onClick={handleSignOut}
+ style={{
+ background: 'transparent',
+ border: '1px solid rgba(255,255,255,0.15)',
+ color: 'var(--brand-text2, #8b949e)',
+ padding: '10px 24px',
+ borderRadius: '8px',
+ fontSize: '14px',
+ cursor: 'pointer',
+ transition: 'border-color 0.2s, color 0.2s',
+ }}
+ onMouseEnter={e => {
+ (e.currentTarget as HTMLButtonElement).style.borderColor = 'rgba(255,255,255,0.35)';
+ (e.currentTarget as HTMLButtonElement).style.color = 'var(--brand-text1, #e6edf3)';
+ }}
+ onMouseLeave={e => {
+ (e.currentTarget as HTMLButtonElement).style.borderColor = 'rgba(255,255,255,0.15)';
+ (e.currentTarget as HTMLButtonElement).style.color = 'var(--brand-text2, #8b949e)';
+ }}
+ >
+ Sign out
+ </button>
+ </div>
+ );
+}

frontend/src/app/signin/callback/page.tsx

@@ -7,18 +7,36 @@ import { useUser } from '@/context/UserContext';
 function CallbackInner() {
  const searchParams = useSearchParams();
  const router = useRouter();
- const { setActiveUser } = useUser();
+ const { setActiveUser, confirmApproved } = useUser();
 
  useEffect(() => {
  const userId = searchParams.get('user_id');
  const name = searchParams.get('name');
  const avatar = searchParams.get('avatar');
+ const isApproved = searchParams.get('is_approved') === 'true';
+ const error = searchParams.get('error');
+
+ if (error === 'not_approved' || !isApproved) {
+ router.replace('/pending');
+ return;
+ }
 
  if (userId && name) {
  setActiveUser(userId, name, avatar || '');
- router.replace('/');
+ fetch('/api/auth/session', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ userId }),
+ }).then(res => {
+ if (res.ok) {
+ confirmApproved();
+ router.replace('/dashboard');
+ } else {
+ router.replace('/signin');
+ }
+ });
  } else {
- router.replace('/');
+ router.replace('/signin');
  }
  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 

frontend/src/app/signin/page.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { Suspense } from 'react';
+import { useSearchParams } from 'next/navigation';
+import Image from 'next/image';
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:5000';
+
+function SignInInner() {
+ const searchParams = useSearchParams();
+ const error = searchParams.get('error');
+
+ return (
+ <div style={{
+ minHeight: '100vh',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ background: 'var(--bg-base, #0d1117)',
+ padding: '24px',
+ }}>
+ <Image
+ src="/sapling-word-icon.png"
+ alt="Sapling"
+ width={140}
+ height={40}
+ style={{ marginBottom: '40px', objectFit: 'contain' }}
+ />
+
+ {error === 'not_approved' && (
+ <div style={{
+ marginBottom: '24px',
+ padding: '12px 20px',
+ borderRadius: '8px',
+ background: 'rgba(234, 179, 8, 0.12)',
+ border: '1px solid rgba(234, 179, 8, 0.3)',
+ color: '#ca8a04',
+ fontSize: '14px',
+ textAlign: 'center',
+ maxWidth: '360px',
+ }}>
+ Your account is pending approval.
+ </div>
+ )}
+
+ <div style={{
+ background: 'var(--bg-panel, #161b22)',
+ border: '1px solid rgba(255,255,255,0.08)',
+ borderRadius: '16px',
+ padding: '40px',
+ width: '100%',
+ maxWidth: '380px',
+ }}>
+ <h2 style={{
+ fontSize: '22px',
+ fontWeight: 600,
+ color: 'var(--brand-text1, #e6edf3)',
+ textAlign: 'center',
+ marginBottom: '8px',
+ letterSpacing: '-0.02em',
+ }}>
+ Welcome back
+ </h2>
+ <p style={{
+ fontSize: '14px',
+ color: 'var(--brand-text2, #8b949e)',
+ textAlign: 'center',
+ marginBottom: '28px',
+ }}>
+ Sign in to continue
+ </p>
+
+ <button
+ onClick={() => { window.location.href = `${API_URL}/api/auth/google`; }}
+ style={{
+ width: '100%',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ gap: '12px',
+ padding: '12px 20px',
+ background: '#ffffff',
+ border: '1px solid #d1d5db',
+ borderRadius: '10px',
+ fontSize: '14px',
+ fontWeight: 500,
+ color: '#111827',
+ cursor: 'pointer',
+ transition: 'box-shadow 0.2s',
+ }}
+ onMouseEnter={e => { (e.currentTarget as HTMLButtonElement).style.boxShadow = '0 2px 8px rgba(0,0,0,0.12)'; }}
+ onMouseLeave={e => { (e.currentTarget as HTMLButtonElement).style.boxShadow = 'none'; }}
+ >
+ <svg width="18" height="18" viewBox="0 0 24 24">
+ <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" />
+ <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
+ <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
+ <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
+ </svg>
+ Continue with Google
+ </button>
+ </div>
+ </div>
+ );
+}
+
+export default function SignInPage() {
+ return (
+ <Suspense fallback={<div style={{ minHeight: '100vh', background: '#0d1117' }} />}>
+ <SignInInner />
+ </Suspense>
+ );
+}

frontend/src/components/Navbar.tsx

@@ -89,10 +89,10 @@ export default function Navbar() {
  }
  };
 
- const handleSignOut = () => {
+ const handleSignOut = async () => {
  setMenuOpen(false);
  setMobileNavOpen(false);
- signOut();
+await signOut();
  router.push('/');
  };
 

backend/db/migration_add_is_approved.sql

@@ -0,0 +1 @@
+ALTER TABLE public.users ADD COLUMN IF NOT EXISTS is_approved BOOLEAN NOT NULL DEFAULT false;

backend/db/supabase_schema.sql

@@ -10,11 +10,12 @@ CREATE TABLE IF NOT EXISTS users (
  email TEXT,
  streak_count INTEGER DEFAULT 0,
  last_active_date TEXT,
- room_id TEXT,
- created_at TIMESTAMPTZ DEFAULT now(),
- google_id TEXT UNIQUE,
- avatar_url TEXT,
- auth_provider TEXT DEFAULT 'google'
+ room_id TEXT,
+ created_at TIMESTAMPTZ DEFAULT now(),
+ google_id TEXT UNIQUE,
+ avatar_url TEXT,
+ auth_provider TEXT DEFAULT 'google',
+ is_approved BOOLEAN NOT NULL DEFAULT false
 );
 
 CREATE INDEX IF NOT EXISTS idx_users_google_id ON users(google_id);

backend/routes/auth.py

@@ -68,6 +68,15 @@ def _generate_pkce_pair():
  return code_verifier, code_challenge
 
 
+@router.get("/me")
+def get_me(user_id: str = Query(...)):
+ """Return approval status for a given user_id (used by Next.js session API route)."""
+ user = table("users").select("id,is_approved", filters={"id": f"eq.{user_id}"})
+ if not user:
+ raise HTTPException(status_code=404, detail="User not found")
+ return {"user_id": user_id, "is_approved": bool(user[0]["is_approved"])}
+
+
 @router.get("/google")
 def google_login():
  """Redirect to Google consent screen with identity + calendar scopes."""
@@ -117,19 +126,21 @@ def google_callback(code: str = Query(...), state: str = Query(None)):
  )
 
  # Determine user_id: check if this Google ID already exists
- existing = table("users").select("id", filters={"google_id": f"eq.{google_id}"})
+ existing = table("users").select("id,is_approved", filters={"google_id": f"eq.{google_id}"})
  if existing:
  user_id = existing[0]["id"]
+ is_approved = existing[0]["is_approved"]
  # Update name/avatar in case they changed
  table("users").update(
  {"name": name, "avatar_url": avatar_url, "email": email},
  filters={"id": f"eq.{user_id}"},
  )
  else:
  # Check if a user with this email exists (migration from old system)
- email_match = table("users").select("id", filters={"email": f"eq.{email}"})
+ email_match = table("users").select("id,is_approved", filters={"email": f"eq.{email}"})
  if email_match:
  user_id = email_match[0]["id"]
+ is_approved = email_match[0]["is_approved"]
  table("users").update(
  {
  "google_id": google_id,
@@ -142,6 +153,7 @@ def google_callback(code: str = Query(...), state: str = Query(None)):
  else:
  # Create new user
  user_id = f"user_{google_id}"
+ is_approved = False
  table("users").insert({
  "id": user_id,
  "name": name,
@@ -162,10 +174,14 @@ def google_callback(code: str = Query(...), state: str = Query(None)):
  on_conflict="user_id",
  )
 
+ if not is_approved:
+ return RedirectResponse(f"{FRONTEND_URL}/pending")
+
  # Redirect to frontend with user info
  params = urlencode({
  "user_id": user_id,
  "name": name,
  "avatar": avatar_url,
+ "is_approved": "true",
  })
  return RedirectResponse(f"{FRONTEND_URL}/signin/callback?{params}")

frontend/src/app/api/auth/session/route.ts

@@ -0,0 +1,55 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { signSession, SESSION_MAX_AGE } from '@/lib/sessionToken';
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL;
+
+export async function POST(request: NextRequest) {
+ if (!API_URL) {
+ return NextResponse.json({ error: 'NEXT_PUBLIC_API_URL not configured' }, { status: 500 });
+ }
+
+ const { userId } = await request.json();
+ if (!userId || typeof userId !== 'string') {
+ return NextResponse.json({ error: 'Missing userId' }, { status: 400 });
+ }
+
+ // Verify with the backend that the user exists and is approved.
+ let approved = false;
+ try {
+ const controller = new AbortController();
+ const timeout = setTimeout(() => controller.abort(), 3000);
+ let res: Response;
+ try {
+ res = await fetch(`${API_URL}/auth/me?user_id=${encodeURIComponent(userId)}`, { signal: controller.signal });
+ } finally {
+ clearTimeout(timeout);
+ }
+ if (!res.ok) {
+ return NextResponse.json({ error: 'User not found' }, { status: 401 });
+ }
+ const data = await res.json();
+ approved = data.is_approved === true;
+ } catch {
+ return NextResponse.json({ error: 'Backend unreachable' }, { status: 502 });
+ }
+
+ if (!approved) {
+ return NextResponse.json({ error: 'Not approved' }, { status: 403 });
+ }
+
+ const token = await signSession(userId);
+ const response = NextResponse.json({ ok: true });
+ response.cookies.set('sapling_session', token, {
+ httpOnly: true,
+ sameSite: 'lax',
+ path: '/',
+ maxAge: SESSION_MAX_AGE,
+ });
+ return response;
+}
+
+export async function DELETE() {
+ const response = NextResponse.json({ ok: true });
+ response.cookies.set('sapling_session', '', { httpOnly: true, maxAge: 0, path: '/' });
+ return response;
+}

frontend/src/app/pending/page.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import Image from 'next/image';
+import { useUser } from '@/context/UserContext';
+
+export default function PendingPage() {
+ const router = useRouter();
+ const { signOut } = useUser();
+
+ async function handleSignOut() {
+ await signOut();
+ router.replace('/signin');
+ }
+
+ return (
+ <div style={{
+ minHeight: '100vh',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ background: 'var(--bg-base, #0d1117)',
+ color: 'var(--brand-text1, #e6edf3)',
+ padding: '24px',
+ }}>
+ <Image
+ src="/sapling-word-icon.png"
+ alt="Sapling"
+ width={140}
+ height={40}
+ style={{ marginBottom: '40px', objectFit: 'contain' }}
+ />
+ <h1 style={{
+ fontSize: '28px',
+ fontWeight: 600,
+ marginBottom: '12px',
+ textAlign: 'center',
+ letterSpacing: '-0.02em',
+ }}>
+ You&apos;re on the waitlist
+ </h1>
+ <p style={{
+ fontSize: '15px',
+ color: 'var(--brand-text2, #8b949e)',
+ textAlign: 'center',
+ maxWidth: '340px',
+ lineHeight: 1.6,
+ marginBottom: '40px',
+ }}>
+ We&apos;ll reach out when your access is approved.
+ </p>
+ <button
+ onClick={handleSignOut}
+ style={{
+ background: 'transparent',
+ border: '1px solid rgba(255,255,255,0.15)',
+ color: 'var(--brand-text2, #8b949e)',
+ padding: '10px 24px',
+ borderRadius: '8px',
+ fontSize: '14px',
+ cursor: 'pointer',
+ transition: 'border-color 0.2s, color 0.2s',
+ }}
+ onMouseEnter={e => {
+ (e.currentTarget as HTMLButtonElement).style.borderColor = 'rgba(255,255,255,0.35)';
+ (e.currentTarget as HTMLButtonElement).style.color = 'var(--brand-text1, #e6edf3)';
+ }}
+ onMouseLeave={e => {
+ (e.currentTarget as HTMLButtonElement).style.borderColor = 'rgba(255,255,255,0.15)';
+ (e.currentTarget as HTMLButtonElement).style.color = 'var(--brand-text2, #8b949e)';
+ }}
+ >
+ Sign out
+ </button>
+ </div>
+ );
+}

frontend/src/app/signin/callback/page.tsx

@@ -7,18 +7,36 @@ import { useUser } from '@/context/UserContext';
 function CallbackInner() {
  const searchParams = useSearchParams();
  const router = useRouter();
- const { setActiveUser } = useUser();
+ const { setActiveUser, confirmApproved } = useUser();
 
  useEffect(() => {
  const userId = searchParams.get('user_id');
  const name = searchParams.get('name');
  const avatar = searchParams.get('avatar');
+ const isApproved = searchParams.get('is_approved') === 'true';
+ const error = searchParams.get('error');
+
+ if (error === 'not_approved' || !isApproved) {
+ router.replace('/pending');
+ return;
+ }
 
  if (userId && name) {
  setActiveUser(userId, name, avatar || '');
- router.replace('/');
+ fetch('/api/auth/session', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ userId }),
+ }).then(res => {
+ if (res.ok) {
+ confirmApproved();
+ router.replace('/dashboard');
+ } else {
+ router.replace('/signin');
+ }
+ });
  } else {
- router.replace('/');
+ router.replace('/signin');
  }
  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 

frontend/src/app/signin/page.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { Suspense } from 'react';
+import { useSearchParams } from 'next/navigation';
+import Image from 'next/image';
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:5000';
+
+function SignInInner() {
+ const searchParams = useSearchParams();
+ const error = searchParams.get('error');
+
+ return (
+ <div style={{
+ minHeight: '100vh',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ background: 'var(--bg-base, #0d1117)',
+ padding: '24px',
+ }}>
+ <Image
+ src="/sapling-word-icon.png"
+ alt="Sapling"
+ width={140}
+ height={40}
+ style={{ marginBottom: '40px', objectFit: 'contain' }}
+ />
+
+ {error === 'not_approved' && (
+ <div style={{
+ marginBottom: '24px',
+ padding: '12px 20px',
+ borderRadius: '8px',
+ background: 'rgba(234, 179, 8, 0.12)',
+ border: '1px solid rgba(234, 179, 8, 0.3)',
+ color: '#ca8a04',
+ fontSize: '14px',
+ textAlign: 'center',
+ maxWidth: '360px',
+ }}>
+ Your account is pending approval.
+ </div>
+ )}
+
+ <div style={{
+ background: 'var(--bg-panel, #161b22)',
+ border: '1px solid rgba(255,255,255,0.08)',
+ borderRadius: '16px',
+ padding: '40px',
+ width: '100%',
+ maxWidth: '380px',
+ }}>
+ <h2 style={{
+ fontSize: '22px',
+ fontWeight: 600,
+ color: 'var(--brand-text1, #e6edf3)',
+ textAlign: 'center',
+ marginBottom: '8px',
+ letterSpacing: '-0.02em',
+ }}>
+ Welcome back
+ </h2>
+ <p style={{
+ fontSize: '14px',
+ color: 'var(--brand-text2, #8b949e)',
+ textAlign: 'center',
+ marginBottom: '28px',
+ }}>
+ Sign in to continue
+ </p>
+
+ <button
+ onClick={() => { window.location.href = `${API_URL}/api/auth/google`; }}
+ style={{
+ width: '100%',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ gap: '12px',
+ padding: '12px 20px',
+ background: '#ffffff',
+ border: '1px solid #d1d5db',
+ borderRadius: '10px',
+ fontSize: '14px',
+ fontWeight: 500,
+ color: '#111827',
+ cursor: 'pointer',
+ transition: 'box-shadow 0.2s',
+ }}
+ onMouseEnter={e => { (e.currentTarget as HTMLButtonElement).style.boxShadow = '0 2px 8px rgba(0,0,0,0.12)'; }}
+ onMouseLeave={e => { (e.currentTarget as HTMLButtonElement).style.boxShadow = 'none'; }}
+ >
+ <svg width="18" height="18" viewBox="0 0 24 24">
+ <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" />
+ <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
+ <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
+ <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
+ </svg>
+ Continue with Google
+ </button>
+ </div>
+ </div>
+ );
+}
+
+export default function SignInPage() {
+ return (
+ <Suspense fallback={<div style={{ minHeight: '100vh', background: '#0d1117' }} />}>
+ <SignInInner />
+ </Suspense>
+ );
+}

frontend/src/components/Navbar.tsx

@@ -89,10 +89,10 @@ export default function Navbar() {
  }
  };
 
- const handleSignOut = () => {
+ const handleSignOut = async () => {
  setMenuOpen(false);
  setMobileNavOpen(false);
- signOut();
+await signOut();
  router.push('/');
  };