Protect your dev tunnel https://tunnel.wenzelarifiandi.com with GitHub sign‑in and phishing‑resistant MFA.

• Cloudflare Zero Trust account for wenzelarifiandi.com
• cloudflared installed locally (brew install cloudflared)
• Named tunnel configured (already set up by scripts): hostname tunnel.wenzelarifiandi.com → 127.0.0.1:4321
• Your GitHub account (or org/team) to allow

1. Go to Cloudflare Dashboard → Zero Trust → Settings → Authentication → Login methods.
2. Click “Add new” → choose “GitHub”.
3. Keep defaults (OIDC) and authorize Cloudflare with your GitHub.
4. Save. Ensure GitHub appears as an enabled login method.

Tip: You can add multiple IdPs later (e.g., Google) without changing app code.

1. Zero Trust → Access → Applications → Add an application.
2. Choose “Self‑hosted”.
3. Application name: ariane-dev-tunnel
4. Domain: tunnel.wenzelarifiandi.com
5. Session duration: 12 hours (adjust later if needed)
6. Identity providers: Select “GitHub” (and any others you added)
7. Save and create policy when prompted.

• Policy name: allow-github-wenzel
• Action: Allow
• Include:
  • Emails → add your GitHub email (or)
  • GitHub Organization/Team → select your org/team if applicable
• Require:
  • Authentication Method → Hardware security key (FIDO2/WebAuthn)
  • (Optional) Country → only your country when traveling
  • (Optional) Device posture → if you use WARP and posture checks
• Exclude: None (keep strict)
• Session duration: 12h; Idle timeout: 1–2h

Create a second disabled “Break‑glass” rule (optional):

• Action: Allow
• Include: your email
• Require: One‑time PIN
• Keep it disabled and enable only if you lose your security key.

• Start the Astro dev server with Cloudflare‑aware HMR:

  npm --prefix site run dev:cf

• In another terminal, run the named tunnel:

  npm --prefix site run cf:tunnel:named

• Or run both together:

  npm --prefix site run dev:bubble:cf:named

Visit https://tunnel.wenzelarifiandi.com. You should see the Cloudflare Access prompt and then the GitHub login. After approval, your dev site should load and HMR work over the tunnel.

• 502 Bad Gateway: Ensure the local dev server is running on http://127.0.0.1:4321 before starting the tunnel (scripts already wait). Check site/astro.config.mjs sets server.host to 127.0.0.1 and port 4321.
• Host not allowed (Vite): In dev we set vite.server.allowedHosts = "all" to permit the tunnel host.
• HMR not connecting: Use npm run dev:cf so HMR uses wss://tunnel.wenzelarifiandi.com.
• Access prompt doesn’t appear: Confirm the Access application is created for the exact hostname and that GitHub is enabled as a login method.

• Enforce hardware security keys via Cloudflare Access policies; application authentication now relies on Access + ZITADEL upstream.
• Keep One‑time PIN disabled except for a break‑glass rule.
• You can later switch or add IdPs (Azure AD/Okta) without changing this repo—only Access settings.

Short answer: Not for Cloudflare Access. When you add GitHub under Zero Trust → Authentication → Login methods, Cloudflare acts as the OAuth client. You don’t need your own GitHub OAuth app to use Access.

When you might register your own GitHub OAuth app:

• If your application itself needs to call GitHub APIs on behalf of a user or sign users in directly with GitHub (outside of Cloudflare Access).

If you do create a GitHub OAuth app (GitHub → Settings → Developer settings → OAuth Apps → New OAuth App):

• Application name: Ariane (or Ariane Dev)
• Homepage URL: https://wenzelarifiandi.com (or your project site)
• Application description: concise purpose, e.g., Local dev access and integrations for Ariane
• Authorization callback URL: depends on your flow
  • For Cloudflare Access: not required (Access handles callbacks)
  • For your own app OAuth: set to your app’s callback endpoint, e.g. https://tunnel.wenzelarifiandi.com/api/oauth/github/callback (or your production domain)
• Enable Device Flow: optional. Useful for CLIs/devices without browsers; otherwise leave off.

Important: If you only need perimeter protection for your dev site, stick with Cloudflare Access + GitHub login methods—no extra GitHub OAuth app needed.

If you created a GitHub OAuth app (for app-level login/integrations):

1. Get credentials from GitHub

• GitHub → Settings → Developer settings → OAuth Apps → select your app.
• Copy “Client ID” and generate a new “Client Secret”.

2. Put them in your local .env (never commit secrets)

• Edit site/.env (copy from site/.env.example if missing):
  • GITHUB_OAUTH_CLIENT_ID=...
  • GITHUB_OAUTH_CLIENT_SECRET=...
  • GITHUB_OAUTH_CALLBACK_URL=https://tunnel.wenzelarifiandi.com/api/oauth/github/callback

3. Put production values in Vercel Project Settings (Site)

• Vercel → Project (site) → Settings → Environment Variables
  • Add the same keys with production callback URL:
    • GITHUB_OAUTH_CLIENT_ID
    • GITHUB_OAUTH_CLIENT_SECRET
    • GITHUB_OAUTH_CALLBACK_URL=https://wenzelarifiandi.com/api/oauth/github/callback
• Redeploy to apply.

Tip: rotate secrets if exposed; you can generate a new GitHub Client Secret any time and update env vars.