web: sign in without a second window

A pop-up opened from a chain that begins in a webview is the first thing a strict browser (Safari, a
phone) refuses. The editor now takes its own tab to the account site's sign-in and the sign-in
returns to the same tab:

- host.openAuth: in the browser the extension asks the page to navigate (levelcode.web.openAuthUrl,
  an embedder command) with the address the editor's own opener would have used; without the command
  it opens as before. The desktop is untouched.
- web/main.js registers the command. It only goes to the account site's /ai/ pages: any extension in
  the page can call it, and it must not be an open redirect.
- callback.html returns the tab to the editor when this tab left it (a sessionStorage mark), and
  otherwise says to close the tab and offers a link in.
- At start-up the editor delivers a result the sign-in left in localStorage (a callback.html result
  written in the last two minutes: the one-time code lives for one), and ?signin=1 — the account
  site's "Open in browser" — starts the sign-in once and removes itself from the address.

Tests: unit (host.openAuth; main.js's leaveForSignIn, drain and start-up, mutation-checked) and an
end-to-end in headless Chrome (web/test/e2e-signin-tab.mjs): no second window, the verifier survives
the reload, no repeat, no sign-in for a signed-in editor, a result waiting for a gone editor is
delivered and an old one is dropped.

Author: ndemianc

extensions/levelcode-ai/host.js

@@ -141,6 +141,35 @@ async function withReads(run) {
 	return result;
 }
 
+/* ----- sending the user to sign in ------------------------------------------------------------- */
+
+/** Registered by the page (web/main.js); it takes the tab to the account site and the sign-in comes back to it. */
+const OPEN_AUTH_COMMAND = 'levelcode.web.openAuthUrl';
+
+/**
+ * Open the account site's sign-in page. The desktop hands it to the system browser, as ever. A browser
+ * tab leaves the page for it: a pop-up opened from a chain that began in a webview is the first thing a
+ * strict browser (Safari, a phone) refuses, and the sign-in returns to the editor in the same tab. The
+ * page's entry script supplies the command that navigates; without it this falls back to openExternal.
+ *
+ * The string handed over is the one the editor's own opener would have opened — `encodeURI(uri.toString(true))`
+ * (src/vs/editor/browser/services/openerService.ts) — so the server sees the same address whichever way
+ * the sign-in was started, as it has from the desktop app all along.
+ * @param {vscode.Uri} uri
+ */
+async function openAuth(uri) {
+	if (isBrowser) {
+		try {
+			const known = await vscode.commands.getCommands(true);
+			if (known.includes(OPEN_AUTH_COMMAND)) {
+				await vscode.commands.executeCommand(OPEN_AUTH_COMMAND, encodeURI(uri.toString(true)));
+				return;
+			}
+		} catch { /* fall through to the pop-up */ }
+	}
+	await vscode.env.openExternal(uri);
+}
+
 /* ----- finding files ------------------------------------------------------------------------- */
 
 /**
@@ -156,7 +185,7 @@ function findFiles(glob, exclude, max) {
 
 module.exports = {
 	isBrowser, caps,
-	uriFor, readBytes, readText, readTextOrNull, stat, exists, isBinary, withReads, findFiles,
+	uriFor, readBytes, readText, readTextOrNull, stat, exists, isBinary, withReads, findFiles, openAuth,
 	// For tests.
 	_path: path,
 };

web/ai-extension/copy.js

@@ -1,4 +1,4 @@
-// Words that are true on the desktop and false in a tab, and what the browser build says instead.
+// What the desktop extension says or does that is not true in a tab, and what the browser build uses instead.
 //
 // The desktop extension's text is written for a Mac: keys in the OS keychain, nothing leaves "your
 // machine". In a browser the same facts read differently (keys are sealed in this browser's
@@ -15,6 +15,10 @@ const REPLACEMENTS = [
 	['extension.js',
 		'Stored encrypted in your OS keychain — it never leaves your machine except to ',
 		'Stored encrypted in this browser — it never leaves this browser except to '],
+	// Sign-in leaves the tab for the account page and returns to it (host.openAuth); the desktop opens its browser.
+	['extension.js',
+		"\tdbg('account.signin', { provider: provider || 'browser', create: !!create });\n\tawait vscode.env.openExternal(vscode.Uri.parse(url));",
+		"\tdbg('account.signin', { provider: provider || 'browser', create: !!create });\n\tawait host.openAuth(vscode.Uri.parse(url));"],
 	['media/chat.html',
 		'Bring your own API key, stored in your OS keychain.',
 		'Bring your own API key, stored encrypted in this browser.'],

web/callback.css

@@ -5,3 +5,5 @@ main { display: grid; justify-items: center; gap: 8px; padding: 24px; text-align
 .mark { width: 56px; height: 56px; color: #7C5CD6; margin-bottom: 8px; }
 h1 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -.01em; }
 p { margin: 0; opacity: .72; }
+[hidden] { display: none !important; }
+a { color: inherit; text-underline-offset: 3px; }

web/callback.html

@@ -16,6 +16,7 @@
 		</svg>
 		<h1 id="title">Finishing sign-in</h1>
 		<p id="text">One moment.</p>
+		<p id="more" hidden><a href="./">Open LevelCode in this tab</a></p>
 	</main>
 	<script src="/callback.js"></script>
 </body>

web/callback.js

@@ -22,11 +22,25 @@
 		var rest = params.toString();
 		if (rest) { uri.query = rest; }
 		if (fragment) { uri.fragment = fragment; }
+		// `at` lets the editor tell this result from one left behind long ago; the URL it is revived from ignores it.
+		uri.at = Date.now();
 		localStorage.setItem('vscode-web.url-callbacks[' + id + ']', JSON.stringify(uri));
-		say('You are signed in', 'You can close this tab and go back to LevelCode.');
-		// Take the one-time code out of the address bar and history, then try to close the tab.
+		// Take the one-time code out of the address bar and history.
 		history.replaceState(null, '', location.pathname);
-		setTimeout(function () { try { window.close(); } catch (e) { /* the text above still tells the user */ } }, 600);
+		var home = new URL('./', location.href).href;
+		var back = false;
+		// Set by the editor when it took THIS tab to the sign-in (web/main.js); the editor clears it at start-up.
+		try { back = sessionStorage.getItem('levelcode-web.return') === '1'; } catch (e) { /* no storage: the pop-up path */ }
+		if (back) {
+			// This tab left the editor for the sign-in: go back. The editor finds the result at start-up.
+			say('You are signed in', 'Back to LevelCode.');
+			location.replace(home);
+		} else {
+			say('You are signed in', 'You can close this tab and go back to LevelCode.');
+			var more = document.getElementById('more');
+			if (more) { more.hidden = false; more.querySelector('a').href = home; }
+			setTimeout(function () { try { window.close(); } catch (e) { /* the text above still tells the user */ } }, 600);
+		}
 	} catch (e) {
 		say('This link does not look right', String((e && e.message) || e));
 	}

web/lib/config.mjs

@@ -21,6 +21,7 @@ export function webConfig(o = {}) {
 		// Where the page's own scripts and styles, the Code-OSS web build, and the extensions are mounted.
 		// A release puts all three under one build-addressed prefix (/_/<id>) so they can be cached for
 		// a year; the development server mounts them at the root, /static and /extensions.
+		account,
 		base: o.base || '',
 		staticBase: o.staticBase || '/static',
 		extensionsBase: o.extensionsBase || '/extensions',

web/main.js

@@ -23,6 +23,13 @@ const staticBase = trimSlash(new URL(config.staticBase || '/static', origin).hre
 // The workbench resolves every asset (css, nls, workers, codicon font) against this root.
 globalThis._VSCODE_FILE_ROOT = staticBase + '/out/';
 
+// Declared up here, not beside the sign-in code: the block below awaits, and a const further down the module
+// is not initialised until it finishes.
+/** sessionStorage: this tab went to the account site's sign-in and is expected back (callback.js reads it). */
+const RETURN_KEY = 'levelcode-web.return';
+/** How long a sign-in result left in localStorage stays deliverable. The one-time code behind it lives for a minute. */
+const FRESH_MS = 2 * 60 * 1000;
+
 const boot = createBootScreen();
 
 try {
@@ -32,11 +39,18 @@ try {
 
 	const secrets = await createSecretStorage();
 	const workspaceProvider = createWorkspaceProvider(URI, config);
+	const callbacks = createUrlCallbackProvider(URI, config.callbackRoute || '/callback.html');
 
 	const workbench = create(document.body, {
 		windowIndicator: { label: '$(globe) LevelCode Web', tooltip: 'LevelCode in your browser' },
 		workspaceProvider,
-		urlCallbackProvider: createUrlCallbackProvider(URI, config.callbackRoute || '/callback.html'),
+		urlCallbackProvider: callbacks,
+		commands: [{
+			// The extension asks the page to take the tab to the account site's sign-in. A page opened by
+			// script is what a strict browser blocks; leaving the tab and coming back (callback.js) is not.
+			id: 'levelcode.web.openAuthUrl',
+			handler: (url) => leaveForSignIn(url, config),
+		}],
 		secretStorageProvider: secrets,
 		additionalBuiltinExtensions: (config.extensions || []).map((name) => ({
 			scheme: location.protocol.slice(0, -1),
@@ -54,6 +68,7 @@ try {
 	// create() resolves once the workbench has been constructed. The splash goes when its DOM exists.
 	void workbench;
 	boot.whenWorkbenchReady();
+	startReturnFromSignIn(callbacks, URI);
 } catch (err) {
 	console.error('[levelcode-web] failed to start', err);
 	boot.fail(err);
@@ -69,6 +84,54 @@ function readConfig() {
 
 function trimSlash(s) { return s.replace(/\/+$/, ''); }
 
+/* ----- signing in ------------------------------------------------------------------------- */
+
+/**
+ * Take this tab to the account site's sign-in page. Only that site's /ai/ pages: this is a command any
+ * extension in the page could call, and it must not be a way to send the tab anywhere else.
+ */
+function leaveForSignIn(url, cfg) {
+	let target;
+	try { target = new URL(String(url)); } catch { return; }
+	let account;
+	try { account = new URL(cfg.account); } catch { return; }
+	if (target.origin !== account.origin || !target.pathname.startsWith('/ai/')) {
+		console.warn('[levelcode-web] refused to navigate to', target.origin + target.pathname);
+		return;
+	}
+	// callback.html is a page of this tab when this is set: it comes straight back instead of closing.
+	try { sessionStorage.setItem(RETURN_KEY, '1'); } catch { /* the pop-up path still works without it */ }
+	location.assign(target.href);
+}
+
+/**
+ * Two things can be waiting when the page starts, and both reach the extension as the "URL" the operating
+ * system would have given it on the desktop:
+ *   - a sign-in that took this tab away and brought it back (callback.html) left its result in
+ *     localStorage; it is delivered now. Only a result written in the last two minutes is: an older one is
+ *     a code that cannot be exchanged any more, and is dropped;
+ *   - ?signin=1 (the account site's "Open in browser") asks for the sign-in itself, once. The parameter is
+ *     removed first, so a reload does not start it again.
+ */
+function startReturnFromSignIn(callbacks, URI) {
+	const here = new URL(location.href);
+	const launch = here.searchParams.get('signin') === '1';
+	if (launch) {
+		here.searchParams.delete('signin');
+		try { history.replaceState(null, '', here.pathname + here.search + here.hash); } catch { /* cosmetic */ }
+	}
+	try { sessionStorage.removeItem(RETURN_KEY); } catch { /* nothing to clear */ }
+	void callbacks.whenListening().then((listening) => {
+		// With nobody listening a result would be taken out of storage and dropped; it stays for the next start.
+		if (!listening) { return; }
+		// Deliveries made before the extension has registered its handler are held by the workbench and
+		// replayed to it (ExtensionUrlBootstrapHandler / uriBuffer), so there is nothing to wait for.
+		const delivered = callbacks.drain(FRESH_MS);
+		if (launch && delivered === 0) {
+			callbacks.fire(URI.from({ scheme: 'levelcode', authority: 'levelcode.levelcode-ai', path: '/launch' }));
+		}
+	});
+}
 /** The URL decides the workspace, exactly as Code-OSS's web client does: ?folder= / ?workspace= / ?ew=true. */
 function createWorkspaceProvider(URI, cfg) {
 	const params = new URL(location.href).searchParams;
@@ -139,6 +202,44 @@ function createUrlCallbackProvider(URI, callbackRoute) {
 
 	return {
 		onCallback: (listener) => { listeners.add(listener); return { dispose: () => listeners.delete(listener) }; },
+		/** Resolves true once the workbench's URL service is listening (it subscribes while it starts); false if it never did. */
+		whenListening() {
+			return new Promise((resolve) => {
+				const t0 = Date.now();
+				const tick = () => {
+					if (listeners.size > 0) { resolve(true); }
+					else if (Date.now() - t0 > 30000) { resolve(false); }
+					else { setTimeout(tick, 100); }
+				};
+				tick();
+			});
+		},
+		/**
+		 * Deliver results a sign-in left in localStorage that this page was not waiting for (it left and came
+		 * back). One not written within `maxAgeMs` is removed and not delivered. Returns how many were.
+		 */
+		drain(maxAgeMs) {
+			const keys = [];
+			for (let i = 0; i < localStorage.length; i++) {
+				const k = localStorage.key(i);
+				if (k && k.startsWith('vscode-web.url-callbacks[')) { keys.push(k); }
+			}
+			let n = 0;
+			for (const k of keys) {
+				const raw = localStorage.getItem(k);
+				localStorage.removeItem(k);
+				try {
+					const data = JSON.parse(raw);
+					if (typeof data.at === 'number' && Date.now() - data.at > maxAgeMs) { continue; }
+					const uri = URI.revive(data);
+					listeners.forEach((l) => l(uri));
+					n++;
+				} catch (e) { console.error(e); }
+			}
+			return n;
+		},
+		/** Hand the workbench a URL as if the OS had opened it. */
+		fire(uri) { listeners.forEach((l) => l(uri)); },
 		create(options = {}) {
 			const id = ++nextId;
 			const query = [`vscode-reqid=${id}`];