Usage with AuthJS / NextAuth v5

[ScreamZ]

Hello,

I know it's a very common question, but I have not been able to found the answer.

Currently I have an app using [locale] for most of it's parts. But i still have non translated endpoints, like for API endpoints.

In AuthJS, there is no more middleware configuration and most of things are handled by auth function.
You can override pages that are displayed to user using a pages property and by providing a link.

The issue is that I'm not sure how to write the correct link, as I don't have access to the locale here.

The only solution i think would be viable is using domain routing. Therefore as its relative link, there is no issue.

Do you have any other idea ?

[ScreamZ]

AuthJS is so bad for i18n :'( can't achieve something working

[amannn]

I haven't looked into Auth.js v5 yet, there's a pending PR for it here: #598. I'm currently waiting for a stable release of the library before investigating further, but maybe you can find some relevant information there or exchange ideas with other users of the library!

[amannn]

Ah, I guess you've been down that road already 😅

nextauthjs/next-auth#9536 (comment)

[ScreamZ]

@amannn Thanks for your help and I completely understand your point of not working on beta channel.

After some investigations this gets so hacky, but I don't think this is related to next-intl but rather next-auth

I've been able to trick things but the URLs get badly redirect.

Created a pathName and my custom page lives in app/[locale]/(standard_layout)/authentication/sign-in/page.tsx

"/authentication/sign-in": {
    fr: "/authentification/connexion",
    en: "/authentication/sign-in",
},
"/authentication/verify-request": {
    fr: "/authentification/verification",
    en: "/authentication/verify-request",
},

my middleware for i18n matches

  matcher: ["/", "/authentication/:path*", "/(en|fr)/:path*"],

then added custom page URL voluntary without any language prefix. I'm betting that the language will be guessed from the fallback header/browser language/cookie or whatever as defined in next-intl.

pages: {
    signIn: "/authentication/sign-in",
    verifyRequest: "/authentication/verify-request",
},

now when i call signIn() from server side I end up on http://localhost:3000/auth/signin?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2Ffr for some reasons. Which makes all my form CSRF invalid. (because wrong URL).

If I refresh the page, i get the proper URL http://localhost:3000/fr/authentification/connexion?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2Ffr and forms are working.

Not sure why there are issue of redirections.

My last attempt will be to use a custom domain along with locale-prefix-never

[ScreamZ]

After some experience, I strongly discourage against using AuthJS, you should consider lucia-auth wich is the best auth service I ever seen yet. You can forge tokens and what you want. Using artic OAuth is easy and with the new 3.22 of next-intl you can manage translations and redirection easy.

If you want a simpler auth system use iron-session

[aarondotdev]

Can you give me example setup of your iron-session and next-intl? I would appreciate it.

[ScreamZ]

Can you give me example setup of your iron-session and next-intl? I would appreciate it.

For basic login/password authentication you just create a login page within the i18n router and a server action or POST route.

The page contains a form that will trigger the server action / route.

Inside the route you check credentials and forge an iron session with the user ID from the database as example ( see the doc it's easy https://github.com/vvo/iron-session )

This will set the cookie for you and then you just have to create a verifyAuth function that you can use anywhere (wrapped by react.cache) that will read the session cookie and returns a user. Check iron session doc for examples.