🐙 GitHub Login Button + OAuth Callback (Next.js)

A plug-and-play GitHub OAuth Login Button for any Next.js application.
This component handles GitHub authentication end-to-end, including redirecting the user, exchanging the OAuth code, and fetching their GitHub profile.

✨ Features

1. One-Click GitHub Login

• Fully functional GitHub OAuth login flow
• Works instantly after adding your Client ID

2. Ready-Made Login Button

• Styled GitHub login button component
• Mobile-friendly and accessible
• Clean, modern UI

3. OAuth Backend Included

• /api/auth/callback route
• Exchanges OAuth code for access token
• Fetches GitHub user profile
• Redirects user with name/email

4. Easy Integration

| Task | Manual Time | With This Package | |------|-------------|------------------| | OAuth setup | 2–4 hours | 0 | | Login button UI | 1 hour | 0 | | Server OAuth handler | 2 hours | 0 | | Redirect handling | 30–60 min | 0 |

Total saved: 5–7 hours → Setup in minutes

🚀 Quick Start

Install Using npx

npx @theagentverse/github-button-agent-cli init

Output Files After Setup

• src/app/api/auth/callback/route.ts
• src/app/components/GitHubLoginButton.tsx
• .env.local template added automatically

🧠 How It Works

User clicks GitHub button
→ Redirected to GitHub OAuth
→ User approves access
→ GitHub returns "code"
→ Next.js API exchanges "code" for access token
→ Fetch user profile
→ Redirect back to your site with user info

📁 Folder Structure

project/
│
├── src/
│   ├── app/
│   │   └── api/
│   │       └── auth/
│   │           └── callback/
│   │               └── route.ts
│   └── components/
│       └── GitHubLoginButton.tsx
│
└── .env.local (generated)

⚙️ Required Environment Variables

Create .env.local:

GITHUB_CLIENT_ID=your_client_id
GITHUB_CLIENT_SECRET=your_client_secret

You can generate these in your GitHub OAuth App settings.

🛠 Requirements

• Next.js 13+ (App Router)
• Node.js 18+
• GitHub OAuth App

🐾 Button Component Example

The generated file contains:

• Login button
• GitHub SVG icon
• OAuth redirect builder
• Environment variable checks
• Smooth UI styling

🔄 API Callback Flow

The generated route:

• Validates URL code parameter
• Exchanges OAuth code for access token
• Fetches GitHub profile data
• Redirects user to / with name and success=true

📄 License

MIT License

⭐ Why Use This?

• Works immediately with zero configuration
• Removes OAuth complexity
• Clean UI + backend ready
• Saves hours of setup time
• Ideal for dashboards, login pages, and dev tools

Add GitHub authentication to your Next.js app in minutes, not hours.