withAuth middleware pass context locale

[majkl-zumberi]

Question 💬

Hi, i want to protect the entire site within withAuth middleware
src/middleware.ts

export default withAuth({
  pages: {
    signIn: `/sign-in`,
    error: `/sign-in`,
  },
})

works fine but i experienced that it doesn't pass a locale as i switched my preferred browser locale to en-US

expected:
user navigates to a protected route as guest => redirects to /{context.locale}/sign-in like /en-US/sign-in

how do i achieve this?

project deps. versions:

"next-auth": "^4.19.2",
  "next": "13.1.5",

How to reproduce ☕️

https://codesandbox.io/s/eloquent-khayyam-fxmncr?file=/middleware.ts

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[hamzaseif13]

were you able to solve this issue ?

[rexfordessilfie]

Hello, popping in to see if I can help out! I am going to spell this out in stages.

1. First, I found that you can extract the appropriate browser locale from the "Accept-Language" header which is sent by browsers when they request a page.

2. Next, according to withAuth docs, to specify the redirect URL we would need to specify the appropriate sigIn redirect path in the pages option of withAuth as follows:

export default withAuth({
  callbacks: { ... },
  pages: {
    signIn: "/signIn/{locale}"
  }
})

3. The problem? We don't have access to the req object in the pages option, since it is just an object. This application of withAuth would not work for us because of this. It would work just fine, if it was a callback option instead, similar to authorize where we can have access to the current request. So what is a work around instead?

4. A work around is it next the withAuth middleware deeper into the actual middleware. You can imagine something such as the following:

// middleware.ts
import { withAuth } from "next-auth/middleware";
import { NextFetchEvent } from "next/server";

// More on how NextAuth.js middleware works: https://next-auth.js.org/configuration/nextjs#middleware

export default async function middleware(req: Request, event: NextFetchEvent) {
  const localeStr = req.headers.get("Accept-Language");
  const locale = localeStr?.split(";")[0].split(",")[0]; // Feel free to replace this with any logic for parsing the desired locale

  const withAuthMiddleware = withAuth({
    callbacks: {}, // Whatever callbacks you have
    pages: {
      signIn: `/${locale}/sign-in`,
    },
  });

  // @ts-ignore: types do not narrow as expected but should be fine. Hover over the function to see its types
  return await withAuthMiddleware(req, event);
}

export const config = { matcher: ["/admin", "/me"] };

Hope this helps you! I have a minimal working example here.

UPDATE: An alternate way to call withAuth

// middleware.ts
export default async function middleware(req: Request) {
  // ...
  // @ts-ignore: again type issue here but should be fine
  const response =  withAuth(req, { ... });
  return response
}

[hadnet]

Thanks, bro. Good tip. But when I use credentials like this:

    signIn('credentials', {
      ...data,
      redirect: true,
      callbackUrl: `/${lang}/profile`,
    });

when login fails it still redirects to the signin page by default (/api/auth/signin?error=CredentialsSignin). Do you have any idea why it's not taking into account what's configured in pages in the withAuth?