Unify workspace dropdowns; Update layouts (#458)

Unified Account and Workspace drop-downs; Layout updates, now header lives within the PageBody component; Sidebars now use floating variant

apps/web/proxy.ts

@@ -2,8 +2,10 @@ import type { NextRequest } from 'next/server';
 import { NextResponse } from 'next/server';
 
 import { CsrfError, createCsrfProtect } from '@edge-csrf/nextjs';
+import createNextIntlMiddleware from 'next-intl/middleware';
 
 import { isSuperAdmin } from '@kit/admin';
+import { routing } from '@kit/i18n/routing';
 import { getSafeRedirectPath } from '@kit/shared/utils';
 import { checkRequiresMultiFactorAuthentication } from '@kit/supabase/check-requires-mfa';
 import { createMiddlewareClient } from '@kit/supabase/middleware-client';
@@ -18,22 +20,28 @@ export const config = {
   matcher: ['/((?!_next/static|_next/image|images|locales|assets|api/*).*)'],
 };
 
+// create i18n middleware once at module scope
+const handleI18nRouting = createNextIntlMiddleware(routing);
+
 const getUser = (request: NextRequest, response: NextResponse) => {
   const supabase = createMiddlewareClient(request, response);
 
   return supabase.auth.getClaims();
 };
 
-export async function proxy(request: NextRequest) {
-  const secureHeaders = await createResponseWithSecureHeaders();
-  const response = NextResponse.next(secureHeaders);
+export default async function proxy(request: NextRequest) {
+  // run next-intl middleware first to get the i18n-aware response
+  const response = handleI18nRouting(request);
+
+  // apply secure headers on top of the i18n response
+  const secureHeadersResponse = await createResponseWithSecureHeaders(response);
 
   // set a unique request ID for each request
   // this helps us log and trace requests
   setRequestId(request);
 
   // apply CSRF protection for mutating requests
-  const csrfResponse = await withCsrfMiddleware(request, response);
+  const csrfResponse = await withCsrfMiddleware(request, secureHeadersResponse);
 
   // handle patterns for specific routes
   const handlePattern = await matchUrlPattern(request.url);
@@ -84,7 +92,7 @@ async function withCsrfMiddleware(
     // if there is a CSRF error, return a 403 response
     if (error instanceof CsrfError) {
       return NextResponse.json('Invalid CSRF token', {
-        status: 401,
+        status: 403,
       });
     }
 
@@ -204,8 +212,11 @@ async function getPatterns() {
  * Match URL patterns to specific handlers.
  * @param url
  */
+let cachedPatterns: Awaited<ReturnType<typeof getPatterns>> | null = null;
+
 async function matchUrlPattern(url: string) {
-  const patterns = await getPatterns();
+  cachedPatterns ??= await getPatterns();
+  const patterns = cachedPatterns;
   const input = url.split('?')[0];
 
   for (const pattern of patterns) {
@@ -230,15 +241,23 @@ function setRequestId(request: Request) {
  * @description Create a middleware with enhanced headers applied (if applied).
  * This is disabled by default. To enable set ENABLE_STRICT_CSP=true
  */
-async function createResponseWithSecureHeaders() {
+async function createResponseWithSecureHeaders(response: NextResponse) {
   const enableStrictCsp = process.env.ENABLE_STRICT_CSP ?? 'false';
 
   // we disable ENABLE_STRICT_CSP by default
   if (enableStrictCsp === 'false') {
-    return {};
+    return response;
   }
 
   const { createCspResponse } = await import('./lib/create-csp-response');
+  const cspResponse = await createCspResponse();
 
-  return createCspResponse();
+  // set the CSP headers on the i18n response
+  if (cspResponse) {
+    for (const [key, value] of cspResponse.headers.entries()) {
+      response.headers.set(key, value);
+    }
+  }
+
+  return response;
 }