github-oauth-template
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Viewing readonly version of main branch: v7View latest version
A complete GitHub OAuth implementation template that demonstrates how to build OAuth authentication without database sessions, using secure HTTP-only cookies to store credentials.
- 🔐 Complete GitHub OAuth 2.0 flow
- 🍪 Secure cookie-based credential storage (no database required)
- 🛡️ HTTP-only cookies for security
- 📱 Responsive frontend with user profile display
- 🔄 Token refresh handling
- 🚀 Ready to deploy on Val Town
-
Create a GitHub OAuth App:
- Go to GitHub Settings > Developer settings > OAuth Apps
- Click "New OAuth App"
- Set Application name: "Your App Name"
- Set Homepage URL:
https://your-val-name.web.val.run
- Set Authorization callback URL:
https://your-val-name.web.val.run/auth/callback
-
Set Environment Variables in Val Town:
GITHUB_CLIENT_ID
: Your GitHub OAuth app's client IDGITHUB_CLIENT_SECRET
: Your GitHub OAuth app's client secret
-
Deploy:
- The main entry point is
backend/index.ts
- Set it as an HTTP trigger
- Your app will be available at
https://your-val-name.web.val.run
- The main entry point is
├── backend/
│ ├── index.ts # Main Hono app with OAuth routes
│ └── github.ts # GitHub API client
├── frontend/
│ ├── index.html # Main HTML template
│ ├── app.tsx # React app component
│ └── style.css # Styling
├── shared/
│ └── types.ts # Shared TypeScript types
└── README.md
-
Authentication Flow:
- User clicks "Login with GitHub"
- Redirected to GitHub OAuth authorization
- GitHub redirects back with authorization code
- Backend exchanges code for access token
- Token stored in secure HTTP-only cookie
-
API Requests:
- Frontend makes requests to backend endpoints
- Backend reads token from cookie
- Backend makes authenticated requests to GitHub API
- Results returned to frontend
-
Security:
- Tokens never exposed to client-side JavaScript
- HTTP-only cookies prevent XSS attacks
- Secure flag ensures HTTPS-only transmission
GET /
- Main application pageGET /auth/login
- Initiate GitHub OAuth flowGET /auth/callback
- Handle OAuth callbackGET /auth/logout
- Clear authentication cookiesGET /api/user
- Get authenticated user profileGET /api/repos
- Get user's repositories
GITHUB_CLIENT_ID
- GitHub OAuth app client ID (required)GITHUB_CLIENT_SECRET
- GitHub OAuth app client secret (required)