How To Integrate Passkeys into Svelte

In this tutorial, we’ll walk through the process of implementing passkey-based authentication in a Svelte app. You’ll learn how to integrate Corbado’s passkey UI component for a seamless and secure login experience. This guide assumes basic familiarity with Svelte, JavaScript, HTML, and CSS.

If you’re ready to follow along with the code, the complete example is available in the GitHub repository.

Read original, full tutorial here

Prerequisites

Before starting, ensure you have Node.js and NPM installed on your machine. Additionally, basic knowledge of Svelte, along with TypeScript, will be beneficial for following this tutorial.

Project Structure Overview

The project structure for this example looks like this:

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

We’ll focus only on the essential files for implementing passkeys. Feel free to refer to the full GitHub repository for any additional files.

Setting Up a New Svelte Project

To begin, initialize a new Svelte project by running the following commands:

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

During setup, select the following options:

• App template: Skeleton project
• Type checking: Use TypeScript
• Additional options: Include ESLint and Prettier for code quality checks Once the setup is complete, install the required dependencies:

npm install @corbado/web-js

If you are using TypeScript, you can also install the Corbado types for enhanced development:

npm install -D @corbado/types

Setup Corbado Account and Project

Access the Corbado developer panel and create a new account. In the project setup wizard, begin by selecting an appropriate name for your project. For the product selection, opt for “Corbado Complete”. Subsequently, specify your technology stack and select “DEV” along with “Corbado session management” options. Afterwards, you’ll get more foundational setup guidance.

In the application settings, define your Application URLand Relying Party ID as follows:

• Application URL: http://localhost:5173
• Reyling Party ID: localhost Lastly, retrieve your project ID from the developer panel and store it in your environment file. You can find it here under Corbado API access.

Your environment file should look like this:

VITE_CORBADO_PROJECT_ID=<your-project-id>

</your-project-id>

You’ll need it later to embed the Corbado UI component in your Svelte app.

Embedding Corbado’s Passkey UI Component

Next, we’ll integrate the Corbado UI component for passkey authentication into our Svelte app. First, disable server-side rendering (SSR), as Corbado’s current package version doesn’t support it.

In +layout.server.ts, add the following:

export const ssr = false;

In +layout.server, initialize Corbado when the app is mounted:

<script lang="ts">
    import Corbado from "@corbado/web-js";
    import { onMount } from "svelte";

    const PROJECT_ID = import.meta.env.VITE_CORBADO_PROJECT_ID;
    let isInitialized = false;onMount(async () => {
        await Corbado.load({
            projectId: PROJECT_ID,
            darkMode: 'off'
        });
        isInitialized = true;
    });
</script>
<div>
    {#if isInitialized}
        <slot></slot>
    {/if}
</div>

This code ensures that the UI is loaded only after Corbado has been initialized with your project.

Setting Up the Authentication UI

Next, we add the sign-up and login functionality in the +page.svelte file. This page will handle user authentication and redirect to the profile page after login

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

This code initializes the login component and binds it to the authElement div, handling the redirect once the user logs in.

Profile Page

The profile page displays basic user information after successful login. It also provides a logout button to end the session.

<script lang="ts">
    import Corbado from "@corbado/web-js";
    import { onMount } from "svelte";let user = undefined;
    onMount(() => {
        user = Corbado.user;
    });
    async function handleLogout() {
        await Corbado.logout();
        window.location.href = "/";
    }
</script>
<div>
    {#if user}
        <h1 id="Profile-Page">Profile Page</h1>
        <p>User-id: {user.sub}</p>
        <p>Name: {user.name}</p>
        <button on:click="{handleLogout}">Logout</button>
    {:else}
        <h1 id="You-aren-t-logged-in">You aren't logged in.</h1>
        <p>Go <a href="/">Home</a></p>
    {/if}
</div>

This page checks if the user is authenticated, displays their details, and provides an option to log out.

Running the Application

Once everything is set up, run the following command to start the development server:

npm run dev

The app will be accessible at http://localhost:5173.

Conclusion

In this tutorial, we covered how to implement passkey authentication in a Svelte application using Corbado. This integration allows for secure, passwordless logins, improving both user experience and security. By using Corbado’s session management, we can easily retrieve user data and manage sessions across your application.

For more advanced implementations, such as retrieving user data server-side, refer to the Corbado documentation.

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