How to Integrate Passkeys into SvelteKit

In this tutorial, we’ll walk you through building a sample SvelteKit application that incorporates passkey authentication. We’ll show you how to seamlessly integrate Corbado’s passkey UI component for secure, passwordless authentication. Along the way, we’ll also demonstrate how to retrieve user data on the server using the Corbado Node.js SDK.

See full, original tutorial here

Prerequisites

Before we dive in, you should be familiar with Svelte, JavaScript, HTML, and CSS. Additionally, you need Node.js and NPM installed on your development machine.

Project Structure for SvelteKit with Passkeys

We’ll start by setting up a basic SvelteKit project structure. Copy code

.
├── .env
├── package.json
└── src
    ├── app.html
    └── routes
        ├── +layout.svelte
        ├── +layout.server.ts
        ├── +page.svelte
        └── profile
            ├── +page.server.ts
            └── +page.svelte

This is the essential layout we’ll be working with. Most other files can be ignored for the purpose of this tutorial.

Setting Up the SvelteKit Project

To get started, initialize a new Svelte project using the following command:

npm create svelte@latest example-passkeys-svelte
cd example-passkeys-svelte
npm install

During the setup, you can select the following options:

• App template: Skeleton project
• Type checking: We’re using TypeScript, but feel free to choose based on your preference.
• Additional options: We recommend ESLint and Prettier for code quality and formatting.

Next, install Corbado’s web-js and node-sdk packages:

npm i @corbado/web-js @corbado/node-sdk
npm i -D @corbado/types

Run the project locally to verify the setup:

npm run dev

The default Svelte skeleton app should be available at http://localhost:5173.

Adding Passkeys with Corbado

Step 1: Set Up Your Corbado Account and Project

Sign up on the Corbado Developer Panel and create a new project. Select “Corbado Complete” for the product and specify “Svelte” as the framework. Define your Application URL and set the Relying Party ID to localhost. After this, retrieve your Project ID and API secret, which you’ll need to store in your environment variables.

Add them to the .env file in your project:

PUBLIC_CORBADO_PROJECT_ID=your-corbado-project-id
CORBADO_API_SECRET=your-corbado-api-secret

Step 2: Embed the Passkey UI Component

First, disable server-side rendering (SSR) since it’s not currently supported by Corbado’s web-js package. Create a layout.server.ts file with the following content:

export const ssr = false;

Then, embed the Corbado passkey UI component in your frontend by initializing it in the outer layout component. This ensures the rest of the app only renders once Corbado is initialized.

<script lang="ts">
  import Corbado from "@corbado/web-js";
  import { onMount } from "svelte";
  import { PUBLIC_CORBADO_PROJECT_ID } from '$env/static/public';let isInitialized = false;
  onMount(async () => {
    await Corbado.load({
      projectId: PUBLIC_CORBADO_PROJECT_ID,
      darkMode: 'off',
      setShortSessionCookie: true,
    });
    isInitialized = true;
  });
</script>
<div>
  {#if isInitialized}
    <slot></slot>
  {/if}
</div>

Step 3: Modify the Home Page

In src/routes/ page.svelte, integrate the sign-up and login UI component. Once authenticated, redirect the user to the /profile page.

<script lang="ts">
  import Corbado from '@corbado/web-js';
  import { onMount } from 'svelte';let authElement;
  onMount(() => {
    Corbado.mountAuthUI(authElement, {
      onLoggedIn: () => window.location.href = "/profile",
    });
  });
</script>
<div bind:this={authElement}></div>

Step 4: Set Up the Profile Page

Create a profile page under the /profile route, where you’ll retrieve and display user information using Corbado’s Node SDK.

In page.server.ts, retrieve the session cookie and return the user data:

import { SDK, Config } from '@corbado/node-sdk';
import { PUBLIC_CORBADO_PROJECT_ID } from '$env/static/public';
import { CORBADO_API_SECRET } from '$env/static/private';

const config = new Config(PUBLIC_CORBADO_PROJECT_ID, CORBADO_API_SECRET);
const sdk = new SDK(config);
export async function load({ request }) {
  const cookies = parseCookies(request.headers.get('Cookie') || '');
  const cbo_short_session = cookies.cbo_short_session;
  if (!cbo_short_session) return { user: undefined };
  try {
    const user = await sdk.sessions().getCurrentUser(cbo_short_session);
    if (!user.isAuthenticated()) return { user: undefined };
    return { user: { email: user.getEmail(), userID: user.getID() } };
  } catch {
    return { user: undefined };
  }
}
function parseCookies(cookieHeader) {
  return Object.fromEntries(
    cookieHeader.split(';').map(cookie => {
      const [name, ...rest] = cookie.trim().split('=');
      return [name, rest.join('=')];
    })
  );
}

The corresponding page will access our loader’s data and show the user’s name and user ID and provides a button to log out. If the user isn’t logged in, we’ll display a link back to the homepage.

<script lang="ts">
    import type { PageData } from './$types';
    import Corbado from '@corbado/web-js';
    import { goto } from '$app/navigation';

    export let data: PageData

    async function handleLogout() {
        await Corbado.logout()
        await goto("/")
    }
</script>

<div>
    {#if (data.user)}
        <h1>
            Profile Page
        </h1>
        <p>
            User-id: {data.user.userID}
        </p>
        <p>
            Name: {data.user.email}
        </p>
        <button on:click={handleLogout}>
            Logout
        </button>
    {:else}
        <h1>
            You aren't logged in.
        </h1>
        <p>Go <a href="/">Home</a></p>
    {/if}
</div>

Running the Application

Once everything is set up, run your application:

npm run dev

Your SvelteKit app with passkey authentication is now live. Once logged in, the user will be redirected to the profile page where their ID and email are displayed.

Conclusion

In this guide, we showed how to integrate Corbado’s passkey authentication into a SvelteKit app. This approach provides a secure, passwordless experience using Corbado’s simple-to-implement UI components. You can now expand on this and explore more advanced features like session management or multi-device support.

The above is the detailed content of How to Integrate Passkeys into SvelteKit. For more information, please follow other related articles on the PHP Chinese website!