Using next-auth in middleware to protect api on azure static web app

[MisterB92]

I'm hosting my nextjs project on azure static web app. I successfully implemented next-auth using CredentialsProvider. I want to protect my api endpoints with middleware like this:

import { NextResponse } from 'next/server';
import { getToken } from 'next-auth/jwt';

export async function middleware(req) {
  
  if (req.nextUrl.pathname.startsWith('/api/auth')) {
    // Allow the request to continue without token check
    return NextResponse.next();
  }

  const token = await getToken({ req })
  if (!token) {
    // Not Signed in
    return NextResponse.redirect(new URL('/auth/signin', req.url));
  }

  // Allow the request to continue
  return NextResponse.next();
}
 
export const config = {
  matcher: ['/api/:path*'], // Add your protected routes here
};

This works for the standard domain [uniquename].azurestaticapps.net but when I go to my custom domain app.mydomain.com The token can not be retrieved. Is there a tutorial or instructions for cases like this? My custom domain is added to my static web app and it works if i don't use the middleware (unprotected api's). Also, on [uniquename].azurestaticapps.net everyting works.