PGOV-440: Basic auth for frontend application and fix for broken images

src/frontend/lib/drupal.ts

@@ -5,10 +5,11 @@ export const drupal = new DrupalClient(
   {
     auth: {
       clientId: process.env.DRUPAL_CLIENT_ID,
-      clientSecret: process.env.DRUPAL_CLIENT_SECRET,
+      clientSecret: process.env.DRUPAL_CLIENT_SECRET
     },
     headers: {
       "Content-Type": "application/json",
+      'Authorization': `Basic ${btoa(process.env.BASIC_AUTH_USER + ':' + process.env.BASIC_AUTH_PASSWORD)}`
     },
   },
 );

src/frontend/middleware.ts

@@ -0,0 +1,22 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+export const config = {
+  matcher: ['/', '/index'],
+}
+
+export default function middleware(req: NextRequest) {
+  const basicAuth = req.headers.get('authorization')
+  const url = req.nextUrl
+
+  if (basicAuth) {
+    const authValue = basicAuth.split(' ')[1]
+    const [user, pwd] = atob(authValue).split(':')
+
+    if (user === process.env.BASIC_AUTH_USER && pwd === process.env.BASIC_AUTH_PASSWORD) {
+      return NextResponse.next()
+    }
+  }
+  url.pathname = '/api/basic-auth'
+
+  return NextResponse.rewrite(url)
+}

src/frontend/next.config.js

@@ -1,5 +1,19 @@
 const path = require("path");
 
+
+const cspHeader = `
+    default-src 'self';
+    script-src 'self' 'unsafe-eval' 'unsafe-inline';
+    style-src 'self' 'unsafe-inline';
+    img-src 'self' data: https://pgov-cms.app.cloud.gov;
+    font-src 'self';
+    object-src 'none';
+    base-uri 'self';
+    form-action 'self';
+    frame-ancestors 'self' https://pgov-cms.app.cloud.gov;
+    upgrade-insecure-requests
+`;
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   images: {
@@ -11,6 +25,21 @@ const nextConfig = {
       path.join(__dirname, "node_modules", "@uswds", "uswds", "packages"),
     ],
   },
+  async headers() {
+    return [
+      {
+        source: '/(.*)',
+        headers: [
+          {
+            key: 'Content-Security-Policy',
+            value: cspHeader
+              .replace(/\s{2,}/g, " ")
+              .trim(),
+          },
+        ],
+      },
+    ]
+  }
 };
 
 module.exports = nextConfig;

src/frontend/package.json

@@ -30,8 +30,10 @@
     "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",
     "autoprefixer": "^10.4.19",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "eslint-config-next": "^14.2.2",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
     "husky": "^9.1.7",
     "lint-staged": "^15.2.10",
     "postcss": "^8.4.19",
@@ -41,5 +43,9 @@
   },
   "lint-staged": {
     "**/*": "prettier --write --ignore-unknown"
+  },
+  "engines": {
+    "node": "22.11.0",
+    "npm": "10.9.2"
   }
 }

src/frontend/pages/api/basic-auth.ts

@@ -0,0 +1,7 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default function handler(_: NextApiRequest, res: NextApiResponse) {
+  res.setHeader('WWW-authenticate', 'Basic realm="Secure Area"')
+  res.statusCode = 401
+  res.end(`Auth Required.`)
+}