darth0s😺 Posts - Answer Overflow

darth0s😺

•Created by darth0s😺 on 2/12/2025 in #💻┃support

How to handle root redirect before Auth and i18n case

Hello, I'm pretty stuck on trying to handle multiple things at the same time in the middleware. My stack is NextJS 15, next-international, Kinde. my folder structure is like this:

src/app/
    └── [locale]/
        ├── (auth)/
        │   └── wallets/
        └── (non-auth)/
            └── landing/

src/app/
    └── [locale]/
        ├── (auth)/
        │   └── wallets/
        └── (non-auth)/
            └── landing/

My goal is to protect everything in auth and allow users to freely access landing page while still being able to handle i18n * accessing localhost:3000/wallets - everything works fine, auth works, i18n works * accessing localhost:3000/en/landing - everything works fine, no auth needed * when I access localhost:3000 my expectation is that traffic is redirected to /app/landing (same as localhost:3000/en/landing) and no auth would be needed. Unfortunately localhost:3000 pops auth window. When user is logged in, it redirects properly to localhost:3000/en/landing Question is, what I am doing wrong that when I am not auth localhost:3000 is not redirecting properly and requries auth

// middleware.ts
const I18nMiddleware = createI18nMiddleware({
  locales: ['en', 'pl'],
  defaultLocale: 'en',
  urlMappingStrategy: 'rewrite'
});

const publicPaths = [
  "/en/landing",
  "/pl/landing",
  "/api/auth/setup",
  "/api/auth/login",
  "/api/auth/callback",
  "/api/auth/logout"
];


export default withAuth(
  async function middleware(req: NextRequest) {
    let locale = await getCurrentLocale()
    // Redirect from root path to locale-specific public page
    if (req.nextUrl.pathname === '/') {
      req.nextUrl.pathname = `/${locale??='en'}/landing`;
      return NextResponse.rewrite(req.nextUrl);
    }

    // Otherwise, handle authentication and i18n as normal
    return I18nMiddleware(req);
  },
  {
    publicPaths
  }
);

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

// middleware.ts
const I18nMiddleware = createI18nMiddleware({
  locales: ['en', 'pl'],
  defaultLocale: 'en',
  urlMappingStrategy: 'rewrite'
});

const publicPaths = [
  "/en/landing",
  "/pl/landing",
  "/api/auth/setup",
  "/api/auth/login",
  "/api/auth/callback",
  "/api/auth/logout"
];


export default withAuth(
  async function middleware(req: NextRequest) {
    let locale = await getCurrentLocale()
    // Redirect from root path to locale-specific public page
    if (req.nextUrl.pathname === '/') {
      req.nextUrl.pathname = `/${locale??='en'}/landing`;
      return NextResponse.rewrite(req.nextUrl);
    }

    // Otherwise, handle authentication and i18n as normal
    return I18nMiddleware(req);
  },
  {
    publicPaths
  }
);

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

Would really appreciate help as it looks I've fallen into some antipattern and cannot see through the tunnel vision 🙂

5 replies

Gaming

Programming