fix(oauth): make PKCE callback deliver to opener

Author: linull24

app/src/config/dataset.ts

@@ -23,7 +23,9 @@ export interface DatasetConfig {
 
 const DEFAULT_DATASET_CONFIG: DatasetConfig = {
 	termId: '2025-16',
-	snapshotPath: '/crawler/data/terms/2025-16.json',
+	// Leave empty by default; runtime resolver will pick the latest matching term from
+	// `static/crawler/data/current.json` (bundled into SSG builds).
+	snapshotPath: '',
 	parserId: '2025Spring',
 	seedSelectionIds: []
 };

app/src/config/meta.ts

@@ -1,3 +1,5 @@
+import { base } from '$app/paths';
+
 export interface MetaLink {
 	id: string;
 	labelKey: string;
@@ -33,7 +35,7 @@ const DEFAULT_META_CONFIG: AppMetaConfig = {
 	productBylineKey: 'meta.productByline',
 	homepage: 'https://xk.shuosc.com',
 	branding: {
-		iconSrc: '/icons/shuosc.png',
+		iconSrc: `${base || ''}/icons/shuosc.png`,
 		iconAltKey: 'meta.productIconAlt'
 	},
 	about: {

app/src/config/userscript.ts

@@ -14,14 +14,7 @@ const DEFAULT_CONFIG: UserscriptConfig = {
 		import.meta.env?.VITE_USERSCRIPT_HELP_URL ??
 		`https://github.com/${resolveRepoSlug()}#readme`,
 	// Prefer `.user.js` suffix to ensure userscript managers trigger install reliably.
-	//
-	// On GitHub Pages, some setups (e.g. service worker, COOP/COEP headers, or routing fallbacks)
-	// can interfere with userscript managers' install interception. A raw.githubusercontent.com
-	// URL is the most stable install source.
-	scriptUrl: import.meta.env?.PROD
-		? import.meta.env?.VITE_USERSCRIPT_INSTALL_URL ??
-			`https://raw.githubusercontent.com/${resolveRepoSlug()}/main/app/static/backenduserscript/backend.user.js`
-		: `${base || ''}/backenduserscript/backend.user.js`
+	scriptUrl: import.meta.env?.VITE_USERSCRIPT_INSTALL_URL ?? `${base || ''}/backenduserscript/backend.user.js`
 };
 
 export function getUserscriptConfig(overrides?: Partial<UserscriptConfig>): UserscriptConfig {

app/src/lib/apps/SyncPanel.svelte

@@ -59,6 +59,14 @@
 					? 'panels.sync.loginUnavailableHint'
 					: 'errors.githubPkceUnsupported';
 
+		const formatMessage = (key: string, values?: Record<string, string>) => {
+			try {
+				return t(key, values);
+			} catch {
+				return t(key);
+			}
+		};
+
 		function applyGithubToken(token: string) {
 			const trimmed = String(token || '').trim();
 			if (!trimmed) return;
@@ -71,6 +79,9 @@
 			if (event.data?.type === 'github-token' && event.data.token) {
 				applyGithubToken(event.data.token);
 			}
+			if (event.data?.type === 'github-oauth-error' && event.data.errorKey) {
+				gistStatus = formatMessage(String(event.data.errorKey), event.data.values);
+			}
 		}
 
 		function handleStorage(event: StorageEvent) {
@@ -87,6 +98,9 @@
 		function handleChannelMessage(event: MessageEvent) {
 			const data = (event as MessageEvent).data as any;
 			if (data?.type === 'github-token' && data.token) applyGithubToken(data.token);
+			if (data?.type === 'github-oauth-error' && data.errorKey) {
+				gistStatus = formatMessage(String(data.errorKey), data.values);
+			}
 		}
 		channel?.addEventListener('message', handleChannelMessage as any);
 

app/src/lib/i18n/locales/zh-CN.ts

@@ -952,12 +952,12 @@ export const zhCN = {
       loginHint: '使用 OAuth 登录（PKCE，会打开弹窗）。',
       loginUnavailableHint: '此部署未配置 GitHub OAuth。请在构建/部署环境中设置 PUBLIC_GITHUB_CLIENT_ID。',
       tokenLabel: 'GitHub token（仅本地保存）',
-      tokenPlaceholder: '粘贴 token（需要 Gist 权限）',
+      tokenPlaceholder: '仅开发/调试：输入 token（需要 Gist 权限）',
       tokenShow: '显示',
       tokenHide: '隐藏',
       tokenSave: '保存 token',
       closeWindow: '关闭窗口',
-      tokenHint: 'token 仅保存在浏览器 localStorage，不会被打包进同步内容。',
+      tokenHint: 'token 仅保存在本机浏览器 localStorage，不会被打包进同步内容。',
       gistIdLabel: 'Gist ID（可选）',
       gistIdPlaceholder: '已存在的 Gist ID，用于增量更新',
       noteLabel: '备注 / Note',
@@ -984,7 +984,7 @@ export const zhCN = {
         githubAuthorizing: '正在完成 GitHub 登录...',
         githubLoginSuccess: 'GitHub 登录成功',
         requireLogin: '请先登录 GitHub',
-        tokenRequired: '请先粘贴 GitHub token',
+        tokenRequired: '请先登录 GitHub',
         tokenSaved: 'token 已保存到本地',
         termStateMissing: 'TermState 未加载，请稍后重试',
         syncing: '正在生成快照并同步...',

app/src/lib/policies/github/oauthPkce.ts

@@ -52,13 +52,15 @@ export function getGithubPkceAvailability(): GithubPkceAvailability {
 	// GitHub Pages needs an OAuth proxy (GitHub's token endpoint is not CORS-enabled).
 	if (isGithubPagesHost() && !getOauthProxyUrl()) return { supported: false, reason: 'unsupportedRuntime' };
 
-	// IMPORTANT (GitHub Pages):
-	// adapter-static writes `auth/callback/index.html`, which requires a trailing slash when accessed directly.
-	// Without it, GitHub Pages falls back to `404.html`, and the callback runtime won't load reliably.
-	const redirectUri = new URL(`${base}/auth/callback/`, window.location.origin).toString();
+	// Use a stable redirectUri (no trailing slash) to match typical GitHub OAuth app settings.
+	// GitHub Pages will serve `404.html` for `/auth/callback`, and SvelteKit can still route it
+	// as long as asset paths are base-aware (see `app/src/app.html`).
+	const redirectUri = new URL(`${base}/auth/callback`, window.location.origin).toString();
 	return { supported: true, clientId, redirectUri };
 }
 
+export type GithubPkceCodePayload = { code: string; state: string };
+
 export function getGithubManualTokenAllowed() {
 	// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 	return Boolean(dev) || Boolean(publicEnv.PUBLIC_GITHUB_ALLOW_MANUAL_TOKEN);
@@ -105,9 +107,10 @@ export async function startGithubPkceLoginPopup(): Promise<GithubPkceStartResult
 	const popup = openCenteredPopup(authorizeUrl.toString(), 'github-login', 520, 640);
 	if (!popup) return { ok: false, errorKey: 'errors.githubPopupBlocked' };
 
-	// Best-effort: close popup from the opener side once the token is delivered.
-	// (Callback page may be unable to close itself depending on browser policies.)
-	attachPopupAutoClose(popup);
+	// Best-effort: complete the OAuth callback from the opener side.
+	// This is more reliable on GitHub Pages because `/auth/callback` may be served via `404.html` fallback,
+	// and GitHub's COOP headers can sever `window.opener` in the popup.
+	attachPopupCallbackCoordinator(popup, availability.redirectUri);
 	return { ok: true };
 }
 
@@ -232,11 +235,20 @@ function openCenteredPopup(url: string, name: string, width: number, height: num
 	return window.open(url, name, `width=${width},height=${height},left=${left},top=${top}`);
 }
 
-function attachPopupAutoClose(popup: Window) {
+function attachPopupCallbackCoordinator(popup: Window, redirectUri: string) {
 	if (!browser) return;
 
 	const channelName = 'neoxk:github-oauth';
 	const channel = typeof BroadcastChannel === 'undefined' ? null : new BroadcastChannel(channelName);
+	const notifyError = (payload: { errorKey: string; values?: Record<string, string> }) => {
+		try {
+			const outbound = new BroadcastChannel(channelName);
+			outbound.postMessage({ type: 'github-oauth-error', ...payload });
+			outbound.close();
+		} catch {
+			// ignore
+		}
+	};
 
 	let done = false;
 	const closePopup = () => {
@@ -251,39 +263,60 @@ function attachPopupAutoClose(popup: Window) {
 		if (done) return;
 		done = true;
 		window.removeEventListener('message', handleMessage);
-		window.removeEventListener('storage', handleStorage);
 		channel?.removeEventListener('message', handleChannelMessage as any);
 		channel?.close();
 		clearInterval(interval);
 		clearTimeout(timeout);
 	};
 
-	const onToken = (token: unknown) => {
-		const value = typeof token === 'string' ? token.trim() : '';
+	const deliverToken = (token: string) => {
+		const value = token.trim();
 		if (!value) return;
+		try {
+			const outbound = new BroadcastChannel(channelName);
+			outbound.postMessage({ type: 'github-token', token: value });
+			outbound.close();
+		} catch {
+			// ignore
+		}
+	};
+
+	const onCallback = async (payload: { code: string; state: string }) => {
+		if (done) return;
+		const code = String(payload.code || '').trim();
+		const state = String(payload.state || '').trim();
+		if (!code || !state) return;
+
+		const callbackUrl = new URL(redirectUri);
+		callbackUrl.searchParams.set('code', code);
+		callbackUrl.searchParams.set('state', state);
+
+		const result = await completeGithubPkceCallback(callbackUrl);
+		if (!result.ok) {
+			notifyError({ errorKey: result.errorKey, values: result.values });
+			return;
+		}
+		deliverToken(result.token);
 		closePopup();
-		// A second close attempt helps on some browsers.
 		setTimeout(closePopup, 100);
 		cleanup();
 	};
 
 	const handleMessage = (event: MessageEvent) => {
 		if (event.origin !== window.location.origin) return;
-		if (event.data?.type === 'github-token' && event.data.token) onToken(event.data.token);
-	};
-
-	const handleStorage = (event: StorageEvent) => {
-		if (event.key !== 'githubToken') return;
-		if (event.newValue) onToken(event.newValue);
+		if (event.data?.type === 'github-oauth-code' && event.data.code && event.data.state) {
+			void onCallback({ code: event.data.code, state: event.data.state });
+		}
 	};
 
 	const handleChannelMessage = (event: MessageEvent) => {
 		const data = (event as MessageEvent).data as any;
-		if (data?.type === 'github-token' && data.token) onToken(data.token);
+		if (data?.type === 'github-oauth-code' && data.code && data.state) {
+			void onCallback({ code: data.code, state: data.state });
+		}
 	};
 
 	window.addEventListener('message', handleMessage);
-	window.addEventListener('storage', handleStorage);
 	channel?.addEventListener('message', handleChannelMessage as any);
 
 	const interval = window.setInterval(() => {
@@ -292,11 +325,17 @@ function attachPopupAutoClose(popup: Window) {
 			cleanup();
 			return;
 		}
+
+		// If the popup navigates back to our origin, try to read its URL and complete the callback here.
 		try {
-			const token = localStorage.getItem('githubToken');
-			if (token) onToken(token);
+			const href = popup.location.href;
+			if (!href) return;
+			const url = new URL(href);
+			const code = url.searchParams.get('code');
+			const state = url.searchParams.get('state');
+			if (code && state) void onCallback({ code, state });
 		} catch {
-			// ignore
+			// ignore (cross-origin until it returns to our site)
 		}
 	}, 350);
 

app/src/routes/auth/callback/+page.svelte

@@ -18,21 +18,54 @@
 	onMount(async () => {
 		status = t('panels.sync.statuses.githubAuthorizing');
 
-		const result = await completeGithubPkceCallback(new URL(window.location.href));
+		// Prefer delivering the code/state to the opener, and let the opener complete the token exchange.
+		// This avoids relying on `window.opener` (may be severed by COOP) and avoids CORS in the popup.
+		const url = new URL(window.location.href);
+		const code = url.searchParams.get('code');
+		const state = url.searchParams.get('state');
+
+		if (code && state) {
+			deliverCallback({ code, state });
+			status = t('panels.sync.statuses.githubLoginSuccess');
+			setTimeout(() => tryCloseOrFallback(), 350);
+			return;
+		}
+
+		const result = await completeGithubPkceCallback(url);
 		if (!result.ok) {
 			status = t(result.errorKey, result.values);
-			// Even on failure, avoid leaving users stuck in a popup/tab.
 			setTimeout(() => tryCloseOrFallback(), 700);
 			return;
 		}
 
 		token = result.token;
 		status = t('panels.sync.statuses.githubLoginSuccess');
-
 		deliverToken(token);
 		tryCloseOrFallback();
 	});
 
+	function deliverCallback(payload: { code: string; state: string }) {
+		const code = String(payload.code || '').trim();
+		const state = String(payload.state || '').trim();
+		if (!code || !state) return;
+
+		try {
+			window.opener?.postMessage({ type: 'github-oauth-code', code, state }, window.location.origin);
+		} catch {
+			// ignore
+		}
+
+		try {
+			if (typeof BroadcastChannel !== 'undefined') {
+				const channel = new BroadcastChannel('neoxk:github-oauth');
+				channel.postMessage({ type: 'github-oauth-code', code, state });
+				channel.close();
+			}
+		} catch {
+			// ignore
+		}
+	}
+
 	function deliverToken(tokenValue: string) {
 		const trimmed = String(tokenValue || '').trim();
 		if (!trimmed) return;

app/svelte.config.js

@@ -1,6 +1,13 @@
 import adapter from '@sveltejs/adapter-static';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
+function resolveBasePath() {
+	const explicit = process.env.BASE_PATH;
+	if (explicit != null) return explicit;
+	const repo = process.env.GITHUB_REPOSITORY?.split('/')?.[1];
+	return repo ? `/${repo}` : '';
+}
+
 const config = {
 	preprocess: vitePreprocess(),
 
@@ -13,7 +20,7 @@ const config = {
 			strict: true
 		}),
 		paths: {
-			base: process.env.BASE_PATH ?? '',
+			base: resolveBasePath(),
 			relative: false
 		},
 		prerender: {