mirror of
https://github.com/logto-io/logto.git
synced 2024-12-16 20:26:19 -05:00
Merge pull request #6142 from logto-io/gao-polish-next-guides
refactor(console): polish guides
This commit is contained in:
commit
4b9785b988
5 changed files with 37 additions and 37 deletions
|
@ -3,17 +3,17 @@ import UriInputField from '@/mdx-components/UriInputField';
|
||||||
|
|
||||||
import ExperienceOverview from './_experience-overview.md';
|
import ExperienceOverview from './_experience-overview.md';
|
||||||
|
|
||||||
export const defaultOrigin = 'http://localhost:3000/';
|
export const defaultBaseUrl = 'http://localhost:3000/';
|
||||||
export const defaultCallbackUri = `${defaultOrigin}callback`;
|
export const defaultRedirectUri = `${defaultBaseUrl}callback`;
|
||||||
export const defaultPostSignOutUri = defaultOrigin;
|
export const defaultPostSignOutUri = defaultBaseUrl;
|
||||||
|
|
||||||
<ExperienceOverview />
|
<ExperienceOverview />
|
||||||
|
|
||||||
<InlineNotification>
|
<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>
|
</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" />
|
<UriInputField name="redirectUris" />
|
||||||
|
|
||||||
|
|
|
@ -57,13 +57,22 @@ Prepare configuration for the Logto client:
|
||||||
</Code>
|
</Code>
|
||||||
</Step>
|
</Step>
|
||||||
|
|
||||||
|
<Step
|
||||||
|
title="Configure redirect URIs"
|
||||||
|
subtitle="2 URIs"
|
||||||
|
>
|
||||||
|
|
||||||
|
<RedirectUrisWeb />
|
||||||
|
|
||||||
|
</Step>
|
||||||
|
|
||||||
<Step
|
<Step
|
||||||
title="Implement callback route"
|
title="Handle the callback"
|
||||||
>
|
>
|
||||||
|
|
||||||
Add a callback route to your app:
|
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 { handleSignIn } from '@logto/next/server-actions';
|
||||||
import { redirect } from 'next/navigation';
|
import { redirect } from 'next/navigation';
|
||||||
import { NextRequest } from 'next/server';
|
import { NextRequest } from 'next/server';
|
||||||
|
@ -79,15 +88,6 @@ export async function GET(request: NextRequest) {
|
||||||
|
|
||||||
</Step>
|
</Step>
|
||||||
|
|
||||||
<Step
|
|
||||||
title="Configure redirect URIs"
|
|
||||||
subtitle="2 URIs"
|
|
||||||
>
|
|
||||||
|
|
||||||
<RedirectUrisWeb />
|
|
||||||
|
|
||||||
</Step>
|
|
||||||
|
|
||||||
<Step
|
<Step
|
||||||
title="Implement sign-in and sign-out"
|
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`.
|
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';
|
'use client';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
@ -118,7 +118,7 @@ const SignIn = ({ onSignIn }: Props) => {
|
||||||
export default SignIn;
|
export default SignIn;
|
||||||
```
|
```
|
||||||
|
|
||||||
```tsx title="/app/sign-out.tsx"
|
```tsx title="app/sign-out.tsx"
|
||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
type Props = {
|
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.
|
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 { getLogtoContext, signIn, signOut } from '@logto/next/server-actions';
|
||||||
import SignIn from './sign-in';
|
import SignIn from './sign-in';
|
||||||
import SignOut from './sign-out';
|
import SignOut from './sign-out';
|
||||||
|
|
|
@ -4,7 +4,7 @@ import { generateStandardSecret } from '@logto/shared/universal';
|
||||||
import Steps from '@/mdx-components/Steps';
|
import Steps from '@/mdx-components/Steps';
|
||||||
import Step from '@/mdx-components/Step';
|
import Step from '@/mdx-components/Step';
|
||||||
import Checkpoint from '../../fragments/_checkpoint.md';
|
import Checkpoint from '../../fragments/_checkpoint.md';
|
||||||
import RedirectUrisWeb from '../../fragments/_redirect-uris-web.mdx';
|
import RedirectUrisWeb, { defaultBaseUrl } from '../../fragments/_redirect-uris-web.mdx';
|
||||||
|
|
||||||
<Steps>
|
<Steps>
|
||||||
|
|
||||||
|
@ -51,7 +51,7 @@ export const logtoClient = new LogtoClient({
|
||||||
endpoint: '${props.endpoint}',
|
endpoint: '${props.endpoint}',
|
||||||
appId: '${props.app.id}',
|
appId: '${props.app.id}',
|
||||||
appSecret: '${props.app.secret}',
|
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
|
cookieSecret: '${generateStandardSecret()}', // Auto-generated 32 digit secret
|
||||||
cookieSecure: process.env.NODE_ENV === 'production',
|
cookieSecure: process.env.NODE_ENV === 'production',
|
||||||
});`}
|
});`}
|
||||||
|
@ -59,6 +59,15 @@ export const logtoClient = new LogtoClient({
|
||||||
|
|
||||||
</Step>
|
</Step>
|
||||||
|
|
||||||
|
<Step
|
||||||
|
title="Configure redirect URIs"
|
||||||
|
subtitle="2 URIs"
|
||||||
|
>
|
||||||
|
|
||||||
|
<RedirectUrisWeb defaultRedirectUri={`${defaultBaseUrl}api/logto/sign-in-callback`} />
|
||||||
|
|
||||||
|
</Step>
|
||||||
|
|
||||||
<Step title="Prepare API routes">
|
<Step title="Prepare API routes">
|
||||||
|
|
||||||
Prepare [API routes](https://nextjs.org/docs/api-routes/introduction) to connect with Logto.
|
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:
|
This will create 4 routes automatically:
|
||||||
|
|
||||||
1. `/api/logto/sign-in`: Sign in with Logto.
|
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.
|
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.
|
4. `/api/logto/user`: Check if user is authenticated with Logto, if yes, return user info.
|
||||||
|
|
||||||
</Step>
|
</Step>
|
||||||
|
|
||||||
<Step
|
|
||||||
title="Configure redirect URIs"
|
|
||||||
subtitle="2 URIs"
|
|
||||||
>
|
|
||||||
|
|
||||||
<RedirectUrisWeb defaultUri="http://localhost:3000/api/logto/sign-in-callback" />
|
|
||||||
|
|
||||||
</Step>
|
|
||||||
|
|
||||||
<Step
|
<Step
|
||||||
title="Implement sign-in and sign-out"
|
title="Implement sign-in and sign-out"
|
||||||
>
|
>
|
||||||
|
|
|
@ -5,7 +5,7 @@ import InlineNotification from '@/ds-components/InlineNotification';
|
||||||
import Steps from '@/mdx-components/Steps';
|
import Steps from '@/mdx-components/Steps';
|
||||||
import Step from '@/mdx-components/Step';
|
import Step from '@/mdx-components/Step';
|
||||||
import Checkpoint from '../../fragments/_checkpoint.md';
|
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>
|
<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">
|
<Code title="index.php" className="language-php">
|
||||||
{`Route::get('/sign-in', function () {
|
{`Route::get('/sign-in', function () {
|
||||||
return redirect($client->signIn('${props.redirectUris[0] || defaultCallbackUri}'));
|
return redirect($client->signIn('${props.redirectUris[0] || defaultRedirectUri}'));
|
||||||
});`}
|
});`}
|
||||||
</Code>
|
</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">
|
<Code title="index.php" className="language-php">
|
||||||
{`Route::get('/sign-in', function () {
|
{`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>
|
</Code>
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import UriInputField from '@/mdx-components/UriInputField';
|
import UriInputField from '@/mdx-components/UriInputField';
|
||||||
import Steps from '@/mdx-components/Steps';
|
import Steps from '@/mdx-components/Steps';
|
||||||
import Step from '@/mdx-components/Step';
|
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';
|
import Checkpoint from '../../fragments/_checkpoint.md';
|
||||||
|
|
||||||
<Steps>
|
<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():
|
async def sign_in():
|
||||||
# Get the sign-in URL and redirect the user to it
|
# Get the sign-in URL and redirect the user to it
|
||||||
return redirect(await client.signIn(
|
return redirect(await client.signIn(
|
||||||
redirectUri="${props.redirectUris[0] || defaultCallbackUri}",
|
redirectUri="${props.redirectUris[0] || defaultRedirectUri}",
|
||||||
))`}
|
))`}
|
||||||
</Code>
|
</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():
|
async def sign_in():
|
||||||
# Get the sign-in URL and redirect the user to it
|
# Get the sign-in URL and redirect the user to it
|
||||||
return redirect(await client.signIn(
|
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
|
interactionMode="signUp", # Show the sign-up page on the first screen
|
||||||
))`}
|
))`}
|
||||||
</Code>
|
</Code>
|
||||||
|
|
Loading…
Reference in a new issue