wrangler 0.0.0-e7a0cd5b → 0.0.0-e87ad068

package/src/user/{user.tsx → user.ts}

@@ -214,28 +214,61 @@ import url from "node:url";
 import { TextEncoder } from "node:util";
 import TOML from "@iarna/toml";
 import { HostURL } from "@webcontainer/env";
-import { render } from "ink";
-import Table from "ink-table";
-import React from "react";
 import { fetch } from "undici";
 import {
 	getConfigCache,
 	purgeConfigCaches,
 	saveToConfigCache,
 } from "../config-cache";
+import { NoDefaultValueProvided, select } from "../dialogs";
 import { getGlobalWranglerConfigPath } from "../global-wrangler-config-path";
 import { CI } from "../is-ci";
 import isInteractive from "../is-interactive";
 import { logger } from "../logger";
 import openInBrowser from "../open-in-browser";
 import { parseTOML, readFileSync } from "../parse";
-import { ChooseAccount, getAccountChoices } from "./choose-account";
-import { getAuthFromEnv } from "./env-vars";
+import { domainUsesAccess } from "./access";
+import {
+	getAuthDomainFromEnv,
+	getAuthUrlFromEnv,
+	getClientIdFromEnv,
+	getCloudflareAccessToken,
+	getCloudflareAPITokenFromEnv,
+	getCloudflareGlobalAuthEmailFromEnv,
+	getCloudflareGlobalAuthKeyFromEnv,
+	getRevokeUrlFromEnv,
+	getTokenUrlFromEnv,
+} from "./auth-variables";
+import { getAccountChoices } from "./choose-account";
 import { generateAuthUrl } from "./generate-auth-url";
 import { generateRandomState } from "./generate-random-state";
-import type { ApiCredentials } from "./env-vars";
+import type { ChooseAccountItem } from "./choose-account";
 import type { ParsedUrlQuery } from "node:querystring";
 
+export type ApiCredentials =
+	| {
+			apiToken: string;
+	  }
+	| {
+			authKey: string;
+			authEmail: string;
+	  };
+
+/**
+ * Try to read an API token or Global Auth from the environment.
+ */
+export function getAuthFromEnv(): ApiCredentials | undefined {
+	const globalApiKey = getCloudflareGlobalAuthKeyFromEnv();
+	const globalApiEmail = getCloudflareGlobalAuthEmailFromEnv();
+	const apiToken = getCloudflareAPITokenFromEnv();
+
+	if (globalApiKey && globalApiEmail) {
+		return { authKey: globalApiKey, authEmail: globalApiEmail };
+	} else if (apiToken) {
+		return { apiToken };
+	}
+}
+
 /**
  * An implementation of rfc6749#section-4.1 and rfc7636.
  */
@@ -264,7 +297,7 @@ interface AuthTokens {
 	accessToken?: AccessToken;
 	refreshToken?: RefreshToken;
 	scopes?: Scope[];
-	/** @deprecated - this field was only provided by the deprecated `wrangler1 config` command. */
+	/** @deprecated - this field was only provided by the deprecated v1 `wrangler config` command. */
 	apiToken?: string;
 }
 
@@ -282,7 +315,7 @@ export interface UserAuthConfig {
 	refresh_token?: string;
 	expiration_time?: string;
 	scopes?: string[];
-	/** @deprecated - this field was only provided by the deprecated `wrangler1 config` command. */
+	/** @deprecated - this field was only provided by the deprecated v1 `wrangler config` command. */
 	api_token?: string;
 }
 
@@ -313,6 +346,8 @@ const Scopes = {
 	"pages:write":
 		"See and change Cloudflare Pages projects, settings and deployments.",
 	"zone:read": "Grants read level access to account zone.",
+	"ssl_certs:write": "See and manage mTLS certificates for your account",
+	"constellation:write": "Manage Constellation projects/models",
 } as const;
 
 /**
@@ -330,11 +365,6 @@ export function validateScopeKeys(
 	return scopes.every((scope) => scope in Scopes);
 }
 
-const CLIENT_ID = "54d11594-84e4-41aa-b438-e81b8fa78ee7";
-const AUTH_URL = "https://dash.cloudflare.com/oauth2/auth";
-const TOKEN_URL = "https://dash.cloudflare.com/oauth2/token";
-const REVOKE_URL = "https://dash.cloudflare.com/oauth2/revoke";
-
 /**
  * To allow OAuth callbacks in environments such as WebContainer we need to
  * create a host URL which only resolves `localhost` to a WebContainer
@@ -374,7 +404,7 @@ function getAuthTokens(config?: UserAuthConfig): AuthTokens | undefined {
 			};
 		} else if (api_token) {
 			logger.warn(
-				"It looks like you have used Wrangler 1's `config` command to login with an API token.\n" +
+				"It looks like you have used Wrangler v1's `config` command to login with an API token.\n" +
 					"This is no longer supported in the current version of Wrangler.\n" +
 					"If you wish to authenticate via an API token then please set the `CLOUDFLARE_API_TOKEN` environment variable."
 			);
@@ -386,7 +416,7 @@ function getAuthTokens(config?: UserAuthConfig): AuthTokens | undefined {
 }
 
 /**
- * Run the initialisation of the auth state, in the case that something changed.
+ * Run the initialization of the auth state, in the case that something changed.
  *
  * This runs automatically whenever `writeAuthConfigFile` is run, so generally
  * you won't need to call it yourself.
@@ -625,8 +655,8 @@ export async function getAuthURL(scopes = ScopeKeys): Promise<string> {
 	});
 
 	return generateAuthUrl({
-		authUrl: AUTH_URL,
-		clientId: CLIENT_ID,
+		authUrl: getAuthUrlFromEnv(),
+		clientId: getClientIdFromEnv(),
 		callbackUrl: CALLBACK_URL,
 		scopes,
 		stateQueryParam,
@@ -653,19 +683,14 @@ async function exchangeRefreshTokenForAccessToken(): Promise<AccessContext> {
 		logger.warn("No refresh token is present.");
 	}
 
-	const body =
-		`grant_type=refresh_token&` +
-		`refresh_token=${LocalState.refreshToken?.value}&` +
-		`client_id=${CLIENT_ID}`;
-
-	const response = await fetch(TOKEN_URL, {
-		method: "POST",
-		body,
-		headers: {
-			"Content-Type": "application/x-www-form-urlencoded",
-		},
+	const params = new URLSearchParams({
+		grant_type: "refresh_token",
+		refresh_token: LocalState.refreshToken?.value ?? "",
+		client_id: getClientIdFromEnv(),
 	});
 
+	const response = await fetchAuthToken(params);
+
 	if (response.status >= 400) {
 		let tokenExchangeResErr = undefined;
 
@@ -743,20 +768,15 @@ async function exchangeAuthCodeForAccessToken(): Promise<AccessContext> {
 		logger.warn("No authorization grant code is being passed.");
 	}
 
-	const body =
-		`grant_type=authorization_code&` +
-		`code=${encodeURIComponent(authorizationCode || "")}&` +
-		`redirect_uri=${encodeURIComponent(CALLBACK_URL)}&` +
-		`client_id=${encodeURIComponent(CLIENT_ID)}&` +
-		`code_verifier=${codeVerifier}`;
-
-	const response = await fetch(TOKEN_URL, {
-		method: "POST",
-		body,
-		headers: {
-			"Content-Type": "application/x-www-form-urlencoded",
-		},
+	const params = new URLSearchParams({
+		grant_type: `authorization_code`,
+		code: authorizationCode ?? "",
+		redirect_uri: CALLBACK_URL,
+		client_id: getClientIdFromEnv(),
+		code_verifier: codeVerifier,
 	});
+
+	const response = await fetchAuthToken(params);
 	if (!response.ok) {
 		const { error } = (await response.json()) as { error: string };
 		// .catch((_) => ({ error: "invalid_json" }));
@@ -875,6 +895,7 @@ export function readAuthConfigFile(): UserAuthConfig {
 
 type LoginProps = {
 	scopes?: Scope[];
+	browser: boolean;
 };
 
 export async function loginOrRefreshIfRequired(): Promise<boolean> {
@@ -901,7 +922,9 @@ export async function loginOrRefreshIfRequired(): Promise<boolean> {
 	}
 }
 
-export async function login(props?: LoginProps): Promise<boolean> {
+export async function login(
+	props: LoginProps = { browser: true }
+): Promise<boolean> {
 	logger.log("Attempting to login via OAuth...");
 	const urlToOpen = await getAuthURL(props?.scopes);
 	let server: http.Server;
@@ -914,7 +937,7 @@ export async function login(props?: LoginProps): Promise<boolean> {
 			server.close();
 			clearTimeout(loginTimeoutHandle);
 			resolve(false);
-		}, 60000); // wait for 60 seconds for the user to authorize
+		}, 120000); // wait for 120 seconds for the user to authorize
 	});
 
 	const loginPromise = new Promise<boolean>((resolve, reject) => {
@@ -986,9 +1009,12 @@ export async function login(props?: LoginProps): Promise<boolean> {
 
 		server.listen(8976);
 	});
-
-	logger.log(`Opening a link in your default browser: ${urlToOpen}`);
-	await openInBrowser(urlToOpen);
+	if (props?.browser) {
+		logger.log(`Opening a link in your default browser: ${urlToOpen}`);
+		await openInBrowser(urlToOpen);
+	} else {
+		logger.log(`Visit this link to authenticate: ${urlToOpen}`);
+	}
 
 	return Promise.race([timerPromise, loginPromise]);
 }
@@ -1032,11 +1058,11 @@ export async function logout(): Promise<void> {
 		}
 
 		const body =
-			`client_id=${encodeURIComponent(CLIENT_ID)}&` +
+			`client_id=${encodeURIComponent(getClientIdFromEnv())}&` +
 			`token_type_hint=refresh_token&` +
 			`token=${encodeURIComponent(LocalState.refreshToken?.value || "")}`;
 
-		const response = await fetch(REVOKE_URL, {
+		const response = await fetch(getRevokeUrlFromEnv(), {
 			method: "POST",
 			body,
 			headers: {
@@ -1049,11 +1075,11 @@ export async function logout(): Promise<void> {
 		);
 	}
 	const body =
-		`client_id=${encodeURIComponent(CLIENT_ID)}&` +
+		`client_id=${encodeURIComponent(getClientIdFromEnv())}&` +
 		`token_type_hint=refresh_token&` +
 		`token=${encodeURIComponent(LocalState.refreshToken?.value || "")}`;
 
-	const response = await fetch(REVOKE_URL, {
+	const response = await fetch(getRevokeUrlFromEnv(), {
 		method: "POST",
 		body,
 		headers: {
@@ -1071,8 +1097,7 @@ export function listScopes(message = "💁 Available scopes:"): void {
 		Scope: scope,
 		Description: Scopes[scope],
 	}));
-	const { unmount } = render(<Table data={data} />);
-	unmount();
+	logger.table(data);
 	// TODO: maybe a good idea to show usage here
 }
 
@@ -1091,36 +1116,32 @@ export async function getAccountId(): Promise<string | undefined> {
 		return accounts[0].id;
 	}
 
-	if (isInteractive() && !CI.isCI()) {
-		const account = await new Promise<{ id: string; name: string }>(
-			(resolve, reject) => {
-				const { unmount } = render(
-					<ChooseAccount
-						accounts={accounts}
-						onSelect={async (selected) => {
-							saveAccountToCache(selected);
-							resolve(selected);
-							unmount();
-						}}
-						onError={(err) => {
-							reject(err);
-							unmount();
-						}}
-					/>
-				);
-			}
-		);
-		return account.id;
+	try {
+		const accountID = await select("Select an account", {
+			choices: accounts.map((account) => ({
+				title: account.name,
+				value: account.id,
+			})),
+		});
+		const account = accounts.find(
+			(a) => a.id === accountID
+		) as ChooseAccountItem;
+		saveAccountToCache({ id: account.id, name: account.name });
+		return accountID;
+	} catch (e) {
+		// Did we try to select an account in CI or a non-interactive terminal?
+		if (e instanceof NoDefaultValueProvided) {
+			throw new Error(
+				`More than one account available but unable to select one in non-interactive mode.
+Please set the appropriate \`account_id\` in your \`wrangler.toml\` file.
+Available accounts are (\`<name>\`: \`<account_id>\`):
+${accounts
+	.map((account) => `  \`${account.name}\`: \`${account.id}\``)
+	.join("\n")}`
+			);
+		}
+		throw e;
 	}
-
-	throw new Error(
-		"More than one account available but unable to select one in non-interactive mode.\n" +
-			`Please set the appropriate \`account_id\` in your \`wrangler.toml\` file.\n` +
-			`Available accounts are ("<name>" - "<id>"):\n` +
-			accounts
-				.map((account) => `  "${account.name}" - "${account.id}")`)
-				.join("\n")
-	);
 }
 
 /**
@@ -1133,7 +1154,7 @@ export async function requireAuth(config: {
 	if (!loggedIn) {
 		if (!isInteractive() || CI.isCI()) {
 			throw new Error(
-				"In a non-interactive environment, it's necessary to set a CLOUDFLARE_API_TOKEN environment variable for wrangler to work. Please go to https://developers.cloudflare.com/api/tokens/create/ for instructions on how to create an api token, and assign its value to CLOUDFLARE_API_TOKEN."
+				"In a non-interactive environment, it's necessary to set a CLOUDFLARE_API_TOKEN environment variable for wrangler to work. Please go to https://developers.cloudflare.com/fundamentals/api/get-started/create-token/ for instructions on how to create an api token, and assign its value to CLOUDFLARE_API_TOKEN."
 			);
 		} else {
 			// didn't login, let's just quit
@@ -1190,3 +1211,24 @@ export function getAccountFromCache():
 export function getScopes(): Scope[] | undefined {
 	return LocalState.scopes;
 }
+
+/**
+ * Make a request to the Cloudflare OAuth endpoint to get a token.
+ *
+ * Note that the `body` of the POST request is form-urlencoded so
+ * can be represented by a URLSearchParams object.
+ */
+async function fetchAuthToken(body: URLSearchParams) {
+	const headers: Record<string, string> = {
+		"Content-Type": "application/x-www-form-urlencoded",
+	};
+	if (await domainUsesAccess(getAuthDomainFromEnv())) {
+		// We are trying to access the staging API so we need an "access token".
+		headers["Cookie"] = `CF_Authorization=${await getCloudflareAccessToken()}`;
+	}
+	return await fetch(getTokenUrlFromEnv(), {
+		method: "POST",
+		body: body.toString(),
+		headers,
+	});
+}

package/src/utils/render.ts

@@ -0,0 +1,93 @@
+import { EventEmitter } from "events";
+import { render as inkRender } from "ink";
+import type { ReactElement } from "react";
+import type { WriteStream } from "tty";
+
+export function renderToString(tree: ReactElement): string {
+	const { output, cleanup } = render(tree);
+	cleanup();
+	return output;
+}
+
+// The code below is mostly copied from ink-render-string.
+// See https://github.com/zhanwang626/ink-render-string.git.
+
+// MIT License
+
+// Copyright (c) 2021 Zhan Wang
+
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+interface Instance {
+	output: string;
+	unmount: () => void;
+	cleanup: () => void;
+	stdout: OutputStream;
+	stderr: OutputStream;
+	frames: string[];
+}
+
+const LASTFRAME_UNDEFINED = "value of stdout.lastframe() is undefined";
+
+export class OutputStream extends EventEmitter {
+	readonly frames: string[] = [];
+	private _lastFrame?: string;
+
+	get columns(): number {
+		return this._originalStream.columns;
+	}
+	get rows(): number {
+		return this._originalStream.rows;
+	}
+
+	constructor(private _originalStream: WriteStream) {
+		super();
+	}
+
+	write = (frame: string) => {
+		this.frames.push(frame);
+		this._lastFrame = frame;
+	};
+
+	lastFrame = () => {
+		return this._lastFrame;
+	};
+}
+
+export const render = (tree: ReactElement): Instance => {
+	const stdout = new OutputStream(process.stdout);
+	const stderr = new OutputStream(process.stderr);
+
+	const instance = inkRender(tree, {
+		stdout: stdout as unknown as WriteStream,
+		stderr: stderr as unknown as WriteStream,
+		debug: true,
+		exitOnCtrlC: false,
+		patchConsole: false,
+	});
+
+	return {
+		output: stdout.lastFrame() ?? LASTFRAME_UNDEFINED,
+		stdout,
+		stderr,
+		cleanup: instance.cleanup,
+		unmount: instance.unmount,
+		frames: stdout.frames,
+	};
+};

package/src/{whoami.tsx → whoami.ts}

@@ -1,6 +1,4 @@
-import { Text, render } from "ink";
-import Table from "ink-table";
-import React, { Fragment } from "react";
+import chalk from "chalk";
 import { fetchListResult, fetchResult } from "./cfetch";
 import { logger } from "./logger";
 import { getAPIToken, getAuthFromEnv, getScopes } from "./user";
@@ -8,82 +6,50 @@ import { getAPIToken, getAuthFromEnv, getScopes } from "./user";
 export async function whoami() {
 	logger.log("Getting User settings...");
 	const user = await getUserInfo();
-	const { unmount } = render(<WhoAmI user={user}></WhoAmI>);
-	unmount();
-}
-
-export function WhoAmI({ user }: { user: UserInfo | undefined }) {
-	return user ? (
-		<>
-			<Email tokenType={user.authType} email={user.email}></Email>
-			<Accounts accounts={user.accounts}></Accounts>
-			<Permissions
-				tokenType={user.authType}
-				tokenPermissions={user.tokenPermissions}
-			/>
-		</>
-	) : (
-		<Text>You are not authenticated. Please run `wrangler login`.</Text>
-	);
-}
+	if (user === undefined) {
+		return void logger.log(
+			"You are not authenticated. Please run `wrangler login`."
+		);
+	}
 
-function Email(props: { tokenType: string; email: string | undefined }) {
-	return props.email === undefined ? (
-		<Text>
-			👋 You are logged in with an {props.tokenType}. Unable to retrieve email
-			for this user. Are you missing the `User-&gt;User Details-&gt;Read`
-			permission?
-		</Text>
-	) : (
-		<Text>
-			👋 You are logged in with an {props.tokenType}, associated with the email
-			&apos;{props.email}&apos;!
-		</Text>
+	if (user.email !== undefined) {
+		logger.log(
+			`👋 You are logged in with an ${
+				user.authType
+			}, associated with the email ${chalk.blue(user.email)}!`
+		);
+	} else {
+		logger.log(
+			`👋 You are logged in with an ${user.authType}. Unable to retrieve email for this user. Are you missing the \`User->User Details->Read\` permission?`
+		);
+	}
+	logger.table(
+		user.accounts.map((account) => ({
+			"Account Name": account.name,
+			"Account ID": account.id,
+		}))
 	);
-}
-
-function Accounts(props: { accounts: AccountInfo[] }) {
-	const accounts = props.accounts.map((account) => ({
-		"Account Name": account.name,
-		"Account ID": account.id,
-	}));
-	return <Table data={accounts}></Table>;
-}
-
-function Permissions(props: {
-	tokenPermissions: string[] | undefined;
-	tokenType: string;
-}) {
 	const permissions =
-		props.tokenPermissions?.map((scope) => scope.split(":")) || [];
-	return props.tokenType === "OAuth Token" ? (
-		props.tokenPermissions ? (
-			<>
-				<Text>
-					🔓 Token Permissions: If scopes are missing, you may need to logout
-					and re-login.
-				</Text>
-				<Text>Scope (Access)</Text>
-				{permissions.map(([scope, access], index) => (
-					<Fragment key={`${scope}${index}`}>
-						<Text>
-							- {scope} {access && `(${access})`}
-						</Text>
-					</Fragment>
-				))}
-			</>
-		) : null
-	) : (
-		<Text>
-			🔓 To see token permissions visit
-			https://dash.cloudflare.com/profile/api-tokens
-		</Text>
+		user.tokenPermissions?.map((scope) => scope.split(":")) ?? [];
+
+	if (user.authType !== "OAuth Token") {
+		return void logger.log(
+			`🔓 To see token permissions visit https://dash.cloudflare.com/profile/api-tokens`
+		);
+	}
+	logger.log(
+		`🔓 Token Permissions: If scopes are missing, you may need to logout and re-login.`
 	);
+	logger.log(`Scope (Access)`);
+	for (const [scope, access] of permissions) {
+		logger.log(`- ${scope} ${access ? `(${access})` : ``}`);
+	}
 }
 
+type AuthType = "Global API Key" | "API Token" | "OAuth Token";
 export interface UserInfo {
 	apiToken: string;
-	authType: string;
+	authType: AuthType;
 	email: string | undefined;
 	accounts: AccountInfo[];
 	tokenPermissions: string[] | undefined;