Add basic auth to storybook (#20955)

* Add basic auth to storybook

* Update index.js

* Update index.js

Author: heiskr

middleware/index.js

@@ -1,4 +1,5 @@
 import express from 'express'
+import basicAuth from 'express-basic-auth'
 import instrument from '../lib/instrument-middleware.js'
 import haltOnDroppedConnection from './halt-on-dropped-connection.js'
 import abort from './abort.js'
@@ -61,6 +62,7 @@ import renderPage from './render-page.js'
 const { NODE_ENV } = process.env
 const isDevelopment = NODE_ENV === 'development'
 const isTest = NODE_ENV === 'test' || process.env.GITHUB_ACTIONS === 'true'
+const isProduction = NODE_ENV === 'production' && process.env.HEROKU_PRODUCTION_APP
 
 // Catch unhandled promise rejections and passing them to Express's error handler
 // https://medium.com/@Abazhenov/using-async-await-in-express-with-node-8-b8af872c0016
@@ -143,16 +145,18 @@ export default function (app) {
       instrument(archivedEnterpriseVersionsAssets, './archived-enterprise-versions-assets')
     )
   )
-  app.use(
-    '/storybook',
+  app.use('/storybook', [
+    (isProduction &&
+      basicAuth({ users: { octocat: process.env.STORYBOOK_PASSWORD }, challenge: true })) ||
+      ((req, res, next) => next()),
     express.static('storybook', {
       index: false,
       etag: false,
       immutable: true,
       lastModified: false,
       maxAge: '1 day', // Relatively short in case we update index.html
-    })
-  )
+    }),
+  ])
   app.use(
     '/assets',
     express.static('assets', {

package-lock.json

@@ -31,6 +31,7 @@
     "dayjs": "^1.10.6",
     "dotenv": "^10.0.0",
     "express": "^4.17.1",
+    "express-basic-auth": "^1.2.0",
     "express-rate-limit": "^5.3.0",
     "express-timeout-handler": "^2.2.2",
     "flat": "^5.0.2",