From cb1addf2e8a812fc98791a3344dac7695e5176b9 Mon Sep 17 00:00:00 2001
From: wangsijie <wangsijie@silverhand.io>
Date: Sun, 4 Aug 2024 21:58:54 +0800
Subject: [PATCH] feat: next auth v5

---
 .../framework/next-auth/_config-provider.mdx  | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/docs/quick-starts/framework/next-auth/_config-provider.mdx b/docs/quick-starts/framework/next-auth/_config-provider.mdx
index 4e05cbb0d10..346b1fc1370 100644
--- a/docs/quick-starts/framework/next-auth/_config-provider.mdx
+++ b/docs/quick-starts/framework/next-auth/_config-provider.mdx
@@ -1,3 +1,6 @@
+import TabItem from '@theme/TabItem';
+import Tabs from '@theme/Tabs';
+
 import redirectUriFigure from '../../assets/next-auth-redirect-uri.png';
 import ConfigureRedirectUri from '../../fragments/_configure-redirect-uri.mdx';
 import GetAppSecret from '../../fragments/_get-app-secret.mdx';
@@ -23,6 +26,49 @@ Modify your API route config of Next Auth, if you are using Pages Router, the fi
 
 The following is an example of App Router:
 
+<Tabs>
+
+<TabItem value="v5" label="Next Auth v5">
+
+```ts
+import NextAuth from 'next-auth';
+
+export const { handlers, signIn, signOut, auth } = NextAuth({
+  providers: [
+    {
+      id: 'logto',
+      name: 'Logto',
+      type: 'oidc',
+      // You can get the issuer value from the Logto Application Details page,
+      // in the field "Issuer endpoint"
+      issuer: 'https://xxxx.logto.app/oidc',
+      clientId: '<logto-app-id>',
+      clientSecret: '<logto-app-secret>',
+      authorization: {
+        params: { scope: 'openid offline_access profile email' },
+      },
+      profile(profile) {
+        // You can customize the user profile mapping here
+        return {
+          id: profile.sub,
+          name: profile.name ?? profile.username,
+          email: profile.email,
+          image: profile.picture,
+        };
+      },
+    },
+  ],
+});
+```
+
+1. Replace the `issuer` URL with your Logto application's "Issuer endpoint".
+2. Replace the `clientId` and `clientSecret` with your Logto application's ID and secret.
+3. Customize the `profile` function to map the user profile to the Next Auth user object, the default mapping is shown in the example.
+
+</TabItem>
+
+<TabItem value="v4" label="Next Auth v4">
+
 ```ts
 import NextAuth from 'next-auth';
 
@@ -61,3 +107,7 @@ export { handler as GET, handler as POST };
 2. Replace the `clientId` and `clientSecret` with your Logto application's ID and secret.
 3. Customize the `profile` function to map the user profile to the Next Auth user object, the default mapping is shown in the example.
 4. Remember to set the `id_token_signed_response_alg` to `ES384`.
+
+</TabItem>
+
+</Tabs>