Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-02-17 22:04:19 -05:00
Code Issues Activity

refactor(console): update next guide (#5313)

Browse source
This commit is contained in:
wangsijie 2024-01-30 11:13:53 +08:00 • committed by GitHub
parent c9117515aa
commit a70397b125
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 28 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,8 +9,8 @@ import Step from '@/mdx-components/Step';
<Steps>
<Step
title="Add Logto SDK as a dependency"
subtitle="Please select your favorite package manager"
title="Installation"
subtitle="Install Logto SDK for your project"
>
<Tabs>
<TabItem value="npm" label="npm">
@ -39,7 +39,6 @@ pnpm add @logto/next
<Step
title="Init LogtoClient"
subtitle="1 step"
>
<InlineNotification>
@ -67,8 +66,7 @@ export const logtoClient = new LogtoClient({
</Step>
<Step
title="Sign in"
subtitle="3 steps"
title="Implement sign in"
>
### Configure Redirect URI
@ -114,8 +112,25 @@ Now you will be navigated to Logto sign-in page when you click the button.
</Step>
<Step
title="Get user profile"
subtitle="2 ways"
title="Implement sign out"
>
Calling `/api/logto/sign-out` will clear all the Logto data in memory and cookies if they exist.
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 before calling `/api/logto/sign-out`.
<UriInputField name="postLogoutRedirectUris" />
### Implement a sign-out button
```tsx
<button onClick={() => push('/api/logto/sign-out')}>Sign Out</button>
```
</Step>
<Step
title="Handle authentication status"
>
### Through API request in the frontend
@ -164,13 +179,6 @@ export const getServerSideProps = logtoClient.withLogtoSsr(({ request }) => {
Check [Next.js documentation](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props) for more details on `getServerSideProps`.
</Step>
<Step
title="Protect API and pages"
subtitle="2 steps"
>
### Protect API routes
Wrap your handler with `logtoClient.withLogtoApiRoute`.
@ -191,45 +199,18 @@ export default logtoClient.withLogtoApiRoute((request, response) => {
});
});
```
### Protect pages
If you don't want anonymous users to access a page, use `logtoClient.withLogtoSsr` to get auth state, and redirect to sign-in route if not authenticated.
```ts
export const getServerSideProps = logtoClient.withLogtoSsr(async function ({ req, res }) {
const { user } = req;
if (!user.isAuthenticated) {
res.setHeader('location', '/api/logto/sign-in');
res.statusCode = 302;
res.end();
}
return {
props: { user },
};
});
```
</Step>
<Step
title="Sign out"
subtitle="1 step"
title="Checkpoint: Test your application"
>
Calling `/api/logto/sign-out` will clear all the Logto data in memory and cookies if they exist.
Now, you can test your application:
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 before calling `/api/logto/sign-out`.
<UriInputField name="postLogoutRedirectUris" />
### Implement a sign-out button
```tsx
<button onClick={() => push('/api/logto/sign-out')}>Sign Out</button>
```
1. Run your application, you will see the sign-in button.
2. Click the sign-in button, and you will be redirected to the sign in route, and the SDK will then init the sign-in process and redirect to the Logto sign-in page.
3. After you signed in, you will be redirect back to your application and see user id and the sign-out button.
4. Click the sign-out button to sign-out.
</Step>