From dd9b69dbd9f36854d365dd001e83ff4c6e83e87a Mon Sep 17 00:00:00 2001 From: wangsijie Date: Tue, 14 May 2024 13:25:30 +0800 Subject: [PATCH] fix(console): remove outdated nextjs app router guide fixed #5820 --- .../console/src/assets/docs/guides/index.ts | 8 - .../guides/web-next-app-router/README.mdx | 239 ++++++++-------- .../docs/guides/web-next-app-router/index.ts | 10 +- .../guides/web-next-server-actions/README.mdx | 270 ------------------ .../web-next-server-actions/config.json | 3 - .../guides/web-next-server-actions/index.ts | 16 -- .../guides/web-next-server-actions/logo.svg | 10 - .../src/assets/docs/guides/web-next/index.ts | 6 +- 8 files changed, 130 insertions(+), 432 deletions(-) delete mode 100644 packages/console/src/assets/docs/guides/web-next-server-actions/README.mdx delete mode 100644 packages/console/src/assets/docs/guides/web-next-server-actions/config.json delete mode 100644 packages/console/src/assets/docs/guides/web-next-server-actions/index.ts delete mode 100644 packages/console/src/assets/docs/guides/web-next-server-actions/logo.svg diff --git a/packages/console/src/assets/docs/guides/index.ts b/packages/console/src/assets/docs/guides/index.ts index 667fb903298..342ba5bcf87 100644 --- a/packages/console/src/assets/docs/guides/index.ts +++ b/packages/console/src/assets/docs/guides/index.ts @@ -28,7 +28,6 @@ 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 webNextServerActions from './web-next-server-actions/index'; import webNuxt from './web-nuxt/index'; import webOutline from './web-outline/index'; import webPhp from './web-php/index'; @@ -66,13 +65,6 @@ const guides: Readonly = Object.freeze([ Component: lazy(async () => import('./web-next-app-router/README.mdx')), metadata: webNextAppRouter, }, - { - order: 1.1, - id: 'web-next-server-actions', - Logo: lazy(async () => import('./web-next-server-actions/logo.svg')), - Component: lazy(async () => import('./web-next-server-actions/README.mdx')), - metadata: webNextServerActions, - }, { order: 1.2, id: 'm2m-general', diff --git a/packages/console/src/assets/docs/guides/web-next-app-router/README.mdx b/packages/console/src/assets/docs/guides/web-next-app-router/README.mdx index 13fdde43b7f..d69bf6216b9 100644 --- a/packages/console/src/assets/docs/guides/web-next-app-router/README.mdx +++ b/packages/console/src/assets/docs/guides/web-next-app-router/README.mdx @@ -9,8 +9,8 @@ import Step from '@/mdx-components/Step'; @@ -38,115 +38,54 @@ pnpm add @logto/next In the following steps, we assume your app is running on http://localhost:3000. -Import and initialize LogtoClient: +Prepare configuration for the Logto client. Create a new file `app/logto.ts` and add the following code: 
   
-    {`// libraries/logto.js
-'use server';
-
-import LogtoClient from '@logto/next/server-actions';
-
-export const logtoClient = new LogtoClient({
+    {`export const logtoConfig = {
   endpoint: '${props.endpoint}',
   appId: '${props.app.id}',
   appSecret: '${props.app.secret}',
   baseUrl: 'http://localhost:3000', // Change to your own base URL
   cookieSecret: '${generateStandardSecret()}', // Auto-generated 32 digit secret
   cookieSecure: process.env.NODE_ENV === 'production',
-});`}
+};
+`}
- ### Configure Redirect URI -First, let’s enter your redirect URI. E.g. `http://localhost:3000/api/logto/sign-in-callback`. +First, let’s enter your redirect URI. E.g. `http://localhost:3000/callback`. -### Prepare helper functions - -First, let's prepare helper functions to connect with Logto. - -Go back to your IDE/editor, add the following code to `/libraries/logto.ts`: - -```ts -const cookieName = `logto:${config.appId}`; - -const setCookies = (value?: string) => { - if (value === undefined) { - return; - } - - cookies().set(cookieName, value, { - maxAge: 14 * 3600 * 24, - secure: config.cookieSecure, - }); -}; - -const getCookie = () => { - return cookies().get(cookieName)?.value ?? ''; -}; - -export const signIn = async () => { - const { url, newCookie } = await logtoClient.handleSignIn( - getCookie(), - `${config.baseUrl}/callback` - ); - - setCookies(newCookie); - - return url; -}; - -export const handleSignIn = async (searchParams: URLSearchParams) => { - const search = searchParams.toString(); - - const newCookie = await logtoClient.handleSignInCallback( - getCookie(), - `${config.baseUrl}/callback?${search}` - ); - - setCookies(newCookie); -}; +### Implement callback page -export const signOut = async () => { - const url = await logtoClient.handleSignOut(getCookie(), `${config.baseUrl}/callback`); +Add a callback page to your app: - setCookies(''); - - return url; -}; - -export const getLogtoContext = async (config?: GetContextParameters) => { - return await logtoClient.getLogtoContext(getCookie(), config); -}; -``` -### Implement callback route - -Create a "callback" route by adding the following code to `/app/callback/route.ts`: - -```ts +```tsx +// pages/callback/page.tsx +import { handleSignIn } from '@logto/next/server-actions'; import { redirect } from 'next/navigation'; import { NextRequest } from 'next/server'; -import { handleSignIn } from '../../libraries/logto'; +import { logtoConfig } from '../logto'; export async function GET(request: NextRequest) { const searchParams = request.nextUrl.searchParams; - await handleSignIn(searchParams); + await handleSignIn(logtoConfig, searchParams); redirect('/'); } @@ -154,105 +93,173 @@ export async function GET(request: NextRequest) { ### Implement sign-in button -We're almost there! In the last step, we will create a sign-in button, which will navigate to Logto sign-in page when clicked. - -This is a client component, so we will create it in `/app/sign-in.tsx`: - -```ts +The sign-in button will call the method we just created, it is a client component: + +```tsx +// app/sign-in.tsx 'use client'; -import { useRouter } from 'next/navigation'; -import { signIn } from '../libraries/logto'; - -const SignIn = () => { - const router = useRouter(); - - const handleClick = async () => { - const redirectUrl = await signIn(); - - router.push(redirectUrl); - }; +type Props = { + onSignIn: () => Promise; +}; - return ; +const SignIn = ({ onSignIn }: Props) => { + return ( + + ); }; export default SignIn; ``` -Now you will be navigated to Logto sign-in page when you click the button. +### Add sign in button to home page -Add this button to home page at `/app/page.tsx`: +We're almost there! Add this button to home page at `/app/page.tsx` and implement the `onSignIn` function: ```tsx +import { signIn } from '@logto/next/server-actions'; import SignIn from './sign-in'; +import { logtoConfig } from './logto'; export default async function Home() { return (

Hello Logto.

- + { + 'use server'; + + await signIn(logtoConfig); + }} + />
); } ``` +Now you will be navigated to Logto sign-in page when you click the button. + -After signing out, it'll be great to redirect user back to your website. Let's add `http://localhost:3000` as the Post Sign-out URI first. +### Configure URI + +After signing out, it'll be great to redirect user back to your website. Let's add `http://localhost:3000` as the Post Sign-out URI below. ### Implement a sign-out button -This is also a client component, so we will create it in `/app/sign-out.tsx`: +The sign-out button is also a client component, so we will create it in `/app/sign-out.tsx`: ```tsx +// app/sign-out.tsx 'use client'; -import { useRouter } from 'next/navigation'; -import { signOut } from '../libraries/logto'; +type Props = { + onSignOut: () => Promise; +}; -const SignOut = () => { - const router = useRouter(); +const SignOut = ({ onSignOut }: Props) => { + return ( + + ); +}; - const handleClick = async () => { - const redirectUrl = await signOut(); +export default SignOut; +``` - router.push(redirectUrl); - }; +### Add sign out button to home page - return ; -}; +Then add the sign-out button to the home page in `/app/page.tsx`: -export default SignOut; +```tsx +import { signIn, signOut } from '@logto/next/server-actions'; +import SignIn from './sign-in'; +import SignOut from './sign-out'; +import { logtoConfig } from './logto'; + +export default async function Home() { + return ( +
+

Hello Logto.

+
+ { + 'use server'; + + await signOut(logtoConfig); + }} + /> + { + 'use server'; + + await signIn(logtoConfig); + }} + /> +
+
+ ); +} ``` -We can call the function `getLogtoContext` to get context as the authentication state, let's modify the home page: +We can call the function `getLogtoContext` to get context as the authentication state in pages, let's modify the home page: ```tsx -import { getLogtoContext } from '../libraries/logto'; +import { getLogtoContext, signIn, signOut } from '@logto/next/server-actions'; import SignIn from './sign-in'; import SignOut from './sign-out'; +import { logtoConfig } from './logto'; export default async function Home() { - const { isAuthenticated } = await getLogtoContext(); + const { isAuthenticated } = await getLogtoContext(logtoConfig); return (

Hello Logto.

-
{isAuthenticated ? : }
+
+ {isAuthenticated ? ( + { + 'use server'; + + await signOut(logtoConfig); + }} + /> + ) : ( + { + 'use server'; + + await signIn(logtoConfig); + }} + /> + )} +
); } diff --git a/packages/console/src/assets/docs/guides/web-next-app-router/index.ts b/packages/console/src/assets/docs/guides/web-next-app-router/index.ts index c4132c9b49d..01aa121548f 100644 --- a/packages/console/src/assets/docs/guides/web-next-app-router/index.ts +++ b/packages/console/src/assets/docs/guides/web-next-app-router/index.ts @@ -4,16 +4,16 @@ import { type GuideMetadata } from '../types'; const metadata: Readonly = Object.freeze({ name: 'Next.js (App Router)', - description: - "Next.js App Router is a new paradigm for building applications using React's latest features.", + description: 'Next.js integration guide for App Router.', target: ApplicationType.Traditional, sample: { repo: 'js', - path: 'packages/next-app-dir-sample', + path: 'packages/next-server-actions-sample', }, + isFeatured: true, fullGuide: { - title: 'Full Next.js App Router SDK tutorial', - url: 'https://docs.logto.io/sdk/next-app-router', + title: 'Full Next.js SDK tutorial', + url: 'https://docs.logto.io/sdk/next-app-router/', }, }); diff --git a/packages/console/src/assets/docs/guides/web-next-server-actions/README.mdx b/packages/console/src/assets/docs/guides/web-next-server-actions/README.mdx deleted file mode 100644 index d69bf6216b9..00000000000 --- a/packages/console/src/assets/docs/guides/web-next-server-actions/README.mdx +++ /dev/null @@ -1,270 +0,0 @@ -import UriInputField from '@/mdx-components/UriInputField'; -import Tabs from '@mdx/components/Tabs'; -import TabItem from '@mdx/components/TabItem'; -import InlineNotification from '@/ds-components/InlineNotification'; -import { generateStandardSecret } from '@logto/shared/universal'; -import Steps from '@/mdx-components/Steps'; -import Step from '@/mdx-components/Step'; - - - - - - - -```bash -npm i @logto/next -``` - - - - -```bash -yarn add @logto/next -``` - - - - -```bash -pnpm add @logto/next -``` - - - - - - - - - In the following steps, we assume your app is running on http://localhost:3000. - - -Prepare configuration for the Logto client. Create a new file `app/logto.ts` and add the following code: - -
-  
-    {`export const logtoConfig = {
-  endpoint: '${props.endpoint}',
-  appId: '${props.app.id}',
-  appSecret: '${props.app.secret}',
-  baseUrl: 'http://localhost:3000', // Change to your own base URL
-  cookieSecret: '${generateStandardSecret()}', // Auto-generated 32 digit secret
-  cookieSecure: process.env.NODE_ENV === 'production',
-};
-`}
-  
-
- - - - -### Configure Redirect URI - -First, let’s enter your redirect URI. E.g. `http://localhost:3000/callback`. - - - -### Implement callback page - -Add a callback page to your app: - -```tsx -// pages/callback/page.tsx -import { handleSignIn } from '@logto/next/server-actions'; -import { redirect } from 'next/navigation'; -import { NextRequest } from 'next/server'; -import { logtoConfig } from '../logto'; - -export async function GET(request: NextRequest) { - const searchParams = request.nextUrl.searchParams; - await handleSignIn(logtoConfig, searchParams); - - redirect('/'); -} -``` - -### Implement sign-in button - -The sign-in button will call the method we just created, it is a client component: - -```tsx -// app/sign-in.tsx -'use client'; - -type Props = { - onSignIn: () => Promise; -}; - -const SignIn = ({ onSignIn }: Props) => { - return ( - - ); -}; - -export default SignIn; -``` - -### Add sign in button to home page - -We're almost there! Add this button to home page at `/app/page.tsx` and implement the `onSignIn` function: - -```tsx -import { signIn } from '@logto/next/server-actions'; -import SignIn from './sign-in'; -import { logtoConfig } from './logto'; - -export default async function Home() { - return ( -
-

Hello Logto.

-
- { - 'use server'; - - await signIn(logtoConfig); - }} - /> -
-
- ); -} -``` - -Now you will be navigated to Logto sign-in page when you click the button. - - - - - -### Configure URI - -After signing out, it'll be great to redirect user back to your website. Let's add `http://localhost:3000` as the Post Sign-out URI below. - - - -### Implement a sign-out button - -The sign-out button is also a client component, so we will create it in `/app/sign-out.tsx`: - -```tsx -// app/sign-out.tsx -'use client'; - -type Props = { - onSignOut: () => Promise; -}; - -const SignOut = ({ onSignOut }: Props) => { - return ( - - ); -}; - -export default SignOut; -``` - -### Add sign out button to home page - -Then add the sign-out button to the home page in `/app/page.tsx`: - -```tsx -import { signIn, signOut } from '@logto/next/server-actions'; -import SignIn from './sign-in'; -import SignOut from './sign-out'; -import { logtoConfig } from './logto'; - -export default async function Home() { - return ( -
-

Hello Logto.

-
- { - 'use server'; - - await signOut(logtoConfig); - }} - /> - { - 'use server'; - - await signIn(logtoConfig); - }} - /> -
-
- ); -} -``` - - - - - -We can call the function `getLogtoContext` to get context as the authentication state in pages, let's modify the home page: - -```tsx -import { getLogtoContext, signIn, signOut } from '@logto/next/server-actions'; -import SignIn from './sign-in'; -import SignOut from './sign-out'; -import { logtoConfig } from './logto'; - -export default async function Home() { - const { isAuthenticated } = await getLogtoContext(logtoConfig); - - return ( -
-

Hello Logto.

-
- {isAuthenticated ? ( - { - 'use server'; - - await signOut(logtoConfig); - }} - /> - ) : ( - { - 'use server'; - - await signIn(logtoConfig); - }} - /> - )} -
-
- ); -} -``` - - - - diff --git a/packages/console/src/assets/docs/guides/web-next-server-actions/config.json b/packages/console/src/assets/docs/guides/web-next-server-actions/config.json deleted file mode 100644 index 4721ad2f793..00000000000 --- a/packages/console/src/assets/docs/guides/web-next-server-actions/config.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "order": 1.1 -} diff --git a/packages/console/src/assets/docs/guides/web-next-server-actions/index.ts b/packages/console/src/assets/docs/guides/web-next-server-actions/index.ts deleted file mode 100644 index d3f8701fd4d..00000000000 --- a/packages/console/src/assets/docs/guides/web-next-server-actions/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { ApplicationType } from '@logto/schemas'; - -import { type GuideMetadata } from '../types'; - -const metadata: Readonly = Object.freeze({ - name: 'Next.js (Server Actions)', - description: - 'Next.js with Server Actions, leverages async component from the latest features of React.', - target: ApplicationType.Traditional, - sample: { - repo: 'js', - path: 'packages/next-server-actions-sample', - }, -}); - -export default metadata; diff --git a/packages/console/src/assets/docs/guides/web-next-server-actions/logo.svg b/packages/console/src/assets/docs/guides/web-next-server-actions/logo.svg deleted file mode 100644 index c1db01c06b7..00000000000 --- a/packages/console/src/assets/docs/guides/web-next-server-actions/logo.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/packages/console/src/assets/docs/guides/web-next/index.ts b/packages/console/src/assets/docs/guides/web-next/index.ts index 9691318a529..ca101df570d 100644 --- a/packages/console/src/assets/docs/guides/web-next/index.ts +++ b/packages/console/src/assets/docs/guides/web-next/index.ts @@ -3,15 +3,13 @@ import { ApplicationType } from '@logto/schemas'; import { type GuideMetadata } from '../types'; const metadata: Readonly = Object.freeze({ - name: 'Next.js', - description: - 'Next.js is a React framework for production - it makes building fullstack React apps a breeze and ships with built-in SSR.', + name: 'Next.js (Pages Router)', + description: 'Next.js integration guide for Pages Router.', target: ApplicationType.Traditional, sample: { repo: 'js', path: 'packages/next-sample', }, - isFeatured: true, fullGuide: { title: 'Full Next.js SDK tutorial', url: 'https://docs.logto.io/sdk/next',