mirror of
https://github.com/logto-io/logto.git
synced 2025-02-24 22:05:56 -05:00
refactor(console): update react and vue sdk integration guides (#5378)
This commit is contained in:
Charles Zhao
GitHub
parent
e37ba3aae9
commit
17fe38443c
6 changed files with 114 additions and 22 deletions
|
|
@ -8,8 +8,8 @@ import Step from '@/mdx-components/Step';
|
|||
<Steps>
|
||||
|
||||
<Step
|
||||
title="Install Logto SDK"
|
||||
subtitle="Please select your favorite package manager"
|
||||
title="Installation"
|
||||
subtitle="Install Logto SDK for your project"
|
||||
>
|
||||
<Tabs>
|
||||
<TabItem value="npm" label="npm">
|
||||
|
|
@ -36,10 +36,7 @@ pnpm add @logto/react
|
|||
</Tabs>
|
||||
</Step>
|
||||
|
||||
<Step
|
||||
title="Init LogtoClient"
|
||||
subtitle="1 step"
|
||||
>
|
||||
<Step title="Init LogtoClient">
|
||||
|
||||
Import and use `LogtoProvider` to provide a Logto context:
|
||||
|
||||
|
|
@ -63,7 +60,7 @@ const App = () => (
|
|||
</Step>
|
||||
|
||||
<Step
|
||||
title="Sign in"
|
||||
title="Implement sign-in"
|
||||
subtitle="3 steps"
|
||||
>
|
||||
|
||||
|
|
@ -133,10 +130,7 @@ Finally insert the code below to create a `/callback` route which does NOT requi
|
|||
|
||||
</Step>
|
||||
|
||||
<Step
|
||||
title="Sign out"
|
||||
subtitle="1 step"
|
||||
>
|
||||
<Step title="Implement sign-out">
|
||||
|
||||
Calling `.signOut()` will clear all the Logto data in memory and localStorage if they exist.
|
||||
|
||||
|
|
@ -164,4 +158,52 @@ After signing out, it'll be great to redirect user back to your website. Let's a
|
|||
|
||||
</Step>
|
||||
|
||||
<Step title="Handle authentication status">
|
||||
|
||||
In Logto SDK, generally we can use `logtoClient.isAuthenticated` to check the authentication status, if the user is signed in, the value will be `true`, otherwise, the value will be `false`.
|
||||
|
||||
In Logto React SDK, the `isAuthenticated` status can be checked by using the `useLogto` hook. In the example code below, we can use it to programmatically show and hide the sign-in and sign-out buttons. And also use `getIdTokenClaims` to get the id of the currently logged-in user.
|
||||
|
||||
```tsx
|
||||
const Home = () => {
|
||||
const { isAuthenticated, getIdTokenClaims, signIn, signOut } = useLogto();
|
||||
const [userId, setUserId] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
if (isAuthenticated) {
|
||||
const claims = await getIdTokenClaims();
|
||||
setUserId(claims.sub);
|
||||
}
|
||||
})();
|
||||
}, [isAuthenticated]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{userId && <p>Logged in as {userId}</p>}
|
||||
{isAuthenticated ? (
|
||||
<button onClick={signOut}>Sign Out</button>
|
||||
) : (
|
||||
<button onClick={() => signIn('http://localhost:3000/callback')}>Sign In</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Step>
|
||||
|
||||
<Step
|
||||
title="Checkpoint: Test your application"
|
||||
>
|
||||
|
||||
Now, you can test your application:
|
||||
|
||||
1. Run your application, you will see the sign-in button.
|
||||
2. Click the sign-in button, the SDK will init the sign-in process and redirect you to the Logto sign-in page.
|
||||
3. After you signed in, you will be redirected back to your application and see user ID and the sign-out button.
|
||||
4. Click the sign-out button to sign-out.
|
||||
|
||||
</Step>
|
||||
|
||||
</Steps>
|
||||
|
|
|
|||
|
|
@ -8,8 +8,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">
|
||||
|
|
@ -38,7 +38,6 @@ pnpm add @logto/vue
|
|||
|
||||
<Step
|
||||
title="Init LogtoClient"
|
||||
subtitle="1 step"
|
||||
>
|
||||
|
||||
<InlineNotification>
|
||||
|
|
@ -152,7 +151,6 @@ const router = createRouter({
|
|||
|
||||
<Step
|
||||
title="Sign out"
|
||||
subtitle="1 step"
|
||||
>
|
||||
|
||||
Calling `.signOut()` will clear all the Logto data in memory and localStorage if they exist.
|
||||
|
|
@ -183,4 +181,48 @@ After signing out, it'll be great to redirect user back to your website. Let's a
|
|||
|
||||
</Step>
|
||||
|
||||
<Step title="Handle authentication status">
|
||||
|
||||
In Logto SDK, generally we can use `logtoClient.isAuthenticated` to check the authentication status, if the user is signed in, the value will be `true`, otherwise, the value will be `false`.
|
||||
|
||||
In Logto Vue SDK, the `isAuthenticated` status can be checked by using the `useLogto` composable. In the example code below, we can use it to programmatically show and hide the sign-in and sign-out buttons. Also we'll use `getIdTokenClaims` to get the ID of the currently logged-in user.
|
||||
|
||||
```tsx
|
||||
import { useLogto } from "@logto/vue";
|
||||
import { ref } from "vue";
|
||||
|
||||
const { isAuthenticated, getIdTokenClaims, signIn, signOut } = useLogto();
|
||||
const userId = ref<string>();
|
||||
|
||||
if (isAuthenticated.value) {
|
||||
(async () => {
|
||||
const claims = await getIdTokenClaims();
|
||||
userId.value = claims.sub;
|
||||
})();
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<template>
|
||||
<p v-if="userId">Logged in as {{ userId }}</p>
|
||||
<button v-if="!isAuthenticated" @click="onClickSignIn">Sign In</button>
|
||||
<button v-else @click="onClickSignOut">Sign Out</button>
|
||||
</template>
|
||||
```
|
||||
|
||||
</Step>
|
||||
|
||||
<Step
|
||||
title="Checkpoint: Test your application"
|
||||
>
|
||||
|
||||
Now, you can test your application:
|
||||
|
||||
1. Run your application, you will see the sign-in button.
|
||||
2. Click the sign-in button, the SDK will init the sign-in process and redirect you to the Logto sign-in page.
|
||||
3. After you signed in, you will be redirected back to your application and see user ID and the sign-out button.
|
||||
4. Click the sign-out button to sign-out.
|
||||
|
||||
</Step>
|
||||
|
||||
</Steps>
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@ app.use(session({ secret: '${generateStandardSecret()}', cookie: { maxAge: 14 *
|
|||
</Step>
|
||||
|
||||
<Step
|
||||
title="Implement sign in"
|
||||
title="Implement sign-in"
|
||||
>
|
||||
|
||||
### Configure Redirect URI
|
||||
|
|
@ -124,7 +124,7 @@ app.get('/', (req, res) => {
|
|||
</Step>
|
||||
|
||||
<Step
|
||||
title="Implement sign out"
|
||||
title="Implement sign-out"
|
||||
>
|
||||
|
||||
Calling `/logto/sign-out` will clear all the Logto data in memory and cookies if they exist.
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ export const logtoClient = new LogtoClient({
|
|||
</Step>
|
||||
|
||||
<Step
|
||||
title="Implement sign in"
|
||||
title="Implement sign-in"
|
||||
>
|
||||
|
||||
### Configure Redirect URI
|
||||
|
|
@ -112,7 +112,7 @@ Now you will be navigated to Logto sign-in page when you click the button.
|
|||
</Step>
|
||||
|
||||
<Step
|
||||
title="Implement sign out"
|
||||
title="Implement sign-out"
|
||||
>
|
||||
|
||||
Calling `/api/logto/sign-out` will clear all the Logto data in memory and cookies if they exist.
|
||||
|
|
|
|||
|
|
@ -17,10 +17,18 @@ function FurtherReadings(props: Props, ref?: Ref<HTMLDivElement>) {
|
|||
</li>
|
||||
<li>
|
||||
<TextLink
|
||||
href="https://docs.logto.io/docs/recipes/protect-your-api/"
|
||||
href="https://docs.logto.io/docs/recipes/configure-connectors/"
|
||||
targetBlank="noopener"
|
||||
>
|
||||
Protect your API
|
||||
Configure connectors
|
||||
</TextLink>
|
||||
</li>
|
||||
<li>
|
||||
<TextLink
|
||||
href="https://docs.logto.io/docs/recipes/rbac/protect-resource/#client"
|
||||
targetBlank="noopener"
|
||||
>
|
||||
Configure client to use RBAC
|
||||
</TextLink>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ export default function Steps({ children: reactChildren }: Props) {
|
|||
const isApiResourceGuide = metadata.target === 'API';
|
||||
|
||||
const furtherReadings = useMemo(
|
||||
() => <FurtherReadings title="Further readings" subtitle="4 articles" />,
|
||||
() => <FurtherReadings title="Further readings" subtitle="3 articles" />,
|
||||
[]
|
||||
);
|
||||
const children: Array<ReactElement<StepProps, typeof Step>> = useMemo(() => {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue