Merge pull request #6142 from logto-io/gao-polish-next-guides

refactor(console): polish guides

packages/console/src/assets/docs/fragments/_redirect-uris-web.mdx

@@ -3,17 +3,17 @@ import UriInputField from '@/mdx-components/UriInputField';
 
 import ExperienceOverview from './_experience-overview.md';
 
-export const defaultOrigin = 'http://localhost:3000/';
-export const defaultCallbackUri = `${defaultOrigin}callback`;
-export const defaultPostSignOutUri = defaultOrigin;
+export const defaultBaseUrl = 'http://localhost:3000/';
+export const defaultRedirectUri = `${defaultBaseUrl}callback`;
+export const defaultPostSignOutUri = defaultBaseUrl;
 
 <ExperienceOverview />
 
 <InlineNotification>
-  In the following steps, we assume your app is running on <code>{defaultOrigin}</code>.
+  In the following steps, we assume your app is running on <code>{defaultBaseUrl}</code>.
 </InlineNotification>
 
-Now, let's configure your redirect URI. E.g. {`${props.defaultUri ?? defaultCallbackUri}`}.
+Now, let's configure your redirect URI. E.g. {`${props.defaultRedirectUri ?? defaultRedirectUri}`}.
 
 <UriInputField name="redirectUris" />
 

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

@@ -57,13 +57,22 @@ Prepare configuration for the Logto client:
 </Code>
 </Step>
 
+<Step 
+  title="Configure redirect URIs"
+  subtitle="2 URIs"
+>
+
+<RedirectUrisWeb />
+
+</Step>
+
 <Step
-  title="Implement callback route"
+  title="Handle the callback"
 >
 
 Add a callback route to your app:
 
-```tsx title="/app/callback/route.ts"
+```tsx title="app/callback/route.ts"
 import { handleSignIn } from '@logto/next/server-actions';
 import { redirect } from 'next/navigation';
 import { NextRequest } from 'next/server';
@@ -79,15 +88,6 @@ export async function GET(request: NextRequest) {
 
 </Step>
 
-<Step 
-  title="Configure redirect URIs"
-  subtitle="2 URIs"
->
-
-<RedirectUrisWeb />
-
-</Step>
-
 <Step
   title="Implement sign-in and sign-out"
 >
@@ -96,7 +96,7 @@ export async function GET(request: NextRequest) {
 
 In Next.js App Router, events are handled in client components, so we need to create two components first: `SignIn` and `SignOut`.
 
-```tsx title="/app/sign-in.tsx"
+```tsx title="app/sign-in.tsx"
 'use client';
 
 type Props = {
@@ -118,7 +118,7 @@ const SignIn = ({ onSignIn }: Props) => {
 export default SignIn;
 ```
 
-```tsx title="/app/sign-out.tsx"
+```tsx title="app/sign-out.tsx"
 'use client';
 
 type Props = {
@@ -146,7 +146,7 @@ Remember to add `'use client'` to the top of the file to indicate that these com
 
 Now let's add the sign-in and sign-out buttons in your hoem page. We need to call the server actions in SDK when needed. To help with this, use `getLogtoContext` to fetch authentication status.
 
-```tsx title="/app/page.tsx"
+```tsx title="app/page.tsx"
 import { getLogtoContext, signIn, signOut } from '@logto/next/server-actions';
 import SignIn from './sign-in';
 import SignOut from './sign-out';

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

@@ -4,7 +4,7 @@ import { generateStandardSecret } from '@logto/shared/universal';
 import Steps from '@/mdx-components/Steps';
 import Step from '@/mdx-components/Step';
 import Checkpoint from '../../fragments/_checkpoint.md';
-import RedirectUrisWeb from '../../fragments/_redirect-uris-web.mdx';
+import RedirectUrisWeb, { defaultBaseUrl } from '../../fragments/_redirect-uris-web.mdx';
 
 <Steps>
 
@@ -51,7 +51,7 @@ export const logtoClient = new LogtoClient({
   endpoint: '${props.endpoint}',
   appId: '${props.app.id}',
   appSecret: '${props.app.secret}',
-  baseUrl: 'http://localhost:3000', // Change to your own base URL
+  baseUrl: '${defaultBaseUrl}', // Change to your own base URL
   cookieSecret: '${generateStandardSecret()}', // Auto-generated 32 digit secret
   cookieSecure: process.env.NODE_ENV === 'production',
 });`}
@@ -59,6 +59,15 @@ export const logtoClient = new LogtoClient({
 
 </Step>
 
+<Step 
+  title="Configure redirect URIs"
+  subtitle="2 URIs"
+>
+
+<RedirectUrisWeb defaultRedirectUri={`${defaultBaseUrl}api/logto/sign-in-callback`} />
+
+</Step>
+
 <Step title="Prepare API routes">
 
 Prepare [API routes](https://nextjs.org/docs/api-routes/introduction) to connect with Logto.
@@ -74,21 +83,12 @@ export default logtoClient.handleAuthRoutes();
 This will create 4 routes automatically:
 
 1. `/api/logto/sign-in`: Sign in with Logto.
-2. `/api/logto/sign-in-callback`: Handle sign-in callback.
+2. `/api/logto/sign-in-callback`: Handle sign-in callback (redirect URI).
 3. `/api/logto/sign-out`: Sign out with Logto.
 4. `/api/logto/user`: Check if user is authenticated with Logto, if yes, return user info.
 
 </Step>
 
-<Step 
-  title="Configure redirect URIs"
-  subtitle="2 URIs"
->
-
-<RedirectUrisWeb defaultUri="http://localhost:3000/api/logto/sign-in-callback" />
-
-</Step>
-
 <Step
   title="Implement sign-in and sign-out"
 >

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

@@ -5,7 +5,7 @@ import InlineNotification from '@/ds-components/InlineNotification';
 import Steps from '@/mdx-components/Steps';
 import Step from '@/mdx-components/Step';
 import Checkpoint from '../../fragments/_checkpoint.md';
-import RedirectUrisWeb, { defaultCallbackUri, defaultPostSignOutUri } from '../../fragments/_redirect-uris-web.mdx';
+import RedirectUrisWeb, { defaultRedirectUri, defaultPostSignOutUri } from '../../fragments/_redirect-uris-web.mdx';
 
 <Steps>
 
@@ -82,7 +82,7 @@ There are various ways to invoke sign-in and sign-out in your application. For e
 
 <Code title="index.php" className="language-php">
 {`Route::get('/sign-in', function () {
-  return redirect($client->signIn('${props.redirectUris[0] || defaultCallbackUri}'));
+  return redirect($client->signIn('${props.redirectUris[0] || defaultRedirectUri}'));
 });`}
 </Code>
 
@@ -90,7 +90,7 @@ If you want to show the sign-up page on the first screen, you can set `interacti
 
 <Code title="index.php" className="language-php">
 {`Route::get('/sign-in', function () {
-  return redirect($client->signIn('${props.redirectUris[0] || defaultCallbackUri}', InteractionMode::signUp));
+  return redirect($client->signIn('${props.redirectUris[0] || defaultRedirectUri}', InteractionMode::signUp));
 });`}
 </Code>
 

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

@@ -1,7 +1,7 @@
 import UriInputField from '@/mdx-components/UriInputField';
 import Steps from '@/mdx-components/Steps';
 import Step from '@/mdx-components/Step';
-import RedirectUrisWeb, { defaultCallbackUri, defaultPostSignOutUri } from '../../fragments/_redirect-uris-web.mdx';
+import RedirectUrisWeb, { defaultRedirectUri, defaultPostSignOutUri } from '../../fragments/_redirect-uris-web.mdx';
 import Checkpoint from '../../fragments/_checkpoint.md';
 
 <Steps>
@@ -97,7 +97,7 @@ There are various ways to invoke sign-in and sign-out in your application. For e
 async def sign_in():
     # Get the sign-in URL and redirect the user to it
     return redirect(await client.signIn(
-        redirectUri="${props.redirectUris[0] || defaultCallbackUri}",
+        redirectUri="${props.redirectUris[0] || defaultRedirectUri}",
     ))`}
 </Code>
 
@@ -108,7 +108,7 @@ If you want to show the sign-up page on the first screen, you can set `interacti
 async def sign_in():
     # Get the sign-in URL and redirect the user to it
     return redirect(await client.signIn(
-        redirectUri="${props.redirectUris[0] || defaultCallbackUri}",
+        redirectUri="${props.redirectUris[0] || defaultRedirectUri}",
         interactionMode="signUp", # Show the sign-up page on the first screen
     ))`}
 </Code>