Merge pull request #192 from feature/supabase-auth-google

feat: optional Google sign-in

Author: ayoub3bidi

.env.example

@@ -0,0 +1,11 @@
+# Bayan Flow — copy to .env.local for local development (never commit secrets)
+
+# Supabase (Google OIDC auth) — publishable anon key only
+VITE_SUPABASE_URL=https://your-project-ref.supabase.co
+VITE_SUPABASE_ANON_KEY=your-anon-key
+
+# Google Identity Services — Web OAuth client ID (public)
+VITE_GOOGLE_WEB_CLIENT_ID=your-web-client-id.apps.googleusercontent.com
+
+# Optional: Pyodide CDN override (see src/constants/pyodideCdn.js)
+# VITE_PYODIDE_CDN_BASE=

.github/workflows/deploy-cloudflare.yml

@@ -48,6 +48,9 @@ jobs:
         env:
           VITE_GIT_BRANCH: ${{ github.event.workflow_run.head_branch }}
           VITE_DEV_SITE_URL: https://dev.bayanflow.com
+          VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
+          VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}
+          VITE_GOOGLE_WEB_CLIENT_ID: ${{ secrets.VITE_GOOGLE_WEB_CLIENT_ID }}
 
       - name: Deploy to Cloudflare Workers
         uses: cloudflare/wrangler-action@9acf94ace14e7dc412b076f2c5c20b8ce93c79cd # v3

.github/workflows/preview-cloudflare.yml

@@ -55,6 +55,9 @@ jobs:
         env:
           VITE_GIT_BRANCH: ${{ github.head_ref }}
           VITE_DEV_SITE_URL: https://dev.bayanflow.com
+          VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
+          VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}
+          VITE_GOOGLE_WEB_CLIENT_ID: ${{ secrets.VITE_GOOGLE_WEB_CLIENT_ID }}
 
       - name: Upload preview version
         id: deploy

AGENTS.md

@@ -6,10 +6,12 @@
 
 ## Project Snapshot
 
-- Product: **Bayan Flow** · client-side React SPA (`/`, `/app`, `/roadmap`)
+- Product: **Bayan Flow** · client-side React SPA (`/`, `/app`, `/roadmap`, `/privacy`, `/terms`)
 - Repo: `https://github.com/ayoub3bidi/bayan-flow` · prod `main` → bayanflow.com · dev `develop` → dev.bayanflow.com
+- Hosting: **Cloudflare Workers** (static SPA via `wrangler.jsonc`); `netlify.toml` kept for rollback only — CI deploys through `.github/workflows/deploy-cloudflare.yml`
 - Tooling: React 19, Vite 7, Tailwind 4, Vitest 3, Remotion 4, i18next (en/fr/ar RTL), Pyodide 0.27.5 in worker
 - Engines: Node `>=24.11.1`, pnpm `>=8.15.9` · alias `@/` → `src/`
+- Version: `0.5.0` in `package.json` — algorithm categories (45 algos, 5 categories) shipped; optional Google sign-in when Supabase env vars are set
 - **PRs target `develop`**, not `main` (gated by `ensure-pr-source-develop.yml`)
 
 ## Source Of Truth (registries)
@@ -57,6 +59,19 @@ Audit all three locales + pseudocode strings + export fallbacks when renaming ca
 
 See reference doc for full checklists (JS, Python, pseudocode, sound, insight, tests, registries). Keep graph algorithm commits scoped to one algorithm when possible.
 
+## Auth contracts (non-negotiable)
+
+- **OIDC only** — Google sign-in via Supabase Auth; no email/password flows in v0.5.0
+- **Service layer** — `src/services/authService.js`, `profileService.js`; components use `AuthContext` / `useAuth`, never import Supabase directly
+- **Postgres-portable schema** — `profiles` keyed to `auth.users`; RLS on public tables; client never writes `plan` (service role / webhook only, future)
+- **Session** — `getSession()`, `onAuthStateChange()`; `AuthProvider` in `src/main.jsx`
+- **OAuth UX** — Google Identity Services (One Tap + PKCE popup on `/auth/google/callback`); web uses `signInWithIdToken`, not `signInWithOAuth`
+- **i18n** — sign-in/out strings and legal copy in en/fr/ar; audit RTL for Header auth control
+- **Free by default** — unauthenticated users keep full access; auth PRs must not gate existing features
+- **Secrets** — publishable anon key via `VITE_*` only; service role key never in repo or client bundle
+- **CSP** — Supabase origin in `connect-src`; Google profile photos in `img-src`; assert via `scripts/cspHeaders.js`
+- **Tests** — mock Supabase in Vitest (`src/test/supabaseMock.js`, wired in `src/test/setup.js`)
+
 ## Workflow rules
 
 - Minimal diff; no unrelated edits; preserve user-authored changes

README.md

@@ -1,7 +1,7 @@
 # Bayan Flow
 
 <p align="center">
-    <img src="./logo.png" alt="Bayan Flow Logo" width="120"/> <br/>
+    <img src="./public/logo-white.png" alt="Bayan Flow Logo" width="120"/> <br/>
     <strong>Learn algorithms with clarity through interactive, real-time visualizations</strong><br/>
     <em>Bayan (بيان) means clarity in Arabic</em>
 </p>
@@ -22,7 +22,7 @@
 
 ## What it is
 
-Bayan Flow is a client-side SPA with **45 algorithms** across five modes. Pick a category, choose an algorithm, then step through or autoplay the visualization. Optional **Python** implementations run in the browser (Pyodide `0.27.5`), with a **complexity** panel after completion and **video export** (horizontal or vertical MP4) when you want to share or study offline.
+Bayan Flow is a an open source educational tool with **45 algorithms** across five categories. Choose an algorithm and step through or autoplay the visualization. Optional **Python** implementations run in the browser (Pyodide `0.27.5`), with a **complexity** panel after completion and **video export** (horizontal or vertical MP4) when you want to share or study offline.
 
 ## Features (overview)
 

netlify.toml

@@ -17,8 +17,8 @@
     X-Content-Type-Options = "nosniff"
     X-Frame-Options = "DENY"
     Referrer-Policy = "strict-origin-when-cross-origin"
-    Permissions-Policy = "camera=(), microphone=(), geolocation=()"
-    Content-Security-Policy = "default-src 'self'; script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' blob: https://cloud.umami.is https://static.cloudflareinsights.com https://cdn.jsdelivr.net; connect-src 'self' blob: https://cloud.umami.is https://gateway.umami.is https://cloudflareinsights.com https://api.github.com https://cdn.jsdelivr.net https://www.remotion.pro; img-src 'self' data: blob: https://api.producthunt.com; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; font-src 'self' data:; worker-src 'self' blob:; media-src 'self' blob:; frame-src https://www.youtube-nocookie.com; object-src 'none'; base-uri 'self'; form-action 'self'"
+    Permissions-Policy = "camera=(), microphone=(), geolocation=(), identity-credentials-get=(self \"https://accounts.google.com\")"
+    Content-Security-Policy = "default-src 'self'; script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' blob: https://cloud.umami.is https://static.cloudflareinsights.com https://cdn.jsdelivr.net https://accounts.google.com; connect-src 'self' blob: https://cloud.umami.is https://gateway.umami.is https://cloudflareinsights.com https://api.github.com https://cdn.jsdelivr.net https://www.remotion.pro https://qketsapzqpzmccljfjcm.supabase.co https://accounts.google.com https://oauth2.googleapis.com; img-src 'self' data: blob: https://api.producthunt.com https://lh3.googleusercontent.com; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; font-src 'self' data:; worker-src 'self' blob:; media-src 'self' blob:; frame-src https://www.youtube-nocookie.com https://accounts.google.com; object-src 'none'; base-uri 'self'; form-action 'self'"
 
 # SPA routing: rewrite all non-file requests to index.html
 [[redirects]]

package.json

@@ -53,12 +53,15 @@
     "preview:cf:upload": "wrangler versions upload --env staging"
   },
   "dependencies": {
+    "@dicebear/core": "^10.3.0",
+    "@dicebear/styles": "^10.2.0",
     "@fontsource-variable/inter": "^5.2.8",
     "@monaco-editor/react": "^4.7.0",
     "@octokit/rest": "^22.0.1",
     "@phosphor-icons/react": "^2.1.10",
     "@remotion/media": "4.0.436",
     "@remotion/web-renderer": "^4.0.436",
+    "@supabase/supabase-js": "^2.108.2",
     "i18next": "^25.7.1",
     "i18next-browser-languagedetector": "^8.2.0",
     "react": "^19.2.0",

pnpm-lock.yaml

@@ -3,9 +3,9 @@
   X-Content-Type-Options: nosniff
   X-Frame-Options: DENY
   Referrer-Policy: strict-origin-when-cross-origin
-  Permissions-Policy: camera=(), microphone=(), geolocation=()
+  Permissions-Policy: camera=(), microphone=(), geolocation=(), identity-credentials-get=(self "https://accounts.google.com")
   # Pyodide CDN origins: jsDelivr below; custom VITE_PYODIDE_CDN_BASE origins appended at build (vite.config.js)
-  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' blob: https://cloud.umami.is https://static.cloudflareinsights.com https://cdn.jsdelivr.net; connect-src 'self' blob: https://cloud.umami.is https://gateway.umami.is https://cloudflareinsights.com https://api.github.com https://cdn.jsdelivr.net https://www.remotion.pro; img-src 'self' data: blob: https://api.producthunt.com; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; font-src 'self' data:; worker-src 'self' blob:; media-src 'self' blob:; frame-src https://www.youtube-nocookie.com; object-src 'none'; base-uri 'self'; form-action 'self'
+  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' blob: https://cloud.umami.is https://static.cloudflareinsights.com https://cdn.jsdelivr.net https://accounts.google.com; connect-src 'self' blob: https://cloud.umami.is https://gateway.umami.is https://cloudflareinsights.com https://api.github.com https://cdn.jsdelivr.net https://www.remotion.pro https://qketsapzqpzmccljfjcm.supabase.co https://accounts.google.com https://oauth2.googleapis.com; img-src 'self' data: blob: https://api.producthunt.com https://lh3.googleusercontent.com; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; font-src 'self' data:; worker-src 'self' blob:; media-src 'self' blob:; frame-src https://www.youtube-nocookie.com https://accounts.google.com; object-src 'none'; base-uri 'self'; form-action 'self'
   Link: <https://bayanflow.com/sitemap.xml>; rel="sitemap"
 
 /assets/*

public/_headers

@@ -1,15 +1,36 @@
 # Authentication
 
-Bayan Flow is a fully client-side educational web application. No authentication or API keys are required to use the site.
+Bayan Flow offers optional sign-in with Google. You can use all algorithm visualizations, the code panel, insight panel, and video export without an account.
 
-## Usage
+## Sign in
 
-All features — algorithm visualizations, step-by-step execution, Python code editing, complexity analysis, and HD video export — are available without authentication.
+When you visit the site while signed into Google in your browser, a **Google One Tap** prompt may appear automatically so you can sign in with one click. You can also use the **Sign in with Google** control in the header at any time.
 
-## Data Privacy
+Sign-in uses [Google Identity Services](https://developers.google.com/identity) on **bayanflow.com** — Google shows our domain, not a third-party auth host. After you choose an account, Bayan Flow receives an ID token and creates a Supabase session. We store your Google account email, display name, and profile photo URL to show your account in the app and to maintain a minimal profile row in our database.
 
-Since there is no backend server or user accounts, no personal data is collected, stored, or transmitted by the application itself. The site uses Umami analytics (a privacy-preserving analytics service) for aggregate usage statistics; no personal identification data is tracked.
+**Google Cloud setup (required):** in [Google Cloud Console](https://console.cloud.google.com/apis/credentials) → your **Web application** OAuth client → **Authorized JavaScript origins**, add every origin where the app runs (scheme + host + port, no trailing slash):
+
+| Environment | Authorized JavaScript origin |
+|-------------|------------------------------|
+| Local dev (Vite default) | `http://localhost:5173` |
+| Dev deploy | `https://dev.bayanflow.com` |
+| Production | `https://bayanflow.com` |
+
+The `VITE_GOOGLE_WEB_CLIENT_ID` in `.env.local` must match this same Web client. Redirect URIs are **not** required for One Tap or the header sign-in button. If sign-in fails with `origin_mismatch` or `403` on `accounts.google.com/gsi/`, the current browser origin is missing from that list — open DevTools and compare `window.location.origin` to the Console entries exactly.
+
+**Supabase:** Authentication → Providers → Google — use the same Web Client ID and Client Secret from that OAuth client.
+
+**Browser:** Chrome may block FedCM / third-party sign-in for a site. If One Tap fails, use the header **Sign in with Google** button, or re-enable third-party sign-in via the icon left of the address bar → Site settings.
+
+## Data stored
+
+- **Session tokens** are stored in your browser by the Supabase client library so you stay signed in across visits.
+- **Profile row** (`email`, display name, avatar URL, provider, plan tier) is stored in Supabase PostgreSQL. See the [Privacy Policy](/privacy) for full details.
+
+## Sign out
+
+Use **Sign out** from the account menu in the header at any time. This clears the local session and disables Google automatic sign-in for this browser until you sign in again.
 
 ## Contact
 
-For questions or feedback, please open an issue at https://github.com/ayoub3bidi/bayan-flow
+For questions or feedback, email contact@bayanflow.com or open an issue at https://github.com/ayoub3bidi/bayan-flow