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|.*\\..*).*)"]
}

[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).*)"],
}

[LostI77]

Thank you very much! it is a good solution <33

[frajova]

How can i write my private routes into the comments, if are '/dashboard/:path*' ?

[AlexRixten]

Why does this work if I can get to the /sign-in page when I'm already logged in, there should be a redirect?

[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.

[AlexRixten]

Hello everyone, sorry for my english))) I tried to do this, i understand, that my code is not excellent, but it's working. I tested my code and i didn't find bags. But I will test this code in a future)

//src/routes.ts
export const publicRoutes: string[] = ['/', '/login', '/error'];
export const privateRoutes: string[] = ['/', '/settings'];
export const authRoutes: string[] = ['/login', '/error'];
export const apiAuthPrefix: string = '/api/auth';
export const DEFAULT_LOGIN_REDIRECT: string = '/settings';

//src/middleware.ts
import NextAuth from 'next-auth';
import createMiddleware from 'next-intl/middleware';
import { routing } from './i18n/routing';
import {
  privateRoutes,
  apiAuthPrefix,
  authRoutes,
  DEFAULT_LOGIN_REDIRECT,
  publicRoutes,
} from './routes';
import authConfig from '@/lib/auth/config';

const intlMiddleware = createMiddleware(routing);

const { auth } = NextAuth(authConfig);
export default auth(async function middleware(req) {
  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);

  const isPublicPage = publicPathnameRegex.test(req.nextUrl.pathname);
  const isPrivatePage = privatePathnameRegex.test(req.nextUrl.pathname);

  if (isApiAuthRoute) {
    return;
  }

  if (isPrivatePage) {
    if (isLoggedIn) {
      return intlMiddleware(req);
    }
  }

  if (isPublicPage) {
    if (isLoggedIn) {
      return Response.redirect(new URL(DEFAULT_LOGIN_REDIRECT, nextUrl));
    }
    return intlMiddleware(req);
  }

  if (isAuthRoute) {
    if (isLoggedIn) {
      return Response.redirect(new URL(DEFAULT_LOGIN_REDIRECT, nextUrl));
    }
    return;
  }
  if (!isLoggedIn && !isPublicRoute) {
    let callbackUrl = nextUrl.pathname;
    if (nextUrl.search) {
      callbackUrl += nextUrl.search;
    }
    const encodedCallbackUrl = encodeURIComponent(callbackUrl);
    return Response.redirect(
      new URL(`${authRoutes[0]}?callbackUrl=${encodedCallbackUrl}`, nextUrl)
    );
  }
  return;
});

export const config = {
  // Skip all paths that should not be internationalized
  matcher: ['/((?!api|_next|.*\\..*).*)'],
};

const publicPathnameRegex = RegExp(
  `^(/(${routing.locales.join('|')}))?(${publicRoutes
    .flatMap((p) => (p === '/' ? ['', '/'] : p))
    .join('|')})/?$`,
  'i'
);

const privatePathnameRegex = RegExp(
  `^(/(${routing.locales.join('|')}))?(${privateRoutes
    .flatMap((p) => (p === '/' ? ['', '/'] : p))
    .join('|')})/?$`,
  'i'
);

[barlas]

this is pain