Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor(console): polish guides #6142

Merged
merged 1 commit into from
Jun 30, 2024
Merged

refactor(console): polish guides #6142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions packages/console/src/assets/docs/fragments/_redirect-uris-web.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />

Expand Down
28 changes: 14 additions & 14 deletions packages/console/src/assets/docs/guides/web-next-app-router/README.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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"
>
Expand All @@ -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 = {
Expand All @@ -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 = {
Expand Down Expand Up @@ -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';
Expand Down
24 changes: 12 additions & 12 deletions packages/console/src/assets/docs/guides/web-next/README.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -51,14 +51,23 @@ 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',
});`}
</Code>

</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.
Expand All @@ -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"
>
Expand Down
6 changes: 3 additions & 3 deletions packages/console/src/assets/docs/guides/web-php/README.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -82,15 +82,15 @@ 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>

If you want to show the sign-up page on the first screen, you can set `interactionMode` to `signUp`:

<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>

Expand Down
6 changes: 3 additions & 3 deletions packages/console/src/assets/docs/guides/web-python/README.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -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>

Expand All @@ -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>
Expand Down
Loading