Skip to content

Commit

Permalink
refactor(console): update next guide (#6119)
Browse files Browse the repository at this point in the history
  • Loading branch information
@wangsijie
wangsijie authored Jun 27, 2024
1 parent bd0487e commit 211c357
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 241 deletions.
2 changes: 1 addition & 1 deletion packages/console/src/assets/docs/fragments/_redirect_uris.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ To learn more about the rationale and benefits of redirect-based sign-in, see [L
In the following steps, we assume your app is running on <code>http://localhost:3000</code>.
</InlineNotification>

Now, let's enter your redirect URI. E.g. `http://localhost:3000/callback`.
Now, let's enter your redirect URI. E.g. {`${props.callbackUri ?? 'http://localhost:3000/callback'}`}.

<UriInputField name="redirectUris" />

Expand Down
183 changes: 57 additions & 126 deletions packages/console/src/assets/docs/guides/web-next-app-router/README.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
import UriInputField from '@/mdx-components/UriInputField';
import Tabs from '@mdx/components/Tabs';
import TabItem from '@mdx/components/TabItem';
import InlineNotification from '@/ds-components/InlineNotification';
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 RedirectUris from '../../fragments/_redirect_uris.mdx';

<Steps>

<Step
title="Add Logto SDK as a dependency"
subtitle="Please select your favorite package manager"
title="Installation"
subtitle="Install Logto SDK"
>

<Tabs>
<TabItem value="npm" label="npm">

Expand Down Expand Up @@ -41,13 +42,9 @@ pnpm add @logto/next
title="Prepare configs"
>

<InlineNotification>
In the following steps, we assume your app is running on <code>http://localhost:3000</code>.
</InlineNotification>

Prepare configuration for the Logto client. Create a new file `app/logto.ts` and add the following code:
Prepare configuration for the Logto client:

<Code className="language-ts">
<Code title="app/logto.ts" className="language-ts">
{`export const logtoConfig = {
endpoint: '${props.endpoint}',
appId: '${props.app.id}',
Expand All @@ -61,21 +58,12 @@ Prepare configuration for the Logto client. Create a new file `app/logto.ts` and
</Step>

<Step
title="Sign in"
title="Implement callback route"
>

### Configure Redirect URI

First, let’s enter your redirect URI. E.g. `http://localhost:3000/callback`.

<UriInputField name="redirectUris" />
Add a callback route to your app:

### Implement callback page

Add a callback page to your app:

```tsx
// pages/callback/page.tsx
```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 @@ -89,12 +77,26 @@ export async function GET(request: NextRequest) {
}
```

### Implement sign-in button
</Step>

<Step
title="Configure redirect URIs"
subtitle="2 URIs"
>

<RedirectUris />

</Step>

<Step
title="Implement sign-in and sign-out"
>

### Implement sign-in and sign-out button

The sign-in button will call the method we just created, it is a client component:

```tsx
// app/sign-in.tsx
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"
'use client';

type Props = {
Expand All @@ -116,53 +118,7 @@ const SignIn = ({ onSignIn }: Props) => {
export default SignIn;
```

### Add sign in button to home page

We're almost there! Add this button to home page at `/app/page.tsx` and implement the `onSignIn` function:

```tsx
import { signIn } from '@logto/next/server-actions';
import SignIn from './sign-in';
import { logtoConfig } from './logto';

export default async function Home() {
return (
<main>
<h1>Hello Logto.</h1>
<div>
<SignIn
onSignIn={async () => {
'use server';

await signIn(logtoConfig);
}}
/>
</div>
</main>
);
}
```

Now you will be navigated to Logto sign-in page when you click the button.

</Step>

<Step
title="Sign out"
>

### Configure URI

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.

<UriInputField name="postLogoutRedirectUris" />

### Implement a sign-out button

The sign-out button is also a client component, so we will create it in `/app/sign-out.tsx`:

```tsx
// app/sign-out.tsx
```tsx title="/app/sign-out.tsx"
'use client';

type Props = {
Expand All @@ -184,85 +140,60 @@ const SignOut = ({ onSignOut }: Props) => {
export default SignOut;
```

### Add sign out button to home page

Then add the sign-out button to the home page in `/app/page.tsx`:

```tsx
import { signIn, signOut } from '@logto/next/server-actions';
import SignIn from './sign-in';
import SignOut from './sign-out';
import { logtoConfig } from './logto';

export default async function Home() {
return (
<main>
<h1>Hello Logto.</h1>
<div>
<SignOut
onSignOut={async () => {
'use server';

await signOut(logtoConfig);
}}
/>
<SignIn
onSignIn={async () => {
'use server';

await signIn(logtoConfig);
}}
/>
</div>
</main>
);
}
```

</Step>
Remember to add `'use client'` to the top of the file to indicate that these components are client components.

<Step
title="Handle authentication state"
>
### Add buttons to home page

We can call the function `getLogtoContext` to get context as the authentication state in pages, let's modify the home page:
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
```tsx title="/app/page.tsx"
import { getLogtoContext, signIn, signOut } from '@logto/next/server-actions';
import SignIn from './sign-in';
import SignOut from './sign-out';
import { logtoConfig } from './logto';

export default async function Home() {
const { isAuthenticated } = await getLogtoContext(logtoConfig);
const Home = () => {
const { isAuthenticated, claims } = await getLogtoContext(logtoConfig);

return (
<main>
<h1>Hello Logto.</h1>
<div>
{isAuthenticated ? (
<nav>
{isAuthenticated ? (
<p>
Hello, {claims?.sub},
<SignOut
onSignOut={async () => {
'use server';

await signOut(logtoConfig);
}}
/>
) : (
</p>
) : (
<p>
<SignIn
onSignIn={async () => {
'use server';

await signIn(logtoConfig);
}}
/>
)}
</div>
</main>
</p>
)}
</nav>
);
}
};

export default Home;
```

</Step>

<Step
title="Checkpoint: Test your application"
>

<Checkpoint />

</Step>

</Steps>
Loading

0 comments on commit 211c357

Please sign in to comment.