Switching from PAT storage to Github OAuth App

[kubrickcode]

GitHub OAuth Migration Guide

Overview

Current Issues

• ❌ PAT stored in plain text in chrome.storage.sync (security vulnerability)
• ❌ Manual token creation/copy process (poor UX)
• ❌ Manual token expiration/renewal management
• ❌ Excessive permissions

Solution

• ✅ One-click OAuth authentication
• ✅ Access token in chrome.storage.session (deleted on browser close)
• ✅ Automatic token refresh
• ✅ Fine-grained permission control
• ✅ Client Secret managed server-side only (Vercel)

---

Project Structure

Before

github-project-status-viewer/
├── src/
├── public/
├── dist/
└── package.json

After (Monorepo)

github-project-status-viewer/
├── extension/              # Chrome Extension (moved from root)
│   ├── src/
│   ├── public/
│   ├── dist/
│   └── package.json
│
├── server/                 # Vercel Serverless Functions (Go)
│   ├── api/
│   │   ├── oauth-callback.go
│   │   └── refresh-token.go
│   ├── go.mod
│   └── vercel.json
│
└── README.md

---

Implementation Steps

1. GitHub OAuth App Setup

1. Create OAuth App at https://github.com/settings/developers

   • Application name: GitHub Project Status Viewer
   • Homepage URL: Your repository URL
   • Authorization callback URL: https://<EXTENSION_ID>.chromiumapp.org/

2. Save credentials

   • Client ID
   • Client Secret

3. Required scopes: read:project, repo

---

2. Restructure to Monorepo

• Move existing code to extension/ directory
• Create server/ directory structure
• Update build paths in extension/justfile

---

3. Implement Vercel Serverless Functions (Go)

Create two API endpoints:

1. /api/oauth-callback

   • Receive authorization code from extension
   • Exchange code for access/refresh tokens using GitHub API
   • Return tokens to extension

2. /api/refresh-token

   • Receive refresh token from extension
   • Request new access token from GitHub
   • Return new access token

Deploy to Vercel:

• Set environment variables: GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET
• Deploy from server/ directory

---

4. Implement OAuth Flow in Extension

Update manifest.json:

• Add identity permission

Implement OAuth logic:

• Launch GitHub OAuth flow using chrome.identity.launchWebAuthFlow
• Send authorization code to Vercel serverless function
• Store access token in chrome.storage.session
• Store refresh token in chrome.storage.local

Update background script:

• Replace PAT retrieval with access token from session storage
• Implement automatic token refresh when expired

Update popup UI:

• Remove PAT input field
• Add "Login with GitHub" button
• Add "Logout" button
• Display authentication status

---

5. Token Auto-Refresh Logic

• Check token expiration before API calls
• Automatically refresh using refresh token when expired
• Update stored access token
• Handle refresh failure (redirect to re-login)

---

6. Testing

1. Build extension and load in Chrome
2. Get Extension ID
3. Update GitHub OAuth App callback URL with Extension ID
4. Test OAuth login flow
5. Test project status display on GitHub issues page
6. Test token auto-refresh
7. Test logout

---

7. Deployment

Vercel:

• Deploy to production
• Verify environment variables
• Test API endpoints

Chrome Extension:

• Build production version
• Upload to Chrome Web Store
• Update extension with final Extension ID

---

Security Checklist

• Client Secret only in Vercel environment variables
• Access token in chrome.storage.session
• CORS limited to extension origin
• OAuth state parameter for CSRF prevention
• HTTPS only

---

Troubleshooting

• "identity API is not available" → Check identity permission in manifest
• OAuth redirect fails → Verify callback URL matches Extension ID
• CORS error → Check CORS headers in serverless functions
• Token exchange fails → Verify Vercel environment variables

---

References

• Chrome Identity API
• GitHub OAuth Apps
• Vercel Go Functions
• Chrome Storage API

[kubrickcode]

GitHub OAuth app creation complete and client ID and client secret issuance complete