diff --git a/packages/console/src/assets/docs/fragments/_redirect-uris-web.mdx b/packages/console/src/assets/docs/fragments/_redirect-uris-web.mdx
index 6b7958e96..6f00883a1 100644
--- a/packages/console/src/assets/docs/fragments/_redirect-uris-web.mdx
+++ b/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;
- In the following steps, we assume your app is running on {defaultOrigin}
.
+ In the following steps, we assume your app is running on {defaultBaseUrl}
.
-Now, let's configure your redirect URI. E.g. {`${props.defaultUri ?? defaultCallbackUri}`}.
+Now, let's configure your redirect URI. E.g. {`${props.defaultRedirectUri ?? defaultRedirectUri}`}.
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 a304b98b9..f871859ad 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
@@ -57,13 +57,22 @@ Prepare configuration for the Logto client:
+
+
+
+
+
+
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) {
-
-
-
-
-
-
@@ -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';
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 c2f0a7fef..f03d4ed47 100644
--- a/packages/console/src/assets/docs/guides/web-next/README.mdx
+++ b/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';
@@ -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({
+
+
+
+
+
+
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.
-
-
-
-
-
-
diff --git a/packages/console/src/assets/docs/guides/web-php/README.mdx b/packages/console/src/assets/docs/guides/web-php/README.mdx
index 498eca2ed..227184c46 100644
--- a/packages/console/src/assets/docs/guides/web-php/README.mdx
+++ b/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';
@@ -82,7 +82,7 @@ There are various ways to invoke sign-in and sign-out in your application. For e
{`Route::get('/sign-in', function () {
- return redirect($client->signIn('${props.redirectUris[0] || defaultCallbackUri}'));
+ return redirect($client->signIn('${props.redirectUris[0] || defaultRedirectUri}'));
});`}
@@ -90,7 +90,7 @@ If you want to show the sign-up page on the first screen, you can set `interacti
{`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));
});`}
diff --git a/packages/console/src/assets/docs/guides/web-python/README.mdx b/packages/console/src/assets/docs/guides/web-python/README.mdx
index 2096c8e50..52fd2300a 100644
--- a/packages/console/src/assets/docs/guides/web-python/README.mdx
+++ b/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';
@@ -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}",
))`}
@@ -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
))`}