Change from NextAuth v4 syntax to v5 syntaxes

examples/example-next-13-next-auth-v5/README.md

@@ -0,0 +1,7 @@
+# example-next-13-next-auth-v5
+
+An example that showcases the usage of `next-intl` together with Auth.js v5 in the `app` directory of Next.js 13.
+
+**Credentials**: admin / admin
+
+Many thanks to [narakhan](https://github.com/narakhan) for [sharing his middleware implementation](https://github.com/amannn/next-intl/pull/149#issuecomment-1509990635)!

examples/example-next-13-next-auth-v5/auth.ts

@@ -0,0 +1,24 @@
+import NextAuth from 'next-auth';
+import CredentialsProvider from 'next-auth/providers/credentials';
+
+export const { auth, signIn, signOut } = NextAuth({
+  providers: [
+    CredentialsProvider({
+      name: 'Credentials',
+      credentials: {
+        username: { type: 'text' },
+        password: { type: 'password' },
+      },
+      authorize(credentials) {
+        if (
+          credentials?.username === 'admin' &&
+          credentials.password === 'admin'
+        ) {
+          return { id: '1', name: 'admin' };
+        }
+
+        return null;
+      },
+    }),
+  ],
+});

examples/example-next-13-next-auth-v5/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "example-next-13-next-auth-v5",
+  "version": "2.14.3",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "lint": "eslint src && tsc",
+    "test": "playwright test",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "14.0.1",
+    "next-auth": "^5.0.0-beta.3",
+    "next-intl": "latest",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.28.1",
+    "@types/lodash": "^4.14.176",
+    "@types/node": "^17.0.23",
+    "@types/react": "^18.2.5",
+    "eslint": "^8.46.0",
+    "eslint-config-molindo": "^7.0.0",
+    "eslint-config-next": "^13.4.0",
+    "typescript": "^5.0.0"
+  }
+}

examples/example-next-13-next-auth-v5/src/app/[locale]/Index.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import Link from 'next/link';
+import {Session} from 'next-auth';
+import {signOut} from 'auth';
+import {useLocale, useTranslations} from 'next-intl';
+import PageLayout from '../../components/PageLayout';
+
+type Props = {
+  session: Session | null;
+};
+
+export default function Index({session}: Props) {
+  const t = useTranslations('Index');
+  const locale = useLocale();
+
+  function onLogoutClick() {
+    signOut();
+  }
+
+  return (
+    <PageLayout title={t('title')}>
+      {session ? (
+        <>
+          <p>{t('loggedIn', {username: session.user?.name})}</p>
+          <p>
+            <Link href={locale + '/secret'}>{t('secret')}</Link>
+          </p>
+          <button onClick={onLogoutClick} type="button">
+            {t('logout')}
+          </button>
+        </>
+      ) : (
+        <>
+          <p>{t('loggedOut')}</p>
+          <Link href={locale + '/login'}>{t('login')}</Link>
+        </>
+      )}
+    </PageLayout>
+  );
+}

examples/example-next-13-next-auth-v5/src/app/[locale]/login/page.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import {useRouter} from 'next/navigation';
+import {signIn} from 'auth';
+import {useLocale, useTranslations} from 'next-intl';
+import {FormEvent, useState} from 'react';
+import PageLayout from '../../../components/PageLayout';
+
+export default function Login() {
+  const locale = useLocale();
+  const t = useTranslations('Login');
+  const [error, setError] = useState<string>();
+  const router = useRouter();
+
+  function onSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (error) setError(undefined);
+
+    const formData = new FormData(event.currentTarget);
+    signIn('credentials', {
+      username: formData.get('username'),
+      password: formData.get('password'),
+      redirect: false
+    }).then((result) => {
+      if (result?.error) {
+        setError(result.error);
+      } else {
+        router.push('/' + locale);
+      }
+    });
+  }
+
+  return (
+    <PageLayout title={t('title')}>
+      <form
+        action="/api/auth/callback/credentials"
+        method="post"
+        onSubmit={onSubmit}
+        style={{display: 'flex', flexDirection: 'column', gap: 10, width: 300}}
+      >
+        <label style={{display: 'flex'}}>
+          <span style={{display: 'inline-block', flexGrow: 1, minWidth: 100}}>
+            {t('username')}
+          </span>
+          <input name="username" type="text" />
+        </label>
+        <label style={{display: 'flex'}}>
+          <span style={{display: 'inline-block', flexGrow: 1, minWidth: 100}}>
+            {t('password')}
+          </span>
+          <input name="password" type="password" />
+        </label>
+        {error && <p>{t('error', {error})}</p>}
+        <button type="submit">{t('submit')}</button>
+      </form>
+    </PageLayout>
+  );
+}

examples/example-next-13-next-auth-v5/src/app/[locale]/page.tsx

@@ -0,0 +1,7 @@
+import auth from 'auth';
+import Index from './Index';
+
+export default async function IndexPage() {
+  const session = await auth();
+  return <Index session={session} />;
+}

examples/example-next-13-next-auth-v5/src/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,6 @@
+import NextAuth from 'next-auth';
+import auth from '../../../../../auth';
+
+const handler = NextAuth(auth);
+
+export { handler as GET, handler as POST };

examples/example-next-13-next-auth-v5/src/middleware.tsx

@@ -0,0 +1,49 @@
+import {NextRequest} from 'next/server';
+import {auth} from 'auth';
+import createIntlMiddleware from 'next-intl/middleware';
+
+const locales = ['en', 'de'];
+const publicPages = [
+  '/',
+  '/login'
+  // (/secret requires auth)
+];
+
+const intlMiddleware = createIntlMiddleware({
+  locales,
+  defaultLocale: 'en'
+});
+
+const authMiddleware = auth(
+  // Note that this callback is only invoked if
+  // the `authorized` callback has returned `true`
+  // and not for pages listed in `pages`.
+  (req) => intlMiddleware(req),
+  {
+    callbacks: {
+      authorized: ({token}) => token != null
+    },
+    pages: {
+      signIn: '/login'
+    }
+  }
+);
+
+export default function middleware(req: NextRequest) {
+  const publicPathnameRegex = RegExp(
+    `^(/(${locales.join('|')}))?(${publicPages.join('|')})?/?$`,
+    'i'
+  );
+  const isPublicPage = publicPathnameRegex.test(req.nextUrl.pathname);
+
+  if (isPublicPage) {
+    return intlMiddleware(req);
+  } else {
+    return (authMiddleware as any)(req);
+  }
+}
+
+export const config = {
+  // Skip all paths that should not be internationalized
+  matcher: ['/((?!api|_next|.*\\..*).*)']
+};

examples/example-next-13-next-auth/src/app/[locale]/Index.tsx

@@ -2,7 +2,7 @@
 
 import Link from 'next/link';
 import {Session} from 'next-auth';
-import {signOut} from 'next-auth/react';
+import {signOut} from 'auth';
 import {useLocale, useTranslations} from 'next-intl';
 import PageLayout from '../../components/PageLayout';
 

examples/example-next-13-next-auth/src/app/[locale]/login/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import {useRouter} from 'next/navigation';
-import {signIn} from 'next-auth/react';
+import {signIn} from 'auth';
 import {useLocale, useTranslations} from 'next-intl';
 import {FormEvent, useState} from 'react';
 import PageLayout from '../../../components/PageLayout';

examples/example-next-13-next-auth/src/app/[locale]/page.tsx

@@ -1,8 +1,7 @@
-import {getServerSession} from 'next-auth';
-import auth from '../../auth';
+import auth from 'auth';
 import Index from './Index';
 
 export default async function IndexPage() {
-  const session = await getServerSession(auth);
+  const session = await auth();
   return <Index session={session} />;
 }

examples/example-next-13-next-auth/src/app/api/auth/[...nextauth]/route.ts

@@ -1,5 +1,5 @@
 import NextAuth from 'next-auth';
-import auth from '../../../../auth';
+import auth from 'auth';
 
 const handler = NextAuth(auth);
 

examples/example-next-13-next-auth/src/middleware.tsx

@@ -1,5 +1,5 @@
 import {NextRequest} from 'next/server';
-import {withAuth} from 'next-auth/middleware';
+import {auth} from 'auth';
 import createIntlMiddleware from 'next-intl/middleware';
 
 const locales = ['en', 'de'];
@@ -14,7 +14,7 @@ const intlMiddleware = createIntlMiddleware({
   defaultLocale: 'en'
 });
 
-const authMiddleware = withAuth(
+const authMiddleware = auth(
   // Note that this callback is only invoked if
   // the `authorized` callback has returned `true`
   // and not for pages listed in `pages`.