Merge pull request #7 from betegon/opencode/clever-eagle

feat(auth): add QR code display for mobile OAuth flow

Author: betegon

bun.lock

@@ -19,12 +19,14 @@
   "devDependencies": {
     "@types/bun": "latest",
     "@types/node": "^20",
+    "@types/qrcode-terminal": "^0.12.2",
     "typescript": "^5"
   },
   "dependencies": {
     "@ast-grep/napi": "^0.31.0",
     "@stricli/auto-complete": "^1.2.4",
     "@stricli/core": "^1.2.4",
+    "qrcode-terminal": "^0.12.0",
     "zod": "^3.24.0"
   }
 }

packages/cli/package.json

@@ -8,10 +8,12 @@ import {
   setAuthToken,
 } from "../../lib/config.js";
 import { completeOAuthFlow, performDeviceFlow } from "../../lib/oauth.js";
+import { generateQRCode } from "../../lib/qrcode.js";
 
 type LoginFlags = {
   readonly token?: string;
   readonly timeout: number;
+  readonly qr: boolean;
 };
 
 export const loginCommand = buildCommand({
@@ -36,6 +38,11 @@ export const loginCommand = buildCommand({
         brief: "Timeout for OAuth flow in seconds (default: 900)",
         default: 900,
       },
+      qr: {
+        kind: "boolean",
+        brief: "Show QR code for mobile scanning",
+        default: true,
+      },
     },
   },
   async func(this: SentryContext, flags: LoginFlags): Promise<void> {
@@ -81,10 +88,18 @@ export const loginCommand = buildCommand({
             verificationUri,
             verificationUriComplete
           ) => {
-            process.stdout.write("Opening browser...\n");
-            process.stdout.write(
-              `If it doesn't open, visit: ${verificationUri}\n`
-            );
+            process.stdout.write("Opening browser...\n\n");
+
+            if (flags.qr) {
+              process.stdout.write(
+                "Scan this QR code or visit the URL below:\n\n"
+              );
+              const qr = await generateQRCode(verificationUriComplete);
+              process.stdout.write(qr);
+              process.stdout.write("\n");
+            }
+
+            process.stdout.write(`URL: ${verificationUri}\n`);
             process.stdout.write(`Code: ${userCode}\n\n`);
             process.stdout.write("Waiting for authorization...\n");
             await openBrowser(verificationUriComplete);

packages/cli/src/commands/auth/login.ts

@@ -0,0 +1,56 @@
+/**
+ * QR Code Utilities
+ *
+ * Terminal QR code generation for authentication flows.
+ * Uses qrcode-terminal for rendering QR codes in the terminal.
+ */
+
+import qrcodeTerminal from "qrcode-terminal";
+import { z } from "zod";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Schema & Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * QR code generation options schema
+ */
+export const QRCodeOptionsSchema = z.object({
+  /**
+   * Use compact (small) QR code rendering.
+   * Recommended for terminal display.
+   */
+  small: z.boolean().default(true),
+});
+
+export type QRCodeOptions = z.infer<typeof QRCodeOptionsSchema>;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Public API
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Generate a QR code string for terminal display
+ *
+ * @param data - The data to encode in the QR code (typically a URL)
+ * @param options - QR code generation options
+ * @returns The QR code as a string suitable for terminal output
+ *
+ * @example
+ * ```ts
+ * const qr = await generateQRCode("https://example.com/auth?code=ABC123");
+ * process.stdout.write(qr);
+ * ```
+ */
+export function generateQRCode(
+  data: string,
+  options?: Partial<QRCodeOptions>
+): Promise<string> {
+  const opts = QRCodeOptionsSchema.parse(options ?? {});
+
+  return new Promise((resolve) => {
+    qrcodeTerminal.generate(data, { small: opts.small }, (qrcode) => {
+      resolve(qrcode);
+    });
+  });
+}