feat: ✨ introduce ip param for wrangler login command, fixes [5937] (#8316)

* feat: ✨ introduce ip param for wrangler login command

fix issue 5937 by providing option to user to pass ip for the temporary login server, enabling the use of wrangler login command in devcontainers

* style: 🎨 replace typo where console.log was used instead of logger.log

* feat: ✨ introduce callback-host and callback-port param for wrangler login command

* fix snapshot

---------

Co-authored-by: emily-shen <[email protected]>

Author: gnekich

.changeset/salty-ties-find.md

@@ -0,0 +1,5 @@
+---
+"wrangler": minor
+---
+
+introduce callback-host and callback-port param for wrangler login command

packages/wrangler/src/__tests__/user.test.ts

@@ -80,6 +80,45 @@ describe("User", () => {
 			});
 		});
 
+		it("should login a user when `wrangler login` is run with custom callbackHost param", async () => {
+			mockOAuthServerCallback("success");
+
+			let counter = 0;
+			msw.use(
+				http.post(
+					"*/oauth2/token",
+					async () => {
+						counter += 1;
+
+						return HttpResponse.json({
+							access_token: "test-access-token",
+							expires_in: 100000,
+							refresh_token: "test-refresh-token",
+							scope: "account:read",
+						});
+					},
+					{ once: true }
+				)
+			);
+
+			await runWrangler("login --callback-host='0.0.0.0'");
+
+			expect(counter).toBe(1);
+			expect(std.out).toMatchInlineSnapshot(`
+				"Attempting to login via OAuth...
+				Temporary login server listening on 0.0.0.0:8976
+				Opening a link in your default browser: https://dash.cloudflare.com/oauth2/auth?response_type=code&client_id=54d11594-84e4-41aa-b438-e81b8fa78ee7&redirect_uri=http%3A%2F%2Flocalhost%3A8976%2Foauth%2Fcallback&scope=account%3Aread%20user%3Aread%20workers%3Awrite%20workers_kv%3Awrite%20workers_routes%3Awrite%20workers_scripts%3Awrite%20workers_tail%3Aread%20d1%3Awrite%20pages%3Awrite%20zone%3Aread%20ssl_certs%3Awrite%20ai%3Awrite%20queues%3Awrite%20pipelines%3Awrite%20secrets_store%3Awrite%20offline_access&state=MOCK_STATE_PARAM&code_challenge=MOCK_CODE_CHALLENGE&code_challenge_method=S256
+				Successfully logged in."
+			`);
+			expect(readAuthConfigFile()).toEqual<UserAuthConfig>({
+				api_token: undefined,
+				oauth_token: "test-access-token",
+				refresh_token: "test-refresh-token",
+				expiration_time: expect.any(String),
+				scopes: ["account:read"],
+			});
+		});
+
 		it("login works in a different environment", async () => {
 			vi.stubEnv("WRANGLER_API_ENVIRONMENT", "staging");
 			mockOAuthServerCallback("success");

packages/wrangler/src/user/commands.ts

@@ -28,6 +28,19 @@ export const loginCommand = createCommand({
 			type: "string",
 			requiresArg: true,
 		},
+		"callback-host": {
+			describe:
+				"Use the ip or host address for the temporary login callback server.",
+			type: "string",
+			requiresArg: false,
+			default: "localhost",
+		},
+		"callback-port": {
+			describe: "Use the port for the temporary login callback server.",
+			type: "number",
+			requiresArg: false,
+			default: 8976,
+		},
 	},
 	async handler(args, { config }) {
 		if (args.scopesList) {
@@ -45,10 +58,19 @@ export const loginCommand = createCommand({
 					`One of ${args.scopes} is not a valid authentication scope. Run "wrangler login --scopes-list" to see the valid scopes.`
 				);
 			}
-			await login({ scopes: args.scopes, browser: args.browser });
+			await login({
+				scopes: args.scopes,
+				browser: args.browser,
+				callbackHost: args.callbackHost,
+				callbackPort: args.callbackPort,
+			});
 			return;
 		}
-		await login({ browser: args.browser });
+		await login({
+			browser: args.browser,
+			callbackHost: args.callbackHost,
+			callbackPort: args.callbackPort,
+		});
 		metrics.sendMetricsEvent("login user", {
 			sendMetrics: config.send_metrics,
 		});

packages/wrangler/src/user/user.ts

@@ -914,6 +914,8 @@ export function readAuthConfigFile(): UserAuthConfig {
 type LoginProps = {
 	scopes?: Scope[];
 	browser: boolean;
+	callbackHost: string;
+	callbackPort: number;
 };
 
 export async function loginOrRefreshIfRequired(
@@ -952,6 +954,8 @@ export async function getOauthToken(options: {
 	granted: {
 		url: string;
 	};
+	callbackHost: string;
+	callbackPort: number;
 }): Promise<AccessContext> {
 	const urlToOpen = await getAuthURL(options.scopes, options.clientId);
 	let server: http.Server;
@@ -1028,7 +1032,12 @@ export async function getOauthToken(options: {
 			}
 		});
 
-		server.listen(8976, "localhost");
+		if (options.callbackHost !== "localhost" || options.callbackPort !== 8976) {
+			logger.log(
+				`Temporary login server listening on ${options.callbackHost}:${options.callbackPort}`
+			);
+		}
+		server.listen(options.callbackPort, options.callbackHost);
 	});
 	if (options.browser) {
 		logger.log(`Opening a link in your default browser: ${urlToOpen}`);
@@ -1041,7 +1050,11 @@ export async function getOauthToken(options: {
 }
 
 export async function login(
-	props: LoginProps = { browser: true }
+	props: LoginProps = {
+		browser: true,
+		callbackHost: "localhost",
+		callbackPort: 8976,
+	}
 ): Promise<boolean> {
 	const authFromEnv = getAuthFromEnv();
 	if (authFromEnv) {
@@ -1068,6 +1081,8 @@ export async function login(
 		granted: {
 			url: "https://welcome.developers.workers.dev/wrangler-oauth-consent-granted",
 		},
+		callbackHost: props.callbackHost,
+		callbackPort: props.callbackPort,
 	});
 
 	writeAuthConfigFile({