db: add login flow for web containers (#10816)

* feat: add login flow for web containers * chore: changeset * chore: remove unused web() * feat: detect github codespaces * fix: add success msg for manual flow * refactor: use URL constructor for login URL Co-authored-by: Matthew Phillips <[email protected]> * fix: add .href for url string --------- Co-authored-by: Matthew Phillips <[email protected]>
withastro · Apr 22, 2024 · 8e6eb62 · 8e6eb62
1 parent 8d5f3e8
commit 8e6eb62
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 25 deletions.
diff --git a/.changeset/spotty-dots-beg.md b/.changeset/spotty-dots-beg.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/db": patch
+---
+
+Add `astro login` support from online editors like Stackblitz and GitHub Codespaces
diff --git a/packages/db/src/core/cli/commands/login/index.ts b/packages/db/src/core/cli/commands/login/index.ts
@@ -5,11 +5,59 @@ import { listen } from 'async-listen';
 import { cyan } from 'kleur/colors';
 import open from 'open';
 import ora from 'ora';
+import prompt from 'prompts';
 import type { Arguments } from 'yargs-parser';
 import { SESSION_LOGIN_FILE } from '../../../tokens.js';
 import type { DBConfig } from '../../../types.js';
 import { getAstroStudioUrl } from '../../../utils.js';
 
+const isWebContainer =
+	// Stackblitz heuristic
+	process.versions?.webcontainer ??
+	// Github Codespaces heuristic
+	process.env.CODESPACE_NAME;
+
+export async function cmd({
+	flags,
+}: {
+	astroConfig: AstroConfig;
+	dbConfig: DBConfig;
+	flags: Arguments;
+}) {
+	let session = flags.session;
+
+	if (!session && isWebContainer) {
+		console.log(`Please visit the following URL in your web browser:`);
+		console.log(cyan(`${getAstroStudioUrl()}/auth/cli/login`));
+		console.log(`After login in complete, enter the verification code displayed:`);
+		const response = await prompt({
+			type: 'text',
+			name: 'session',
+			message: 'Verification code:',
+		});
+		if (!response.session) {
+			console.error('Cancelling login.');
+			process.exit(0);
+		}
+		session = response.session;
+		console.log('Successfully logged in');
+	} else if (!session) {
+		const { url, promise } = await createServer();
+		const loginUrl = new URL('/auth/cli/login', getAstroStudioUrl());
+		loginUrl.searchParams.set('returnTo', url);
+		console.log(`Opening the following URL in your browser...`);
+		console.log(cyan(loginUrl.href));
+		console.log(`If something goes wrong, copy-and-paste the URL into your browser.`);
+		open(loginUrl.href);
+		const spinner = ora('Waiting for confirmation...');
+		session = await promise;
+		spinner.succeed('Successfully logged in');
+	}
+
+	await mkdir(new URL('.', SESSION_LOGIN_FILE), { recursive: true });
+	await writeFile(SESSION_LOGIN_FILE, `${session}`);
+}
+
 // NOTE(fks): How the Astro CLI login process works:
 // 1. The Astro CLI creates a temporary server to listen for the session token
 // 2. The user is directed to studio.astro.build/ to login
@@ -47,28 +95,3 @@ async function createServer(): Promise<{ url: string; promise: Promise<string> }
 
 	return { url: serverUrl, promise: sessionPromise };
 }
-
-export async function cmd({
-	flags,
-}: {
-	astroConfig: AstroConfig;
-	dbConfig: DBConfig;
-	flags: Arguments;
-}) {
-	let session = flags.session;
-
-	if (!session) {
-		const { url, promise } = await createServer();
-		const loginUrl = getAstroStudioUrl() + '/auth/cli/login?returnTo=' + encodeURIComponent(url);
-		console.log(`Opening the following URL in your browser...`);
-		console.log(cyan(loginUrl));
-		console.log(`If something goes wrong, copy-and-paste the URL into your browser.`);
-		open(loginUrl);
-		const spinner = ora('Waiting for confirmation...');
-		session = await promise;
-		spinner.succeed('Successfully logged in!');
-	}
-
-	await mkdir(new URL('.', SESSION_LOGIN_FILE), { recursive: true });
-	await writeFile(SESSION_LOGIN_FILE, `${session}`);
-}