My version to make it work with NextAuth/AuthJS 5 and localized pathname

[ScreamZ]

After few experimentation I have a not too bad pattern to work with authjs.

@amannn What do you think?

There might also be a solution other than this one by using a specific domain per language.

Walkthrough

STEP 1 - Create localized SignIn page (and others)

Under app/[locale]/authentication/sign-in/page.tsx I have this:

import { auth, providerMap, signIn } from "@modules/authentication/auth";
import { redirect } from "@modules/navigation";
import { getTranslations } from "next-intl/server";

type Props = {
  searchParams: { callbackUrl: string };
};
export default async function SignInPage({ searchParams: { callbackUrl = "/" } }: Props) {
  const [t, session] = await Promise.all([getTranslations(), auth()]);

  // Handle redirect from oAuth provider
  if (session) redirect(callbackUrl as Parameters<typeof redirect>[0]);

  return (
    <div className="flex flex-col gap-2">
      {Object.values(providerMap).map((provider) => (
        <form
          key={provider.id}
          action={async () => {
            "use server";
            await signIn(provider.id);
          }}
        >
          <button type="submit">{t("Auth.signInWith", { provider: provider.name })}</button>
        </form>
      ))}
    </div>
  );
}

I voluntarily made it simple, make your own design.

STEP 2 - Bridge

Create a /app/auth-router/sign-in/page.tsx or some similar pattern/name, you'll need one page for each action (sign-in, sign-out, etc, or you might need a dynamic route, as u prefer.)

The main issue is that AuthJS doesn't allow to pass localize pathName depending on the current locale. We get rid of this shit and just make a router outside of the [locale] directory and not managed by the middleware. And we leverage the fact that whenever the user come on the app next-intl middleware (or nextjs, I'm not sure) define a NEXT_LOCALE cookie ;)

Important

This is important, this path must not be handled by next-intl middleware otherwise it won't work.

import { cookies } from "next/headers";
import { redirect } from "next/navigation";

export default async function AuthRouterPage({ searchParams }: any) {
  const cookiesList = cookies();
  const locale = cookiesList.get("NEXT_LOCALE")?.value;

  if (locale) redirect(`/${locale}/authentication/sign-in?${new URLSearchParams(searchParams).toString()}`);

  // Fallback if no locale defined
  redirect("/");
}

We just need to use this cookie and construct a nice URL that point to the page on step 1. In my case the URLs are the same in both languages, but you can adapt it if you wish to.

You need to use redirect from next/navigation not the one from next-intl

STEP 3 - Config

Add the bridge to the auth config

 providers,
  pages: {
    signIn: "/auth-router/sign-in", // URL of the bridge.
  },

Enjoy

[amannn]

Awesome, thanks a lot for sharing this @ScreamZ! I haven't looked deeper into Auth.js v5 yet, but made a note about this here: #598 (comment). Will definitely have a closer look once Auth.js v5 is out!