GitHub OAuth Template for Val Town

A complete GitHub OAuth implementation template that demonstrates how to build OAuth authentication without database sessions, using secure HTTP-only cookies to store credentials.

Features

  • šŸ” 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

Setup Instructions

  1. 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
  2. Set Environment Variables in Val Town:

    • GITHUB_CLIENT_ID: Your GitHub OAuth app's client ID
    • GITHUB_CLIENT_SECRET: Your GitHub OAuth app's client secret
  3. 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

Project Structure

ā”œā”€ā”€ 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

How It Works

  1. 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
  2. API Requests:

    • Frontend makes requests to backend endpoints
    • Backend reads token from cookie
    • Backend makes authenticated requests to GitHub API
    • Results returned to frontend
  3. Security:

    • Tokens never exposed to client-side JavaScript
    • HTTP-only cookies prevent XSS attacks
    • Secure flag ensures HTTPS-only transmission

API Endpoints

  • GET / - Main application page
  • GET /auth/login - Initiate GitHub OAuth flow
  • GET /auth/callback - Handle OAuth callback
  • GET /auth/logout - Clear authentication cookies
  • GET /api/user - Get authenticated user profile
  • GET /api/repos - Get user's repositories

Environment Variables

  • GITHUB_CLIENT_ID - GitHub OAuth app client ID (required)
  • GITHUB_CLIENT_SECRET - GitHub OAuth app client secret (required)