adding Content Security Policy from nextjs to nextauth v5

[pacoyass]

hello, can you help me to add csp to my middelware.js for nextjs 14 and nextauth v5.
this is my initial setup :
auth.js:

// // auth.js
import NextAuth from "next-auth";
import { PrismaAdapter } from "@auth/prisma-adapter";
import { prisma } from "./lib/prisma"; // Ensure this path is correct based on your project structure
import Google from "next-auth/providers/google";
import { authConfig } from "./auth.config";
export const { handlers, signIn, signOut, auth, update } = NextAuth({
  adapter: PrismaAdapter(prisma),
  ...authConfig,

  session: {
    strategy: "jwt", // Store session data in the database
    maxAge: 60,
  },
  providers: [Google],

  callbacks: {
    async session({ session, token }) {
      session.user = token.user;
      session.sessionToken = token.jti;
      session.expires = token.exp * 1000;
      return session;
    },
    async jwt({ token, user, trigger, session }) {
      if (user) {
        token.user = user;
      }
      if (trigger === "update" && session) {
        token = { ...token, user: session };
        return token;
      }
      return token;
    },
  },
});

auth.config.js:

export const authConfig = {
  pages: {
    signIn: '/login',
  },
  callbacks: {
    authorized({ auth, request: { nextUrl}}) {  
      
      // Check if the user is authenticated
      const isLoggedIn = !!auth?.user;
      // Initialize protected routes
      // Here, all routes except the login page is protected
      const isOnProtected = !(nextUrl.pathname.startsWith('/login'));
      
      if (isOnProtected) {
        if (isLoggedIn)  return true;
        return false; // redirect to /login
      } else if (isLoggedIn) {
        // redirected to homepage
        return Response.redirect(new URL('/admin', nextUrl));
      }
      return true;
    },
  },
  providers:[]
}; 

middelware.js:

import NextAuth from "next-auth";
import { authConfig } from "./auth.config";

export default NextAuth(authConfig).auth;


export const config = {
 // https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher
 matcher: [
   {
     source: '/((?!api|_next/static|_next/image|favicon.ico).*)',
     missing: [
       { type: 'header', key: 'next-router-prefetch' },
       { type: 'header', key: 'purpose', value: 'prefetch' },
     ],
   }
 ],
};

authentication work good but when itry to add csp from nextjs docs to middleware like this :

import NextAuth from "next-auth";
import { NextResponse } from "next/server";
import { authConfig } from "./auth.config";

// Initialize the NextAuth middleware with authConfig
const { auth } = NextAuth(authConfig);


export default auth(async function middleware(req) {
  // Generate nonce for CSP
  const nonce = Buffer.from(crypto.randomUUID()).toString('base64');

  // Define CSP header
  const cspHeader = `
    default-src 'self';
    script-src 'self' 'nonce-${nonce}' 'strict-dynamic' 'unsafe-eval';
    style-src 'self' 'nonce-${nonce}';
    img-src 'self' blob: data:;
    font-src 'self';
    object-src 'none';
    base-uri 'self';
    form-action 'self';
    frame-ancestors 'none';
    upgrade-insecure-requests;
  `;

  // Clean up the CSP header by removing extra spaces/newlines
  const contentSecurityPolicyHeaderValue = cspHeader.replace(/\s{2,}/g, ' ').trim();

  // Modify request headers to include the nonce and CSP header
  const requestHeaders = new Headers(req.headers);
  requestHeaders.set('x-nonce', nonce);
  requestHeaders.set('Content-Security-Policy', contentSecurityPolicyHeaderValue);

  // Create a response and include the headers
  const response = NextResponse.next({
    request: {
      headers: requestHeaders,
    },
  });

  // Set the CSP header in the response
  response.headers.set('Content-Security-Policy', contentSecurityPolicyHeaderValue);

  return response;
});

export const config = {
  // Middleware matcher configuration
  matcher: [
    {
      source:  '/((?!api|_next/static|_next/image|favicon.ico|login).*)',
      missing: [
        { type: 'header', key: 'next-router-prefetch' },
        { type: 'header', key: 'purpose', value: 'prefetch' },
      ],
    }
  ],
};

the csp works but auth middleware not working can you help me ?