@commercetools-frontend/mc-dev-authentication 21.0.0 → 21.4.0

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @commercetools-frontend/mc-dev-authentication
 
+## 21.4.0
+
+### Minor Changes
+
+- [#2568](https://github.com/commercetools/merchant-center-application-kit/pull/2568) [`5bcf106a`](https://github.com/commercetools/merchant-center-application-kit/commit/5bcf106a1b82cb2854550a78280554abf1004c62) Thanks [@emmenko](https://github.com/emmenko)! - Enable opt-in support for using [Vite.js](https://vitejs.dev/) bundler. To enable it, set the environment variable `ENABLE_EXPERIMENTAL_VITE_BUNDLER="true"` in your dotenv file.
+
+  # Why Vite
+
+  Vite (French word for "quick", pronounced /vit/, like "veet") is a build tool that aims to provide a faster and leaner development experience for modern web projects.
+
+  You can learn more about the rationale behind the project in the [Why Vite](https://vitejs.dev/guide/why.html) documentation.
+
+  # Native ES Modules support
+
+  Vite is optimized for using native [ES Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) via `<script type="module">` tags and ES Modules dynamic import.
+
+  # CLI compatibility
+
+  All the `mc-scripts` CLI commands are fully compatible with the new bundler, so you can continue using them as before.
+
+  ## Unsupported features
+
+  The `cdnUrl` value is not supported at the moment when using Vite.
+
+  # Required file extensions
+
+  Vite relies on the file extensions to determine how to process the file in the best possible way. For example, a file using JSX should use the extension `.jsx`, or `.tsx` for TypeScript.
+
+  Up until now we didn't enforce this with Webpack, so using `.js` or `.jsx` works in both cases. If you are still using `.js` for files including the JSX syntax, you need to rename the file to `.jsx`.
+
+  To help with the renaming, you can use our codemod `rename-js-to-jsx`:
+
+  ```
+  npx @commercetools-frontend/codemod rename-js-to-jsx 'src/**/*.js'
+  ```
+
+### Patch Changes
+
+- [#2568](https://github.com/commercetools/merchant-center-application-kit/pull/2568) [`5bcf106a`](https://github.com/commercetools/merchant-center-application-kit/commit/5bcf106a1b82cb2854550a78280554abf1004c62) Thanks [@emmenko](https://github.com/emmenko)! - Expose new middleware `createMcDevAuthenticationMiddleware`. This is mostly used for internal development.
+
 ## 21.0.0
 
 ### Major Changes

package/middlewares/create-mc-dev-authentication-middleware.js

@@ -0,0 +1,76 @@
+const path = require('path');
+const pug = require('pug');
+const { logout } = require('../routes');
+
+const compileLoginView = pug.compileFile(
+  path.join(__dirname, '../views/login.pug')
+);
+const compileLogoutView = pug.compileFile(
+  path.join(__dirname, '../views/logout.pug')
+);
+
+function createMcDevAuthenticationMiddleware(applicationConfig) {
+  const htmlLogin = compileLoginView({ env: applicationConfig.env });
+  const htmlLogout = compileLogoutView({ env: applicationConfig.env });
+
+  const isDevAuthenticationMiddlewareDisabled =
+    String(applicationConfig.env.disableAuthRoutesOfDevServer) === 'true' ||
+    applicationConfig.env.servedByProxy;
+
+  /**
+   * @type {import('express').RequestHandler}
+   */
+  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/custom-applications/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') {
+        logout(response);
+
+        if (isDevAuthenticationMiddlewareDisabled) {
+          next();
+        } else {
+          response.end(htmlLogout);
+        }
+        return;
+      }
+    }
+
+    next();
+  };
+}
+
+module.exports = createMcDevAuthenticationMiddleware;

package/middlewares/index.js

@@ -1,7 +1,9 @@
 const createLoginMiddleware = require('./create-login-middleware');
 const createLogoutMiddleware = require('./create-logout-middleware');
+const createMcDevAuthenticationMiddleware = require('./create-mc-dev-authentication-middleware');
 
 module.exports = {
   createLoginMiddleware,
   createLogoutMiddleware,
+  createMcDevAuthenticationMiddleware,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/mc-dev-authentication",
-  "version": "21.0.0",
+  "version": "21.4.0",
   "description": "Authentication views when running webpack-dev-server in development mode",
   "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
   "repository": {

package/transformer-local.js

@@ -24,18 +24,6 @@ module.exports = ({ env }) => {
   const loginViewHtml = compileLoginView({ env });
   const logoutViewHtml = compileLogoutView({ env });
 
-  fs.copyFileSync(
-    path.join(__dirname, 'views', 'login.css'),
-    path.join(paths.appBuild, 'login.css')
-  );
-  fs.copyFileSync(
-    path.join(__dirname, 'views', 'login.js'),
-    path.join(paths.appBuild, 'login.js')
-  );
-  fs.copyFileSync(
-    path.join(__dirname, 'views', 'logout.js'),
-    path.join(paths.appBuild, 'logout.js')
-  );
   fs.writeFileSync(
     path.join(paths.appBuild, 'login.html'),
     loginViewHtml,