Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-06 20:40:08 -05:00
Code Issues Activity

fix(console): update the svelte integration guide (#5869)

Browse source 
update the svelte integration guide
This commit is contained in:
simeng-li 2024-05-16 10:52:08 +08:00 committed by GitHub
parent e04d9523a6
commit 7216f2ac96
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 7 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
packages/console/src/assets/docs/guides/web-sveltekit/README.mdx
View file

@ -42,6 +42,8 @@ pnpm add @logto/sveltekit
<Step title="Add Logto hook"> <Step title="Add Logto hook">
Create a `hooks.server.ts` file in your project `src` root if you don't have one. This file is used to define server hooks for your SvelteKit app.
In your `hooks.server.ts` file, add the following code to inject the Logto hook into your server: In your `hooks.server.ts` file, add the following code to inject the Logto hook into your server:
<pre> <pre>
@ -134,7 +136,9 @@ export const actions: Actions = {
await locals.logtoClient.signIn('${props.redirectUris[0] ?? 'http://localhost:3000/callback'}'); await locals.logtoClient.signIn('${props.redirectUris[0] ?? 'http://localhost:3000/callback'}');
}, },
signOut: async ({ locals }) => { signOut: async ({ locals }) => {
await locals.logtoClient.signOut('${props.postLogoutRedirectUris[0] ?? 'http://localhost:3000'}'); await locals.logtoClient.signOut('${
props.postLogoutRedirectUris[0] ?? 'http://localhost:3000'
}');
}, },
}; };
`} `}
@ -152,23 +156,12 @@ Then use these actions in your Svelte component:
</Step> </Step>
<Step title="Implement sign-in and sign-out">
Since Nuxt pages will be hydrated and become a single-page application (SPA) after the initial load, we need to redirect the user to the sign-in or sign-out route when needed.
```html
<a :href="/sign-in">Sign in</a>
<br />
<a :href="/sign-out">Sign out</a>
```
</Step>
<Step title="Display user information"> <Step title="Display user information">
To display the user's information, you can inject the `locals.user` object into the layout, thus making it available to all pages: To display the user's information, you can inject the `locals.user` object into the layout, thus making it available to all pages:
```ts ```ts
// +layout.server.ts
import type { LayoutServerLoad } from './$types'; import type { LayoutServerLoad } from './$types';
export const load: LayoutServerLoad = async ({ locals }) => { export const load: LayoutServerLoad = async ({ locals }) => {
@ -179,6 +172,7 @@ export const load: LayoutServerLoad = async ({ locals }) => {
In your Svelte component: In your Svelte component:
```html ```html
{/* +page.svelte */}
<script> <script>
/** @type {import('./$types').PageData} */ /** @type {import('./$types').PageData} */
export let data; export let data;