Run middleware function on all paths but also use config paths only with next-auth middleware

[viraj071]

I am trying to protect a few pages with next-auth. I also want to redirect not HTTP requests to HTTPS for all requests. Here is my middleware code. How do I make sure that the redirect works for all paths but the next-auth/middleware is applied only to the configured paths in config?

export { default } from "next-auth/middleware"
import { NextRequest, NextResponse } from 'next/server';

export const config = { matcher: ["/jobs/:path*", "/accounts/:path*", "/profile/:path*", "/uploads/:path*"] }


// Force-redirect every HTTP request to HTTPS
function forceHTTPS(req) {
  if (process.env.NODE_ENV === 'production' &&
    req.headers.get('x-forwarded-proto') !== 'https'
    &&
    // This check prevents us from getting trapped in HTTPS localhost if we are
    // testing a production build locally via `next build && next start`; we
    // can use `req.headers.get('host')` to get the true host (e.g.
    // 'example.com'), whereas `req.nextUrl.host` is always
    // 'localhost:3000'
    !req.headers.get('host')?.includes('localhost') && !req.headers.get('host')?.includes('dev')
  ) {
    return NextResponse.redirect(
      `https://${req.headers.get('host')}${req.nextUrl.pathname}`,
      301
    );
  }
}

// Redirect every www request to the non-www equivalent
function redirectWwwToNonWww(req) {
  const host = req.headers.get('host') || '';
  const wwwRegex = /^www\./;
  if (wwwRegex.test(host) && !req.headers.get('host')?.includes('localhost') && !req.headers.get('host')?.includes('dev')) {
    const newHost = host.replace(wwwRegex, '');
    return NextResponse.redirect(`https://${newHost}${req.nextUrl.pathname}`, 301);
  }
}

// Sequentially process an array of middleware functions (this function is to
// avoid repetition and produce cleaner code)
function processMiddlewareFunctions(req, middlewareFns) {
  for (const middlewareFn of middlewareFns) {
    const fnResponse = middlewareFn(req);
    if (fnResponse) {
      return fnResponse;
    }
  }
  return NextResponse.next();
}

export function middleware(req) {
  return processMiddlewareFunctions(req, [
    forceHTTPS,
    redirectWwwToNonWww
  ]);
}

[HXavS]

I invite you the discussion I started on next-auth middleware #4791

As for how to handle redirects and authorization you need to make the middleware run for all pages. (remove matcher Config variable)

Then you can call withAuth function inside middleware.
Use the Authenticate Callback to define pages and authentication criteria, and have passed a function inside the withAuth 1st params to define custom page routing onSuccess to be ran on success.

import { NextResponse } from 'next/server';
import { withAuth } from "next-auth/middleware"

export function middleware(req, ev) {
  //Always will Run

  return withAuth(
    function onSuccess(req, ev) { //function here can run custom logic and return next response.
      console.log(req, ev)
      return NextResponse.next();
    },
    {
      pages: {
        signIn: "/unauthorized" //-> Prevents Login Redirect loop for unauthorized. 
      },
      callbacks: {
        authorized: ({ req, token }) => req.nextUrl.pathname !== "/admin" || token?.userRole === "admin"
      }
    }
  )

}

[viraj071]

Here is the complete solution that worked for me.

import withAuth from "next-auth/middleware";
import { NextResponse } from "next/server";

export { withAuth } from "next-auth/middleware"

// Force-redirect every HTTP request to HTTPS
function forceHTTPS(req) {
    if (process.env.NODE_ENV === 'production' &&
      req.headers?.get('x-forwarded-proto') !== 'https'
      &&
      // This check prevents us from getting trapped in HTTPS localhost if we are
      // testing a production build locally via `next build && next start`; we
      // can use `req.headers.get('host')` to get the true host (e.g.
      // 'example.com'), whereas `req.nextUrl.host` is always
      // 'localhost:3000'
      !req.headers.get('host')?.includes('localhost') && !req.headers.get('host')?.includes('dev')
    ) {
      return NextResponse.redirect(
        `https://${req.headers.get('host')}${req.nextUrl.pathname}`,
        301
      );
    }
  }

  // Redirect every www request to the non-www equivalent
  function redirectWwwToNonWww(req) {
    const host = req.headers.get('host') || '';
    const wwwRegex = /^www\./;
    if (wwwRegex.test(host) && !req.headers.get('host')?.includes('localhost') && !req.headers.get('host')?.includes('dev')) {
      const newHost = host.replace(wwwRegex, '');
      return NextResponse.redirect(`https://${newHost}${req.nextUrl.pathname}`, 301);
    }
  }

  // Sequentially process an array of middleware functions (this function is to
  // avoid repetition and produce cleaner code)
  function processMiddlewareFunctions(req, middlewareFns) {
    for (const middlewareFn of middlewareFns) {
      const fnResponse = middlewareFn(req);
      if (fnResponse) {
        return fnResponse;
      }
    }
  }

  export function middleware(req) {

    const response = processMiddlewareFunctions(req, [
        forceHTTPS,
        redirectWwwToNonWww
    ]);

    if (response) {
        return response;
    }

    // These are protected routes.
    if (req.nextUrl.pathname.startsWith("/jobs") ||
        req.nextUrl.pathname.startsWith("/accounts") ||
        req.nextUrl.pathname.startsWith("/uploads") ||
        req.nextUrl.pathname.startsWith("/profile")) {

        return withAuth(req);
    }

  }

[mkbctrl]

Hey @viraj071 , I am curious if the structure you have here is an outcome of trial an error or is it the right way? I am struggling with similar issue and your example is the first with withAuth inside the middleware I see in my short experience with next-auth middleware