feat(console): add next auth guide (#5873)

packages/console/src/assets/docs/guides/index.ts

@@ -28,6 +28,7 @@ import webGptPlugin from './web-gpt-plugin/index';
 import webJavaSpringBoot from './web-java-spring-boot/index';
 import webNext from './web-next/index';
 import webNextAppRouter from './web-next-app-router/index';
+import webNextAuth from './web-next-auth/index';
 import webNextServerActions from './web-next-server-actions/index';
 import webNuxt from './web-nuxt/index';
 import webOutline from './web-outline/index';
@@ -108,6 +109,13 @@ const guides: Readonly<Guide[]> = Object.freeze([
     Component: lazy(async () => import('./web-go/README.mdx')),
     metadata: webGo,
   },
+  {
+    order: 1.3,
+    id: 'web-next-auth',
+    Logo: lazy(async () => import('./web-next-auth/logo.svg')),
+    Component: lazy(async () => import('./web-next-auth/README.mdx')),
+    metadata: webNextAuth,
+  },
   {
     order: 1.4,
     id: 'web-java-spring-boot',

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

@@ -0,0 +1,78 @@
+import InlineNotification from '@/ds-components/InlineNotification';
+import UriInputField from '@/mdx-components/UriInputField';
+import Steps from '@/mdx-components/Steps';
+import Step from '@/mdx-components/Step';
+
+<Steps>
+
+<Step title="Prerequisites">
+
+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.
+
+</Step>
+
+<Step title="Configure redirect URI">
+
+<InlineNotification>
+  In the following steps, we assume your app is running on <code>http://localhost:3000</code>.
+</InlineNotification>
+
+First, let’s enter your redirect URI.
+
+<UriInputField name="redirectUris" defaultValue="http://localhost:3000/api/auth/callback/logto" />
+
+Don't forget to click the **Save** button.
+
+</Step>
+
+<Step title="Configure the provider">
+
+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:
+
+<pre>
+  <code className="language-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: '${props.endpoint}oidc/.well-known/openid-configuration',
+      authorization: { params: { scope: 'openid offline_access profile email' } },
+      clientId: '${props.app.id}'',
+      clientSecret: '${props.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 };`}
+  </code>
+</pre>
+
+</Step>
+
+<Step title="Checkpoint: Test Logto and Next Auth integration">
+
+Now, you can test your application to see if the authentication works as expected.
+
+</Step>
+
+</Steps>

packages/console/src/assets/docs/guides/web-next-auth/config.json

@@ -0,0 +1,3 @@
+{
+  "order": 1.3
+}

packages/console/src/assets/docs/guides/web-next-auth/index.ts

@@ -0,0 +1,11 @@
+import { ApplicationType } from '@logto/schemas';
+
+import { type GuideMetadata } from '../types';
+
+const metadata: Readonly<GuideMetadata> = Object.freeze({
+  name: 'Next Auth',
+  description: 'Authentication for Next.js.',
+  target: ApplicationType.Traditional,
+});
+
+export default metadata;

packages/console/src/assets/docs/guides/web-next-auth/logo.svg

@@ -0,0 +1,25 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.71875 3.92972C5.62789 3.36733 8.45568 2.52411 9.64828 2.16812C10.0173 2.05797 10.4075 2.05711 10.7771 2.16533C11.926 2.50173 14.5984 3.28783 16.6648 3.92349C17.0828 4.05209 17.3679 4.44593 17.3575 4.88319C17.1188 14.9867 12.0196 17.4105 10.5842 17.8936C10.3388 17.9762 10.0837 17.9764 9.83802 17.8945C8.39567 17.4137 3.25421 14.9951 3.00907 4.89714C2.9983 4.45317 3.29276 4.05521 3.71875 3.92972Z" fill="#D9D9D9"/>
+<mask id="mask0_156_252" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="3" y="2" width="15" height="16">
+<path d="M3.71875 3.92972C5.62789 3.36733 8.45568 2.52411 9.64828 2.16812C10.0173 2.05797 10.4075 2.05711 10.7771 2.16533C11.926 2.50173 14.5984 3.28783 16.6648 3.92349C17.0828 4.05209 17.3679 4.44593 17.3575 4.88319C17.1188 14.9867 12.0196 17.4105 10.5842 17.8936C10.3388 17.9762 10.0837 17.9764 9.83802 17.8945C8.39567 17.4137 3.25421 14.9951 3.00907 4.89714C2.9983 4.45317 3.29276 4.05521 3.71875 3.92972Z" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_156_252)">
+<path d="M10.2112 9.77465L10.0986 1.71831L17.8169 3.80282L10.2112 9.77465Z" fill="url(#paint0_linear_156_252)"/>
+<path d="M10.2113 9.77465V2L2.83098 3.97183L1.81689 8.76056L5.02816 13.7746L10.2113 9.77465Z" fill="url(#paint1_linear_156_252)"/>
+<path d="M17.5915 3.97183L4.91547 13.7746V18.2254H17.4225L17.5915 3.97183Z" fill="url(#paint2_linear_156_252)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_156_252" x1="10.2112" y1="2" x2="15.6197" y2="5.5493" gradientUnits="userSpaceOnUse">
+<stop stop-color="#19AAE8"/>
+<stop offset="1" stop-color="#1EA5F1"/>
+</linearGradient>
+<linearGradient id="paint1_linear_156_252" x1="3.05633" y1="4.14085" x2="10.2113" y2="9.66197" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2BE2B8"/>
+<stop offset="1" stop-color="#19B9E3"/>
+</linearGradient>
+<linearGradient id="paint2_linear_156_252" x1="17.3098" y1="4.02817" x2="7.95772" y2="16.9859" gradientUnits="userSpaceOnUse">
+<stop stop-color="#925CDF"/>
+<stop offset="1" stop-color="#CC42E5"/>
+</linearGradient>
+</defs>
+</svg>