Nextjs-auth0 use withMiddlewareAuthRequired() within a middleware function?

Help
,
1

Hello,

I am trying to run the withMiddlewareAuthRequired() function inside of a parent middleware function in the middleware.ts file which is a part of Nextjs itself. Nextjs only allows one middleware function to be exported and I want to check the request url pathname before I run the nextjs-auth0 middleware function. For some reason it does not work and the middleware function parameter i call in withMiddlewareAuthRequired() never seems to run. Any idea how I can achieve this? Below is my middleware.ts file

import { NextRequest, NextResponse } from 'next/server';
import { getAccessToken, withMiddlewareAuthRequired } from '@auth0/nextjs-auth0/edge';

export default function middleware(req: NextRequest) {
  const { pathname } = req.nextUrl;
  console.log(pathname);

  if (pathname.startsWith('/api/v1/user/register')) {
    console.log('############ REGISTER HANDLER');
    // do something that does not require auth
    return NextResponse.next();
  } else 
  if (pathname.startsWith('/api/v1')) {
    console.log('############ API HANDLER');
    withMiddlewareAuthRequired(async function middleware(req) {
      const res = NextResponse.next();
      const { accessToken } = await getAccessToken(req, res);
      const requestHeaders = new Headers(req.headers);
      requestHeaders.set('Authorization', `Bearer ${accessToken as string}`);
      const url = `rest api endpoint`;
      return NextResponse.rewrite(url, {
        request: {
          headers: requestHeaders,
        },
      });
    });
  } else if (pathname.startsWith('/api/graphql')) {
    console.log('############ GQL HANDLER');
    withMiddlewareAuthRequired(async function middleware(req) {
      const res = NextResponse.next();
      const { accessToken } = await getAccessToken(req, res);
      const requestHeaders = new Headers(req.headers);
      requestHeaders.set('Authorization', `Bearer ${accessToken as string}`);
      const url = `graphql api endpoint`;
      return NextResponse.rewrite(url, {
        request: {
          headers: requestHeaders,
        },
      });
    });
  } else {
    console.log('############ EVERYTHING ELSE HANDLER');
    withMiddlewareAuthRequired();
    return NextResponse.next();
  }
}
// MATCHES ALL PATHS EXCEPT THOSE BELOW, note the `|$` at the end, that will also match the base path (index)
export const config = {
  matcher: [
    '/((?!api/auth|images|site.webmanifest|_next/static|_next/image|favicon.ico|favicon-16x16.png|favicon-32x32.png|apple-touch-icon.png|android-chrome-192x192.png|android-chrome-512x512.png|mstile-150x150.png|safari-pinned-tab.svg|version|$).*)',
  ],
};
1 Like
2

Hey man, I don’t know if you got it but I was facing the same issue recently but was able to make it work.

Your issue is that you’re using withMiddlewareAuthRequired as a standalone function call but withMiddlewareAuthRequired() only returns in itself the actual middleware function.

Calling it in this manner worked for me:

export async function middleware(req: NextRequest, ev: NextFetchEvent){
    if (isAuth0Used) {
        const auth0Middleware = withMiddlewareAuthRequired()
        return auth0Middleware(req, ev)
    }
    return NextResponse.next()
}

Hope this helps!