feat: next auth guide (#664)

Author: wangsijie

docs/quick-starts/assets/next-auth-redirect-uri.png

@@ -0,0 +1,43 @@
+---
+slug: /quick-starts/next-auth
+sidebar_label: Next Auth
+sidebar_custom_props:
+  logoFilename: 'next-auth.svg'
+  description: Authentication for Next.js.
+---
+
+import FurtherReadings from '../../fragments/_further-readings.md';
+
+import ConfigProvider from './_config-provider.mdx';
+import GuideTip from './_guide-tip.mdx';
+import ScopesAndClaims from './_scopes-and-claims.mdx';
+
+# Next Auth guide
+
+This guide will show you how to integrate Logto into your Next.js application with [Next Auth](https://next-auth.js.org/).
+
+<GuideTip />
+
+## Prerequisites
+
+- A [Logto Cloud](https://cloud.logto.io) account or a self-hosted Logto (Check out the [⚡ Get started](../../../docs/tutorials/get-started/) guide to create one if you don't have).
+- A Logto traditional application created.
+- A Next.js project with Next Auth, check out the [Next Auth documentation](https://next-auth.js.org/getting-started/introduction).
+
+## Integration
+
+### Config Next Auth provider
+
+<ConfigProvider />
+
+### Checkpoint
+
+Now, you can test your application to see if the authentication works as expected.
+
+## Scopes and claims
+
+<ScopesAndClaims />
+
+## Further readings
+
+<FurtherReadings />

docs/quick-starts/framework/next-auth/README.mdx

@@ -0,0 +1,63 @@
+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';
+import AssumingUrl from '../../fragments/_web-assuming-url.md';
+import SignInFlowSummary from '../../fragments/_web-sign-in-flow-summary.mdx';
+
+<SignInFlowSummary />
+
+<AssumingUrl />
+
+#### Configure sign-in redirect URI
+
+<ConfigureRedirectUri
+  figureSrc={redirectUriFigure}
+  redirectUri="http://localhost:3000/api/auth/callback/logto"
+/>
+
+#### Config Next Auth provider
+
+<GetAppSecret />
+
+Modify your API route config of Next Auth, if you are using Pages Router, the file is in `pages/api/auth/[...nextauth].js`, if you are using App Router, the file is in `app/api/auth/[...nextauth]/router.ts`.
+
+The following is an example of App Router:
+
+```ts
+import NextAuth from 'next-auth';
+
+const handler = NextAuth({
+  providers: [
+    {
+      id: 'logto',
+      name: 'Logto',
+      type: 'oauth',
+      // You can get the well-known URL from the Logto Application Details page,
+      // in the field "OpenID Provider configuration endpoint"
+      wellKnown: 'https://xxxx.logto.app/oidc/.well-known/openid-configuration',
+      authorization: { params: { scope: 'openid offline_access profile email' } },
+      clientId: '<logto-app-id>',
+      clientSecret: '<logto-app-secret>',
+      client: {
+        id_token_signed_response_alg: 'ES384',
+      },
+      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,
+        };
+      },
+    },
+  ],
+});
+
+export { handler as GET, handler as POST };
+```
+
+1. Replace the `wellKnown` URL with your Logto application's "OpenID Provider configuration 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.
+4. Remember to set the `id_token_signed_response_alg` to `ES384`.

docs/quick-starts/framework/next-auth/_config-provider.mdx

@@ -0,0 +1,5 @@
+:::tip
+
+- In this guide, we assume you have set up Next Auth in your Next.js project. If you haven't, check out the [Next Auth documentation](https://next-auth.js.org/getting-started/introduction) to get started.
+
+:::

docs/quick-starts/framework/next-auth/_guide-tip.mdx

@@ -0,0 +1,13 @@
+```ts
+const handler = NextAuth({
+  providers: [
+    {
+      id: 'logto',
+      name: 'Logto',
+      // ... other options
+      authorization: { params: { scope: 'openid offline_access profile email' } },
+      // ... other options
+    },
+  ],
+});
+```

docs/quick-starts/framework/next-auth/_scopes-and-claims-code.md

@@ -0,0 +1,5 @@
+import ScopesAndClaims from '../../fragments/_scopes-and-claims.mdx';
+
+import ScopesAndClaimsCode from './_scopes-and-claims-code.md';
+
+<ScopesAndClaims configScopesCode={<ScopesAndClaimsCode />} />