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

docs(console): update the sveltekit guide #6130

Merged
merged 3 commits into from
Jul 1, 2024
Merged

docs(console): update the sveltekit guide #6130

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
08dc2eb
docs(console): update the sveltekit guide
simeng-li Jun 28, 2024
ec133b6
chore(console): reorg the display user section in svltekit
simeng-li Jun 30, 2024
48eb124
refactor(console): improve content
gao-sun Jul 1, 2024
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
70 changes: 29 additions & 41 deletions packages/console/src/assets/docs/guides/web-sveltekit/README.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,19 @@ 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 from '../../fragments/_redirect-uris-web.mdx';
import { generateStandardSecret } from '@logto/shared/universal';

export const cookieEncryptionKey = generateStandardSecret();

<Steps>

<Step
title="Installation"
subtitle="Install Logto SDK"
title="Install Logto SDK"
>

Use your favorite package manager to install the Logto SDK:

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

Expand All @@ -40,13 +43,19 @@ pnpm add @logto/sveltekit
</Tabs>
</Step>

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

<RedirectUrisWeb />

</Step>

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

<Code className="language-tsx">
<Code className="language-tsx" title="src/hooks.server.ts">
{`import { handleLogto } from '@logto/sveltekit';

export const handle = handleLogto(
Expand All @@ -55,15 +64,13 @@ export const handle = handleLogto(
appId: '${props.app.id}',
appSecret: '${props.app.secret}',
},
{
encryptionKey: '${cookieEncryptionKey}', // Random-generated
}
{ encryptionKey: '${cookieEncryptionKey}' } // Random-generated key
);`}
</Code>

Since these information are sensitive, it's recommended to use environment variables:
Since these information are sensitive, it's recommended to use environment variables. For example:

<Code className="language-ts">
<Code className="language-ts" title="src/hooks.server.ts">
{`import { handleLogto } from '@logto/sveltekit';
import { env } from '$env/dynamic/private';

Expand All @@ -73,23 +80,21 @@ export const handle = handleLogto(
appId: env.LOGTO_APP_ID,
appSecret: env.LOGTO_APP_SECRET,
},
{
encryptionKey: env.LOGTO_COOKIE_ENCRYPTION_KEY,
}
{ encryptionKey: env.LOGTO_COOKIE_ENCRYPTION_KEY }
);`}
</Code>

If you have multiple hooks, you can use [the sequence() helper function](https://kit.svelte.dev/docs/modules#sveltejs-kit-hooks) to chain them:

```ts
```ts title="src/hooks.server.ts"
import { sequence } from '@sveltejs/kit/hooks';

export const handle = sequence(handleLogto, handleOtherHook);
```

Now you can access the Logto client in the `locals` object. For TypeScript, you can add the type to `app.d.ts`:

```ts
```ts title="src/app.d.ts"
import type { LogtoClient, UserInfoResponse } from '@logto/sveltekit';

declare global {
Expand All @@ -107,24 +112,10 @@ We'll discuss the `user` object later.
</Step>

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

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

First, let's enter your redirect URI. E.g. `http://localhost:3000/callback`. [Redirect URI](https://www.oauth.com/oauth2-servers/redirect-uris/) is an OAuth 2.0 concept which implies the location should redirect after authentication.

<UriInputField name="redirectUris" />

After signing out, it'll be great to redirect user back to your website. For example, add `http://localhost:3000` as the post sign-out redirect URI below.

<UriInputField name="postLogoutRedirectUris" />

In the page where you want to implement sign-in and sign-out, define the following actions:

<Code className="language-ts">
{`// +page.server.ts
import type { Actions } from './$types';
<Code className="language-ts" title="src/routes/+page.server.ts">
{`import type { Actions } from './$types';

export const actions: Actions = {
signIn: async ({ locals }) => {
Expand All @@ -141,21 +132,25 @@ export const actions: Actions = {

Then use these actions in your Svelte component:

```html
{/* +page.svelte */}
```html title="src/routes/+page.svelte"
<form method="POST" action="?/{data.user ? 'signOut' : 'signIn'}">
<button type="submit">Sign {data.user ? 'out' : 'in'}</button>
</form>
```

</Step>

<Step title="Checkpoint" subtitle="Test your app">

<Checkpoint />

</Step>

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

```ts
// +layout.server.ts
```ts title="src/routes/+layout.server.ts"
gao-sun marked this conversation as resolved.
Show resolved Hide resolved
import type { LayoutServerLoad } from './$types';

export const load: LayoutServerLoad = async ({ locals }) => {
Expand All @@ -165,8 +160,7 @@ export const load: LayoutServerLoad = async ({ locals }) => {

In your Svelte component:

```html
{/* +page.svelte */}
```html title="src/routes/+page.svelte"
<script>
/** @type {import('./$types').PageData} */
export let data;
Expand All @@ -183,10 +177,4 @@ In your Svelte component:

</Step>

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

<Checkpoint />

</Step>

</Steps>
Loading