@vercel/microfrontends 1.1.1-canary.5 → 1.1.1-canary.7

package/dist/bin/cli.cjs

@@ -25,11 +25,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 
 // src/bin/index.ts
 var import_commander = require("commander");
+var import_env = require("@next/env");
 
 // package.json
 var package_default = {
   name: "@vercel/microfrontends",
-  version: "1.1.1-canary.5",
+  version: "1.1.1-canary.7",
   private: false,
   description: "Defines configuration and utilities for microfrontends development",
   keywords: [
@@ -66,10 +67,6 @@ var package_default = {
       import: "./dist/overrides.js",
       require: "./dist/overrides.cjs"
     },
-    "./routing": {
-      import: "./dist/routing.js",
-      require: "./dist/routing.cjs"
-    },
     "./microfrontends/server": {
       import: "./dist/microfrontends/server.js",
       require: "./dist/microfrontends/server.cjs"
@@ -124,9 +121,6 @@ var package_default = {
       overrides: [
         "./dist/overrides.d.ts"
       ],
-      routing: [
-        "./dist/routing.d.ts"
-      ],
       "microfrontends/server": [
         "./dist/microfrontends/server.d.ts"
       ],
@@ -176,6 +170,7 @@ var package_default = {
     typecheck: "tsc --noEmit"
   },
   dependencies: {
+    "@next/env": "15.1.6",
     ajv: "^8.17.1",
     commander: "^12.1.0",
     cookie: "0.4.0",
@@ -481,8 +476,7 @@ var validateConfigPaths = (applicationConfigsById) => {
     if (isDefaultApp(app)) {
       continue;
     }
-    const childApp = app;
-    for (const pathMatch of childApp.routing) {
+    for (const pathMatch of app.routing) {
       for (const path7 of pathMatch.paths) {
         const maybeError = validatePathExpression(path7);
         if (maybeError) {
@@ -562,7 +556,7 @@ function validatePathExpression(path7) {
         }
         if (token.pattern !== PATH_DEFAULT_PATTERN && // Allows (a|b|c) and ((?!a|b|c).*) regex
         // Only limited regex is supported for now, due to performance considerations
-        !/^(?<allowed>[\w]+(?:\|[^|()]+)+)$|^\(\?!(?<disallowed>[\w]+(?:\|[^|()]+)+)\)\.\*$/.test(
+        !/^(?<allowed>[\w]+(?:\|[^:|()]+)+)$|^\(\?!(?<disallowed>[\w]+(?:\|[^:|()]+)*)\)\.\*$/.test(
           token.pattern
         )) {
           return `Path ${path7} cannot use unsupported regular expression wildcard`;
@@ -630,64 +624,15 @@ var validateConfigDefaultApplication = (applicationConfigsById) => {
 };
 var validateDeprecatedFields = (config) => {
   const errors = [];
-  if (config.options?.vercel) {
-    errors.push(
-      `Configuration cannot contain deprecated field 'options.vercel'. Use 'options.disableOverrides' instead.`
-    );
-  }
-  if (config.options?.localProxy) {
-    errors.push(
-      `Configuration cannot contain deprecated field 'options.localProxy'. Use 'options.localProxyPort' instead.`
-    );
-  }
   for (const [applicationId, application] of Object.entries(
     config.applications
   )) {
-    if (application.vercel) {
-      errors.push(
-        `Application '${applicationId}' cannot contain deprecated field 'vercel'. Use 'projectId' instead.`
-      );
-    }
-    if (application.production) {
-      errors.push(
-        `Application '${applicationId}' cannot contain deprecated field 'production'. Use 'development.fallback' instead.`
-      );
-    }
     if (application.development?.localPort) {
       errors.push(
         `Application '${applicationId}' cannot contain deprecated field 'development.localPort'. Use 'developement.local' instead.`
       );
     }
-    if (application.development?.fallback && typeof application.development.fallback !== "string") {
-      const fallback = application.development.fallback;
-      let asString = fallback.host;
-      if (fallback.protocol) {
-        asString = `${fallback.protocol}://${asString}`;
-      }
-      if (fallback.port) {
-        asString = `${asString}:${fallback.port}`;
-      }
-      errors.push(
-        `Application '${applicationId}' requires a string (not an object) for the 'development.fallback' field. Please set 'development.fallback' to '${asString}'.`
-      );
-    }
-    if (application.development?.local && typeof application.development.local !== "string" && typeof application.development.local !== "number") {
-      const local = application.development.local;
-      let asString;
-      if (local.port && !local.protocol && !local.host) {
-        asString = String(local.port);
-      } else {
-        asString = local.host ?? "localhost";
-        if (local.protocol) {
-          asString = `${local.protocol}://${asString}`;
-        }
-        if (local.port) {
-          asString = `${asString}:${local.port}`;
-        }
-      }
-      errors.push(
-        `Application '${applicationId}' requires a string or number (not an object) for the 'development.local' field. Please set 'development.local' to '${asString}'.`
-      );
+    if (application.projectId) {
     }
   }
   if (errors.length) {
@@ -842,6 +787,13 @@ var LocalHost = class extends Host {
   }
 };
 
+// src/config/microfrontends-config/isomorphic/utils/generate-automation-bypass-env-var-name.ts
+function generateAutomationBypassEnvVarName({
+  name
+}) {
+  return `AUTOMATION_BYPASS_${name.toUpperCase().replace(/[^a-zA-Z0-9]/g, "_")}`;
+}
+
 // src/config/microfrontends-config/isomorphic/application.ts
 var Application = class {
   constructor(name, {
@@ -860,10 +812,8 @@ var Application = class {
     };
     if (app.development?.fallback) {
       this.fallback = new Host(app.development.fallback);
-    } else if (app.production) {
-      this.fallback = new Host(app.production);
     }
-    this.projectId = app.projectId ?? app.vercel?.projectId;
+    this.projectId = app.projectId;
     this.packageName = app.packageName;
     this.overrides = overrides?.environment ? {
       environment: new Host(overrides.environment)
@@ -877,6 +827,9 @@ var Application = class {
   getAssetPrefix() {
     return generateAssetPrefixFromName({ name: this.name });
   }
+  getAutomationBypassEnvVarName() {
+    return generateAutomationBypassEnvVarName({ name: this.name });
+  }
   serialize() {
     return this.serialized;
   }
@@ -892,16 +845,7 @@ var DefaultApplication = class extends Application {
       isDefault: true
     });
     this.default = true;
-    const fallbackHost = app.development?.fallback ?? app.production;
-    if (fallbackHost === void 0) {
-      throw new Error(
-        "`app.production` or `app.development.fallback` must be set in the default application in microfrontends.json."
-      );
-    }
-    this.fallback = new Host(fallbackHost);
-    if (app.production) {
-      this.production = new Host(app.production);
-    }
+    this.fallback = new Host(app.development.fallback);
   }
   getAssetPrefix() {
     return "";
@@ -938,7 +882,7 @@ var MicrofrontendConfigIsomorphic = class {
   }) {
     this.childApplications = {};
     MicrofrontendConfigIsomorphic.validate(config, opts);
-    const disableOverrides = config.options?.disableOverrides ?? config.options?.vercel?.disableOverrides ?? false;
+    const disableOverrides = config.options?.disableOverrides ?? false;
     this.overrides = overrides && !disableOverrides ? overrides : void 0;
     let defaultApplication;
     for (const [appId, appConfig] of Object.entries(config.applications)) {
@@ -991,7 +935,7 @@ var MicrofrontendConfigIsomorphic = class {
     });
   }
   isOverridesDisabled() {
-    return this.options?.vercel?.disableOverrides ?? false;
+    return this.options?.disableOverrides ?? false;
   }
   getConfig() {
     return this.config;
@@ -1029,6 +973,14 @@ var MicrofrontendConfigIsomorphic = class {
     }
     return app;
   }
+  hasApplication(name) {
+    try {
+      this.getApplication(name);
+      return true;
+    } catch {
+      return false;
+    }
+  }
   getApplicationByProjectId(projectId) {
     if (this.defaultApplication.projectId === projectId) {
       return this.defaultApplication;
@@ -1047,7 +999,7 @@ var MicrofrontendConfigIsomorphic = class {
    * Returns the configured port for the local proxy
    */
   getLocalProxyPort() {
-    return this.config.options?.localProxyPort ?? this.config.options?.localProxy?.port ?? DEFAULT_LOCAL_PROXY_PORT;
+    return this.config.options?.localProxyPort ?? DEFAULT_LOCAL_PROXY_PORT;
   }
   /**
    * Serializes the class back to the Schema type.
@@ -1325,20 +1277,10 @@ var schema_default = {
     Options: {
       type: "object",
       properties: {
-        vercel: {
-          $ref: "#/definitions/VercelOptions",
-          description: "Microfrontends wide options for Vercel.",
-          deprecated: "This is being replaced by the `disableOverrides` field below."
-        },
         disableOverrides: {
           type: "boolean",
           description: "If you want to disable the overrides for the site. For example, if you are managing rewrites between applications externally, you may wish to disable the overrides on the toolbar as they will have no effect."
         },
-        localProxy: {
-          $ref: "#/definitions/LocalProxyOptions",
-          description: "Options for local proxy.",
-          deprecated: "This is being replaced by the `localProxyPort` field below."
-        },
         localProxyPort: {
           type: "number",
           description: "The port number used by the local proxy server.\n\nThe default is `3024`."
@@ -1346,26 +1288,6 @@ var schema_default = {
       },
       additionalProperties: false
     },
-    VercelOptions: {
-      type: "object",
-      properties: {
-        disableOverrides: {
-          type: "boolean",
-          description: "If you want to disable the overrides for the site. For example, if you are managing rewrites between applications externally, you may wish to disable the overrides on the toolbar as they will have no effect."
-        }
-      },
-      additionalProperties: false
-    },
-    LocalProxyOptions: {
-      type: "object",
-      properties: {
-        port: {
-          type: "number",
-          description: "The port number used by the local proxy server.\n\nThe default is `3024`."
-        }
-      },
-      additionalProperties: false
-    },
     ApplicationRouting: {
       type: "object",
       additionalProperties: {
@@ -1388,141 +1310,62 @@ var schema_default = {
     DefaultApplication: {
       type: "object",
       properties: {
-        vercel: {
-          $ref: "#/definitions/Vercel",
-          deprecated: "This is being replaced by the `projectId` field below."
-        },
         projectId: {
           type: "string",
           description: "Vercel project ID, only required if the application name / id is different to the Vercel project name.",
-          deprecated: "Instead, the application id should match the Vercel project name."
+          deprecated: "Instead, the application id should match the Vercel project name. `packageName` can optionally\nbe set to the name of the package.json (if it is different from the project name)."
         },
         packageName: {
           type: "string",
           description: "The name used to run the application, e.g. the `name` field in the `package.json`.\n\nThis is used by the local proxy to map the application config to the locally running app.\n\nThis is only necessary when the application name does not match the `name` used in `package.json`."
         },
-        production: {
-          $ref: "#/definitions/HostConfig",
-          deprecated: "This is a duplicate of the `development.fallback` field and this will be removed soon."
-        },
         development: {
-          $ref: "#/definitions/Development"
-        }
-      },
-      additionalProperties: false
-    },
-    Vercel: {
-      type: "object",
-      properties: {
-        projectId: {
-          type: "string",
-          description: "Vercel project ID"
-        }
-      },
-      required: ["projectId"],
-      additionalProperties: false
-    },
-    HostConfig: {
-      type: "object",
-      properties: {
-        protocol: {
-          type: "string",
-          enum: ["http", "https"],
-          description: "The protocol to be used for the connection.\n- `http`: Hypertext Transfer Protocol (HTTP).\n- `https`: Secure Hypertext Transfer Protocol (HTTPS).\n\n*"
-        },
-        host: {
-          type: "string",
-          description: "The hostname or IP address of the server. This can be a domain name (e.g., `example.com`) or an IP address (e.g., `192.168.1.1`)."
-        },
-        port: {
-          type: "number",
-          description: "The port number to be used for the connection. Common values include `80` for HTTP and `443` for HTTPS."
+          $ref: "#/definitions/DefaultDevelopment",
+          description: "Development configuration for the default application."
         }
       },
-      required: ["host"],
+      required: ["development"],
       additionalProperties: false
     },
-    Development: {
+    DefaultDevelopment: {
       type: "object",
       properties: {
         local: {
-          anyOf: [
-            {
-              type: "number"
-            },
-            {
-              type: "string"
-            },
-            {
-              $ref: "#/definitions/LocalHostConfig"
-            }
-          ],
-          description: "A local port number or host string that this application runs on when it is running locally. If passing a string, include the protocol (optional), host (required) and port (optional). For example: `https://this.ismyhost:8080`. If omitted, the protocol defaults to HTTP. If omitted, the port defaults to a unique, but stable (based on the application name) number.\n\nExamples of valid values:\n- 8080\n- my.localhost.me\n- my.localhost.me:8080\n- https://my.localhost.me\n- https://my.localhost.me:8080\n\nPassing a LocalHostConfig is deprecated and will go away soon, please pass a number or string."
+          type: ["number", "string"],
+          description: "A local port number or host string that this application runs on when it is running locally. If passing a string, include the protocol (optional), host (required) and port (optional). For example: `https://this.ismyhost:8080`. If omitted, the protocol defaults to HTTP. If omitted, the port defaults to a unique, but stable (based on the application name) number.\n\nExamples of valid values:\n- 8080\n- my.localhost.me\n- my.localhost.me:8080\n- https://my.localhost.me\n- https://my.localhost.me:8080"
         },
         localPort: {
           type: "number",
           description: "The local port number that this application runs on when it is running locally. Common values include `80` for HTTP and `443` for HTTPS. If omitted, the port defaults to a unique, but stable (based on the application name) number.",
           deprecated: "Please set the port with the 'local' field instead."
         },
-        fallback: {
-          anyOf: [
-            {
-              $ref: "#/definitions/HostConfig"
-            },
-            {
-              type: "string"
-            }
-          ],
-          description: "Fallback for local development, could point to any environment. If this is not provided, or the application is not running - requests to the application in local development will error.\n\nIf passing a string, include the protocol (optional), host (required) and port (optional). For example: `https://this.ismyhost:8080`. If omitted, the protocol defaults to HTTPS. If omitted, the port defaults to `80` for HTTP and `443` for HTTPS.\n\nPassing a HostConfig is deprecated and will go away soon, please pass a string."
-        },
         task: {
           type: "string",
           description: "Optional task to run when starting the development server. Should reference a script in the package.json of the application."
-        }
-      },
-      additionalProperties: false
-    },
-    LocalHostConfig: {
-      type: "object",
-      additionalProperties: false,
-      properties: {
-        host: {
-          type: "string",
-          description: "The hostname or IP address of the server. This can be a domain name (e.g., `example.com`) or an IP address (e.g., `192.168.1.1`)."
         },
-        protocol: {
+        fallback: {
           type: "string",
-          enum: ["http", "https"],
-          description: "The protocol to be used for the connection.\n- `http`: Hypertext Transfer Protocol (HTTP).\n- `https`: Secure Hypertext Transfer Protocol (HTTPS).\n\n*"
-        },
-        port: {
-          type: "number",
-          description: "The port number to be used for the connection. Common values include `80` for HTTP and `443` for HTTPS."
+          description: "Fallback for local development, could point to any environment. This is required for the default app. This value is used as the fallback for child apps as well if they do not have a fallback.\n\nIf passing a string, include the protocol (optional), host (required) and port (optional). For example: `https://this.ismyhost:8080`. If omitted, the protocol defaults to HTTPS. If omitted, the port defaults to `80` for HTTP and `443` for HTTPS."
         }
-      }
+      },
+      required: ["fallback"],
+      additionalProperties: false
     },
     ChildApplication: {
       type: "object",
       properties: {
-        vercel: {
-          $ref: "#/definitions/Vercel",
-          deprecated: "This is being replaced by the `projectId` field below."
-        },
         projectId: {
           type: "string",
           description: "Vercel project ID, only required if the application name / id is different to the Vercel project name.",
-          deprecated: "Instead, the application id should match the Vercel project name."
+          deprecated: "Instead, the application id should match the Vercel project name. `packageName` can optionally\nbe set to the name of the package.json (if it is different from the project name)."
         },
         packageName: {
           type: "string",
           description: "The name used to run the application, e.g. the `name` field in the `package.json`.\n\nThis is used by the local proxy to map the application config to the locally running app.\n\nThis is only necessary when the application name does not match the `name` used in `package.json`."
         },
-        production: {
-          $ref: "#/definitions/HostConfig",
-          deprecated: "This is a duplicate of the `development.fallback` field and this will be removed soon."
-        },
         development: {
-          $ref: "#/definitions/Development"
+          $ref: "#/definitions/ChildDevelopment",
+          description: "Development configuration for the child application."
         },
         routing: {
           $ref: "#/definitions/Routing",
@@ -1532,6 +1375,29 @@ var schema_default = {
       required: ["routing"],
       additionalProperties: false
     },
+    ChildDevelopment: {
+      type: "object",
+      properties: {
+        local: {
+          type: ["number", "string"],
+          description: "A local port number or host string that this application runs on when it is running locally. If passing a string, include the protocol (optional), host (required) and port (optional). For example: `https://this.ismyhost:8080`. If omitted, the protocol defaults to HTTP. If omitted, the port defaults to a unique, but stable (based on the application name) number.\n\nExamples of valid values:\n- 8080\n- my.localhost.me\n- my.localhost.me:8080\n- https://my.localhost.me\n- https://my.localhost.me:8080"
+        },
+        localPort: {
+          type: "number",
+          description: "The local port number that this application runs on when it is running locally. Common values include `80` for HTTP and `443` for HTTPS. If omitted, the port defaults to a unique, but stable (based on the application name) number.",
+          deprecated: "Please set the port with the 'local' field instead."
+        },
+        task: {
+          type: "string",
+          description: "Optional task to run when starting the development server. Should reference a script in the package.json of the application."
+        },
+        fallback: {
+          type: "string",
+          description: "Fallback for local development, could point to any environment. This is optional for child apps. If not provided, the fallback of the default app will be used.\n\nIf passing a string, include the protocol (optional), host (required) and port (optional). For example: `https://this.ismyhost:8080`. If omitted, the protocol defaults to HTTPS. If omitted, the port defaults to `80` for HTTP and `443` for HTTPS."
+        }
+      },
+      additionalProperties: false
+    },
     Routing: {
       type: "array",
       items: {
@@ -1617,7 +1483,7 @@ function formatAjvErrors(errors) {
 }
 function validateSchema(configString) {
   const parsedConfig = (0, import_jsonc_parser3.parse)(configString);
-  const ajv = new import_ajv.Ajv();
+  const ajv = new import_ajv.Ajv({ allowUnionTypes: true });
   const validate = ajv.compile(SCHEMA);
   const isValid = validate(parsedConfig);
   if (!isValid) {
@@ -1810,6 +1676,311 @@ var MicrofrontendsServer = class {
   }
 };
 
+// src/bin/local-auth.ts
+var localAuthHtml = ({
+  app,
+  hostname,
+  defaultApp,
+  automationBypassEnvVarName,
+  automationBypass
+}) => {
+  const content = automationBypass ? `<b><code>${automationBypassEnvVarName}</code></b> is set with the value <b><code>${automationBypass}</code></b>, please verify this value equals the <a href="https://vercel.com/docs/deployment-protection/methods-to-bypass-deployment-protection/protection-bypass-automation">Protection Bypass for Automation</a> for the Vercel project hosting the deployment.` : `To access, set a local environment variable <b><code>${automationBypassEnvVarName}</code></b> with the value of the <a href="https://vercel.com/docs/deployment-protection/methods-to-bypass-deployment-protection/protection-bypass-automation">Protection Bypass for Automation</a> for the Vercel project hosting the deployment.`;
+  return `<!DOCTYPE html>
+	<html lang="en">
+	  <head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="theme-color" content="#000">
+		<title>Authentication Required</title>
+		<style>
+		  html {
+			font-size: 62.5%;
+			box-sizing: border-box;
+			height: -webkit-fill-available
+		  }
+	
+		  *,
+		  ::after,
+		  ::before {
+			box-sizing: inherit
+		  }
+	
+		  body {
+			font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+			font-size: 1.6rem;
+			line-height: 1.65;
+			word-break: break-word;
+			font-kerning: auto;
+			font-variant: normal;
+			-webkit-font-smoothing: antialiased;
+			-moz-osx-font-smoothing: grayscale;
+			text-rendering: optimizeLegibility;
+			hyphens: none;
+			height: 100vh;
+			height: -webkit-fill-available;
+			max-height: 100vh;
+			max-height: -webkit-fill-available;
+			margin: 0
+		  }
+	
+		  ::selection {
+			background: #79FFE1;
+		  }
+		  ::-moz-selection {
+			background: #79FFE1;
+		  }
+	
+		  a {
+			cursor: pointer;
+			color: #0070f3;
+			text-decoration: none;
+			transition: all .2s ease;
+			border-bottom: 1px solid transparent
+		  }
+	
+		  a:hover {
+			border-bottom: 1px solid #0070f3
+		  }
+	
+		  ul {
+			padding: 0;
+			margin-left: 1.5em;
+			list-style-type: none
+		  }
+	
+		  li {
+			margin-bottom: 10px
+		  }
+	
+		  ul li:before {
+			content: '\\02013'
+		  }
+	
+		  li:before {
+			display: inline-block;
+			color: #ccc;
+			position: absolute;
+			margin-left: -18px;
+			transition: color .2s ease
+		  }
+	
+		  code {
+			font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
+			font-size: .92em;
+		  }
+	
+		  code:after,
+		  code:before {
+			content: '\`'
+		  }
+	
+		  .container {
+			display: flex;
+			justify-content: center;
+			flex-direction: column;
+			min-height: 100%
+		  }
+	
+		  main {
+			max-width: 80rem;
+			padding: 4rem 6rem;
+			margin: auto
+		  }
+	
+		  ul {
+			margin-bottom: 32px
+		  }
+	
+		  .error-title {
+			font-size: 2rem;
+			padding-left: 22px;
+			line-height: 1.5;
+			margin-bottom: 24px;
+		  }
+	
+		  .error-title-guilty {
+			border-left: 2px solid #ED367F;
+		  }
+	
+		  .error-title-innocent {
+			border-left: 2px solid #59B89C;
+		  }
+	
+		  main p {
+			color: #333
+		  }
+	
+		  .devinfo-container {
+			border: 1px solid #ddd;
+			border-radius: 4px;
+			padding: 2rem;
+			display: flex;
+			flex-direction: column;
+			margin-bottom: 32px
+		  }
+	
+		  .error-code {
+			margin: 0;
+			font-size: 1.6rem;
+			color: #000;
+			margin-bottom: 1.6rem
+		  }
+	
+		  .devinfo-line {
+			color: #333
+		  }
+	
+		  .devinfo-line code,
+		  code,
+		  li {
+			color: #000
+		  }
+	
+		  .devinfo-line:not(:last-child) {
+			margin-bottom: 8px
+		  }
+	
+		  .docs-link,
+		  .contact-link {
+			font-weight: 500
+		  }
+	
+		  header,
+		  footer,
+		  footer a {
+			display: flex;
+			justify-content: center;
+			align-items: center
+		  }
+	
+		  header,
+		  footer {
+			min-height: 100px;
+			height: 100px;
+		  }
+	
+		  header {
+			border-bottom: 1px solid #eaeaea;
+		  }
+	
+		  header h1 {
+			font-size: 1.8rem;
+			margin: 0;
+			font-weight: 500;
+		  }
+	
+		  header p {
+			font-size: 1.3rem;
+			margin: 0;
+			font-weight: 500;
+		  }
+	
+		  .header-item {
+			display: flex;
+			padding: 0 2rem;
+			margin: 2rem 0;
+			text-decoration: line-through;
+			color: #999;
+		  }
+	
+		  .header-item.active {
+			color: #ff0080;
+			text-decoration: none;
+		  }
+	
+		  .header-item.first {
+			border-right: 1px solid #eaeaea;
+		  }
+	
+		  .header-item-content {
+			display: flex;
+			flex-direction: column;
+		  }
+	
+		  .header-item-icon {
+			margin-right: 1rem;
+			margin-top: 0.6rem;
+		  }
+	
+		  footer {
+			border-top: 1px solid #eaeaea;
+		  }
+	
+		  footer a {
+			color: #000
+		  }
+	
+		  footer a:hover {
+			border-bottom-color: transparent
+		  }
+	
+		  footer svg {
+			margin-left: .8rem
+		  }
+	
+		  .note {
+			padding: 8pt 16pt;
+			border-radius: 5px;
+			border: 1px solid #0070f3;
+			font-size: 14px;
+			line-height: 1.8;
+			color: #0070f3;
+		  }
+	
+		  @media (max-width:500px) {
+			.devinfo-container .devinfo-line code {
+			  margin-top: .4rem
+			}
+			.devinfo-container .devinfo-line:not(:last-child) {
+			  margin-bottom: 1.6rem
+			}
+			.devinfo-container {
+			  margin-bottom: 0;
+			}
+			header {
+			  flex-direction: column;
+			  height: auto;
+			  min-height: auto;
+			  align-items: flex-start;
+			}
+			.header-item.first {
+			  border-right: none;
+			  margin-bottom: 0;
+			}
+			main {
+			  padding: 1rem 2rem;
+			}
+			body {
+			  font-size: 1.4rem;
+			  line-height: 1.55;
+			}
+			footer {
+			  display: none;
+			}
+			.note {
+			  margin-top: 16px;
+			}
+		  }
+		</style>
+	  </head>
+	  <body>
+		<div class="container">
+		  <main>
+			<p class="devinfo-container">
+			  <span><b><code>${app}</code></b> is falling back to a protected deployment <a target="_blank" href="https://${hostname}">${hostname}</a>.</span>
+        <br>
+        <span>${content}</span>
+        <br>
+        <span>The environment variable should be set in the default app <b><code>${defaultApp}</code></b>, where the local proxy is running.</span>
+			</p>
+		
+			<a href="https://vercel.com/docs/microfrontends/local-development#falling-back-to-protected-deployments"><div class="note">Click here to learn more about setting up the environment variable.</div></a>
+		  </main>	
+		</div>
+	  </body>
+	</html>`;
+};
+
 // src/bin/local-proxy.ts
 var MFE_LOCAL_PROXY_HEADER = "x-vercel-mfe-local-proxy-origin";
 var MFE_FLAG_VALUE = "vercel-mfe-flag-value";
@@ -2133,15 +2304,35 @@ var LocalProxy = class {
     const { req: strippedReq, mfeFlagValue } = removeMfeFlagQuery(req);
     if (target.protocol === "https") {
       const { hostname, port, path: path7 } = target;
+      const app = this.router.config.getApplication(target.application);
+      const automationBypass = process.env[app.getAutomationBypassEnvVarName()];
       const requestOptions = {
         hostname,
         path: path7,
         method: req.method,
-        headers: { ...req.headers, host: hostname },
+        headers: {
+          ...req.headers,
+          host: hostname,
+          ...automationBypass ? { "x-vercel-protection-bypass": automationBypass } : {}
+        },
         port
       };
       const localhost = `http://localhost:${this.proxyPort}`;
       const proxyReq = https.request(requestOptions, (realRes) => {
+        if (realRes.statusCode === 401 && realRes.headers["set-cookie"]?.find(
+          (cookie) => cookie.startsWith("_vercel_sso_nonce=")
+        )) {
+          const defaultApp = this.router.config.getDefaultApplication();
+          return res.end(
+            localAuthHtml({
+              app: target.application,
+              hostname,
+              defaultApp: defaultApp.packageName || defaultApp.name,
+              automationBypassEnvVarName: app.getAutomationBypassEnvVarName(),
+              automationBypass
+            })
+          );
+        }
         if (realRes.statusCode === 307) {
           const locationHeader = realRes.headers.location;
           if (locationHeader) {
@@ -2291,17 +2482,27 @@ function header({ name, version, port }) {
 
 // src/bin/index.ts
 function main() {
+  (0, import_env.loadEnvConfig)(process.cwd());
   const program = new import_commander.Command();
   program.name(package_default.name).description("Tools for working with micro-frontend applications").version(package_default.version, "-v, --version", "output the current version");
-  program.command("proxy").argument("[filePath]", "Path to the micro-frontend configuration file").option("--names, --local-apps <names...>", "List of locally running applications", []).option("--port <port>", "Port proxy will use", (value) => {
+  program.command("proxy").argument("[filePath]", "Path to the micro-frontend configuration file").option(
+    "--local-apps <names...>",
+    "List of locally running applications",
+    []
+  ).addOption(new import_commander.Option("--names <names...>").hideHelp()).option("--port <port>", "Port proxy will use", (value) => {
     const parsedValue = Number.parseInt(value, 10);
     if (isNaN(parsedValue) || parsedValue <= 0) {
       throw new Error("Port must be a positive number");
     }
     return parsedValue;
   }).action((filePath, options) => {
+    if (options.names && options.localApps.length) {
+      throw new Error(
+        "Both --names and --local-apps are set. --names is deprecated and has been replaced with --local-apps, which functions exactly the same. Please only set --local-apps."
+      );
+    }
     const localProxy = LocalProxy.fromFile(filePath, {
-      localApps: options.localApps,
+      localApps: options.names ?? options.localApps,
       proxyPort: options.port
     });
     localProxy.startServer();