\n \n \n \n\n",[18,65],"pulls","branches",1,"forks","envVars",{"_178":26,"_180":26},"connections",{"_178":26,"_179":26},"count","unfilledCount","emptyCount",{"_34":246,"_13":231,"_63":224,"_44":-5,"_36":37,"_154":235,"_155":24,"_38":247,"_40":26,"_66":81,"_157":-5,"_67":30,"_158":-5,"_196":248,"_17":249},{"_34":240,"_13":192,"_63":241,"_44":224,"_36":37,"_154":118,"_155":24,"_38":242,"_40":26,"_66":21,"_157":243,"_67":30,"_158":-5,"_196":244,"_17":245},{"_34":232,"_13":233,"_63":234,"_44":224,"_36":37,"_154":235,"_155":24,"_38":236,"_40":26,"_66":204,"_157":237,"_67":30,"_158":-5,"_196":238,"_17":239},{"_34":222,"_13":223,"_63":93,"_44":224,"_36":37,"_154":225,"_155":24,"_38":226,"_40":41,"_66":227,"_157":228,"_67":30,"_158":-5,"_196":229,"_17":230},{"_34":153,"_13":18,"_63":80,"_44":-5,"_36":37,"_154":41,"_155":24,"_38":219,"_40":26,"_66":81,"_157":-5,"_67":30,"_158":-5,"_196":220,"_17":221},{"_34":166,"_13":65,"_63":64,"_44":80,"_36":37,"_154":41,"_155":24,"_38":216,"_40":26,"_66":21,"_157":168,"_67":30,"_158":-5,"_196":217,"_17":218},{"_34":162,"_13":79,"_63":78,"_44":80,"_36":37,"_154":73,"_155":24,"_38":213,"_40":26,"_66":21,"_157":164,"_67":30,"_158":-5,"_196":214,"_17":215},{"_34":209,"_13":208,"_63":202,"_44":-5,"_36":37,"_154":98,"_155":24,"_38":210,"_40":26,"_66":81,"_157":-5,"_67":30,"_158":-5,"_196":211,"_17":212},{"_34":199,"_13":200,"_63":201,"_44":202,"_36":37,"_154":98,"_155":24,"_38":203,"_40":26,"_66":204,"_157":205,"_67":30,"_158":-5,"_196":206,"_17":207},{"_34":191,"_13":192,"_63":193,"_44":-5,"_36":37,"_154":172,"_155":24,"_38":194,"_40":26,"_66":21,"_157":195,"_67":30,"_158":-5,"_196":197,"_17":198},"02709e88-37dd-11f0-addf-9e149126039e","README.md","02709f46-37dd-11f0-addf-9e149126039e",["D",1748008281665],"# GitHub OAuth Template for Val Town\n\nA complete GitHub OAuth implementation template that demonstrates how to build OAuth authentication without database sessions, using secure HTTP-only cookies to store credentials.\n\n## Features\n\n- 🔐 Complete GitHub OAuth 2.0 flow\n- 🍪 Secure cookie-based credential storage (no database required)\n- 🛡️ HTTP-only cookies for security\n- 📱 Responsive frontend with user profile display\n- 🔄 Token refresh handling\n- 🚀 Ready to deploy on Val Town\n\n## Setup Instructions\n\n1. **Create a GitHub OAuth App:**\n - Go to GitHub Settings > Developer settings > OAuth Apps\n - Click \"New OAuth App\"\n - Set Application name: \"Your App Name\"\n - Set Homepage URL: `https://your-val-name.web.val.run`\n - Set Authorization callback URL: `https://your-val-name.web.val.run/auth/callback`\n\n2. **Set Environment Variables in Val Town:**\n - `GITHUB_CLIENT_ID`: Your GitHub OAuth app's client ID\n - `GITHUB_CLIENT_SECRET`: Your GitHub OAuth app's client secret\n\n3. **Deploy:**\n - The main entry point is `backend/index.ts`\n - Set it as an HTTP trigger\n - Your app will be available at `https://your-val-name.web.val.run`\n\n## Project Structure\n\n```\n├── backend/\n│ ├── index.ts # Main Hono app with OAuth routes\n│ └── github.ts # GitHub API client\n├── frontend/\n│ ├── index.html # Main HTML template\n│ ├── app.tsx # React app component\n│ └── style.css # Styling\n├── shared/\n│ └── types.ts # Shared TypeScript types\n└── README.md\n```\n\n## How It Works\n\n1. **Authentication Flow:**\n - User clicks \"Login with GitHub\"\n - Redirected to GitHub OAuth authorization\n - GitHub redirects back with authorization code\n - Backend exchanges code for access token\n - Token stored in secure HTTP-only cookie\n\n2. **API Requests:**\n - Frontend makes requests to backend endpoints\n - Backend reads token from cookie\n - Backend makes authenticated requests to GitHub API\n - Results returned to frontend\n\n3. **Security:**\n - Tokens never exposed to client-side JavaScript\n - HTTP-only cookies prevent XSS attacks\n - Secure flag ensures HTTPS-only transmission\n\n## API Endpoints\n\n- `GET /` - Main application page\n- `GET /auth/login` - Initiate GitHub OAuth flow\n- `GET /auth/callback` - Handle OAuth callback\n- `GET /auth/logout` - Clear authentication cookies\n- `GET /api/user` - Get authenticated user profile\n- `GET /api/repos` - Get user's repositories\n\n## Environment Variables\n\n- `GITHUB_CLIENT_ID` - GitHub OAuth app client ID (required)\n- `GITHUB_CLIENT_SECRET` - GitHub OAuth app client secret (required)","children",[],[192],"060ccb02-37dd-11f0-b796-9e149126039e","types.ts","060ccba2-37dd-11f0-b796-9e149126039e","837038cf-0535-413e-ac1a-698c10c07985",["D",1748008287715],"script","// Shared types for GitHub OAuth template\n\nexport interface GitHubUser {\n id: number;\n login: string;\n name: string | null;\n email: string | null;\n avatar_url: string;\n html_url: string;\n bio: string | null;\n public_repos: number;\n followers: number;\n following: number;\n created_at: string;\n}\n\nexport interface GitHubRepo {\n id: number;\n name: string;\n full_name: string;\n description: string | null;\n html_url: string;\n clone_url: string;\n language: string | null;\n stargazers_count: number;\n forks_count: number;\n updated_at: string;\n private: boolean;\n}\n\nexport interface OAuthTokenResponse {\n access_token: string;\n token_type: string;\n scope: string;\n}\n\nexport interface AppState {\n user: GitHubUser | null;\n repos: GitHubRepo[];\n loading: boolean;\n error: string | null;\n}",[],[208,200],"shared","060d16de-37dd-11f0-b796-9e149126039e",["D",1748008287715],[189],[208],["D",1748008375900],[],[18,79],["D",1748008362061],[],[18,65],["D",1748008362061],[186,187],[18],"576f14dc-37dd-11f0-a07e-9e149126039e","index.ts","b14b1910-cbb4-4dc1-881d-c881ecb6a4fb",11,["D",1748008424259],"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { GitHubAPI, exchangeCodeForToken } from \"./github.ts\";\n\nconst app = new Hono();\n\n// Cookie helper functions\nfunction getCookie(c: any, name: string): string | undefined {\n const cookieHeader = c.req.header('Cookie');\n if (!cookieHeader) return undefined;\n \n const cookies = cookieHeader.split(';').reduce((acc: any, cookie: string) => {\n const [key, value] = cookie.trim().split('=');\n acc[key] = decodeURIComponent(value);\n return acc;\n }, {});\n \n return cookies[name];\n}\n\nfunction setCookie(c: any, name: string, value: string, options: any = {}) {\n const cookieOptions = [];\n cookieOptions.push(`${name}=${encodeURIComponent(value)}`);\n \n if (options.maxAge) cookieOptions.push(`Max-Age=${options.maxAge}`);\n if (options.httpOnly) cookieOptions.push('HttpOnly');\n if (options.secure) cookieOptions.push('Secure');\n if (options.sameSite) cookieOptions.push(`SameSite=${options.sameSite}`);\n \n c.header('Set-Cookie', cookieOptions.join('; '));\n}\n\nfunction deleteCookie(c: any, name: string) {\n setCookie(c, name, '', { maxAge: 0 });\n}\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Main page - serve HTML with initial data\napp.get(\"/\", async (c) => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Check if user is authenticated\n const accessToken = getCookie(c, \"github_token\");\n let initialData = { user: null, repos: [], loading: false, error: null };\n \n if (accessToken) {\n try {\n const github = new GitHubAPI(accessToken);\n const user = await github.getUser();\n initialData.user = user;\n } catch (error) {\n console.error(\"Failed to fetch user data:\", error);\n // Clear invalid token\n deleteCookie(c, \"github_token\");\n }\n }\n \n // Inject initial data\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n});\n\n// Start GitHub OAuth flow\napp.get(\"/auth/login\", (c) => {\n const clientId = Deno.env.get(\"GITHUB_CLIENT_ID\");\n \n if (!clientId) {\n return c.json({ error: \"GitHub OAuth not configured\" }, 500);\n }\n \n const baseUrl = new URL(c.req.url).origin;\n const redirectUri = `${baseUrl}/auth/callback`;\n const scope = \"user:email,repo\";\n const state = crypto.randomUUID(); // CSRF protection\n \n // Store state in cookie for verification\n setCookie(c, \"oauth_state\", state, {\n httpOnly: true,\n secure: true,\n sameSite: \"Lax\",\n maxAge: 600, // 10 minutes\n });\n \n const authUrl = new URL(\"https://github.com/login/oauth/authorize\");\n authUrl.searchParams.set(\"client_id\", clientId);\n authUrl.searchParams.set(\"redirect_uri\", redirectUri);\n authUrl.searchParams.set(\"scope\", scope);\n authUrl.searchParams.set(\"state\", state);\n \n return new Response(null, {\n status: 302,\n headers: { Location: authUrl.toString() }\n });\n});\n\n// Handle OAuth callback\napp.get(\"/auth/callback\", async (c) => {\n const url = new URL(c.req.url);\n const code = url.searchParams.get(\"code\");\n const state = url.searchParams.get(\"state\");\n const error = url.searchParams.get(\"error\");\n \n // Check for OAuth errors\n if (error) {\n return c.html(`\n

Authentication Error

GitHub OAuth error: ${error}

\n Go back\n `);\n }\n \n // Verify state parameter (CSRF protection)\n const storedState = getCookie(c, \"oauth_state\");\n if (!state || state !== storedState) {\n return c.html(`\n

Authentication Error

Invalid state parameter. Please try again.

\n Go back\n `);\n }\n \n // Clear state cookie\n deleteCookie(c, \"oauth_state\");\n \n if (!code) {\n return c.html(`\n

Authentication Error

No authorization code received.

\n Go back\n `);\n }\n \n try {\n // Exchange code for access token\n const tokenData = await exchangeCodeForToken(code);\n \n // Store token in secure cookie\n setCookie(c, \"github_token\", tokenData.access_token, {\n httpOnly: true,\n secure: true,\n sameSite: \"Lax\",\n maxAge: 60 * 60 * 24 * 30, // 30 days\n });\n \n // Redirect to main page\n return new Response(null, {\n status: 302,\n headers: { Location: \"/\" }\n });\n \n } catch (error) {\n console.error(\"OAuth callback error:\", error);\n return c.html(`\n

Authentication Error

Failed to complete authentication: ${error.message}

\n Go back\n `);\n }\n});\n\n// Logout - clear cookies\napp.get(\"/auth/logout\", (c) => {\n deleteCookie(c, \"github_token\");\n return new Response(null, {\n status: 302,\n headers: { Location: \"/\" }\n });\n});\n\n// API: Get authenticated user\napp.get(\"/api/user\", async (c) => {\n const accessToken = getCookie(c, \"github_token\");\n \n if (!accessToken) {\n return c.json({ error: \"Not authenticated\" }, 401);\n }\n \n try {\n const github = new GitHubAPI(accessToken);\n const user = await github.getUser();\n return c.json(user);\n } catch (error) {\n console.error(\"Failed to fetch user:\", error);\n // Clear invalid token\n deleteCookie(c, \"github_token\");\n return c.json({ error: \"Failed to fetch user data\" }, 401);\n }\n});\n\n// API: Get user repositories\napp.get(\"/api/repos\", async (c) => {\n const accessToken = getCookie(c, \"github_token\");\n \n if (!accessToken) {\n return c.json({ error: \"Not authenticated\" }, 401);\n }\n \n try {\n const github = new GitHubAPI(accessToken);\n const repos = await github.getRepos();\n return c.json(repos);\n } catch (error) {\n console.error(\"Failed to fetch repos:\", error);\n return c.json({ error: \"Failed to fetch repositories\" }, 500);\n }\n});\n\n// Health check\napp.get(\"/health\", (c) => {\n return c.json({ status: \"ok\", timestamp: new Date().toISOString() });\n});\n\nexport default app.fetch;",[],[231,223],"backend","0bbe2a78-37dd-11f0-ace0-9e149126039e","github.ts","0bbe2b2c-37dd-11f0-ace0-9e149126039e",3,["D",1748008297272],"// GitHub API client for server-side requests\n\nimport type { GitHubUser, GitHubRepo, OAuthTokenResponse } from \"../shared/types.ts\";\n\nexport class GitHubAPI {\n private baseURL = \"https://api.github.com\";\n \n constructor(private accessToken: string) {}\n\n private async request(endpoint: string): Promise {\n const response = await fetch(`${this.baseURL}${endpoint}`, {\n headers: {\n \"Authorization\": `Bearer ${this.accessToken}`,\n \"Accept\": \"application/vnd.github.v3+json\",\n \"User-Agent\": \"Val-Town-GitHub-OAuth-Template\",\n },\n });\n\n if (!response.ok) {\n throw new Error(`GitHub API error: ${response.status} ${response.statusText}`);\n }\n\n return response.json();\n }\n\n async getUser(): Promise {\n return this.request(\"/user\");\n }\n\n async getRepos(page = 1, perPage = 30): Promise {\n return this.request(`/user/repos?page=${page}&per_page=${perPage}&sort=updated`);\n }\n}\n\nexport async function exchangeCodeForToken(code: string): Promise {\n const clientId = Deno.env.get(\"GITHUB_CLIENT_ID\");\n const clientSecret = Deno.env.get(\"GITHUB_CLIENT_SECRET\");\n\n if (!clientId || !clientSecret) {\n throw new Error(\"GitHub OAuth credentials not configured\");\n }\n\n const response = await fetch(\"https://github.com/login/oauth/access_token\", {\n method: \"POST\",\n headers: {\n \"Accept\": \"application/json\",\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n client_id: clientId,\n client_secret: clientSecret,\n code,\n }),\n });\n\n if (!response.ok) {\n throw new Error(`Failed to exchange code for token: ${response.statusText}`);\n }\n\n const data = await response.json();\n \n if (data.error) {\n throw new Error(`GitHub OAuth error: ${data.error_description || data.error}`);\n }\n\n return data;\n}",[],[231,233],"686181da-37dd-11f0-ac79-9e149126039e","6861828e-37dd-11f0-ac79-9e149126039e",["D",1748008452695],"# Backend - GitHub OAuth Template\n\nThis directory contains the backend implementation for the GitHub OAuth template using Hono framework.\n\n## Files\n\n- `index.ts` - Main Hono application with OAuth routes and API endpoints\n- `github.ts` - GitHub API client for server-side requests\n\n## Features\n\n### OAuth Flow\n- **Login**: `/auth/login` - Initiates GitHub OAuth flow\n- **Callback**: `/auth/callback` - Handles OAuth callback and token exchange\n- **Logout**: `/auth/logout` - Clears authentication cookies\n\n### API Endpoints\n- **User Profile**: `GET /api/user` - Returns authenticated user's GitHub profile\n- **Repositories**: `GET /api/repos` - Returns user's repositories\n- **Health Check**: `GET /health` - Application health status\n\n### Security Features\n- **HTTP-only Cookies**: Tokens stored securely, not accessible to JavaScript\n- **CSRF Protection**: State parameter validation during OAuth flow\n- **Secure Cookies**: HTTPS-only transmission with SameSite protection\n- **Token Validation**: Automatic cleanup of invalid tokens\n\n## Cookie Management\n\nThe application uses custom cookie helper functions since Hono's cookie helpers had import issues:\n\n```typescript\n// Get cookie value\nconst token = getCookie(c, \"github_token\");\n\n// Set secure cookie\nsetCookie(c, \"github_token\", accessToken, {\n httpOnly: true,\n secure: true,\n sameSite: \"Lax\",\n maxAge: 60 * 60 * 24 * 30 // 30 days\n});\n\n// Delete cookie\ndeleteCookie(c, \"github_token\");\n```\n\n## Environment Variables\n\nRequired environment variables:\n- `GITHUB_CLIENT_ID` - GitHub OAuth app client ID\n- `GITHUB_CLIENT_SECRET` - GitHub OAuth app client secret\n\n## Error Handling\n\nThe application includes comprehensive error handling:\n- OAuth errors are displayed with user-friendly messages\n- Invalid tokens are automatically cleared\n- API errors return appropriate HTTP status codes\n- All errors bubble up with full context for debugging\n\n## GitHub API Integration\n\nThe `GitHubAPI` class provides a clean interface for GitHub API requests:\n\n```typescript\nconst github = new GitHubAPI(accessToken);\nconst user = await github.getUser();\nconst repos = await github.getRepos();\n```\n\nAll requests include proper headers and error handling.",[],[231,192],"0bbe309a-37dd-11f0-ace0-9e149126039e",["D",1748008297272],[182,183,184],[231],["D",1748008151091],{"_11":12,"_131":70},{"_11":12,"_127":-5,"_69":70,"_31":68,"_128":129,"_130":30},{"_40":118,"_13":16,"_34":37,"_119":83,"_120":-5,"_121":-5,"_122":-5,"_123":-5,"_124":-5,"_125":14,"_126":12},"ctx",{"_53":-5,"_150":287,"_288":289,"_290":291,"_292":30,"_293":30,"_294":30,"_295":24,"_296":-5,"_297":-7,"_298":-7,"_299":26,"_300":30,"_301":30,"_302":-5,"_303":30,"_304":30,"_305":30,"_306":-5},"ENV",{"_258":259,"_260":261,"_262":16,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · frontend