This content originally appeared on DEV Community and was authored by vdelitz
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.
This content originally appeared on DEV Community and was authored by vdelitz
vdelitz | Sciencx (2024-09-12T20:01:33+00:00) How to Integrate Passkeys into SvelteKit. Retrieved from https://www.scien.cx/2024/09/12/how-to-integrate-passkeys-into-sveltekit/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.