@commercetools-frontend/mc-dev-authentication 0.0.0-FEC-157-preview-releases-20241126230331

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) commercetools GmbH
+
+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.

package/README.md

@@ -0,0 +1,13 @@
+# @commercetools-frontend/mc-dev-authentication
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@commercetools-frontend/mc-dev-authentication"><img src="https://badgen.net/npm/v/@commercetools-frontend/mc-dev-authentication" alt="Latest release (latest dist-tag)" /></a> <a href="https://www.npmjs.com/package/@commercetools-frontend/mc-dev-authentication"><img src="https://badgen.net/npm/v/@commercetools-frontend/mc-dev-authentication/next" alt="Latest release (next dist-tag)" /></a> <a href="https://bundlephobia.com/result?p=@commercetools-frontend/mc-dev-authentication"><img src="https://badgen.net/bundlephobia/minzip/@commercetools-frontend/mc-dev-authentication" alt="Minified + GZipped size" /></a> <a href="https://github.com/commercetools/merchant-center-application-kit/blob/main/LICENSE"><img src="https://badgen.net/github/license/commercetools/merchant-center-application-kit" alt="GitHub license" /></a>
+</p>
+
+Authentication views when running webpack-dev-server in development mode.
+
+## Install
+
+```bash
+$ npm install --save @commercetools-frontend/mc-dev-authentication
+```

package/dist/commercetools-frontend-mc-dev-authentication.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./declarations/src/index";
+//# sourceMappingURL=commercetools-frontend-mc-dev-authentication.cjs.d.ts.map

package/dist/commercetools-frontend-mc-dev-authentication.cjs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"commercetools-frontend-mc-dev-authentication.cjs.d.ts","sourceRoot":"","sources":["./declarations/src/index.d.ts"],"names":[],"mappings":"AAAA"}

package/dist/commercetools-frontend-mc-dev-authentication.cjs.dev.js

@@ -0,0 +1,110 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _JSON$stringify = require('@babel/runtime-corejs3/core-js-stable/json/stringify');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var fs = require('fs');
+var path = require('path');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _JSON$stringify__default = /*#__PURE__*/_interopDefault(_JSON$stringify);
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
+var fs__default = /*#__PURE__*/_interopDefault(fs);
+var path__default = /*#__PURE__*/_interopDefault(path);
+
+function logoutRoute(response) {
+  var _context;
+  let additionalCookieParameters = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  // NOTE: removing the cookie only works if your are running the MC API
+  // locally, otherwise the cookie won't get removed as it's set to a
+  // proper domain (e.g. commercetools.com), which we can't unset from localhost.
+  response.setHeader('Set-Cookie', _concatInstanceProperty__default["default"](_context = [`mcAccessToken=''`,
+  // <-- unset the value
+  'Path=/', `Expires=${new Date(0).toUTCString()}`,
+  // <-- put a date in the past
+  'HttpOnly']).call(_context, additionalCookieParameters).join('; '));
+}
+
+// https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros
+const pages$1 = {
+  "loginPage": "<html>\n  <head>\n    <title>Login (development only)</title>\n    <style>\n      html,\n      body {\n        font: 1em sans-serif;\n        padding: 0;\n        margin: 0;\n        height: 100vh;\n        width: 100vw;\n      }\n\n      body {\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-start;\n        align-items: center;\n        margin-top: 32px;\n      }\n\n      body > * + * {\n        margin-top: 32px;\n      }\n\n      .title {\n        width: 355px;\n      }\n\n      form {\n        display: flex;\n        flex-direction: column;\n        width: 355px;\n      }\n\n      form > * + * {\n        margin: 16px 0 0;\n      }\n\n      .field {\n        border: 0;\n      }\n\n      .field > * + * {\n        margin: 8px 0 0;\n      }\n\n      label {\n        display: block;\n      }\n\n      input {\n        width: 100%;\n        height: 24px;\n        outline: none;\n      }\n\n      input:focus {\n        border: 1px solid cornflowerblue;\n      }\n\n      input:focus:invalid {\n        border-color: red;\n      }\n\n      abbr {\n        text-decoration: none;\n        color: orangered;\n      }\n\n      #errors > div {\n        background-color: red;\n        color: #eee;\n        padding: 8px;\n        border-radius: 4px;\n      }\n\n      .info {\n        background-color: #b5e1fd;\n        padding: 8px;\n        border-radius: 4px;\n      }\n    </style>\n  </head>\n  <body>\n    <div class=\"title\">\n      <h3>\n        Welcome to the Merchant Center authorization page for local development\n      </h3>\n      <small>\n        This page is only available in development mode and is necessary to\n        authenticate yourself. In production environment, we use our own\n        authentication service.\n      </small>\n    </div>\n    <form id=\"login\">\n      <div id=\"errors\"></div>\n      <div class=\"field\">\n        <label for=\"email\">\n          Email<abbr title=\"This field is mandatory\">*</abbr>\n        </label>\n        <input id=\"email\" name=\"email\" type=\"text\" required=\"required\" />\n      </div>\n      <div class=\"field\">\n        <label for=\"password\">\n          Password<abbr title=\"This field is mandatory\">*</abbr>\n        </label>\n        <input\n          id=\"password\"\n          name=\"password\"\n          type=\"password\"\n          required=\"required\"\n        />\n      </div>\n      <div>\n        <button type=\"submit\" aria-label=\"Sign in\">Sign in 🚀</button>\n      </div>\n    </form>\n    <script>\n      /* eslint-disable no-var,vars-on-top */\n      /**\n       * NOTE:\n       *   This code is only used in development mode.\n       *   It authenticates a developer using the same mechanisms\n       *   as when not running in development. However,\n       *   this runs on the same domain as the developer.\n       */\n      window.addEventListener('load', function loaded() {\n        var form = document.getElementById('login');\n        form.addEventListener('submit', function onSubmit(event) {\n          event.preventDefault();\n          authorize();\n        });\n\n        function authorize() {\n          var data = new FormData(form);\n          var payload = {\n            email: data.get('email'),\n            password: data.get('password'),\n          };\n\n          var queryParams = new URLSearchParams(window.location.search);\n          if (queryParams.has('response_type')) {\n            // OIDC params\n            payload.client_id = queryParams.get('client_id');\n            payload.response_type = queryParams.get('response_type');\n            payload.scope = queryParams.get('scope');\n            payload.state = queryParams.get('state');\n            payload.nonce = queryParams.get('nonce');\n          }\n\n          var container = document.getElementById('errors');\n          // Clean up error message elements\n          while (container.firstChild) {\n            container.removeChild(container.firstChild);\n          }\n\n          const url = '__MC_API_URL__/tokens';\n\n          window\n            .fetch(url, {\n              method: 'POST',\n              headers: {\n                Accept: 'application/json',\n                'Content-Type': 'application/json',\n              },\n              credentials: 'include',\n              body: JSON.stringify(payload),\n            })\n            .then(function handleResponse(response) {\n              if (response.ok) {\n                return response.json().then(function onSuccess(result) {\n                  // Handle OIDC redirect.\n                  if (queryParams.has('response_type')) {\n                    window.location.replace(result.redirectTo);\n                  } else {\n                    window.localStorage.setItem('isAuthenticated', true);\n                    var searchParams = new URLSearchParams(\n                      window.location.search\n                    );\n                    var redirectTo = searchParams.get('redirectTo') || '/';\n                    window.location.replace(redirectTo);\n                  }\n                });\n              }\n              return response.text().then(function onError(responseText) {\n                var message;\n                try {\n                  var parsedResponse = JSON.parse(responseText);\n                  message = parsedResponse.message;\n                } catch (e) {\n                  console.warn(\n                    `Failed to parse error response for ${url}:`,\n                    responseText\n                  );\n\n                  message = responseText;\n                }\n                var errorMessage = document.createTextNode(message);\n                var errorContainer = document.createElement('div');\n                errorContainer.appendChild(errorMessage);\n                container.appendChild(errorContainer, container);\n              });\n            })\n            .catch(function onNetworkError(error) {\n              var errorMessage = document.createTextNode(error.message);\n              var errorContainer = document.createElement('div');\n              errorContainer.appendChild(errorMessage);\n              container.appendChild(errorContainer, container);\n            });\n        }\n      });\n    </script>\n  </body>\n</html>\n",
+  "logoutPage": "<html>\n  <head>\n    <title>Logout (development only)</title>\n    <script>\n      window.localStorage.removeItem('isAuthenticated');\n      window.localStorage.removeItem('loginStrategy');\n      window.localStorage.removeItem('activeProjectKey');\n    </script>\n  </head>\n  <body>\n    <div>\n      <h3>This is the logout page for local development.</h3>\n      <p>\n        Be aware that you might still have an active session as the cookie is\n        assigned to a production domain (e.g. commercetools.com) which we can't\n        unset from localhost. This is only a problem on local development and we\n        intend fix this in the future.\n      </p>\n      <p>\n        You can\n        <a href=\"#\" onclick=\"window.location='/login'+window.location.search;\"\n          >go to the login page</a\n        >\n        now.\n      </p>\n    </div>\n  </body>\n</html>\n"
+};
+const trimTrailingSlash$1 = value => value.replace(/\/$/, '');
+function createMcDevAuthenticationMiddleware(applicationConfig) {
+  const htmlLogin = pages$1.loginPage.replace(new RegExp('__MC_API_URL__', 'g'), trimTrailingSlash$1(applicationConfig.env.mcApiUrl));
+  const htmlLogout = pages$1.logoutPage;
+  const isDevAuthenticationMiddlewareDisabled = String(applicationConfig.env.disableAuthRoutesOfDevServer) === 'true' || applicationConfig.env.servedByProxy;
+  return (request, response, next) => {
+    if (request.originalUrl === '/api/graphql') {
+      response.statusCode = 404;
+      response.setHeader('Content-Type', 'application/json');
+      response.end(_JSON$stringify__default["default"]({
+        message: `This GraphQL endpoint is only available in production in the [Merchant Center Proxy Router](https://docs.commercetools.com/merchant-center-customizations/concepts/merchant-center-proxy-router). Please check that you are not calling this endpoint in development mode.`
+      }));
+      return;
+    }
+    if (applicationConfig.env.__DEVELOPMENT__?.oidc?.authorizeUrl) {
+      // Handle login page for OIDC workflow when developing against a local MC API.
+      if (applicationConfig.env.__DEVELOPMENT__?.oidc?.authorizeUrl.startsWith('http://localhost')) {
+        if (request.originalUrl?.startsWith('/login/authorize')) {
+          if (isDevAuthenticationMiddlewareDisabled) {
+            next();
+          } else {
+            response.end(htmlLogin);
+          }
+          return;
+        }
+      }
+    } else {
+      if (request.originalUrl === '/login') {
+        if (isDevAuthenticationMiddlewareDisabled) {
+          next();
+        } else {
+          response.end(htmlLogin);
+        }
+        return;
+      }
+      if (request.originalUrl === '/logout') {
+        logoutRoute(response);
+        if (isDevAuthenticationMiddlewareDisabled) {
+          next();
+        } else {
+          response.end(htmlLogout);
+        }
+        return;
+      }
+    }
+    next();
+  };
+}
+
+// https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros
+const pages = {
+  "loginPage": "<html>\n  <head>\n    <title>Login (development only)</title>\n    <style>\n      html,\n      body {\n        font: 1em sans-serif;\n        padding: 0;\n        margin: 0;\n        height: 100vh;\n        width: 100vw;\n      }\n\n      body {\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-start;\n        align-items: center;\n        margin-top: 32px;\n      }\n\n      body > * + * {\n        margin-top: 32px;\n      }\n\n      .title {\n        width: 355px;\n      }\n\n      form {\n        display: flex;\n        flex-direction: column;\n        width: 355px;\n      }\n\n      form > * + * {\n        margin: 16px 0 0;\n      }\n\n      .field {\n        border: 0;\n      }\n\n      .field > * + * {\n        margin: 8px 0 0;\n      }\n\n      label {\n        display: block;\n      }\n\n      input {\n        width: 100%;\n        height: 24px;\n        outline: none;\n      }\n\n      input:focus {\n        border: 1px solid cornflowerblue;\n      }\n\n      input:focus:invalid {\n        border-color: red;\n      }\n\n      abbr {\n        text-decoration: none;\n        color: orangered;\n      }\n\n      #errors > div {\n        background-color: red;\n        color: #eee;\n        padding: 8px;\n        border-radius: 4px;\n      }\n\n      .info {\n        background-color: #b5e1fd;\n        padding: 8px;\n        border-radius: 4px;\n      }\n    </style>\n  </head>\n  <body>\n    <div class=\"title\">\n      <h3>\n        Welcome to the Merchant Center authorization page for local development\n      </h3>\n      <small>\n        This page is only available in development mode and is necessary to\n        authenticate yourself. In production environment, we use our own\n        authentication service.\n      </small>\n    </div>\n    <form id=\"login\">\n      <div id=\"errors\"></div>\n      <div class=\"field\">\n        <label for=\"email\">\n          Email<abbr title=\"This field is mandatory\">*</abbr>\n        </label>\n        <input id=\"email\" name=\"email\" type=\"text\" required=\"required\" />\n      </div>\n      <div class=\"field\">\n        <label for=\"password\">\n          Password<abbr title=\"This field is mandatory\">*</abbr>\n        </label>\n        <input\n          id=\"password\"\n          name=\"password\"\n          type=\"password\"\n          required=\"required\"\n        />\n      </div>\n      <div>\n        <button type=\"submit\" aria-label=\"Sign in\">Sign in 🚀</button>\n      </div>\n    </form>\n    <script>\n      /* eslint-disable no-var,vars-on-top */\n      /**\n       * NOTE:\n       *   This code is only used in development mode.\n       *   It authenticates a developer using the same mechanisms\n       *   as when not running in development. However,\n       *   this runs on the same domain as the developer.\n       */\n      window.addEventListener('load', function loaded() {\n        var form = document.getElementById('login');\n        form.addEventListener('submit', function onSubmit(event) {\n          event.preventDefault();\n          authorize();\n        });\n\n        function authorize() {\n          var data = new FormData(form);\n          var payload = {\n            email: data.get('email'),\n            password: data.get('password'),\n          };\n\n          var queryParams = new URLSearchParams(window.location.search);\n          if (queryParams.has('response_type')) {\n            // OIDC params\n            payload.client_id = queryParams.get('client_id');\n            payload.response_type = queryParams.get('response_type');\n            payload.scope = queryParams.get('scope');\n            payload.state = queryParams.get('state');\n            payload.nonce = queryParams.get('nonce');\n          }\n\n          var container = document.getElementById('errors');\n          // Clean up error message elements\n          while (container.firstChild) {\n            container.removeChild(container.firstChild);\n          }\n\n          const url = '__MC_API_URL__/tokens';\n\n          window\n            .fetch(url, {\n              method: 'POST',\n              headers: {\n                Accept: 'application/json',\n                'Content-Type': 'application/json',\n              },\n              credentials: 'include',\n              body: JSON.stringify(payload),\n            })\n            .then(function handleResponse(response) {\n              if (response.ok) {\n                return response.json().then(function onSuccess(result) {\n                  // Handle OIDC redirect.\n                  if (queryParams.has('response_type')) {\n                    window.location.replace(result.redirectTo);\n                  } else {\n                    window.localStorage.setItem('isAuthenticated', true);\n                    var searchParams = new URLSearchParams(\n                      window.location.search\n                    );\n                    var redirectTo = searchParams.get('redirectTo') || '/';\n                    window.location.replace(redirectTo);\n                  }\n                });\n              }\n              return response.text().then(function onError(responseText) {\n                var message;\n                try {\n                  var parsedResponse = JSON.parse(responseText);\n                  message = parsedResponse.message;\n                } catch (e) {\n                  console.warn(\n                    `Failed to parse error response for ${url}:`,\n                    responseText\n                  );\n\n                  message = responseText;\n                }\n                var errorMessage = document.createTextNode(message);\n                var errorContainer = document.createElement('div');\n                errorContainer.appendChild(errorMessage);\n                container.appendChild(errorContainer, container);\n              });\n            })\n            .catch(function onNetworkError(error) {\n              var errorMessage = document.createTextNode(error.message);\n              var errorContainer = document.createElement('div');\n              errorContainer.appendChild(errorMessage);\n              container.appendChild(errorContainer, container);\n            });\n        }\n      });\n    </script>\n  </body>\n</html>\n",
+  "logoutPage": "<html>\n  <head>\n    <title>Logout (development only)</title>\n    <script>\n      window.localStorage.removeItem('isAuthenticated');\n      window.localStorage.removeItem('loginStrategy');\n      window.localStorage.removeItem('activeProjectKey');\n    </script>\n  </head>\n  <body>\n    <div>\n      <h3>This is the logout page for local development.</h3>\n      <p>\n        Be aware that you might still have an active session as the cookie is\n        assigned to a production domain (e.g. commercetools.com) which we can't\n        unset from localhost. This is only a problem on local development and we\n        intend fix this in the future.\n      </p>\n      <p>\n        You can\n        <a href=\"#\" onclick=\"window.location='/login'+window.location.search;\"\n          >go to the login page</a\n        >\n        now.\n      </p>\n    </div>\n  </body>\n</html>\n"
+};
+const trimTrailingSlash = value => value.replace(/\/$/, '');
+
+// Make sure any symlinks in the project folder are resolved:
+// https://github.com/facebook/create-react-app/issues/637
+const appDirectory = fs__default["default"].realpathSync(process.cwd());
+const resolveApp = relativePath => path__default["default"].resolve(appDirectory, relativePath);
+const paths = {
+  appBuild: resolveApp('public')
+};
+
+// This transformer will generate a development `login` and `logout` HTML files
+// and copy them to the application public folder.
+// This is necessary to run the application locally in production mode.
+const transformerLocal = compiledHtml => {
+  const htmlLogin = pages.loginPage.replace(new RegExp('__MC_API_URL__', 'g'), trimTrailingSlash(compiledHtml.env.mcApiUrl));
+  const htmlLogout = pages.logoutPage;
+  fs__default["default"].writeFileSync(path__default["default"].join(paths.appBuild, 'login.html'), htmlLogin, 'utf8');
+  fs__default["default"].writeFileSync(path__default["default"].join(paths.appBuild, 'logout.html'), htmlLogout, 'utf8');
+};
+
+exports.createMcDevAuthenticationMiddleware = createMcDevAuthenticationMiddleware;
+exports.transformerLocal = transformerLocal;

package/dist/commercetools-frontend-mc-dev-authentication.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./commercetools-frontend-mc-dev-authentication.cjs.prod.js");
+} else {
+  module.exports = require("./commercetools-frontend-mc-dev-authentication.cjs.dev.js");
+}

package/dist/commercetools-frontend-mc-dev-authentication.cjs.prod.js

@@ -0,0 +1,110 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _JSON$stringify = require('@babel/runtime-corejs3/core-js-stable/json/stringify');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var fs = require('fs');
+var path = require('path');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _JSON$stringify__default = /*#__PURE__*/_interopDefault(_JSON$stringify);
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
+var fs__default = /*#__PURE__*/_interopDefault(fs);
+var path__default = /*#__PURE__*/_interopDefault(path);
+
+function logoutRoute(response) {
+  var _context;
+  let additionalCookieParameters = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  // NOTE: removing the cookie only works if your are running the MC API
+  // locally, otherwise the cookie won't get removed as it's set to a
+  // proper domain (e.g. commercetools.com), which we can't unset from localhost.
+  response.setHeader('Set-Cookie', _concatInstanceProperty__default["default"](_context = [`mcAccessToken=''`,
+  // <-- unset the value
+  'Path=/', `Expires=${new Date(0).toUTCString()}`,
+  // <-- put a date in the past
+  'HttpOnly']).call(_context, additionalCookieParameters).join('; '));
+}
+
+// https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros
+const pages$1 = {
+  "loginPage": "<html>\n  <head>\n    <title>Login (development only)</title>\n    <style>\n      html,\n      body {\n        font: 1em sans-serif;\n        padding: 0;\n        margin: 0;\n        height: 100vh;\n        width: 100vw;\n      }\n\n      body {\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-start;\n        align-items: center;\n        margin-top: 32px;\n      }\n\n      body > * + * {\n        margin-top: 32px;\n      }\n\n      .title {\n        width: 355px;\n      }\n\n      form {\n        display: flex;\n        flex-direction: column;\n        width: 355px;\n      }\n\n      form > * + * {\n        margin: 16px 0 0;\n      }\n\n      .field {\n        border: 0;\n      }\n\n      .field > * + * {\n        margin: 8px 0 0;\n      }\n\n      label {\n        display: block;\n      }\n\n      input {\n        width: 100%;\n        height: 24px;\n        outline: none;\n      }\n\n      input:focus {\n        border: 1px solid cornflowerblue;\n      }\n\n      input:focus:invalid {\n        border-color: red;\n      }\n\n      abbr {\n        text-decoration: none;\n        color: orangered;\n      }\n\n      #errors > div {\n        background-color: red;\n        color: #eee;\n        padding: 8px;\n        border-radius: 4px;\n      }\n\n      .info {\n        background-color: #b5e1fd;\n        padding: 8px;\n        border-radius: 4px;\n      }\n    </style>\n  </head>\n  <body>\n    <div class=\"title\">\n      <h3>\n        Welcome to the Merchant Center authorization page for local development\n      </h3>\n      <small>\n        This page is only available in development mode and is necessary to\n        authenticate yourself. In production environment, we use our own\n        authentication service.\n      </small>\n    </div>\n    <form id=\"login\">\n      <div id=\"errors\"></div>\n      <div class=\"field\">\n        <label for=\"email\">\n          Email<abbr title=\"This field is mandatory\">*</abbr>\n        </label>\n        <input id=\"email\" name=\"email\" type=\"text\" required=\"required\" />\n      </div>\n      <div class=\"field\">\n        <label for=\"password\">\n          Password<abbr title=\"This field is mandatory\">*</abbr>\n        </label>\n        <input\n          id=\"password\"\n          name=\"password\"\n          type=\"password\"\n          required=\"required\"\n        />\n      </div>\n      <div>\n        <button type=\"submit\" aria-label=\"Sign in\">Sign in 🚀</button>\n      </div>\n    </form>\n    <script>\n      /* eslint-disable no-var,vars-on-top */\n      /**\n       * NOTE:\n       *   This code is only used in development mode.\n       *   It authenticates a developer using the same mechanisms\n       *   as when not running in development. However,\n       *   this runs on the same domain as the developer.\n       */\n      window.addEventListener('load', function loaded() {\n        var form = document.getElementById('login');\n        form.addEventListener('submit', function onSubmit(event) {\n          event.preventDefault();\n          authorize();\n        });\n\n        function authorize() {\n          var data = new FormData(form);\n          var payload = {\n            email: data.get('email'),\n            password: data.get('password'),\n          };\n\n          var queryParams = new URLSearchParams(window.location.search);\n          if (queryParams.has('response_type')) {\n            // OIDC params\n            payload.client_id = queryParams.get('client_id');\n            payload.response_type = queryParams.get('response_type');\n            payload.scope = queryParams.get('scope');\n            payload.state = queryParams.get('state');\n            payload.nonce = queryParams.get('nonce');\n          }\n\n          var container = document.getElementById('errors');\n          // Clean up error message elements\n          while (container.firstChild) {\n            container.removeChild(container.firstChild);\n          }\n\n          const url = '__MC_API_URL__/tokens';\n\n          window\n            .fetch(url, {\n              method: 'POST',\n              headers: {\n                Accept: 'application/json',\n                'Content-Type': 'application/json',\n              },\n              credentials: 'include',\n              body: JSON.stringify(payload),\n            })\n            .then(function handleResponse(response) {\n              if (response.ok) {\n                return response.json().then(function onSuccess(result) {\n                  // Handle OIDC redirect.\n                  if (queryParams.has('response_type')) {\n                    window.location.replace(result.redirectTo);\n                  } else {\n                    window.localStorage.setItem('isAuthenticated', true);\n                    var searchParams = new URLSearchParams(\n                      window.location.search\n                    );\n                    var redirectTo = searchParams.get('redirectTo') || '/';\n                    window.location.replace(redirectTo);\n                  }\n                });\n              }\n              return response.text().then(function onError(responseText) {\n                var message;\n                try {\n                  var parsedResponse = JSON.parse(responseText);\n                  message = parsedResponse.message;\n                } catch (e) {\n                  console.warn(\n                    `Failed to parse error response for ${url}:`,\n                    responseText\n                  );\n\n                  message = responseText;\n                }\n                var errorMessage = document.createTextNode(message);\n                var errorContainer = document.createElement('div');\n                errorContainer.appendChild(errorMessage);\n                container.appendChild(errorContainer, container);\n              });\n            })\n            .catch(function onNetworkError(error) {\n              var errorMessage = document.createTextNode(error.message);\n              var errorContainer = document.createElement('div');\n              errorContainer.appendChild(errorMessage);\n              container.appendChild(errorContainer, container);\n            });\n        }\n      });\n    </script>\n  </body>\n</html>\n",
+  "logoutPage": "<html>\n  <head>\n    <title>Logout (development only)</title>\n    <script>\n      window.localStorage.removeItem('isAuthenticated');\n      window.localStorage.removeItem('loginStrategy');\n      window.localStorage.removeItem('activeProjectKey');\n    </script>\n  </head>\n  <body>\n    <div>\n      <h3>This is the logout page for local development.</h3>\n      <p>\n        Be aware that you might still have an active session as the cookie is\n        assigned to a production domain (e.g. commercetools.com) which we can't\n        unset from localhost. This is only a problem on local development and we\n        intend fix this in the future.\n      </p>\n      <p>\n        You can\n        <a href=\"#\" onclick=\"window.location='/login'+window.location.search;\"\n          >go to the login page</a\n        >\n        now.\n      </p>\n    </div>\n  </body>\n</html>\n"
+};
+const trimTrailingSlash$1 = value => value.replace(/\/$/, '');
+function createMcDevAuthenticationMiddleware(applicationConfig) {
+  const htmlLogin = pages$1.loginPage.replace(new RegExp('__MC_API_URL__', 'g'), trimTrailingSlash$1(applicationConfig.env.mcApiUrl));
+  const htmlLogout = pages$1.logoutPage;
+  const isDevAuthenticationMiddlewareDisabled = String(applicationConfig.env.disableAuthRoutesOfDevServer) === 'true' || applicationConfig.env.servedByProxy;
+  return (request, response, next) => {
+    if (request.originalUrl === '/api/graphql') {
+      response.statusCode = 404;
+      response.setHeader('Content-Type', 'application/json');
+      response.end(_JSON$stringify__default["default"]({
+        message: `This GraphQL endpoint is only available in production in the [Merchant Center Proxy Router](https://docs.commercetools.com/merchant-center-customizations/concepts/merchant-center-proxy-router). Please check that you are not calling this endpoint in development mode.`
+      }));
+      return;
+    }
+    if (applicationConfig.env.__DEVELOPMENT__?.oidc?.authorizeUrl) {
+      // Handle login page for OIDC workflow when developing against a local MC API.
+      if (applicationConfig.env.__DEVELOPMENT__?.oidc?.authorizeUrl.startsWith('http://localhost')) {
+        if (request.originalUrl?.startsWith('/login/authorize')) {
+          if (isDevAuthenticationMiddlewareDisabled) {
+            next();
+          } else {
+            response.end(htmlLogin);
+          }
+          return;
+        }
+      }
+    } else {
+      if (request.originalUrl === '/login') {
+        if (isDevAuthenticationMiddlewareDisabled) {
+          next();
+        } else {
+          response.end(htmlLogin);
+        }
+        return;
+      }
+      if (request.originalUrl === '/logout') {
+        logoutRoute(response);
+        if (isDevAuthenticationMiddlewareDisabled) {
+          next();
+        } else {
+          response.end(htmlLogout);
+        }
+        return;
+      }
+    }
+    next();
+  };
+}
+
+// https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros
+const pages = {
+  "loginPage": "<html>\n  <head>\n    <title>Login (development only)</title>\n    <style>\n      html,\n      body {\n        font: 1em sans-serif;\n        padding: 0;\n        margin: 0;\n        height: 100vh;\n        width: 100vw;\n      }\n\n      body {\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-start;\n        align-items: center;\n        margin-top: 32px;\n      }\n\n      body > * + * {\n        margin-top: 32px;\n      }\n\n      .title {\n        width: 355px;\n      }\n\n      form {\n        display: flex;\n        flex-direction: column;\n        width: 355px;\n      }\n\n      form > * + * {\n        margin: 16px 0 0;\n      }\n\n      .field {\n        border: 0;\n      }\n\n      .field > * + * {\n        margin: 8px 0 0;\n      }\n\n      label {\n        display: block;\n      }\n\n      input {\n        width: 100%;\n        height: 24px;\n        outline: none;\n      }\n\n      input:focus {\n        border: 1px solid cornflowerblue;\n      }\n\n      input:focus:invalid {\n        border-color: red;\n      }\n\n      abbr {\n        text-decoration: none;\n        color: orangered;\n      }\n\n      #errors > div {\n        background-color: red;\n        color: #eee;\n        padding: 8px;\n        border-radius: 4px;\n      }\n\n      .info {\n        background-color: #b5e1fd;\n        padding: 8px;\n        border-radius: 4px;\n      }\n    </style>\n  </head>\n  <body>\n    <div class=\"title\">\n      <h3>\n        Welcome to the Merchant Center authorization page for local development\n      </h3>\n      <small>\n        This page is only available in development mode and is necessary to\n        authenticate yourself. In production environment, we use our own\n        authentication service.\n      </small>\n    </div>\n    <form id=\"login\">\n      <div id=\"errors\"></div>\n      <div class=\"field\">\n        <label for=\"email\">\n          Email<abbr title=\"This field is mandatory\">*</abbr>\n        </label>\n        <input id=\"email\" name=\"email\" type=\"text\" required=\"required\" />\n      </div>\n      <div class=\"field\">\n        <label for=\"password\">\n          Password<abbr title=\"This field is mandatory\">*</abbr>\n        </label>\n        <input\n          id=\"password\"\n          name=\"password\"\n          type=\"password\"\n          required=\"required\"\n        />\n      </div>\n      <div>\n        <button type=\"submit\" aria-label=\"Sign in\">Sign in 🚀</button>\n      </div>\n    </form>\n    <script>\n      /* eslint-disable no-var,vars-on-top */\n      /**\n       * NOTE:\n       *   This code is only used in development mode.\n       *   It authenticates a developer using the same mechanisms\n       *   as when not running in development. However,\n       *   this runs on the same domain as the developer.\n       */\n      window.addEventListener('load', function loaded() {\n        var form = document.getElementById('login');\n        form.addEventListener('submit', function onSubmit(event) {\n          event.preventDefault();\n          authorize();\n        });\n\n        function authorize() {\n          var data = new FormData(form);\n          var payload = {\n            email: data.get('email'),\n            password: data.get('password'),\n          };\n\n          var queryParams = new URLSearchParams(window.location.search);\n          if (queryParams.has('response_type')) {\n            // OIDC params\n            payload.client_id = queryParams.get('client_id');\n            payload.response_type = queryParams.get('response_type');\n            payload.scope = queryParams.get('scope');\n            payload.state = queryParams.get('state');\n            payload.nonce = queryParams.get('nonce');\n          }\n\n          var container = document.getElementById('errors');\n          // Clean up error message elements\n          while (container.firstChild) {\n            container.removeChild(container.firstChild);\n          }\n\n          const url = '__MC_API_URL__/tokens';\n\n          window\n            .fetch(url, {\n              method: 'POST',\n              headers: {\n                Accept: 'application/json',\n                'Content-Type': 'application/json',\n              },\n              credentials: 'include',\n              body: JSON.stringify(payload),\n            })\n            .then(function handleResponse(response) {\n              if (response.ok) {\n                return response.json().then(function onSuccess(result) {\n                  // Handle OIDC redirect.\n                  if (queryParams.has('response_type')) {\n                    window.location.replace(result.redirectTo);\n                  } else {\n                    window.localStorage.setItem('isAuthenticated', true);\n                    var searchParams = new URLSearchParams(\n                      window.location.search\n                    );\n                    var redirectTo = searchParams.get('redirectTo') || '/';\n                    window.location.replace(redirectTo);\n                  }\n                });\n              }\n              return response.text().then(function onError(responseText) {\n                var message;\n                try {\n                  var parsedResponse = JSON.parse(responseText);\n                  message = parsedResponse.message;\n                } catch (e) {\n                  console.warn(\n                    `Failed to parse error response for ${url}:`,\n                    responseText\n                  );\n\n                  message = responseText;\n                }\n                var errorMessage = document.createTextNode(message);\n                var errorContainer = document.createElement('div');\n                errorContainer.appendChild(errorMessage);\n                container.appendChild(errorContainer, container);\n              });\n            })\n            .catch(function onNetworkError(error) {\n              var errorMessage = document.createTextNode(error.message);\n              var errorContainer = document.createElement('div');\n              errorContainer.appendChild(errorMessage);\n              container.appendChild(errorContainer, container);\n            });\n        }\n      });\n    </script>\n  </body>\n</html>\n",
+  "logoutPage": "<html>\n  <head>\n    <title>Logout (development only)</title>\n    <script>\n      window.localStorage.removeItem('isAuthenticated');\n      window.localStorage.removeItem('loginStrategy');\n      window.localStorage.removeItem('activeProjectKey');\n    </script>\n  </head>\n  <body>\n    <div>\n      <h3>This is the logout page for local development.</h3>\n      <p>\n        Be aware that you might still have an active session as the cookie is\n        assigned to a production domain (e.g. commercetools.com) which we can't\n        unset from localhost. This is only a problem on local development and we\n        intend fix this in the future.\n      </p>\n      <p>\n        You can\n        <a href=\"#\" onclick=\"window.location='/login'+window.location.search;\"\n          >go to the login page</a\n        >\n        now.\n      </p>\n    </div>\n  </body>\n</html>\n"
+};
+const trimTrailingSlash = value => value.replace(/\/$/, '');
+
+// Make sure any symlinks in the project folder are resolved:
+// https://github.com/facebook/create-react-app/issues/637
+const appDirectory = fs__default["default"].realpathSync(process.cwd());
+const resolveApp = relativePath => path__default["default"].resolve(appDirectory, relativePath);
+const paths = {
+  appBuild: resolveApp('public')
+};
+
+// This transformer will generate a development `login` and `logout` HTML files
+// and copy them to the application public folder.
+// This is necessary to run the application locally in production mode.
+const transformerLocal = compiledHtml => {
+  const htmlLogin = pages.loginPage.replace(new RegExp('__MC_API_URL__', 'g'), trimTrailingSlash(compiledHtml.env.mcApiUrl));
+  const htmlLogout = pages.logoutPage;
+  fs__default["default"].writeFileSync(path__default["default"].join(paths.appBuild, 'login.html'), htmlLogin, 'utf8');
+  fs__default["default"].writeFileSync(path__default["default"].join(paths.appBuild, 'logout.html'), htmlLogout, 'utf8');
+};
+
+exports.createMcDevAuthenticationMiddleware = createMcDevAuthenticationMiddleware;
+exports.transformerLocal = transformerLocal;

package/dist/commercetools-frontend-mc-dev-authentication.esm.js

@@ -0,0 +1,98 @@
+import _JSON$stringify from '@babel/runtime-corejs3/core-js-stable/json/stringify';
+import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
+import fs from 'fs';
+import path from 'path';
+
+function logoutRoute(response) {
+  var _context;
+  let additionalCookieParameters = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  // NOTE: removing the cookie only works if your are running the MC API
+  // locally, otherwise the cookie won't get removed as it's set to a
+  // proper domain (e.g. commercetools.com), which we can't unset from localhost.
+  response.setHeader('Set-Cookie', _concatInstanceProperty(_context = [`mcAccessToken=''`,
+  // <-- unset the value
+  'Path=/', `Expires=${new Date(0).toUTCString()}`,
+  // <-- put a date in the past
+  'HttpOnly']).call(_context, additionalCookieParameters).join('; '));
+}
+
+// https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros
+const pages$1 = {
+  "loginPage": "<html>\n  <head>\n    <title>Login (development only)</title>\n    <style>\n      html,\n      body {\n        font: 1em sans-serif;\n        padding: 0;\n        margin: 0;\n        height: 100vh;\n        width: 100vw;\n      }\n\n      body {\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-start;\n        align-items: center;\n        margin-top: 32px;\n      }\n\n      body > * + * {\n        margin-top: 32px;\n      }\n\n      .title {\n        width: 355px;\n      }\n\n      form {\n        display: flex;\n        flex-direction: column;\n        width: 355px;\n      }\n\n      form > * + * {\n        margin: 16px 0 0;\n      }\n\n      .field {\n        border: 0;\n      }\n\n      .field > * + * {\n        margin: 8px 0 0;\n      }\n\n      label {\n        display: block;\n      }\n\n      input {\n        width: 100%;\n        height: 24px;\n        outline: none;\n      }\n\n      input:focus {\n        border: 1px solid cornflowerblue;\n      }\n\n      input:focus:invalid {\n        border-color: red;\n      }\n\n      abbr {\n        text-decoration: none;\n        color: orangered;\n      }\n\n      #errors > div {\n        background-color: red;\n        color: #eee;\n        padding: 8px;\n        border-radius: 4px;\n      }\n\n      .info {\n        background-color: #b5e1fd;\n        padding: 8px;\n        border-radius: 4px;\n      }\n    </style>\n  </head>\n  <body>\n    <div class=\"title\">\n      <h3>\n        Welcome to the Merchant Center authorization page for local development\n      </h3>\n      <small>\n        This page is only available in development mode and is necessary to\n        authenticate yourself. In production environment, we use our own\n        authentication service.\n      </small>\n    </div>\n    <form id=\"login\">\n      <div id=\"errors\"></div>\n      <div class=\"field\">\n        <label for=\"email\">\n          Email<abbr title=\"This field is mandatory\">*</abbr>\n        </label>\n        <input id=\"email\" name=\"email\" type=\"text\" required=\"required\" />\n      </div>\n      <div class=\"field\">\n        <label for=\"password\">\n          Password<abbr title=\"This field is mandatory\">*</abbr>\n        </label>\n        <input\n          id=\"password\"\n          name=\"password\"\n          type=\"password\"\n          required=\"required\"\n        />\n      </div>\n      <div>\n        <button type=\"submit\" aria-label=\"Sign in\">Sign in 🚀</button>\n      </div>\n    </form>\n    <script>\n      /* eslint-disable no-var,vars-on-top */\n      /**\n       * NOTE:\n       *   This code is only used in development mode.\n       *   It authenticates a developer using the same mechanisms\n       *   as when not running in development. However,\n       *   this runs on the same domain as the developer.\n       */\n      window.addEventListener('load', function loaded() {\n        var form = document.getElementById('login');\n        form.addEventListener('submit', function onSubmit(event) {\n          event.preventDefault();\n          authorize();\n        });\n\n        function authorize() {\n          var data = new FormData(form);\n          var payload = {\n            email: data.get('email'),\n            password: data.get('password'),\n          };\n\n          var queryParams = new URLSearchParams(window.location.search);\n          if (queryParams.has('response_type')) {\n            // OIDC params\n            payload.client_id = queryParams.get('client_id');\n            payload.response_type = queryParams.get('response_type');\n            payload.scope = queryParams.get('scope');\n            payload.state = queryParams.get('state');\n            payload.nonce = queryParams.get('nonce');\n          }\n\n          var container = document.getElementById('errors');\n          // Clean up error message elements\n          while (container.firstChild) {\n            container.removeChild(container.firstChild);\n          }\n\n          const url = '__MC_API_URL__/tokens';\n\n          window\n            .fetch(url, {\n              method: 'POST',\n              headers: {\n                Accept: 'application/json',\n                'Content-Type': 'application/json',\n              },\n              credentials: 'include',\n              body: JSON.stringify(payload),\n            })\n            .then(function handleResponse(response) {\n              if (response.ok) {\n                return response.json().then(function onSuccess(result) {\n                  // Handle OIDC redirect.\n                  if (queryParams.has('response_type')) {\n                    window.location.replace(result.redirectTo);\n                  } else {\n                    window.localStorage.setItem('isAuthenticated', true);\n                    var searchParams = new URLSearchParams(\n                      window.location.search\n                    );\n                    var redirectTo = searchParams.get('redirectTo') || '/';\n                    window.location.replace(redirectTo);\n                  }\n                });\n              }\n              return response.text().then(function onError(responseText) {\n                var message;\n                try {\n                  var parsedResponse = JSON.parse(responseText);\n                  message = parsedResponse.message;\n                } catch (e) {\n                  console.warn(\n                    `Failed to parse error response for ${url}:`,\n                    responseText\n                  );\n\n                  message = responseText;\n                }\n                var errorMessage = document.createTextNode(message);\n                var errorContainer = document.createElement('div');\n                errorContainer.appendChild(errorMessage);\n                container.appendChild(errorContainer, container);\n              });\n            })\n            .catch(function onNetworkError(error) {\n              var errorMessage = document.createTextNode(error.message);\n              var errorContainer = document.createElement('div');\n              errorContainer.appendChild(errorMessage);\n              container.appendChild(errorContainer, container);\n            });\n        }\n      });\n    </script>\n  </body>\n</html>\n",
+  "logoutPage": "<html>\n  <head>\n    <title>Logout (development only)</title>\n    <script>\n      window.localStorage.removeItem('isAuthenticated');\n      window.localStorage.removeItem('loginStrategy');\n      window.localStorage.removeItem('activeProjectKey');\n    </script>\n  </head>\n  <body>\n    <div>\n      <h3>This is the logout page for local development.</h3>\n      <p>\n        Be aware that you might still have an active session as the cookie is\n        assigned to a production domain (e.g. commercetools.com) which we can't\n        unset from localhost. This is only a problem on local development and we\n        intend fix this in the future.\n      </p>\n      <p>\n        You can\n        <a href=\"#\" onclick=\"window.location='/login'+window.location.search;\"\n          >go to the login page</a\n        >\n        now.\n      </p>\n    </div>\n  </body>\n</html>\n"
+};
+const trimTrailingSlash$1 = value => value.replace(/\/$/, '');
+function createMcDevAuthenticationMiddleware(applicationConfig) {
+  const htmlLogin = pages$1.loginPage.replace(new RegExp('__MC_API_URL__', 'g'), trimTrailingSlash$1(applicationConfig.env.mcApiUrl));
+  const htmlLogout = pages$1.logoutPage;
+  const isDevAuthenticationMiddlewareDisabled = String(applicationConfig.env.disableAuthRoutesOfDevServer) === 'true' || applicationConfig.env.servedByProxy;
+  return (request, response, next) => {
+    if (request.originalUrl === '/api/graphql') {
+      response.statusCode = 404;
+      response.setHeader('Content-Type', 'application/json');
+      response.end(_JSON$stringify({
+        message: `This GraphQL endpoint is only available in production in the [Merchant Center Proxy Router](https://docs.commercetools.com/merchant-center-customizations/concepts/merchant-center-proxy-router). Please check that you are not calling this endpoint in development mode.`
+      }));
+      return;
+    }
+    if (applicationConfig.env.__DEVELOPMENT__?.oidc?.authorizeUrl) {
+      // Handle login page for OIDC workflow when developing against a local MC API.
+      if (applicationConfig.env.__DEVELOPMENT__?.oidc?.authorizeUrl.startsWith('http://localhost')) {
+        if (request.originalUrl?.startsWith('/login/authorize')) {
+          if (isDevAuthenticationMiddlewareDisabled) {
+            next();
+          } else {
+            response.end(htmlLogin);
+          }
+          return;
+        }
+      }
+    } else {
+      if (request.originalUrl === '/login') {
+        if (isDevAuthenticationMiddlewareDisabled) {
+          next();
+        } else {
+          response.end(htmlLogin);
+        }
+        return;
+      }
+      if (request.originalUrl === '/logout') {
+        logoutRoute(response);
+        if (isDevAuthenticationMiddlewareDisabled) {
+          next();
+        } else {
+          response.end(htmlLogout);
+        }
+        return;
+      }
+    }
+    next();
+  };
+}
+
+// https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros
+const pages = {
+  "loginPage": "<html>\n  <head>\n    <title>Login (development only)</title>\n    <style>\n      html,\n      body {\n        font: 1em sans-serif;\n        padding: 0;\n        margin: 0;\n        height: 100vh;\n        width: 100vw;\n      }\n\n      body {\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-start;\n        align-items: center;\n        margin-top: 32px;\n      }\n\n      body > * + * {\n        margin-top: 32px;\n      }\n\n      .title {\n        width: 355px;\n      }\n\n      form {\n        display: flex;\n        flex-direction: column;\n        width: 355px;\n      }\n\n      form > * + * {\n        margin: 16px 0 0;\n      }\n\n      .field {\n        border: 0;\n      }\n\n      .field > * + * {\n        margin: 8px 0 0;\n      }\n\n      label {\n        display: block;\n      }\n\n      input {\n        width: 100%;\n        height: 24px;\n        outline: none;\n      }\n\n      input:focus {\n        border: 1px solid cornflowerblue;\n      }\n\n      input:focus:invalid {\n        border-color: red;\n      }\n\n      abbr {\n        text-decoration: none;\n        color: orangered;\n      }\n\n      #errors > div {\n        background-color: red;\n        color: #eee;\n        padding: 8px;\n        border-radius: 4px;\n      }\n\n      .info {\n        background-color: #b5e1fd;\n        padding: 8px;\n        border-radius: 4px;\n      }\n    </style>\n  </head>\n  <body>\n    <div class=\"title\">\n      <h3>\n        Welcome to the Merchant Center authorization page for local development\n      </h3>\n      <small>\n        This page is only available in development mode and is necessary to\n        authenticate yourself. In production environment, we use our own\n        authentication service.\n      </small>\n    </div>\n    <form id=\"login\">\n      <div id=\"errors\"></div>\n      <div class=\"field\">\n        <label for=\"email\">\n          Email<abbr title=\"This field is mandatory\">*</abbr>\n        </label>\n        <input id=\"email\" name=\"email\" type=\"text\" required=\"required\" />\n      </div>\n      <div class=\"field\">\n        <label for=\"password\">\n          Password<abbr title=\"This field is mandatory\">*</abbr>\n        </label>\n        <input\n          id=\"password\"\n          name=\"password\"\n          type=\"password\"\n          required=\"required\"\n        />\n      </div>\n      <div>\n        <button type=\"submit\" aria-label=\"Sign in\">Sign in 🚀</button>\n      </div>\n    </form>\n    <script>\n      /* eslint-disable no-var,vars-on-top */\n      /**\n       * NOTE:\n       *   This code is only used in development mode.\n       *   It authenticates a developer using the same mechanisms\n       *   as when not running in development. However,\n       *   this runs on the same domain as the developer.\n       */\n      window.addEventListener('load', function loaded() {\n        var form = document.getElementById('login');\n        form.addEventListener('submit', function onSubmit(event) {\n          event.preventDefault();\n          authorize();\n        });\n\n        function authorize() {\n          var data = new FormData(form);\n          var payload = {\n            email: data.get('email'),\n            password: data.get('password'),\n          };\n\n          var queryParams = new URLSearchParams(window.location.search);\n          if (queryParams.has('response_type')) {\n            // OIDC params\n            payload.client_id = queryParams.get('client_id');\n            payload.response_type = queryParams.get('response_type');\n            payload.scope = queryParams.get('scope');\n            payload.state = queryParams.get('state');\n            payload.nonce = queryParams.get('nonce');\n          }\n\n          var container = document.getElementById('errors');\n          // Clean up error message elements\n          while (container.firstChild) {\n            container.removeChild(container.firstChild);\n          }\n\n          const url = '__MC_API_URL__/tokens';\n\n          window\n            .fetch(url, {\n              method: 'POST',\n              headers: {\n                Accept: 'application/json',\n                'Content-Type': 'application/json',\n              },\n              credentials: 'include',\n              body: JSON.stringify(payload),\n            })\n            .then(function handleResponse(response) {\n              if (response.ok) {\n                return response.json().then(function onSuccess(result) {\n                  // Handle OIDC redirect.\n                  if (queryParams.has('response_type')) {\n                    window.location.replace(result.redirectTo);\n                  } else {\n                    window.localStorage.setItem('isAuthenticated', true);\n                    var searchParams = new URLSearchParams(\n                      window.location.search\n                    );\n                    var redirectTo = searchParams.get('redirectTo') || '/';\n                    window.location.replace(redirectTo);\n                  }\n                });\n              }\n              return response.text().then(function onError(responseText) {\n                var message;\n                try {\n                  var parsedResponse = JSON.parse(responseText);\n                  message = parsedResponse.message;\n                } catch (e) {\n                  console.warn(\n                    `Failed to parse error response for ${url}:`,\n                    responseText\n                  );\n\n                  message = responseText;\n                }\n                var errorMessage = document.createTextNode(message);\n                var errorContainer = document.createElement('div');\n                errorContainer.appendChild(errorMessage);\n                container.appendChild(errorContainer, container);\n              });\n            })\n            .catch(function onNetworkError(error) {\n              var errorMessage = document.createTextNode(error.message);\n              var errorContainer = document.createElement('div');\n              errorContainer.appendChild(errorMessage);\n              container.appendChild(errorContainer, container);\n            });\n        }\n      });\n    </script>\n  </body>\n</html>\n",
+  "logoutPage": "<html>\n  <head>\n    <title>Logout (development only)</title>\n    <script>\n      window.localStorage.removeItem('isAuthenticated');\n      window.localStorage.removeItem('loginStrategy');\n      window.localStorage.removeItem('activeProjectKey');\n    </script>\n  </head>\n  <body>\n    <div>\n      <h3>This is the logout page for local development.</h3>\n      <p>\n        Be aware that you might still have an active session as the cookie is\n        assigned to a production domain (e.g. commercetools.com) which we can't\n        unset from localhost. This is only a problem on local development and we\n        intend fix this in the future.\n      </p>\n      <p>\n        You can\n        <a href=\"#\" onclick=\"window.location='/login'+window.location.search;\"\n          >go to the login page</a\n        >\n        now.\n      </p>\n    </div>\n  </body>\n</html>\n"
+};
+const trimTrailingSlash = value => value.replace(/\/$/, '');
+
+// Make sure any symlinks in the project folder are resolved:
+// https://github.com/facebook/create-react-app/issues/637
+const appDirectory = fs.realpathSync(process.cwd());
+const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
+const paths = {
+  appBuild: resolveApp('public')
+};
+
+// This transformer will generate a development `login` and `logout` HTML files
+// and copy them to the application public folder.
+// This is necessary to run the application locally in production mode.
+const transformerLocal = compiledHtml => {
+  const htmlLogin = pages.loginPage.replace(new RegExp('__MC_API_URL__', 'g'), trimTrailingSlash(compiledHtml.env.mcApiUrl));
+  const htmlLogout = pages.logoutPage;
+  fs.writeFileSync(path.join(paths.appBuild, 'login.html'), htmlLogin, 'utf8');
+  fs.writeFileSync(path.join(paths.appBuild, 'logout.html'), htmlLogout, 'utf8');
+};
+
+export { createMcDevAuthenticationMiddleware, transformerLocal };

package/dist/declarations/src/create-mc-dev-authentication-middleware.d.ts

@@ -0,0 +1,5 @@
+import type { ServerResponse } from 'node:http';
+import type { IncomingMessage, NextFunction } from 'connect';
+import type { TCustomApplicationRuntimeConfig } from './types';
+declare function createMcDevAuthenticationMiddleware(applicationConfig: TCustomApplicationRuntimeConfig): (request: IncomingMessage, response: ServerResponse, next: NextFunction) => void;
+export default createMcDevAuthenticationMiddleware;

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,2 @@
+export { default as createMcDevAuthenticationMiddleware } from './create-mc-dev-authentication-middleware';
+export { default as transformerLocal } from './transformer-local';

package/dist/declarations/src/pages.d.ts

@@ -0,0 +1,3 @@
+declare type Pages = { loginPage: string; logoutPage: string };
+declare const pages: Pages;
+export default pages;

package/dist/declarations/src/routes/index.d.ts

@@ -0,0 +1 @@
+export { default as logout } from './logout';

package/dist/declarations/src/routes/logout.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="node" />
+import type { ServerResponse } from 'node:http';
+declare function logoutRoute(response: ServerResponse, additionalCookieParameters?: string[]): void;
+export default logoutRoute;

package/dist/declarations/src/transformer-local.d.ts

@@ -0,0 +1,3 @@
+import type { TCompiledHtml } from './types';
+declare const transformerLocal: (compiledHtml: TCompiledHtml) => void;
+export default transformerLocal;

package/dist/declarations/src/types.d.ts

@@ -0,0 +1,9 @@
+import type { ApplicationRuntimeConfig } from '@commercetools-frontend/application-config';
+export type TCustomApplicationRuntimeConfig = ApplicationRuntimeConfig<{
+    disableAuthRoutesOfDevServer?: boolean;
+}>;
+export type TCompiledHtml = {
+    env: TCustomApplicationRuntimeConfig['env'];
+    headers: Record<string, string>;
+    indexHtmlContent: string;
+};

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@commercetools-frontend/mc-dev-authentication",
+  "version": "0.0.0-FEC-157-preview-releases-20241126230331",
+  "description": "Authentication views when running webpack-dev-server in development mode",
+  "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/commercetools/merchant-center-application-kit.git",
+    "directory": "packages/mc-dev-authentication"
+  },
+  "homepage": "https://docs.commercetools.com/merchant-center-customizations",
+  "keywords": [
+    "javascript",
+    "frontend",
+    "react",
+    "toolkit"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/commercetools-frontend-mc-dev-authentication.cjs.js",
+  "module": "dist/commercetools-frontend-mc-dev-authentication.esm.js",
+  "files": [
+    "dist",
+    "transformer-local.js",
+    "package.json",
+    "LICENSE",
+    "README.md"
+  ],
+  "dependencies": {
+    "@babel/runtime": "^7.22.15",
+    "@babel/runtime-corejs3": "^7.22.15"
+  },
+  "devDependencies": {
+    "@tsconfig/node16": "^16.1.1",
+    "@types/connect": "^3.4.36",
+    "connect": "^3.7.0",
+    "@commercetools-frontend/application-config": "0.0.0-FEC-157-preview-releases-20241126230331"
+  },
+  "engines": {
+    "node": "16.x || >=18.0.0"
+  }
+}

package/transformer-local.js

@@ -0,0 +1,12 @@
+/**
+ * This file is expected to be included in the package as it's referenced for the `--transformer` option
+ * in the `compile-html` command.
+ *
+ * @example
+ * ```
+ * mc-scripts compile-html --transformer @commercetools-frontend/mc-dev-authentication/transformer-local.js
+ * ```
+ */
+
+const { transformerLocal } = require('.');
+module.exports = transformerLocal;