wrangler login put custom callback host and port into the auth URL (#9095)

Fixes #9065

Author: petebacondarwin

.changeset/tough-bats-live.md

@@ -0,0 +1,5 @@
+---
+"wrangler": patch
+---
+
+wrangler login put custom callback host and port into the auth URL

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

@@ -107,7 +107,46 @@ describe("User", () => {
 			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
+				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%2F0.0.0.0%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("should login a user when `wrangler login` is run with custom callbackPort 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-port=8787");
+
+			expect(counter).toBe(1);
+			expect(std.out).toMatchInlineSnapshot(`
+				"Attempting to login via OAuth...
+				Temporary login server listening on localhost:8787
+				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%3A8787%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>({

packages/wrangler/src/user/user.ts

@@ -386,7 +386,9 @@ export function validateScopeKeys(
 	return scopes.every((scope) => scope in DefaultScopes);
 }
 
-const CALLBACK_URL = "http://localhost:8976/oauth/callback";
+function getCallbackUrl(host = "localhost", port = 8976) {
+	return `http://${host}:${port}/oauth/callback`;
+}
 
 let LocalState: State = {
 	...getAuthTokens(),
@@ -663,7 +665,12 @@ function isReturningFromAuthServer(query: ParsedUrlQuery): boolean {
 	return true;
 }
 
-async function getAuthURL(scopes: string[], clientId: string): Promise<string> {
+async function getAuthURL(
+	scopes: string[],
+	clientId: string,
+	callbackHost: string,
+	callbackPort: number
+): Promise<string> {
 	const { codeChallenge, codeVerifier } = await generatePKCECodes();
 	const stateQueryParam = generateRandomState(RECOMMENDED_STATE_LENGTH);
 
@@ -676,7 +683,7 @@ async function getAuthURL(scopes: string[], clientId: string): Promise<string> {
 	return generateAuthUrl({
 		authUrl: getAuthUrlFromEnv(),
 		clientId,
-		callbackUrl: CALLBACK_URL,
+		callbackUrl: getCallbackUrl(callbackHost, callbackPort),
 		scopes,
 		stateQueryParam,
 		codeChallenge,
@@ -790,7 +797,7 @@ async function exchangeAuthCodeForAccessToken(): Promise<AccessContext> {
 	const params = new URLSearchParams({
 		grant_type: `authorization_code`,
 		code: authorizationCode ?? "",
-		redirect_uri: CALLBACK_URL,
+		redirect_uri: getCallbackUrl(),
 		client_id: getClientIdFromEnv(),
 		code_verifier: codeVerifier,
 	});
@@ -957,7 +964,12 @@ export async function getOauthToken(options: {
 	callbackHost: string;
 	callbackPort: number;
 }): Promise<AccessContext> {
-	const urlToOpen = await getAuthURL(options.scopes, options.clientId);
+	const urlToOpen = await getAuthURL(
+		options.scopes,
+		options.clientId,
+		options.callbackHost,
+		options.callbackPort
+	);
 	let server: http.Server;
 	let loginTimeoutHandle: ReturnType<typeof setTimeout>;
 	const timerPromise = new Promise<AccessContext>((_, reject) => {