How to construct the authjs middleware with next-international middleware in a next js 14 project ??

[Robin-Afg]

Hello,

I think in the Next Auth(V5) which is released recently they have changed a couple of things so the pervious workarounds does not really help in my knowledge. My middleware code is down below and i really don't know how to chain this two middleware. Can I request a reproduction of this code Thanks again

import { createI18nMiddleware } from "next-international/middleware";
import NextAuth from "next-auth";
import authConfig from "./auth.config";
import {
  DEFAULT_LOGIN_REDIRECT,
  apiAuthPrefix,
  authRoutes,
  publicRoutes,
} from "@/routes";

const { auth } = NextAuth(authConfig);

const I18Middleware = createI18nMiddleware({
  locales: ["en", "dr", "ps"],
  defaultLocale: "en",
});
return I18Middleware(req);

export default auth((req) => {
  // req.auth
  const { nextUrl } = req;
  const isLoggedIn = !!req.auth;
  const isApiAuthRoute = nextUrl.pathname.startsWith(apiAuthPrefix);
  const isPublicRoute = publicRoutes.includes(nextUrl.pathname);
  const isAuthRoute = authRoutes.includes(nextUrl.pathname);
  

  if (isApiAuthRoute) {
    return null;
  }

  if (isAuthRoute) {
    if (isLoggedIn) {
      return Response.redirect(new URL(DEFAULT_LOGIN_REDIRECT, nextUrl));
    }
    return null;
  }

  if (!isLoggedIn && !isPublicRoute) {
    return Response.redirect(new URL("/auth/login", nextUrl));
  }
 

  
   return null;
});

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
};

[ChoaibMouhrach]

Did you find a solution ?

[murphcfa]

Did you find a solution? Also running into this

[Robin-Afg]

Actually I couldn't find any sloutions for this, to be honest I didn't try but I changed to clerck js authentication and it worked

[abdulbasit0-UI]

How can I exclude dynamic routes from the middleware

[0x963D]

This worked for me

"next": "^14.1.0",
"react": "18.2.0",
"next-auth": "5.0.0-beta.13",
"next-intl": "^3.4.2",

import type { NextRequest } from "next/server"
import createIntlMiddleware from "next-intl/middleware"

import { auth } from "@/auth"

import { defaultLocale, localePrefix, locales } from "./messages/config"

const publicPages = [
  "/",
  "/sign-in",
  "/sign-up",
  "/forgot-password",
  "/reset-password",
  "/unauthorized",
  "/contact",
  "/about",
  "/help",
  "/privacy-policy",
  "/terms-of-service",
  "/cookie-policy",
  "/end-user-license-agreement"
]

const intlMiddleware = createIntlMiddleware({
  locales,
  defaultLocale,
  localePrefix
})

const authMiddleware = auth((req) => {
  // private routes here
  const session = req.auth

  if (session) {
    return intlMiddleware(req)
  }
})

export default function middleware(req: NextRequest) {
  const publicPathnameRegex = RegExp(
    `^(/(${locales.join("|")}))?(${publicPages.flatMap((p) => (p === "/" ? ["", "/"] : p)).join("|")})/?$`,
    "i"
  )
  const isPublicPage = publicPathnameRegex.test(req.nextUrl.pathname)

  if (isPublicPage) {
    return intlMiddleware(req)
  } else {
    return (authMiddleware as any)(req)
  }
}

export const config = {
  matcher: ["/((?!api|_next|.*\\..*).*)"]
}

[CharryLee0426]

This works for me.

[aimehai]

Work for me too

[j4ck3]

i get:
Server Error
TypeError: Cannot read properties of undefined (reading 'get')
from: return intlMiddleware(req).
someone any clues why?

[gilesbradshaw]

I've used "next-easy-middlewares"

import { auth } from "auth"
import { auth as auth2 } from "auth-2"
import { createMiddleware } from "next-easy-middlewares"

const middleware = {
  auth,
  auth2,
}
export default createMiddleware(middleware)

//import authConfig from "./auth.config"
//export const { auth: middleware } = NextAuth(authConfig)

// Or like this if you need to do something here.
// export default auth((req) => {
//   console.log(req.auth) //  { session: { user: { ... } } }
// })

// Read more: https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher
export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
}

[ARiyou2000]

Let nextAuth handle it first and then pass that request to I18nMiddleware

import { getToken } from "next-auth/jwt";
import { withAuth } from "next-auth/middleware";
import { createI18nMiddleware } from "next-international/middleware";


const I18nMiddleware = createI18nMiddleware({
  locales: ["en", "fa"],
  defaultLocale: "fa",
});


const withAuthMiddleware = withAuth(
  async function middleware(req) {
    const token = await getToken({ req });
    const isAuth = !!token;
    const isAuthPage =
      req.nextUrl.pathname.startsWith("/login") ||
      req.nextUrl.pathname.startsWith("/register");

    if (isAuthPage) {
      if (isAuth) {
        return I18nMiddleware(req);
        // return NextResponse.redirect(new URL("/dashboard", req.url));
      }

      return null;
    }

    if (!isAuth) {
      let from = req.nextUrl.pathname;
      if (req.nextUrl.search) {
        from += req.nextUrl.search;
      }

      return I18nMiddleware(req);
      // return NextResponse.redirect(
      //   new URL(`/login?from=${encodeURIComponent(from)}`, req.url),
      // );
    }
  },
  {
    callbacks: {
      async authorized() {
        // This is a work-around for handling redirect on auth pages.
        // We return true here so that the middleware function above
        // is always called.
        return true;
      },
    },
  },
);

export default withAuthMiddleware;

export const config = {
  matcher: [
    "/((?!api|static|.*\\..*|_next|favicon.ico|robots.txt).*)",
  ],
};

[mifrej]

This is v4 implementation

[TanzimHossain2]

You provided the code for v4, not for v5.

[TanzimHossain2]

Combining NextAuth (v5) and Next-Intl middleware in a Next.js application can be efficiently achieved by chaining middleware functions. This approach allows you to manage authentication and internationalization in a modular and maintainable manner. Below is a step-by-step guide on how to implement this:

1. Create a Chain Utility: This utility will handle the chaining of multiple middleware functions.

2. Implement the Internationalization Middleware: This middleware will handle locale detection and redirection.

3. Implement the Authentication Middleware: This middleware will handle authentication using NextAuth.

4. Combine the Middlewares: Use the chain utility to combine both middlewares.

Step 1: Create a Chain Utility

First, create a chain.ts file to handle the chaining of middleware functions.

// chain.ts
import { NextMiddlewareResult } from 'next/dist/server/web/types'
import { NextResponse } from 'next/server'
import type { NextFetchEvent, NextRequest } from 'next/server'

export type CustomMiddleware = (
  request: NextRequest,
  event: NextFetchEvent,
  response: NextResponse
) => NextMiddlewareResult | Promise<NextMiddlewareResult>

type MiddlewareFactory = (middleware: CustomMiddleware) => CustomMiddleware

export function chain(
  functions: MiddlewareFactory[],
  index = 0
): CustomMiddleware {
  const current = functions[index]

  if (current) {
    const next = chain(functions, index + 1)
    return current(next)
  }

  return (
    request: NextRequest,
    event: NextFetchEvent,
    response: NextResponse
  ) => {
    return response
  }
}

Step 2: Implement the Internationalization Middleware

Create a file withI18nMiddleware.ts to handle the locale detection and redirection.

// withI18nMiddleware.ts
import { NextResponse } from 'next/server'
import type { NextFetchEvent, NextRequest } from 'next/server'

import { i18n } from '@/i18n.config'
import { match as matchLocale } from '@formatjs/intl-localematcher'
import Negotiator from 'negotiator'
import { CustomMiddleware } from './chain'

function getLocale(request: NextRequest): string | undefined {
  const negotiatorHeaders: Record<string, string> = {}
  request.headers.forEach((value, key) => (negotiatorHeaders[key] = value))

  // @ts-ignore locales are readonly
  const locales: string[] = i18n.locales
  const languages = new Negotiator({ headers: negotiatorHeaders }).languages()

  const locale = matchLocale(languages, locales, i18n.defaultLocale)
  return locale
}

export function withI18nMiddleware(middleware: CustomMiddleware) {
  return async (
    request: NextRequest,
    event: NextFetchEvent,
    response: NextResponse
  ) => {
    const pathname = request.nextUrl.pathname
    const pathnameIsMissingLocale = i18n.locales.every(
      locale => !pathname.startsWith(`/${locale}/`) && pathname !== `/${locale}`
    )

    if (pathnameIsMissingLocale) {
      const locale = getLocale(request)
      return NextResponse.redirect(
        new URL(
          `/${locale}${pathname.startsWith('/') ? '' : '/'}${pathname}`,
          request.url
        )
      )
    }

    return middleware(request, event, response)
  }
}

Step 3: Implement the Authentication Middleware

Create a file withAuthMiddleware.ts to handle authentication using NextAuth.

// withAuthMiddleware.ts
import { getToken } from 'next-auth/jwt';
import { NextResponse } from 'next/server';
import type { NextFetchEvent, NextRequest } from 'next/server';
import { CustomMiddleware } from './chain';

export function withAuthMiddleware(middleware: CustomMiddleware): CustomMiddleware {
  return async (request: NextRequest, event: NextFetchEvent, response: NextResponse) => {
    const token = await getToken({ req: request, secret: process.env.NEXTAUTH_SECRET });
    if (!token) {
      return NextResponse.redirect(new URL('/api/auth/signin', request.url));
    }

    return middleware(request, event, response);
  };
}

Step 4: Combine the Middlewares

Create a middleware.ts file to chain the internationalization and authentication middlewares.

// middleware.ts
import { chain } from '@/middlewares/chain'
import { withI18nMiddleware } from '@/middlewares/withI18nMiddleware'
import { withAuthMiddleware } from '@/middlewares/withAuthMiddleware'

export default chain([withI18nMiddleware, withAuthMiddleware])

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico|images).*)'],
}

Explanation

1. Chain Utility: The chain function recursively combines middleware functions, ensuring they are executed in sequence.
2. Internationalization Middleware: Detects the locale from the request headers and redirects to the appropriate locale path if missing.
3. Authentication Middleware: Uses NextAuth to authenticate requests.
4. Middleware Composition: In middleware.ts, both middlewares are combined using the chain utility and applied to the specified routes.

By following these steps, you can efficiently combine NextAuth and Next-Intl middleware in your Next.js application, ensuring both authentication and internationalization are seamlessly handled.