GitHub OAuth2 Demo

A Next.js application demonstrating GitHub OAuth2 authentication flow using access token. This project showcases how to implement secure authentication with GitHub OAuth2, including session management and protected routes.

Features

• 🔐 GitHub OAuth2 authentication flow
• 🍪 Session management with HTTP-only cookies
• 🛡️ Protected routes with middleware
• 📦 Product listing page (requires authentication)
• 🎨 Modern UI with Tailwind CSS

Tech Stack

• Framework: Next.js 16.1.1
• Runtime: React 19.2.3
• Language: TypeScript 5
• Styling: Tailwind CSS 4
• Package Manager: pnpm 10.15.0

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm/yarn

Installation

1. Install dependencies:

pnpm install

Configuration

Create a .env.local file in the root directory with the following environment variables:

# GitHub OAuth2 Configuration

# The begin step, get auth code by your client_id, scope & etc. configs.
GITHUB_AUTH_URL=https://github.com/login/oauth/authorize

# Get the access token from your auth provider with your client_id, client_secret and auth_code.
GITHUB_TOKEN_URL=https://github.com/login/oauth/access_token

# The callback endpoint once the auth flow is succeed, should be setup by the auth provider.
GITHUB_REDIRECT_URI=http://localhost:3000/api/auth/github/callback

# The client id once you setup your auth provider(better not to share, not strictly to confidential).
GITHUB_CLIENT_ID=your_github_client_id

# The client secret generated by the auth provider(***CONFIDENTIAL, NEVER SHARE***).
GITHUB_CLIENT_SECRET=your_github_client_secret

# The open api to get userInfo of github(since github doesn't support OIDC).
GITHUB_USER_INFO_URL=https://api.github.com/user

# Revoke the consent of your authentication
GITHUB_REVOKE_TOEKN_URL=https://api.github.com/applications/{client_id}/token

# Application URL (optional, defaults to http://localhost:3000)
NEXT_PUBLIC_APP_URL=http://localhost:3000

Setting up GitHub OAuth App

1. Go to GitHub Settings → Developer settings → OAuth Apps
2. Click "New OAuth App"
3. Fill in the application details:
   • Application name: Your app name
   • Homepage URL: http://localhost:3000
   • Authorization callback URL: http://localhost:3000/api/auth/github/callback
4. Click "Register application"
5. Copy the Client ID and generate a Client Secret
6. Add these values to your .env.local file

Running the Project

Development

Start the development server:

pnpm dev

Open http://localhost:3000 in your browser.

Project Structure

├── app/
│   ├── (protected)/          # Protected routes
│   │   └── products/         # Products page (requires auth)
│   ├── api/                  # API routes
│   │   ├── auth/             # Authentication endpoints
│   │   └── (protected)/      # Protected API endpoints
│   └── page.tsx              # Home page
├── components/               # React components
├── hooks/                    # Custom React hooks
├── lib/                      # Utility libraries
│   ├── auth/                 # Authentication logic
│   ├── oauth/                # OAuth implementation
│   └── products/             # Product data
└── middleware.ts             # Next.js middleware for route protection

Usage

1. Home Page (/):

   • Displays welcome message
   • Shows login button if not authenticated
   • Shows available pages and logout button if authenticated

2. Products Page (/products):

   • Protected route requiring authentication
   • Displays a list of products
   • Redirects to home if not authenticated

3. Authentication Flow:

   • Click "Login" to initiate GitHub OAuth2 flow
   • Redirects to GitHub for authorization
   • After authorization, redirects back to the application
   • Session is stored in HTTP-only cookie
   • User info is displayed in the header bar

License

This project is private and not licensed for public use.