fix: fix the form page issue and improve the middleware

Author: AliKdhim87

apps/pdc-frontend/src/app/[locale]/(openFormsLayout)/form/[...slug]/page.tsx

@@ -1,3 +1,4 @@
+import { getPathAndSearchParams } from '@frameless/utils';
 import { headers } from 'next/headers';
 import Link from 'next/link';
 import React from 'react';
@@ -12,18 +13,28 @@ type FormPageProps = {
     locale: string;
     slug: [formId: string, formStep: string];
   };
+  searchParams: {
+    formType: string;
+  };
 };
 
 const FormPage = async ({
   params: {
     locale,
     slug: [formId],
   },
+  searchParams,
 }: FormPageProps) => {
   const { t } = await useTranslation(locale, 'common');
   const nonce = headers().get('x-nonce') || '';
   const formInfo = await openFormValidator({ formId });
 
+  const { pathSegments: formPathSegments } = getPathAndSearchParams({
+    translations: t,
+    segments: [searchParams.formType, formId],
+    locale,
+  });
+
   return (
     <>
       <Breadcrumbs
@@ -58,6 +69,7 @@ const FormPage = async ({
             sdkUrl={createOpenFormsSdkUrl()?.href || ''}
             cssUrl={createOpenFormsCssUrl()?.href || ''}
             nonce={nonce}
+            basePath={`/${formPathSegments}`}
             slug={formId}
             fallback={formInfo ? <Heading1>{formInfo.name}</Heading1> : null}
           />

apps/pdc-frontend/src/components/OpenFormsEmbed/OpenFormsEmbed.tsx

@@ -1,6 +1,4 @@
-'use client';
 import { OpenFormsContainer } from '@utrecht/open-forms-container-react/dist/css';
-import { usePathname } from 'next/navigation';
 import React, { type ReactNode, useId } from 'react';
 import { OpenFormsNLDesignSystem } from './OpenFormsNLDesignSystem';
 import { OpenFormsScript } from './OpenFormsScript';
@@ -17,22 +15,17 @@ export type OpenFormsEmbedProps = {
   sdkUrl: string;
   cssUrl: string;
   fallback?: ReactNode;
+  basePath?: string;
 };
 
-export const OpenFormsEmbed = ({ nonce, slug, apiUrl, sdkUrl, cssUrl, fallback }: OpenFormsEmbedProps) => {
+export const OpenFormsEmbed = ({ nonce, slug, apiUrl, sdkUrl, cssUrl, fallback, basePath }: OpenFormsEmbedProps) => {
   const id = useId();
-  const pathname = usePathname();
 
   return (
     <RichText>
       <OpenFormsContainer>
         <OpenFormsNLDesignSystem targetId={id}>
-          <div
-            id={id}
-            data-base-url={apiUrl}
-            data-form-id={slug}
-            data-base-path={pathname.split('/').slice(0, 4).join('/')}
-          >
+          <div id={id} data-base-url={apiUrl} data-form-id={slug} data-base-path={basePath}>
             {fallback}
           </div>
         </OpenFormsNLDesignSystem>

apps/pdc-frontend/src/middleware.test.ts

@@ -0,0 +1,129 @@
+/**
+ * @jest-environment node
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { middleware } from './middleware';
+import * as util from './util';
+import * as handleFormTypeRewriteModule from './util/handleFormTypeRewrite';
+
+jest.mock('./util');
+jest.mock('./util/handleFormTypeRewrite');
+
+const mockFetchData = util.fetchData as jest.Mock;
+const mockHandleFormTypeRewrite = handleFormTypeRewriteModule.handleFormTypeRewrite as jest.Mock;
+
+const createMockRequest = (
+  options: Partial<{
+    pathname: string;
+    search: string;
+    cookies: Record<string, string>;
+    headers: Record<string, string>;
+    referer?: string;
+  }> = {},
+) => {
+  const { pathname = '/foo', search = '', cookies = {}, headers = {}, referer } = options;
+
+  const url = `https://example.com${pathname}${search}`;
+  const reqHeaders = new Headers(headers);
+  if (referer) reqHeaders.set('referer', referer);
+
+  return {
+    nextUrl: {
+      pathname,
+      search,
+      href: url,
+      clone: () => ({ pathname, search, href: url }),
+    },
+    url,
+    cookies: {
+      has: (name: string) => Object.prototype.hasOwnProperty.call(cookies, name),
+      get: (name: string) => (cookies[name] ? { value: cookies[name] } : undefined),
+      set: jest.fn(),
+    },
+    headers: reqHeaders,
+  } as unknown as NextRequest;
+};
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  mockFetchData.mockResolvedValue({ data: { products: { data: [] } } });
+  mockHandleFormTypeRewrite.mockReturnValue(undefined);
+});
+
+describe('middleware', () => {
+  it('redirects to locale-prefixed path if missing', async () => {
+    const req = createMockRequest({ pathname: '/foo' });
+    const res = await middleware(req);
+    expect(res instanceof NextResponse).toBe(true);
+    // Assert that the redirect location matches the expected locale-prefixed path
+    const locationHeader = (res as NextResponse).headers.get('location');
+    const regex = /^https:\/\/example\.com\/[a-z]{2}\/foo/;
+    expect(locationHeader).toMatch(regex);
+  });
+
+  it('skips processing for icon and chrome paths', async () => {
+    const req = createMockRequest({ pathname: '/icon-192.png' });
+    const res = await middleware(req);
+    expect(res).toBeInstanceOf(NextResponse);
+  });
+
+  it('sets language cookie from referer if present', async () => {
+    const req = createMockRequest({
+      pathname: '/nl/foo',
+      headers: {},
+      referer: 'https://example.com/nl/bar',
+    });
+    const res = await middleware(req);
+    expect(res).toBeInstanceOf(NextResponse);
+    // Should set cookie to 'nl'
+    expect(res.cookies.get('i18next')?.value).toBe('nl');
+  });
+
+  it('redirects to new URL if old slug matches', async () => {
+    const redirectUrl = new URL('https://example.com/nl/new-slug');
+    (util.getRedirectURL as jest.Mock).mockReturnValue(redirectUrl);
+    const req = createMockRequest({ pathname: '/nl/old-slug' });
+    const res = await middleware(req);
+    expect(res).toBeInstanceOf(NextResponse);
+    expect((res as NextResponse).status).toBe(308);
+    expect((res as NextResponse).headers.get('location')).toBe(redirectUrl.toString());
+  });
+
+  it('calls handleFormTypeRewrite and returns its response if present', async () => {
+    const fakeResponse = NextResponse.next();
+    mockHandleFormTypeRewrite.mockReturnValue(fakeResponse);
+
+    // Ensure this locale is one of your supported locales in `languages`
+    const req = createMockRequest({ pathname: '/nl/formulier/demo' });
+
+    // Also ensure getRedirectURL returns undefined
+    (util.getRedirectURL as jest.Mock).mockReturnValue(undefined);
+
+    const res = await middleware(req);
+
+    expect(mockHandleFormTypeRewrite).toHaveBeenCalled();
+    expect(res).toBe(fakeResponse);
+  });
+
+  it('returns NextResponse.next with security headers if no redirect/rewrite', async () => {
+    const req = createMockRequest({ pathname: '/nl/foo' });
+    const res = await middleware(req);
+    const csp = res.headers.get('Content-Security-Policy');
+    expect(csp).toBeDefined();
+    expect(csp).toContain('default-src');
+    expect(csp).toContain('nonce-');
+  });
+
+  it('uses locale from cookie if present', async () => {
+    const req = createMockRequest({ pathname: '/foo', cookies: { i18next: 'nl' } });
+    await middleware(req);
+    expect(mockFetchData).toHaveBeenCalledWith(expect.objectContaining({ variables: { locale: 'nl' } }));
+  });
+
+  it('uses fallbackLng if no locale detected', async () => {
+    const req = createMockRequest({ pathname: '/foo' });
+    await middleware(req);
+    expect(mockFetchData).toHaveBeenCalledWith(expect.objectContaining({ variables: expect.any(Object) }));
+  });
+});

apps/pdc-frontend/src/middleware.ts

@@ -4,35 +4,62 @@ import { getContentSecurityPolicy } from '@/util/cspConfig';
 import { fallbackLng, languages } from './app/i18n/settings';
 import { GET_PRODUCTS_OLD_SLUGS } from './query';
 import { fetchData, getRedirectURL, getStrapiGraphqlURL } from './util';
+import { handleFormTypeRewrite } from './util/handleFormTypeRewrite';
+import { withSecurityHeaders } from './util/withSecurityHeaders'; // ✅ Add this line
 import { GetProductsOldSlugsQuery } from '../gql/graphql';
 
 acceptLanguage.languages(languages);
 
 export const config = {
   matcher: ['/((?!api|_next/static|_next/image|assets|favicon.ico|sw.js).*)'],
-  // https://nextjs.org/docs/messages/edge-dynamic-code-evaluation
   unstable_allowDynamic: ['**/node_modules/lodash.mergewith/index.js'],
 };
 
 const cookieName = 'i18next';
+/**
+ * 🌐 Global Middleware
+ *
+ * This middleware handles localization, form rewrites, legacy URL redirects,
+ * and security headers for all incoming requests.
+ *
+ * ⚠️ ORDER MATTERS – Execution is top-down and early returns stop processing.
+ *
+ * Key Responsibilities:
+ * 1. ✅ Set security headers (CSP, Referrer-Policy, etc.) via `withSecurityHeaders`
+ * 2. ✅ Skip unnecessary processing for static/icon/chrome-related assets
+ * 3. ✅ Redirect to a locale-prefixed path if not present (e.g., /nl, /en)
+ * 4. ✅ Rewrite `/form` or `/formulier` URLs to include `formType` query param
+ * 5. ✅ Set language cookie from Referer if available
+ * 6. ✅ Redirect legacy URLs (e.g., old slugs from CMS)
+ * 7. ✅ Return a default response with all security headers applied
+ *
+ * ⚠️ CRITICAL NOTES:
+ * - `NextResponse.redirect()` or `NextResponse.rewrite()` will immediately return a response.
+ *   👉 Ensure critical logic like `handleFormTypeRewrite` runs BEFORE any potential redirect.
+ *
+ * - Always wrap your `NextResponse` with `withSecurityHeaders()` to ensure security headers are applied consistently.
+ *   This includes responses returned by `next()`, `rewrite()`, and `redirect()`.
+ *
+ * - Nonce generation is included to support strict CSP rules for inline styles/scripts.
+ *
+ * See `withSecurityHeaders.ts` and `handleFormTypeRewrite.ts` for supporting logic.
+ */
 
 export async function middleware(req: NextRequest) {
-  let locale;
-  if (req.cookies.has(cookieName)) locale = acceptLanguage.get(req.cookies.get(cookieName)?.value);
-  if (!locale) locale = acceptLanguage.get(req.headers.get('Accept-Language'));
-  if (!locale) locale = fallbackLng;
+  const locale =
+    (req.cookies.has(cookieName) && acceptLanguage.get(req.cookies.get(cookieName)?.value)) ||
+    acceptLanguage.get(req.headers.get('Accept-Language')) ||
+    fallbackLng;
 
   const { data } = await fetchData<{ data: GetProductsOldSlugsQuery }>({
     url: getStrapiGraphqlURL(),
     query: GET_PRODUCTS_OLD_SLUGS,
-    variables: {
-      locale,
-    },
+    variables: { locale },
   });
 
   const nonce = Buffer.from(crypto.randomUUID()).toString('base64');
-
   const cspHeader = getContentSecurityPolicy({ nonce, node_env: process.env.NODE_ENV });
+
   const headers = new Headers(req.headers);
   headers.set('X-Nonce', nonce);
 
@@ -43,41 +70,46 @@ export async function middleware(req: NextRequest) {
     'Permissions-Policy': 'geolocation=(self)',
   };
 
-  if (req.nextUrl.pathname.indexOf('icon') > -1 || req.nextUrl.pathname.indexOf('chrome') > -1)
-    return NextResponse.next();
+  const pathname = req.nextUrl.pathname;
+
+  // Skip icons and Chrome-specific routes
+  if (pathname.includes('icon') || pathname.includes('chrome')) {
+    return withSecurityHeaders(NextResponse.next(), responseHeaders);
+  }
+
+  // Redirect if locale is missing from path
+  if (!languages.some((loc) => pathname.startsWith(`/${loc}`)) && !pathname.startsWith('/_next')) {
+    const redirectUrl = new URL(`/${locale}${pathname}${req.nextUrl.search}`, req.url);
+    return withSecurityHeaders(NextResponse.redirect(redirectUrl), responseHeaders);
+  }
 
-  // Redirect if lng in path is not supported
-  if (
-    !languages.some((loc) => req.nextUrl.pathname.startsWith(`/${loc}`)) &&
-    !req.nextUrl.pathname.startsWith('/_next')
-  ) {
-    return NextResponse.redirect(new URL(`/${locale}${req.nextUrl.pathname}${req.nextUrl.search}`, req.url));
+  // Handle /form or /formulier rewrite
+  const formRewriteResponse = handleFormTypeRewrite(req, headers, responseHeaders);
+  if (formRewriteResponse) {
+    return withSecurityHeaders(formRewriteResponse, responseHeaders);
   }
 
+  // Set cookie based on referer
   if (req.headers.has('referer')) {
-    const refererUrl = new URL(req.headers.get('referer') as any);
+    const refererUrl = new URL(req.headers.get('referer') as string);
     const lngInReferer = languages.find((l) => refererUrl.pathname.startsWith(`/${l}`));
-    const response = NextResponse.next({
-      request: { headers },
-      headers: responseHeaders,
-    });
+    const response = withSecurityHeaders(NextResponse.next({ request: { headers } }), responseHeaders);
     if (lngInReferer) response.cookies.set(cookieName, lngInReferer);
     return response;
   }
 
-  // Fetches the redirect URL for a given request if the current path matches any old slugs.
-  const url = getRedirectURL({
+  // Redirect legacy slugs
+  const redirectUrl = getRedirectURL({
     url: req.nextUrl.clone(),
-    currentPathname: req.nextUrl.pathname,
+    currentPathname: pathname,
     data: data.products?.data,
   });
-  // Use 308 for permanent redirects to inform browsers and search engines that the resource has moved permanently.
-  if (url && url.toString() !== req.nextUrl.href) return NextResponse.redirect(url, 308);
 
-  headers.set('x-pathname', req.nextUrl.pathname);
+  if (redirectUrl && redirectUrl.toString() !== req.nextUrl.href) {
+    return withSecurityHeaders(NextResponse.redirect(redirectUrl, 308), responseHeaders);
+  }
 
-  return NextResponse.next({
-    request: { headers },
-    headers: responseHeaders,
-  });
+  // Default: return regular response with headers
+  headers.set('x-pathname', pathname);
+  return withSecurityHeaders(NextResponse.next({ request: { headers } }), responseHeaders);
 }