@startup-api/cloudflare 0.0.1

package/public/users/style.css

@@ -0,0 +1,493 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family:
+    system-ui,
+    -apple-system,
+    sans-serif;
+  padding: 2rem;
+  margin: 0 auto;
+  background: #f9f9f9;
+}
+
+.main-layout,
+.header-area {
+  max-width: 1280px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.main-layout {
+  display: flex;
+  gap: 3rem;
+  margin-top: 2rem;
+}
+
+.sidebar {
+  width: 240px;
+  flex-shrink: 0;
+}
+
+.content-area {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.header-area {
+  margin-bottom: 2rem;
+  padding-left: calc(240px + 3rem);
+}
+
+@media (max-width: 768px) {
+  .main-layout {
+    flex-direction: column;
+    gap: 2rem;
+  }
+  .sidebar {
+    width: 100%;
+  }
+  .header-area {
+    padding-left: 0;
+  }
+}
+
+.nav-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.nav-item {
+  margin-bottom: 0.5rem;
+}
+
+.nav-link {
+  display: block;
+  padding: 0.75rem 1rem;
+  color: #555;
+  text-decoration: none;
+  border-radius: 6px;
+  transition: all 0.2s;
+  font-weight: 500;
+  font-size: 0.9rem;
+}
+
+.nav-link:hover {
+  background: #f0f0f0;
+  color: #1a73e8;
+}
+
+.nav-link.active {
+  color: #1a73e8;
+  font-weight: 600;
+  border-left: 3px solid #1a73e8;
+  border-radius: 0;
+  padding-left: calc(1rem - 3px);
+}
+
+h1.page-subtitle {
+  color: #666;
+  margin-bottom: 0.25rem;
+  font-size: 1.1rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05rem;
+  margin-top: 0;
+}
+
+.page-title {
+  font-size: 2.5rem;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 0.5rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+.subtitle {
+  font-size: 0.75rem;
+  color: #888;
+  margin-bottom: 2rem;
+  font-family: monospace;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  max-width: 100%;
+}
+
+section {
+  background: white;
+  padding: 1.5rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 2rem;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: #555;
+}
+
+.form-group input,
+.form-group select {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  box-sizing: border-box;
+  font-size: 1rem;
+}
+
+.form-group input:disabled {
+  background: #f0f0f0;
+  color: #888;
+}
+
+button {
+  padding: 0.75rem 1.5rem;
+  background: #1a73e8;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+button:hover {
+  background: #1557b0;
+}
+
+button.secondary-btn {
+  background: #fff;
+  color: #1a73e8;
+  border: 1px solid #1a73e8;
+}
+
+button.secondary-btn:hover {
+  background: #f8f9fa;
+}
+
+button:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+}
+
+#toast {
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  padding: 1rem;
+  background: #333;
+  color: white;
+  border-radius: 4px;
+  opacity: 0;
+  transition: opacity 0.3s;
+  z-index: 10000;
+}
+
+.back-link {
+  display: inline-block;
+  margin-bottom: 1rem;
+  color: #1a73e8;
+  text-decoration: none;
+}
+
+.back-link:hover {
+  text-decoration: underline;
+}
+
+.remove-btn {
+  background: transparent;
+  color: #d93025;
+  border: 1px solid #d93025;
+  padding: 0.4rem 0.8rem;
+  font-size: 0.85rem;
+}
+
+.remove-btn:hover {
+  background: #fce8e6;
+}
+
+.remove-btn:disabled {
+  background: #fafafa;
+  border-color: #eee;
+  color: #999;
+  cursor: not-allowed;
+}
+
+.btn-link {
+  display: inline-block;
+  padding: 0.75rem 1rem;
+  background: white;
+  color: #1a73e8;
+  border: 1px solid #1a73e8;
+  border-radius: 4px;
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 0.875rem;
+  transition: background 0.2s;
+}
+
+.btn-link:hover {
+  background: #f8f9fa;
+}
+
+.remove-image-btn {
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #bdc1c6;
+  color: white;
+  border: 2px solid white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  line-height: 1;
+  font-weight: bold;
+  font-size: 12px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: background-color 0.2s;
+  z-index: 10;
+}
+
+.remove-image-btn:hover {
+  background: #ea4335;
+}
+
+/* Profile specific */
+.avatar-section {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.avatar-large {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 3px solid white;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.account-avatar-large {
+  width: 100px;
+  height: 100px;
+  border-radius: 8px;
+  object-fit: cover;
+  border: 3px solid white;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.credential-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  margin-bottom: 0.75rem;
+}
+
+.credential-item.active {
+  border-color: #1a73e8;
+  background-color: #e8f0fe;
+}
+
+.current-badge {
+  font-size: 0.75rem;
+  background: #1a73e8;
+  color: white;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.75rem;
+  margin-left: 0.5rem;
+  font-weight: normal;
+}
+
+.credential-info {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.provider-icon {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.twitch-icon {
+  color: #9146ff;
+}
+
+.link-account-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border-radius: 4px;
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 0.875rem;
+  border: 1px solid #ddd;
+  color: #333;
+  transition: background 0.2s;
+}
+
+.link-account-btn.google:hover {
+  background: #f8f9fa;
+}
+
+.link-account-btn.twitch {
+  background: #9146ff;
+  color: white;
+  border-color: #9146ff;
+}
+
+.link-account-btn.twitch .twitch-icon {
+  color: white;
+}
+
+.link-account-btn.twitch:hover {
+  background: #7d2ee6;
+}
+
+/* Accounts specific */
+.member-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  border-bottom: 1px solid #eee;
+}
+
+.member-item:last-child {
+  border-bottom: none;
+}
+
+.member-info {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  min-width: 0;
+}
+
+.member-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+  background: #f1f3f4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #5f6368;
+}
+
+.member-avatar svg {
+  width: 20px;
+  height: 20px;
+}
+
+.member-details {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.member-name {
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+}
+
+.member-role {
+  width: 80px;
+  display: flex;
+  justify-content: center;
+}
+
+.role-badge {
+  font-size: 0.75rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 1rem;
+  background: #f1f3f4;
+  color: #5f6368;
+  font-weight: 500;
+}
+
+.role-badge.admin {
+  background: #e8f0fe;
+  color: #1a73e8;
+}
+
+.role-select {
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  font-size: 0.85rem;
+  background: #fff;
+}
+
+.role-select:disabled {
+  background: #f1f3f4;
+  color: #5f6368;
+  border-color: transparent;
+  appearance: none;
+  -webkit-appearance: none;
+  cursor: default;
+}
+
+.id-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 25ch;
+}
+
+.copy-btn {
+  background: none;
+  border: none;
+  padding: 0.25rem;
+  cursor: pointer;
+  color: #1a73e8;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: background 0.2s;
+}
+
+.copy-btn:hover {
+  background: #f0f0f0;
+}
+
+.copy-btn svg {
+  width: 14px;
+  height: 14px;
+}

package/src/CookieManager.ts

@@ -0,0 +1,56 @@
+export class CookieManager {
+  private keyPromise: Promise<CryptoKey> | null = null;
+
+  constructor(private secret: string) {}
+
+  private async getKey(): Promise<CryptoKey> {
+    if (this.keyPromise) return this.keyPromise;
+
+    this.keyPromise = (async () => {
+      const encoder = new TextEncoder();
+      const secretData = encoder.encode(this.secret);
+      const hash = await crypto.subtle.digest('SHA-256', secretData);
+      return crypto.subtle.importKey('raw', hash, { name: 'AES-GCM' }, false, ['encrypt', 'decrypt']);
+    })();
+
+    return this.keyPromise;
+  }
+
+  async encrypt(value: string): Promise<string> {
+    const key = await this.getKey();
+    const encoder = new TextEncoder();
+    const data = encoder.encode(value);
+    const iv = crypto.getRandomValues(new Uint8Array(12));
+    const ciphertext = await crypto.subtle.encrypt({ name: 'AES-GCM', iv }, key, data);
+
+    const combined = new Uint8Array(iv.length + ciphertext.byteLength);
+    combined.set(iv);
+    combined.set(new Uint8Array(ciphertext), iv.length);
+
+    return btoa(String.fromCharCode(...combined))
+      .replace(/\+/g, '-')
+      .replace(/\//g, '_')
+      .replace(/=+$/, '');
+  }
+
+  async decrypt(encrypted: string): Promise<string | null> {
+    try {
+      const key = await this.getKey();
+      const base64 = encrypted.replace(/-/g, '+').replace(/_/g, '/');
+      const combined = new Uint8Array(
+        atob(base64)
+          .split('')
+          .map((c) => c.charCodeAt(0)),
+      );
+
+      const iv = combined.slice(0, 12);
+      const ciphertext = combined.slice(12);
+
+      const decrypted = await crypto.subtle.decrypt({ name: 'AES-GCM', iv }, key, ciphertext);
+      return new TextDecoder().decode(decrypted);
+    } catch (e) {
+      console.error('Failed to decrypt cookie:', e);
+      return null;
+    }
+  }
+}

package/src/PowerStrip.ts

@@ -0,0 +1,23 @@
+export async function injectPowerStrip(response: Response, usersPath: string, providers: string[]): Promise<Response> {
+  const contentType = response.headers.get('Content-Type');
+
+  if (contentType && contentType.includes('text/html')) {
+    // Inject a script tag and a custom element into the proxied HTML pages.
+    // The script is loaded from the USERS_PATH, which is intercepted by this worker.
+    return new HTMLRewriter()
+      .on('body', {
+        element(element) {
+          element.prepend(
+            `<script src="${usersPath}power-strip.js" async></script>` +
+              `<power-strip providers="${providers.join(',')}" style="position: absolute; top: 0; right: 0; z-index: 9999; padding: 0.1rem; border-radius: 0 0 0 0.3rem;">` +
+              '<svg viewBox="0 0 24 24" style="width: 1rem; height: 1rem;"><path d="M7 2v11h3v9l7-12h-4l4-8z"/></svg>' +
+              '</power-strip>',
+            { html: true },
+          );
+        },
+      })
+      .transform(response);
+  }
+
+  return response;
+}

package/src/StartupAPIEnv.ts

@@ -0,0 +1,12 @@
+export type StartupAPIEnv = {
+  ORIGIN_URL: URL;
+  USERS_PATH: string;
+  AUTH_ORIGIN: string;
+  GOOGLE_CLIENT_ID: string;
+  GOOGLE_CLIENT_SECRET: string;
+  TWITCH_CLIENT_ID: string;
+  TWITCH_CLIENT_SECRET: string;
+  ADMIN_IDS: string;
+  SESSION_SECRET: string;
+  ENVIRONMENT?: string;
+} & Env;

package/src/auth/GoogleProvider.ts

@@ -0,0 +1,67 @@
+import type { StartupAPIEnv } from '../StartupAPIEnv';
+
+import { OAuthProvider, OAuthTokenResponse, UserProfile } from './OAuthProvider';
+
+export class GoogleProvider extends OAuthProvider {
+  static create(env: StartupAPIEnv, redirectBase: string): GoogleProvider | null {
+    if (!env.GOOGLE_CLIENT_ID || !env.GOOGLE_CLIENT_SECRET) return null;
+    return new GoogleProvider(env.GOOGLE_CLIENT_ID, env.GOOGLE_CLIENT_SECRET, redirectBase + '/google/callback', 'google');
+  }
+
+  getAuthUrl(state: string): string {
+    const params = new URLSearchParams({
+      client_id: this.clientId,
+      redirect_uri: this.redirectUri,
+      response_type: 'code',
+      scope: 'openid email profile',
+      state: state,
+      access_type: 'offline',
+      prompt: 'consent',
+    });
+    return `https://accounts.google.com/o/oauth2/v2/auth?${params.toString()}`;
+  }
+
+  getIcon(): string {
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <circle cx="12" cy="12" r="11" fill="#4285F4" stroke="white" stroke-width="1"/>
+      <path d="M17.64 12.2c0-.41-.03-.81-.1-1.21H12v2.3h3.16c-.14.73-.57 1.35-1.19 1.79v1.48h1.92c1.12-1.03 1.75-2.55 1.75-4.36z" fill="white"/>
+      <path d="M12 18c1.62 0 2.98-.54 3.97-1.46l-1.92-1.48c-.54.37-1.23.59-2.05.59-1.57 0-2.91-1.06-3.39-2.48H6.65v1.53C7.64 16.69 9.68 18 12 18z" fill="white"/>
+      <path d="M8.61 13.17c-.12-.37-.19-.76-.19-1.17s.07-.8.19-1.17V9.3H6.65c-.41.81-.65 1.73-.65 2.7s.24 1.89.65 2.7l1.96-1.53z" fill="white"/>
+      <path d="M12 8.35c.88 0 1.67.3 2.3.91l1.73-1.73C14.98 6.51 13.62 6 12 6c-2.32 0-4.36 1.31-5.35 3.3L8.61 10.83c.48-1.42 1.82-2.48 3.39-2.48z" fill="white"/>
+    </svg>`;
+  }
+
+  async getToken(code: string): Promise<OAuthTokenResponse> {
+    const params = new URLSearchParams({
+      code,
+      client_id: this.clientId,
+      client_secret: this.clientSecret,
+      redirect_uri: this.redirectUri,
+      grant_type: 'authorization_code',
+    });
+
+    return this.fetchJson<OAuthTokenResponse>('https://oauth2.googleapis.com/token', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      body: params.toString(),
+    });
+  }
+
+  async getUserProfile(accessToken: string): Promise<UserProfile> {
+    const data = await this.fetchJson<any>('https://www.googleapis.com/oauth2/v2/userinfo', {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    return {
+      id: data.id,
+      email: data.email,
+      name: data.name,
+      picture: data.picture,
+      verified_email: data.verified_email,
+    };
+  }
+}

package/src/auth/OAuthProvider.ts

@@ -0,0 +1,52 @@
+export interface OAuthTokenResponse {
+  access_token: string;
+  refresh_token?: string;
+  expires_in?: number;
+  scope?: string | string[];
+  token_type?: string;
+  id_token?: string;
+}
+
+export interface UserProfile {
+  id: string;
+  email?: string;
+  name?: string;
+  picture?: string;
+  verified_email?: boolean;
+}
+
+export abstract class OAuthProvider {
+  protected clientId: string;
+  protected clientSecret: string;
+  protected redirectUri: string;
+  public name: string;
+
+  constructor(clientId: string, clientSecret: string, redirectUri: string, name: string) {
+    this.clientId = clientId.trim();
+    this.clientSecret = clientSecret.trim();
+    this.redirectUri = redirectUri.trim();
+    this.name = name.trim();
+  }
+
+  isMatch(path: string, authBasePath: string): boolean {
+    return path === `${authBasePath}/${this.name}`;
+  }
+
+  isCallback(path: string, authBasePath: string): boolean {
+    return path === `${authBasePath}/${this.name}/callback`;
+  }
+
+  abstract getAuthUrl(state: string): string;
+  abstract getIcon(): string;
+  abstract getToken(code: string): Promise<OAuthTokenResponse>;
+  abstract getUserProfile(token: string): Promise<UserProfile>;
+
+  protected async fetchJson<T>(url: string, options?: RequestInit): Promise<T> {
+    const response = await fetch(url, options);
+    if (!response.ok) {
+      const text = await response.text();
+      throw new Error(`Failed to fetch ${url}: ${response.status} ${response.statusText} - ${text}`);
+    }
+    return response.json() as Promise<T>;
+  }
+}