From a70397b125eeaf3d5542839cd67ecdc71e9093a5 Mon Sep 17 00:00:00 2001
From: wangsijie <wangsijie@silverhand.io>
Date: Tue, 30 Jan 2024 11:13:53 +0800
Subject: [PATCH] refactor(console): update next guide (#5313)

---
 .../assets/docs/guides/web-next/README.mdx    | 75 +++++++------------
 1 file changed, 28 insertions(+), 47 deletions(-)

diff --git a/packages/console/src/assets/docs/guides/web-next/README.mdx b/packages/console/src/assets/docs/guides/web-next/README.mdx
index 8f372d4f7..aa3d0164d 100644
--- a/packages/console/src/assets/docs/guides/web-next/README.mdx
+++ b/packages/console/src/assets/docs/guides/web-next/README.mdx
@@ -9,8 +9,8 @@ import Step from '@/mdx-components/Step';
 <Steps>
 
 <Step
-  title="Add Logto SDK as a dependency"
-  subtitle="Please select your favorite package manager"
+  title="Installation"
+  subtitle="Install Logto SDK for your project"
 >
 <Tabs>
 <TabItem value="npm" label="npm">
@@ -39,7 +39,6 @@ pnpm add @logto/next
 
 <Step
   title="Init LogtoClient"
-  subtitle="1 step"
 >
 
 <InlineNotification>
@@ -67,8 +66,7 @@ export const logtoClient = new LogtoClient({
 </Step>
 
 <Step
-  title="Sign in"
-  subtitle="3 steps"
+  title="Implement sign in"
 >
 
 ### Configure Redirect URI
@@ -114,8 +112,25 @@ Now you will be navigated to Logto sign-in page when you click the button.
 </Step>
 
 <Step
-  title="Get user profile"
-  subtitle="2 ways"
+  title="Implement sign out"
+>
+
+Calling `/api/logto/sign-out` will clear all the Logto data in memory and cookies if they exist.
+
+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 before calling `/api/logto/sign-out`.
+
+<UriInputField name="postLogoutRedirectUris" />
+
+### Implement a sign-out button
+
+```tsx
+<button onClick={() => push('/api/logto/sign-out')}>Sign Out</button>
+```
+
+</Step>
+
+<Step
+  title="Handle authentication status"
 >
 
 ### Through API request in the frontend
@@ -164,13 +179,6 @@ export const getServerSideProps = logtoClient.withLogtoSsr(({ request }) => {
 
 Check [Next.js documentation](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props) for more details on `getServerSideProps`.
 
-</Step>
-
-<Step
-  title="Protect API and pages"
-  subtitle="2 steps"
->
-
 ### Protect API routes
 
 Wrap your handler with `logtoClient.withLogtoApiRoute`.
@@ -191,45 +199,18 @@ export default logtoClient.withLogtoApiRoute((request, response) => {
   });
 });
 ```
-
-### Protect pages
-
-If you don't want anonymous users to access a page, use `logtoClient.withLogtoSsr` to get auth state, and redirect to sign-in route if not authenticated.
-
-```ts
-export const getServerSideProps = logtoClient.withLogtoSsr(async function ({ req, res }) {
-  const { user } = req;
-
-  if (!user.isAuthenticated) {
-    res.setHeader('location', '/api/logto/sign-in');
-    res.statusCode = 302;
-    res.end();
-  }
-
-  return {
-    props: { user },
-  };
-});
-```
-
 </Step>
 
 <Step
-  title="Sign out"
-  subtitle="1 step"
+  title="Checkpoint: Test your application"
 >
 
-Calling `/api/logto/sign-out` will clear all the Logto data in memory and cookies if they exist.
+Now, you can test your application:
 
-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 before calling `/api/logto/sign-out`.
-
-<UriInputField name="postLogoutRedirectUris" />
-
-### Implement a sign-out button
-
-```tsx
-<button onClick={() => push('/api/logto/sign-out')}>Sign Out</button>
-```
+1. Run your application, you will see the sign-in button.
+2. Click the sign-in button, and you will be redirected to the sign in route, and the SDK will then init the sign-in process and redirect to the Logto sign-in page.
+3. After you signed in, you will be redirect back to your application and see user id and the sign-out button.
+4. Click the sign-out button to sign-out.
 
 </Step>