[Personal-WP] Add GitHub OAuth integration for private repositories

Adds GitHub OAuth support to personal-wp, allowing blueprints to access
private GitHub repositories.

## OAuth Flow
- Added oauth.php for token exchange with GitHub
- Added GitHubPrivateRepoAuthModal for authentication prompts
- createGitAuthHeaders() provides auth headers, capturing token at call
  time (not creation time) to work after OAuth redirect

## Blueprint Preservation
- Hash fragment blueprints converted to blueprint-url query params early
  in main.tsx to survive OAuth redirect
- buildOAuthRedirectUrl() handles this conversion for the auth modal

## Error Handling
- GitAuthenticationError detection in boot error handler
- Early return in catch block prevents URL clearing after errors

Author: akirk

packages/playground/personal-wp/public/oauth.php

@@ -0,0 +1,34 @@
+<?php
+
+$client_id = getenv('CLIENT_ID');
+if (array_key_exists('redirect', $_GET) && $_GET["redirect"] === "1") {
+    http_response_code(302);
+    // Always redirect to the current host, even if the redirect_uri is set to a different host.
+    // Also, do not allow any custom path segments in the redirect_uri.
+    $redirect_host = $_SERVER['HTTP_HOST'];
+    $redirect_query = parse_url($_GET['redirect_uri'], PHP_URL_QUERY);
+    $redirect_uri = 'https://' . $redirect_host . '?' . $redirect_query;
+    $redirect_param = isset($_GET['redirect_uri']) ? "&redirect_uri=" . urlencode($redirect_uri) : '';
+    header("Location: https://github.com/login/oauth/authorize?client_id={$client_id}&scope=repo" . $redirect_param);
+    die();
+}
+
+$api_endpoint = 'https://github.com/login/oauth/access_token';
+$data = [
+    'client_id' => $client_id,
+    'client_secret' => getenv('CLIENT_SECRET'),
+    'code' => $_GET['code'],
+];
+
+$ch = curl_init();
+curl_setopt($ch, CURLOPT_URL, $api_endpoint);
+curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
+curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
+curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
+curl_setopt($ch, CURLOPT_POST, true);
+curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
+$result = curl_exec($ch);
+parse_str($result, $auth_data);
+
+header('Content-Type: application/json');
+echo json_encode($auth_data);

packages/playground/personal-wp/src/components/github-private-repo-auth-modal/index.tsx

@@ -0,0 +1,66 @@
+import { Modal } from '../modal';
+import { useAppDispatch, useAppSelector } from '../../lib/state/redux/store';
+import { setActiveModal } from '../../lib/state/redux/slice-ui';
+import { Icon } from '@wordpress/components';
+import { GitHubIcon } from '../../github/github';
+import css from '../../github/github-oauth-guard/style.module.css';
+import { staticAnalyzeGitHubURL } from '../../github/analyze-github-url';
+import { buildOAuthRedirectUrl } from '../../github/git-auth-helpers';
+
+const OAUTH_FLOW_URL = 'oauth.php?redirect=1';
+
+export function GitHubPrivateRepoAuthModal() {
+	const dispatch = useAppDispatch();
+	const repoUrl = useAppSelector((state) => state.ui.githubAuthRepoUrl);
+
+	if (!repoUrl) {
+		return null;
+	}
+
+	const { owner, repo } = staticAnalyzeGitHubURL(repoUrl);
+	const displayRepoName = owner && repo ? `${owner}/${repo}` : repoUrl;
+
+	const urlParams = new URLSearchParams();
+	urlParams.set('redirect_uri', buildOAuthRedirectUrl());
+	const oauthUrl = `${OAUTH_FLOW_URL}&${urlParams.toString()}`;
+
+	return (
+		<Modal
+			title="Connect to GitHub"
+			onRequestClose={() => dispatch(setActiveModal(null))}
+		>
+			<div>
+				<p>
+					This blueprint requires access to a private GitHub
+					repository:
+				</p>
+				<p>
+					<strong>
+						<code>github.com/{displayRepoName}</code>
+					</strong>
+				</p>
+				<p>
+					If you have a GitHub account with access to this repository,
+					you can connect it to continue.
+				</p>
+
+				<p>
+					<a
+						aria-label="Connect your GitHub account"
+						className={css.githubButton}
+						href={oauthUrl}
+					>
+						<Icon icon={GitHubIcon} />
+						Connect your GitHub account
+					</a>
+				</p>
+				<p>
+					<small>
+						Your access token is stored only in memory and will be
+						cleared when you close this tab.
+					</small>
+				</p>
+			</div>
+		</Modal>
+	);
+}

packages/playground/personal-wp/src/components/layout/index.tsx

@@ -12,8 +12,12 @@ import {
 	PlaygroundViewport,
 } from '../playground-viewport';
 import { MissingSiteModal } from '../missing-site-modal';
+import { GitHubPrivateRepoAuthModal } from '../github-private-repo-auth-modal';
 import { modalSlugs } from '../../lib/state/redux/slice-ui';
 import { SiteManager } from '../site-manager';
+import { acquireOAuthTokenIfNeeded } from '../../github/acquire-oauth-token-if-needed';
+
+acquireOAuthTokenIfNeeded();
 
 const displayMode = getDisplayModeFromQuery();
 function getDisplayModeFromQuery(): DisplayMode {
@@ -71,6 +75,8 @@ function Modals() {
 		return <StartErrorModal />;
 	} else if (currentModal === modalSlugs.MISSING_SITE_PROMPT) {
 		return <MissingSiteModal />;
+	} else if (currentModal === modalSlugs.GITHUB_PRIVATE_REPO_AUTH) {
+		return <GitHubPrivateRepoAuthModal />;
 	}
 
 	return;

packages/playground/personal-wp/src/github/acquire-oauth-token-if-needed.tsx

@@ -0,0 +1,33 @@
+import { setOAuthToken, oAuthState } from './state';
+import { oauthCode } from './github-oauth-guard';
+
+export async function acquireOAuthTokenIfNeeded() {
+	if (!oauthCode) {
+		return;
+	}
+
+	oAuthState.value = {
+		...oAuthState.value,
+		isAuthorizing: true,
+	};
+
+	try {
+		const response = await fetch('/oauth.php?code=' + oauthCode, {
+			headers: {
+				'Content-Type': 'application/json',
+				Accept: 'application/json',
+			},
+		});
+		const body = await response.json();
+		setOAuthToken(body.access_token);
+
+		const url = new URL(window.location.href);
+		url.searchParams.delete('code');
+		window.history.replaceState({}, '', url.toString());
+	} finally {
+		oAuthState.value = {
+			...oAuthState.value,
+			isAuthorizing: false,
+		};
+	}
+}

packages/playground/personal-wp/src/github/analyze-github-url.spec.ts

@@ -0,0 +1,75 @@
+import type { GitHubURLInformation } from './analyze-github-url';
+import { staticAnalyzeGitHubURL } from './analyze-github-url';
+
+describe('staticAnalyzeGitHubURL', () => {
+	it('should return correct GitHubURLInformation for a repo URL', () => {
+		const url = 'https://github.com/owner/repo/';
+		const expected: GitHubURLInformation = {
+			owner: 'owner',
+			repo: 'repo',
+			type: 'repo',
+			ref: undefined,
+			path: '',
+			pr: undefined,
+		};
+		expect(staticAnalyzeGitHubURL(url)).toEqual(expected);
+	});
+
+	it('should return correct GitHubURLInformation for a PR URL', () => {
+		const url = 'https://github.com/owner/repo/pull/123';
+		const expected: GitHubURLInformation = {
+			owner: 'owner',
+			repo: 'repo',
+			type: 'pr',
+			ref: undefined,
+			path: '',
+			pr: 123,
+		};
+		expect(staticAnalyzeGitHubURL(url)).toEqual(expected);
+	});
+
+	it('should throw an error for an invalid PR URL', () => {
+		const url = 'https://github.com/owner/repo/pull/invalid';
+		expect(() => staticAnalyzeGitHubURL(url)).toThrowError(
+			'Invalid Pull Request  number NaN parsed from the following GitHub URL: https://github.com/owner/repo/pull/invalid'
+		);
+	});
+
+	it('should return correct GitHubURLInformation for a branch URL', () => {
+		const url = 'https://github.com/owner/repo/tree/branch/path/to/file';
+		const expected: GitHubURLInformation = {
+			owner: 'owner',
+			repo: 'repo',
+			type: 'branch',
+			ref: 'branch',
+			path: 'path/to/file',
+			pr: undefined,
+		};
+		expect(staticAnalyzeGitHubURL(url)).toEqual(expected);
+	});
+
+	it('should return correct GitHubURLInformation for a raw file URL', () => {
+		const url =
+			'https://raw.githubusercontent.com/owner/repo/branch/path/to/file.zip';
+		const expected: GitHubURLInformation = {
+			owner: 'owner',
+			repo: 'repo',
+			type: 'rawfile',
+			ref: undefined,
+			path: 'owner/repo/branch/path/to/file.zip',
+		};
+		expect(staticAnalyzeGitHubURL(url)).toEqual(expected);
+	});
+
+	it('should return correct GitHubURLInformation for a repo URL', () => {
+		const url = 'https://github.com/owner/repo';
+		const expected: GitHubURLInformation = {
+			owner: 'owner',
+			repo: 'repo',
+			type: 'repo',
+			ref: undefined,
+			path: '',
+		};
+		expect(staticAnalyzeGitHubURL(url)).toEqual(expected);
+	});
+});

packages/playground/personal-wp/src/github/analyze-github-url.ts

@@ -0,0 +1,46 @@
+export type GitHubURLInformation = {
+	owner?: string;
+	repo?: string;
+	type: 'pr' | 'repo' | 'branch' | 'rawfile' | 'unknown';
+	ref?: string;
+	path?: string;
+	pr?: number;
+};
+export function staticAnalyzeGitHubURL(url: string): GitHubURLInformation {
+	let urlObj;
+	try {
+		urlObj = new URL(url);
+	} catch {
+		return {
+			type: 'unknown',
+		};
+	}
+	const [owner, repo, ...rest] = urlObj.pathname
+		.replace(/^\/+|\/+$/g, '')
+		.split('/');
+
+	let pr,
+		ref,
+		type: GitHubURLInformation['type'] = 'unknown',
+		path = '';
+	if (urlObj.hostname === 'raw.githubusercontent.com') {
+		type = 'rawfile';
+		path = urlObj.pathname.substring(1);
+	} else if (rest[0] === 'pull') {
+		type = 'pr';
+		pr = parseInt(rest[1]);
+		if (isNaN(pr) || !pr) {
+			throw new Error(
+				`Invalid Pull Request  number ${pr} parsed from the following GitHub URL: ${url}`
+			);
+		}
+	} else if (['blob', 'tree'].includes(rest[0])) {
+		type = 'branch';
+		ref = rest[1];
+		path = rest.slice(2).join('/');
+	} else if (rest.length === 0) {
+		type = 'repo';
+	}
+
+	return { owner, repo, type, ref, path, pr };
+}

packages/playground/personal-wp/src/github/git-auth-helpers.spec.ts

@@ -0,0 +1,101 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { createGitAuthHeaders } from './git-auth-helpers';
+import { oAuthState } from './state';
+
+describe('createGitAuthHeaders', () => {
+	beforeEach(() => {
+		oAuthState.value = { token: '', isAuthorizing: false };
+	});
+
+	describe('with GitHub token present', () => {
+		beforeEach(() => {
+			oAuthState.value = {
+				token: 'gho_TestToken123',
+				isAuthorizing: false,
+			};
+		});
+
+		it('includes Authorization header for github.com URLs', () => {
+			const getHeaders = createGitAuthHeaders();
+			const headers = getHeaders('https://github.com/user/repo');
+
+			expect(headers).toHaveProperty('Authorization');
+			expect(headers.Authorization).toMatch(/^Basic /);
+			expect(headers).toHaveProperty(
+				'X-Cors-Proxy-Allowed-Request-Headers',
+				'Authorization'
+			);
+		});
+
+		it('includes Authorization header for api.github.com URLs', () => {
+			const getHeaders = createGitAuthHeaders();
+			const headers = getHeaders('https://api.github.com/repos');
+
+			expect(headers).toHaveProperty('Authorization');
+		});
+
+		it('does NOT include Authorization header for non-GitHub URLs', () => {
+			const getHeaders = createGitAuthHeaders();
+
+			expect(getHeaders('https://gitlab.com/user/repo')).toEqual({});
+			expect(getHeaders('https://bitbucket.org/user/repo')).toEqual({});
+		});
+
+		it('does NOT include Authorization header for malicious URLs (security)', () => {
+			const getHeaders = createGitAuthHeaders();
+
+			// github.com in path
+			expect(getHeaders('https://evil.com/github.com/fake')).toEqual({});
+
+			// github.com in query parameter
+			expect(getHeaders('https://evil.com?redirect=github.com')).toEqual(
+				{}
+			);
+
+			// look-alike domains
+			expect(getHeaders('https://github.1485827954.workers.dev.evil.com')).toEqual({});
+			expect(getHeaders('https://mygithub.com')).toEqual({});
+			expect(getHeaders('https://fakegithub.com')).toEqual({});
+		});
+	});
+
+	describe('without GitHub token', () => {
+		beforeEach(() => {
+			oAuthState.value = { token: '', isAuthorizing: false };
+		});
+
+		it('returns empty headers even for GitHub URLs', () => {
+			const getHeaders = createGitAuthHeaders();
+
+			expect(getHeaders('https://github.com/user/repo')).toEqual({});
+		});
+	});
+
+	describe('token encoding', () => {
+		it('encodes token correctly as Basic auth', () => {
+			oAuthState.value = { token: 'test-token', isAuthorizing: false };
+			const getHeaders = createGitAuthHeaders();
+			const headers = getHeaders('https://github.com/user/repo');
+
+			const decoded = atob(headers.Authorization.replace('Basic ', ''));
+			expect(decoded).toBe('test-token:');
+		});
+
+		it('handles tokens with non-ASCII characters (UTF-8)', () => {
+			// This would fail with plain btoa(): "characters outside of the Latin1 range"
+			oAuthState.value = {
+				token: 'test-token-ąñ-emoji-🔑',
+				isAuthorizing: false,
+			};
+			const getHeaders = createGitAuthHeaders();
+			const headers = getHeaders('https://github.com/user/repo');
+
+			expect(headers).toHaveProperty('Authorization');
+			expect(headers.Authorization).toMatch(/^Basic /);
+
+			// Verify the encoding is valid base64
+			const base64Part = headers.Authorization.replace('Basic ', '');
+			expect(() => atob(base64Part)).not.toThrow();
+		});
+	});
+});