\n \n

\n GitHub Authentication\n

\n Secure authentication service for your applications\n

\n\n

\n \n Redirect URI (where to send users after auth)\n \n \n

\n\n \n

\n\n

\n \n

\n\n

This service provides secure GitHub OAuth authentication.

After authentication, you'll be redirected back to your application with a secure token.

\n\n \n

API Usage

Initiate Sign In:

\n \n GET /auth/signin?redirect_uri=YOUR_APP_URL\n \n

Validate Token:

\n \n GET /auth/validate?token=JWT_TOKEN\n \n

Required Environment Variables:

GITHUB_CLIENT_ID
GITHUB_CLIENT_SECRET
JWT_SECRET

\n\n \n\n",[],[199,191],"frontend","70f53b88-3b3a-11f0-80d6-9e149126039e",["D",1748378263766],[172],[199],"ad82cd36-3b3a-11f0-984c-9e149126039e","client-integration.md","ad82cde0-3b3a-11f0-984c-9e149126039e","21acd166-3c82-4271-9bbc-4d64e70bcf83",14,["D",1748378365359],"# Client Integration Examples\n\n## JavaScript/TypeScript Integration\n\n### 1. Redirect to Auth Service\n\n```javascript\n// Redirect user to GitHub auth service\nfunction signInWithGitHub() {\n const authServiceUrl = 'https://your-auth-service.web.val.run';\n const redirectUri = encodeURIComponent(window.location.origin + '/auth-callback');\n \n window.location.href = `${authServiceUrl}/auth/signin?redirect_uri=${redirectUri}`;\n}\n```\n\n### 2. Handle Auth Callback\n\n```javascript\n// Handle the callback with token\nfunction handleAuthCallback() {\n const urlParams = new URLSearchParams(window.location.search);\n const token = urlParams.get('token');\n \n if (token) {\n // Store token securely\n localStorage.setItem('auth_token', token);\n \n // Validate token and get user info\n validateToken(token);\n \n // Clean up URL\n window.history.replaceState({}, document.title, window.location.pathname);\n }\n}\n\n// Call this on page load\nwindow.addEventListener('load', handleAuthCallback);\n```\n\n### 3. Validate Token and Get User Info\n\n```javascript\nasync function validateToken(token) {\n const authServiceUrl = 'https://your-auth-service.web.val.run';\n \n try {\n const response = await fetch(`${authServiceUrl}/auth/validate?token=${token}`);\n const data = await response.json();\n \n if (data.valid) {\n console.log('User:', data.user);\n // Update UI with user info\n updateUserInterface(data.user);\n } else {\n console.error('Invalid token:', data.error);\n // Redirect to sign in\n signInWithGitHub();\n }\n } catch (error) {\n console.error('Token validation failed:', error);\n }\n}\n```\n\n### 4. Complete React Example\n\n```jsx\nimport React, { useState, useEffect } from 'react';\n\nconst AUTH_SERVICE_URL = 'https://your-auth-service.web.val.run';\n\nfunction App() {\n const [user, setUser] = useState(null);\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n // Check for auth callback\n const urlParams = new URLSearchParams(window.location.search);\n const token = urlParams.get('token');\n \n if (token) {\n localStorage.setItem('auth_token', token);\n window.history.replaceState({}, document.title, window.location.pathname);\n validateToken(token);\n } else {\n // Check for existing token\n const existingToken = localStorage.getItem('auth_token');\n if (existingToken) {\n validateToken(existingToken);\n } else {\n setLoading(false);\n }\n }\n }, []);\n\n const validateToken = async (token) => {\n try {\n const response = await fetch(`${AUTH_SERVICE_URL}/auth/validate?token=${token}`);\n const data = await response.json();\n \n if (data.valid) {\n setUser(data.user);\n } else {\n localStorage.removeItem('auth_token');\n }\n } catch (error) {\n console.error('Token validation failed:', error);\n localStorage.removeItem('auth_token');\n } finally {\n setLoading(false);\n }\n };\n\n const signIn = () => {\n const redirectUri = encodeURIComponent(window.location.origin);\n window.location.href = `${AUTH_SERVICE_URL}/auth/signin?redirect_uri=${redirectUri}`;\n };\n\n const signOut = () => {\n localStorage.removeItem('auth_token');\n setUser(null);\n };\n\n if (loading) {\n return

;\n }\n\n return (\n

\n {user ? (\n

Welcome, {user.name || user.login}!

\n $\"Avatar\"$ \n \n

\n ) : (\n

Please sign in

\n \n

\n )}\n

\n );\n}\n\nexport default App;\n```\n\n## Backend Integration (Node.js/Express)\n\n```javascript\nconst express = require('express');\nconst fetch = require('node-fetch');\n\nconst app = express();\nconst AUTH_SERVICE_URL = 'https://your-auth-service.web.val.run';\n\n// Middleware to validate auth token\nasync function validateAuth(req, res, next) {\n const token = req.headers.authorization?.replace('Bearer ', '');\n \n if (!token) {\n return res.status(401).json({ error: 'No token provided' });\n }\n\n try {\n const response = await fetch(`${AUTH_SERVICE_URL}/auth/validate?token=${token}`);\n const data = await response.json();\n \n if (data.valid) {\n req.user = data.user;\n next();\n } else {\n res.status(401).json({ error: 'Invalid token' });\n }\n } catch (error) {\n res.status(500).json({ error: 'Token validation failed' });\n }\n}\n\n// Protected route\napp.get('/api/profile', validateAuth, (req, res) => {\n res.json({ user: req.user });\n});\n\napp.listen(3000);\n```\n\n## Security Best Practices\n\n1. **Token Storage**: Store tokens securely (httpOnly cookies for web apps)\n2. **Token Validation**: Always validate tokens on the server side for protected routes\n3. **HTTPS Only**: Only use this service over HTTPS in production\n4. **Token Expiry**: Tokens expire after 7 days - implement refresh logic\n5. **Environment Variables**: Never expose your GitHub client secret\n\n## Error Handling\n\n```javascript\n// Handle common errors\nasync function handleAuthError(error) {\n if (error.message.includes('Invalid token')) {\n // Token expired or invalid - redirect to sign in\n localStorage.removeItem('auth_token');\n signInWithGitHub();\n } else if (error.message.includes('Network')) {\n // Network error - show retry option\n showRetryDialog();\n } else {\n // Other errors\n console.error('Auth error:', error);\n }\n}\n```",[],[213,205],"examples","ad831688-3b3a-11f0-984c-9e149126039e",["D",1748378365359],[170],[213],"9a11f5d8-3b3a-11f0-84c6-9e149126039e","index.ts","bf332b80-887e-4688-9890-891be88c7019",13,["D",1748378332692],7,"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { sign, verify } from \"https://esm.sh/jsonwebtoken@9.0.2\";\nimport type { GitHubUser, GitHubTokenResponse, AuthToken, AuthError } from \"../shared/types.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Environment variables\nconst GITHUB_CLIENT_ID = Deno.env.get('GITHUB_CLIENT_ID');\nconst GITHUB_CLIENT_SECRET = Deno.env.get('GITHUB_CLIENT_SECRET');\nconst JWT_SECRET = Deno.env.get('JWT_SECRET');\n\n// Check if environment variables are configured\nconst isConfigured = GITHUB_CLIENT_ID && GITHUB_CLIENT_SECRET && JWT_SECRET;\n\n// Serve the auth page\napp.get(\"/\", async (c) => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n if (!isConfigured) {\n // Inject configuration warning\n const warningScript = ``;\n \n return c.html(html.replace(\"\", `${warningScript}`));\n }\n \n return c.html(html);\n});\n\n// Initiate GitHub OAuth flow\napp.get(\"/auth/signin\", (c) => {\n if (!isConfigured) {\n return c.json({ error: 'Service not configured. Please set environment variables.' }, 500);\n }\n\n const redirectUri = c.req.query('redirect_uri');\n \n if (!redirectUri) {\n return c.json({ error: 'redirect_uri parameter is required' }, 400);\n }\n\n // Store redirect URI in state parameter (base64 encoded for URL safety)\n const state = btoa(redirectUri);\n \n const githubAuthUrl = new URL('https://github.com/login/oauth/authorize');\n githubAuthUrl.searchParams.set('client_id', GITHUB_CLIENT_ID!);\n githubAuthUrl.searchParams.set('redirect_uri', `${c.req.url.split('/auth/signin')[0]}/auth/callback`);\n githubAuthUrl.searchParams.set('scope', 'user:email');\n githubAuthUrl.searchParams.set('state', state);\n\n return new Response(null, {\n status: 302,\n headers: { Location: githubAuthUrl.toString() }\n });\n});\n\n// Handle GitHub OAuth callback\napp.get(\"/auth/callback\", async (c) => {\n if (!isConfigured) {\n return c.json({ error: 'Service not configured. Please set environment variables.' }, 500);\n }\n\n const code = c.req.query('code');\n const state = c.req.query('state');\n const error = c.req.query('error');\n\n if (error) {\n const errorDescription = c.req.query('error_description') || 'GitHub OAuth error';\n return c.json({ error, error_description: errorDescription }, 400);\n }\n\n if (!code || !state) {\n return c.json({ error: 'Missing code or state parameter' }, 400);\n }\n\n try {\n // Decode redirect URI from state\n const redirectUri = atob(state);\n\n // Exchange code for access token\n const tokenResponse = 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: GITHUB_CLIENT_ID!,\n client_secret: GITHUB_CLIENT_SECRET!,\n code,\n }),\n });\n\n const tokenData: GitHubTokenResponse = await tokenResponse.json();\n\n if (!tokenData.access_token) {\n return c.json({ error: 'Failed to obtain access token' }, 400);\n }\n\n // Get user information from GitHub\n const userResponse = await fetch('https://api.github.com/user', {\n headers: {\n 'Authorization': `Bearer ${tokenData.access_token}`,\n 'Accept': 'application/vnd.github.v3+json',\n },\n });\n\n const userData: GitHubUser = await userResponse.json();\n\n // Create JWT token\n const jwtPayload: Omit = {\n user: userData,\n };\n\n const token = sign(jwtPayload, JWT_SECRET!, { expiresIn: '7d' });\n\n // Redirect back to the original app with the token\n const finalRedirectUrl = new URL(redirectUri);\n finalRedirectUrl.searchParams.set('token', token);\n\n return new Response(null, {\n status: 302,\n headers: { Location: finalRedirectUrl.toString() }\n });\n\n } catch (error) {\n console.error('OAuth callback error:', error);\n return c.json({ error: 'Authentication failed' }, 500);\n }\n});\n\n// Validate JWT token and return user info\napp.get(\"/auth/validate\", (c) => {\n if (!isConfigured) {\n return c.json({ error: 'Service not configured. Please set environment variables.' }, 500);\n }\n\n const token = c.req.query('token');\n\n if (!token) {\n return c.json({ error: 'Token parameter is required' }, 400);\n }\n\n try {\n const decoded = verify(token, JWT_SECRET!) as AuthToken;\n return c.json({\n valid: true,\n user: decoded.user,\n expires_at: decoded.exp,\n });\n } catch (error) {\n return c.json({ \n valid: false, \n error: 'Invalid or expired token' \n }, 401);\n }\n});\n\n// Health check endpoint\napp.get(\"/health\", (c) => {\n return c.json({ \n status: 'ok', \n timestamp: new Date().toISOString(),\n configured: isConfigured,\n missing_vars: isConfigured ? [] : [\n !GITHUB_CLIENT_ID && 'GITHUB_CLIENT_ID',\n !GITHUB_CLIENT_SECRET && 'GITHUB_CLIENT_SECRET', \n !JWT_SECRET && 'JWT_SECRET'\n ].filter(Boolean)\n });\n});\n\n// Export the Hono app\nexport default app.fetch;",[],[228,219],"backend","5a6ed45a-3b3a-11f0-bec7-9e149126039e",4,["D",1748378225973],[168],[228],["D",1748377929808],{"_11":12,"_122":70},{"_11":12,"_118":-5,"_69":70,"_31":68,"_119":120,"_121":30},{"_39":109,"_13":16,"_33":36,"_110":74,"_111":-5,"_112":-5,"_113":-5,"_114":-5,"_115":-5,"_116":14,"_117":12},"ctx",{"_52":-5,"_141":271,"_272":273,"_274":275,"_276":30,"_277":30,"_278":30,"_279":24,"_280":-5,"_281":-7,"_282":-7,"_283":26,"_284":30,"_285":30,"_286":-5,"_287":30,"_288":30,"_289":30,"_290":-5},"ENV",{"_242":243,"_244":245,"_246":16,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266,"_267":268,"_269":270},"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 · shared