feat(auth): add standalone /auth landing page for desktop sso

2026-05-29 15:56:59 -07:00
parent fafab48ce9
commit aa78eab0bf
1 changed files with 86 additions and 0 deletions
--- a/src/index.ts
+++ b/src/index.ts
@@ -104,6 +104,92 @@ app.get('/', (c) => {
  });
 });

+// Standalone Auth Landing Page for Desktop SSO redirection
+app.get('/auth', (c) => {
+  return c.html(`
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1">
+      <title>Sign In to VibnCode</title>
+      <style>
+        :root { color-scheme: dark; }
+        body {
+          margin: 0;
+          min-height: 100vh;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: radial-gradient(circle at 20% 20%, #1c1c1f, #0b0b0f 60%);
+          color: #f5f5f5;
+          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+          letter-spacing: 0.01em;
+        }
+        .card {
+          border: 1px solid rgba(255, 255, 255, 0.08);
+          background: rgba(12, 12, 16, 0.85);
+          border-radius: 20px;
+          padding: 40px;
+          box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
+          backdrop-filter: blur(16px);
+          text-align: center;
+          width: min(400px, 90vw);
+        }
+        .logo {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 52px;
+          height: 52px;
+          border-radius: 12px;
+          background: linear-gradient(135deg, #3b82f6, #6366f1);
+          font-size: 24px;
+          margin-bottom: 20px;
+          color: white;
+          font-weight: bold;
+        }
+        h1 { margin: 0 0 8px; font-size: 24px; font-weight: 600; color: #f8f8f8; }
+        p { margin: 0 0 28px; color: #b6b6bd; font-size: 14px; line-height: 1.5; }
+        .button {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 10px;
+          width: 100%;
+          padding: 12px;
+          border-radius: 999px;
+          border: 1px solid rgba(255, 255, 255, 0.15);
+          background: rgba(255, 255, 255, 0.06);
+          color: #ffffff;
+          text-decoration: none;
+          font-size: 14px;
+          font-weight: 500;
+          margin-bottom: 12px;
+          transition: background 0.2s, transform 0.1s;
+        }
+        .button:hover {
+          background: rgba(255, 255, 255, 0.12);
+          transform: translateY(-1px);
+        }
+        .button:active {
+          transform: translateY(0);
+        }
+      </style>
+    </head>
+    <body>
+      <div class="card">
+        <div class="logo">V</div>
+        <h1>Sign In to VibnCode</h1>
+        <p>Connect your desktop client securely to your workspace cloud containers.</p>
+        <a class="button" href="/api/auth/github">Sign In with GitHub</a>
+        <a class="button" href="/api/auth/google">Sign In with Google</a>
+      </div>
+    </body>
+    </html>
+  `);
+});
+
 // API routes
 app.route('/api/auth', authRoutes);
 app.route('/api/marketplace', marketplaceRoutes);