From ece4dca64c924d963b3f8ab93c0a0d6eda5da3d1 Mon Sep 17 00:00:00 2001 From: Chris Alfano Date: Tue, 13 May 2025 20:43:01 -0400 Subject: [PATCH] feat: set up github login test --- .env.example | 3 + app/pages/test/github-login.vue | 214 ++++++++++++++++++++++++++++++++ docs/github-oauth-setup.md | 87 +++++++++++++ nuxt.config.ts | 7 ++ server/api/github/token.post.ts | 23 ++++ 5 files changed, 334 insertions(+) create mode 100644 app/pages/test/github-login.vue create mode 100644 docs/github-oauth-setup.md create mode 100644 server/api/github/token.post.ts diff --git a/.env.example b/.env.example index 488cfb7..908642b 100644 --- a/.env.example +++ b/.env.example @@ -1,2 +1,5 @@ SUPABASE_URL="http://localhost:8000" SUPABASE_KEY="" + +NUXT_GITHUB_CLIENT_ID=your_client_id_here +NUXT_GITHUB_CLIENT_SECRET=your_client_secret_here \ No newline at end of file diff --git a/app/pages/test/github-login.vue b/app/pages/test/github-login.vue new file mode 100644 index 0000000..71393da --- /dev/null +++ b/app/pages/test/github-login.vue @@ -0,0 +1,214 @@ + + + diff --git a/docs/github-oauth-setup.md b/docs/github-oauth-setup.md new file mode 100644 index 0000000..69b72c8 --- /dev/null +++ b/docs/github-oauth-setup.md @@ -0,0 +1,87 @@ +# GitHub OAuth Test Page Setup + +This guide explains how to set up and test GitHub OAuth login functionality without Supabase integration. + +## 1. Create GitHub OAuth App + +1. Go to GitHub Developer Settings: + - Visit + - Click "OAuth Apps" in the sidebar + - Click "New OAuth App" + +2. Fill in the application details: + - **Application name**: `Code for Philly Dev` + - **Homepage URL**: `http://localhost:3000` + - **Authorization callback URL**: `http://localhost:3000/test/github-login` + - Click "Register application" + +3. After registration: + - You'll see your Client ID immediately + - Click "Generate a new client secret" + - Save both the Client ID and Client Secret + +## 2. Configure Environment Variables + +1. Add these variables to your `.env` file: + +```bash +# GitHub OAuth +NUXT_GITHUB_CLIENT_ID=your_client_id_here +NUXT_GITHUB_CLIENT_SECRET=your_client_secret_here +``` + +## 3. Implementation Details + +The test page is located at `/test/github-login` and implements: + +1. Initial state with login button +2. OAuth redirect handling +3. Display of user data after successful login + +### How it Works + +1. User clicks "Login with GitHub" +2. GitHub OAuth flow initiates +3. After authorization, GitHub redirects back with a code +4. The page exchanges the code for an access token +5. User data is fetched and displayed + +### Testing + +1. Start the development server: + + ```bash + npm run dev + ``` + +2. Visit + +3. Click "Login with GitHub" + +4. After authorizing, you'll see: + - Access token + - User profile data + - Raw API response + +## Security Notes + +- This is a test implementation +- Never commit OAuth secrets to version control +- The client secret should be kept secure in production +- This implementation is for local testing only + +## Troubleshooting + +1. If the login button doesn't work: + - Verify your OAuth app settings + - Check that environment variables are set + - Ensure the callback URL matches exactly + +2. If you get a redirect error: + - Verify the callback URL in GitHub matches exactly + - Check for any typos in the environment variables + +3. If no user data displays: + - Check browser console for errors + - Verify the access token is being received + - Check GitHub API response in the Network tab diff --git a/nuxt.config.ts b/nuxt.config.ts index cad8a47..b79bf28 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -5,6 +5,13 @@ export default defineNuxtConfig({ '@nuxtjs/tailwindcss' ], + runtimeConfig: { + public: { + githubClientId: process.env.NUXT_GITHUB_CLIENT_ID, + githubClientSecret: process.env.NUXT_GITHUB_CLIENT_SECRET, + } + }, + ssr: true, supabase: { diff --git a/server/api/github/token.post.ts b/server/api/github/token.post.ts new file mode 100644 index 0000000..d98881f --- /dev/null +++ b/server/api/github/token.post.ts @@ -0,0 +1,23 @@ +import { defineEventHandler, readBody } from 'h3' +import { useRuntimeConfig } from '#imports' + +export default defineEventHandler(async (event) => { + const body = await readBody(event) + const config = useRuntimeConfig() + + const response = await fetch('https://github.com/login/oauth/access_token', { + method: 'POST', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + client_id: config.public.githubClientId, + client_secret: config.public.githubClientSecret, + code: body.code, + }), + }) + + const data = await response.json() + return data +})