Kinde•13mo ago•

4 replies

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

localhost:3000/wallets

- everything works fine, auth works, i18n works
* accessing

localhost:3000/en/landing

localhost:3000/en/landing

- everything works fine, no auth needed
* when I access

localhost:3000

localhost:3000

my expectation is that traffic is redirected to

/app/landing

/app/landing

(same as

localhost:3000/en/landing

localhost:3000/en/landing

) and no auth would be needed.
Unfortunately

localhost:3000

localhost:3000

pops auth window. When user is logged in, it redirects properly to

localhost:3000/en/landing

localhost:3000/en/landing

Question is, what I am doing wrong that when I am not auth

localhost:3000

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

Kinde•13mo ago•

4 replies

darth0s😺

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

localhost:3000/wallets

- everything works fine, auth works, i18n works
* accessing

localhost:3000/en/landing

localhost:3000/en/landing

- everything works fine, no auth needed
* when I access

localhost:3000

localhost:3000

my expectation is that traffic is redirected to

/app/landing

/app/landing

(same as

localhost:3000/en/landing

localhost:3000/en/landing

) and no auth would be needed.
Unfortunately

localhost:3000

localhost:3000

pops auth window. When user is logged in, it redirects properly to

localhost:3000/en/landing

localhost:3000/en/landing

Question is, what I am doing wrong that when I am not auth

localhost:3000

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

How to handle root redirect before Auth and i18n case

How to handle root redirect before Auth and i18n case

Similar Threads

Similar Threads

Similar Threads