feat(console): support next auth v5 (#6397)

packages/console/src/assets/docs/guides/web-next-auth/README.mdx

@@ -2,6 +2,8 @@ import InlineNotification from '@/ds-components/InlineNotification';
 import UriInputField from '@/mdx-components/UriInputField';
 import Steps from '@/mdx-components/Steps';
 import Step from '@/mdx-components/Step';
+import TabItem from '@/mdx-components/TabItem';
+import Tabs from '@/mdx-components/Tabs';
 
 <Steps>
 
@@ -31,9 +33,43 @@ Modify your API route config of Next Auth, if you are using Pages Router, the fi
 
 The following is an example of App Router:
 
-<Code className="language-ts">
+<Tabs>
+
+<TabItem value="v5" label="Next Auth v5">
+  <Code className="language-ts">
     {`import NextAuth from 'next-auth';
 
+export const { handlers, signIn, signOut, auth } = NextAuth({
+  providers: [
+    {
+      id: 'logto',
+      name: 'Logto',
+      type: 'oidc',
+      issuer: '${props.endpoint}oidc',
+      clientId: '${props.app.id}',
+      clientSecret: '${props.secrets[0]?.value ?? props.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,
+        };
+      },
+    },
+  ],
+});`}
+</Code>
+</TabItem>
+
+<TabItem value="v4" label="Next Auth v4">
+<Code className="language-ts">
+{`import NextAuth from 'next-auth';
+
 const handler = NextAuth({
   providers: [
     {
@@ -64,6 +100,9 @@ const handler = NextAuth({
 
 export { handler as GET, handler as POST };`}
 </Code>
+</TabItem>
+
+</Tabs>
 
 </Step>