Support internationalized routing (with possible solution)

[medihack]

Description 📓

Currently, NextAuth.js does not support internationalized routing. When for example calling signIn() I end up with a URL where my current locale is removed (in contrast to using a link or router).

A very straightforward and non-breaking way would be to allow to set a locale option when using signIn, e.g.

// somewhere above in the component
const { locale } = useRouter()

// Somewhere else in the component
<button onClick={() => signIn(null, { locale })}>Login</button>

That could be easily implemented, for example here with something like this:

const locale = options.locale ? `${options.locale}/` : ""
`${baseUrl}/${locale}signin?${new URLSearchParams({callbackUrl})}`

What do you think?

How to reproduce ☕️

• Have i18n enabled with for example an de locale
• Visit main page, e.g. http://myapp.com/de
• Call signIn() (e.g. by pressing a button)
• One will end up at http://myapp.com/signin?callbackUrl=http://myapp.com/de
• Correct would be http://myapp.com/de/signin?callbackUrl=http://myapp.com/de

Contributing 🙌🏽

Yes, I am willing to help implement this feature in a PR

[balazsorban44]

This has been asked before #1154 but the issue got closed because of the conversation stopped.

I don't think this is high on our list for now, but you can always do it with custom pages:
https://next-auth.js.org/configuration/pages

[joulev]

Could you clarify it a bit more? Because I'm using custom pages but there's currently no way to specify the locale there, either. Or at least I have so far failed to do so.

For example, I'm having /auth/sign-in and /auth/verify-request set up in the config object. With Next.js i18n there is /auth/sign-in but also /xy/auth/sign-in, and the same happens for the other page.

If I call signIn("email", { email: ... }) in /xy/auth/sign-in it would redirect me to /auth/verify-request, but I want it to redirect me to /xy/auth/verify-request. Even setting callbackUrl to /xy/auth/verify-request didn't help (instead the callback is included inside the generated link sent to the email)

[rexfordessilfie]

Yes, what @balazsorban44 said. I answered a similar discussion here. This one happens in middleware.ts, and uses the user's Accept-Language header in the request, but a similar solution could be achieved inside of API Routes or in the new Next.js 13 Route Handlers.

• withAuth middleware pass context locale #6946 (comment)

For API Routes and Route Handlers, its a similar situation of extracting the headers first, and then using the Advanced Initialization to setup the custom pages, once you know what locale you are dealing with.

[medihack]

Ok, I thought it would be good to have at least a (non-closed) open issue as i18n routes are a core feature of Next.js and thereby should be supported somehow in next-auth (at least in the long run) as well.

[sambeaCA]

Hello,

Has anyone figured this part out?

Edit:
On my part, it turns out the issue resided within the matcher in WithAuth middleware.
The paths started with "/:lng/example", which I thought had missing configuration. Turns out, removing :lng fixed it.

[Yelinz]

i18n is pretty essential, would be cool to see a new attempt after the previous work was scrapped.

[hadnet]

This is a shame.

[schilffarth]

Truly unfortunate.

[cellyme]

Sad indeed