Forem: Toby Hobson

Protecting SvelteKit routes using sessions and hooks

Toby Hobson — Tue, 01 Oct 2024 11:42:29 +0000

This tutorial forms the second part of my SvelteKit series. If you haven't already done so, please read the first installment. In this post I'll show you how to protect your routes using user accounts, sessions and hooks.

Add the libraries

We'll use Lucia for session management, and Prisma + SQLite for persistence.

pnpm add -D lucia
pnpm add -D prisma
pnpm add -D @lucia-auth/adapter-prisma

Setup the database

Initialise Prisma:

pnpm dlx prisma init --datasource-provider sqlite

The prisma init script should have created a prisma directory in your application route. It should also have updated your .env file with a DATABASE_URL key:

DATABASE_URL="file:./dev.db"
PUBLIC_PASSLOCK_TENANCY_ID="..."
PUBLIC_PASSLOCK_CLIENT_ID="..."
PASSLOCK_API_KEY="..."

Next, define the database schema by editing prisma/schema.prisma:

// prisma/schema.prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

model User {
  id         String  @id @default(uuid())
  email      String  @unique
  givenName  String?
  familyName String?
  sessions   Session[]
}

model Session {
  id        String  @id @default(uuid())
  userId    String
  expiresAt DateTime
  user      User    @relation(references: [id], fields: [userId], onDelete: Cascade)
}

Run the initial migration:

pnpm dlx prisma migrate dev --name init

User registration

Previously we registered a passkey on the users device. We'll now create a user in our database and link the passkey to the local user. Update the registration form action:

// src/routes/register/+page.server.ts
import type { Actions } from './$types'
import { Passlock, TokenVerifier } from '@passlock/sveltekit'
import { PUBLIC_PASSLOCK_TENANCY_ID } from '$env/static/public'
import { PASSLOCK_API_KEY } from '$env/static/private'
import { PrismaClient } from '@prisma/client'
import { error, redirect } from '@sveltejs/kit'

const client = new PrismaClient()

const tokenVerifier = new TokenVerifier({
  tenancyId: PUBLIC_PASSLOCK_TENANCY_ID,
  apiKey: PASSLOCK_API_KEY
})

export const actions: Actions = {
  default: async ({ request }) => {
    const formData = await request.formData()
    const token = formData.get('token') as string
    const result = await tokenVerifier.exchangeToken(token)

    if (Passlock.isPrincipal(result)) {
      // FIXME JUST FOR DEVELOPMENT TESTING!!!
      await client.user.deleteMany()

      // create a user in the local db
      await client.user.create({
        data: {
          id: result.sub,
          email: result.email as string,
          givenName: result.givenName,
          familyName: result.familyName
        }
      })

      redirect(302, '/login')
    } else {
      console.error(result)
      error(500, result.message)
    }
  }
}

Try to register a user

You can now try to register a user account and associated passkey. Navigate to the /register page. The client side template and form action will together:

Register a passkey on the users device
Register the public key component in your Passlock vault
Create a local Lucia user and link the passkey to that account

Important: Make sure you don't already have a user registered in your Passlock console. Otherwise Passlock will generate an error telling you that a passkey is already registered to that email address.

If all goes well, you should be redirected to the login page.

User authentication

Previously, we prompted the user to authenticate with their passkey, then verified the token in our form action. We'll build on that work to:

Lookup a local user using the sub property
Create a Lucia session for that user
Invalidate any other user sessions

We'll update the login action to hook into Lucia, but before we do that, let's setup Lucia itself. Create a file at src/lib/server/auth.ts:

// src/lib/server/auth.ts
import { Lucia } from 'lucia'
import { dev } from '$app/environment'
import { PrismaAdapter } from '@lucia-auth/adapter-prisma'
import { PrismaClient } from '@prisma/client'

const client = new PrismaClient()
const adapter = new PrismaAdapter(client.session, client.user)

export const lucia = new Lucia(adapter, {
  sessionCookie: {
    attributes: {
      // set to `true` when using HTTPS
      secure: !dev
    }
  }
})

declare module 'lucia' {
  interface Register {
    Lucia: typeof lucia
  }
}

Next, update the login action:

// src/routes/login/+page.server.ts
import type { Actions } from './$types'
import { Passlock, TokenVerifier } from '@passlock/sveltekit'
import { PUBLIC_PASSLOCK_TENANCY_ID } from '$env/static/public'
import { PASSLOCK_API_KEY } from '$env/static/private'
import { lucia } from '$lib/server/auth'
import { error, redirect } from '@sveltejs/kit'

const tokenVerifier = new TokenVerifier({
  tenancyId: PUBLIC_PASSLOCK_TENANCY_ID,
  apiKey: PASSLOCK_API_KEY
})

export const actions: Actions = {
  default: async ({ request, cookies }) => {
    const formData = await request.formData()
    const token = formData.get('token') as string
    const result = await tokenVerifier.exchangeToken(token)

    if (Passlock.isPrincipal(result)) {
      // delete other active sessions
      await lucia.invalidateUserSessions(result.sub)

      const session = await lucia.createSession(result.sub, {})
      const sessionCookie = lucia.createSessionCookie(session.id)

      // set a cookie representing the new session
      cookies.set(lucia.sessionCookieName, sessionCookie.value, {
        path: '/',
        ...sessionCookie.attributes
      })

      redirect(302, '/')
    } else {
      console.error(result)
      error(500, result.message)
    }
  }
}

Try logging in

Visit the /login page and try to login using the same email address you used for registration. If all goes well, you should be redirected back to the home page.

Now check your browser dev tools. You should see a new cookie named auth_session with a long, cryptographically random token.

Finally, we need to protect the routes to ensure that only authenticated users can access them...

Protect the routes

Now that we can authenticate users, we want to protect access to certain routes. We can build quite sophisticated authorization policies, but for now we'll just protect a single route, allowing access to any authenticated user. We'll do this using SvelteKit hooks. Our hook will:

Check for a lucia session cookie
Lookup the associated session and user
Attach the session and user to the app locals
Reject any unauthenticated request to a protected route

Type the locals

As we'll be using app locals with Typescript, let's type it:

// src/app.d.ts
declare global {
  namespace App {
    interface Locals {
      user: import("lucia").User | null
      session: import("lucia").Session | null
    }
  }
}

export {}

Attach the user to the request

We'll check for the auth_session cookie, lookup the associated session and user and attach them to the request via app locals:

// src/hooks.server.ts
import { lucia } from '$lib/server/auth'
import { type Handle } from '@sveltejs/kit'

export const handle: Handle = async ({ event, resolve }) => {
  const sessionId = event.cookies.get(lucia.sessionCookieName)

  // if no sessionId we can assume there is no session or user
  const { session, user } = sessionId
    ? await lucia.validateSession(sessionId)
    : { session: null, user: null }

  if (session && session.fresh) {
    // refreshed session, update the cookie
    const sessionCookie = lucia.createSessionCookie(session.id)
    event.cookies.set(sessionCookie.name, sessionCookie.value, {
      path: '/',
      ...sessionCookie.attributes
    })
  }

  if (!session) {
    // effectively delete the session cookie 
    // by overwriting it with a blank value
    const sessionCookie = lucia.createBlankSessionCookie()
    event.cookies.set(sessionCookie.name, sessionCookie.value, {
      path: '/',
      ...sessionCookie.attributes
    })
  }

  // attach the user and session to the request
  event.locals.user = user
  event.locals.session = session

  return resolve(event)
}

Try the status route

At the moment we haven't protected any routes, we simply attach a user to the request. Lets test it. Create a new /status route:

<!-- src/routes/status/+page.svelte -->
<script lang="ts">
  import type { PageData } from './$types'

  export let data: PageData
</script>

userId: {data.user?.id}

// src/routes/status/+page.server.ts
import type { PageServerLoad } from './$types'

export const load = (async ({ locals }) => {
  return { user: locals.user }
}) satisfies PageServerLoad

Login using your passkey, then visit the /status page. If all goes well, you should see your userId displayed. Now clear your cookies and visit the status page again. userId should be undefined.

Protect the route

There are many better ways of doing this, but let's go for a simple approach. Update the hooks and check the route id. If routeId === /status and the user is not authenticated we'll redirect them to the login page:

// src/hooks.server.ts
import { lucia } from '$lib/server/auth'
import { redirect, type Handle } from '@sveltejs/kit'

export const handle: Handle = async ({ event, resolve }) => {
  const sessionId = event.cookies.get(lucia.sessionCookieName)

  const { session, user } = sessionId
    ? await lucia.validateSession(sessionId)
    : { session: null, user: null }

  if (session && session.fresh) {
    const sessionCookie = lucia.createSessionCookie(session.id)
    event.cookies.set(sessionCookie.name, sessionCookie.value, {
      path: '/',
      ...sessionCookie.attributes
    })
  }

  if (!session) {
    const sessionCookie = lucia.createBlankSessionCookie()
    event.cookies.set(sessionCookie.name, sessionCookie.value, {
      path: '/',
      ...sessionCookie.attributes
    })
  }

  event.locals.user = user
  event.locals.session = session

  // protect the /status route
  if (event.route.id === '/status' && !event.locals.user) {
    redirect(302, '/login')
  }

  return resolve(event)
}

Try to access the protected route

Clear your cookies and visit /status. You should be redirected to the login page.

Sign out

Clearing cookies all the time is pretty annoying, so lets add a /logout route:

<!-- src/routes/logout/+page.svelte -->
<script lang="ts">
  import type { PageData } from './$types'

  export let data: PageData
</script>

<form method="post">
  <button type="submit">Logout</button>
</form>

// src/routes/logout/+page.server.ts
import type { Actions } from './$types'
import { lucia } from '$lib/server/auth'
import { redirect } from '@sveltejs/kit'

export const actions: Actions = {
  default: async ({ locals, cookies }) => {
    if (locals.session) {
      await lucia.invalidateSession(locals.session.id)
      cookies.delete(lucia.sessionCookieName, { path: '/' })
    }

    redirect(302, '/login')
  }
}

Try signing out

Navigate to the /logout page and sign out. You should be redirected to the login page. If you check your browser cookies, you should see that the auth_session cookie has been removed.

Summary

We wired up passkey registration with local account registration. We used the sub field, which represents a user in the Passlock system, as the local user id. However we could have generated a local user id and added a column passlock_sub to the user table.

Instead of using the passlock sub we could insead have used Passlock's authId (authenticator id) as this represents the passkey itself. However as you'll later discover, there are some benefits to referencing sub as it allows us to easily add social login to our SvelteKit apps.

How to add passkey login to your SvelteKit app

Toby Hobson — Tue, 01 Oct 2024 11:42:08 +0000

In this tutorial you'll learn how to add passkey authentication to your SvelteKit apps. In subsequent tutorials I'll show you how to add session management, social login and more.

Check out the full SvelteKit + Authentication Tutorial on my blog.

Feeling lazy?

I've put together a SvelteKit Starter App which supports passkeys, social sign in and other features. You can choose from multiple UI frameworks including Daisy UI, Preline and Shadcn. Use the CLI script and follow the prompts:

pnpm create @passlock/sveltekit

That's it! check out the generated source code, which has plenty of comments. If you like it, please give it a star 🙏

Alternatively read on to learn how to do this manually...

Create a SvelteKit app

Use SvelteKit's CLI to generate a skeleton project:

pnpm create svelte@latest my-app

Note: Choose the skeleton project template, with Typescript support.

Add the library

We'll use Passlock, my SvelteKit library for passkey registration and authentication:

pnpm add -D @passlock/sveltekit

Create a registration route

Create a new template at src/routes/register/+page.svelte:

<!-- src/routes/register/+page.svelte -->
<form method="post">
  Email: <input type="text" name="email" /> <br />
  First name: <input type="text" name="givenName" /> <br />
  Last name: <input type="text" name="familyName" /> <br />
  <button type="submit">Register</button>
</form>

This won’t win any design awards but I want to keep things simple. Now for the real work … we’ll intercept the form submission and register a passkey on the users device:

<!-- src/routes/register/+page.svelte -->
<script lang="ts">
  import { enhance } from '$app/forms'
  import { register } from '@passlock/sveltekit'

  // we'll fill in the tenancyId and clientId later
  const { onSubmit } = register({ tenancyId: 'TBC', clientId: 'TBC' })
</script>

<form method="post" use:enhance={onSubmit}>
  Email: <input type="text" name="email" /> <br />
  First name: <input type="text" name="givenName" /> <br />
  Last name: <input type="text" name="familyName" /> <br />
  <button type="submit">Register</button>
</form>

Explanation

We’re using SvelteKit’s progressive enhancement to intercept the form submission. We use Passlock’s SvelteKit extension to register a passkey.

If all goes well, this will return a token that we can exchange for a Principal in our form action.

Process the token in the form action

The form will be submitted with an additional token field. We’ll use it to fetch the passkey details in the form action.

Create a new form action at src/routes/register/+page.server.ts:

// src/routes/register/+page.server.ts
import type { Actions } from './$types'
import { Passlock, TokenVerifier } from '@passlock/sveltekit'

// we'll replace the TBCs later
const tokenVerifier = new TokenVerifier({
  tenancyId: 'TBC',
  apiKey: 'TBC'
})

export const actions: Actions = {
  default: async ({ request }) => {
    const formData = await request.formData()
    const token = formData.get('token') as string
    const result = await tokenVerifier.exchangeToken(token)

    if (Passlock.isPrincipal(result)) {
      console.log(result)
    } else {
      console.error(result.message)
    }
  }
}

The result includes a sub field (subject / user id), along with an authId (authenticator i.e. passkey id). In the next tutorial we'll use this to link the passkey to a local user account.

Create a Passlock cloud account

We've used TBC for some Passlock config values. It's time to replace these with real values.

Create a developer account at passlock.dev then head to the settings tab within your console. We're after the tenancyId, clientId and apiKey values.

Note: Passlock cloud is a serverless passkey platform that also supports social login, mailbox verification, audit logs and more. It's free for personal and commercial use.

Edit your .env file (or .env.local) and create entries for these values:

# .env
PUBLIC_PASSLOCK_TENANCY_ID = '...'
PUBLIC_PASSLOCK_CLIENT_ID = '...'
PASSLOCK_API_KEY = '...'

If you don't have a .env file in your app root, create one.

You can now reference these in your template and form actions:

<!-- src/routes/register/+page.svelte -->
<script lang="ts">
  import {
    PUBLIC_PASSLOCK_TENANCY_ID,
    PUBLIC_PASSLOCK_CLIENT_ID
  } from '$env/static/public'

  const { onSubmit } = register({ 
    tenancyId: PUBLIC_PASSLOCK_TENANCY_ID, 
    clientId: PUBLIC_PASSLOCK_CLIENT_ID, 
  })

  ...
</script>

// src/routes/register/+page.server.ts
import { PUBLIC_PASSLOCK_TENANCY_ID } from '$env/static/public'
import { PASSLOCK_API_KEY } from '$env/static/private'

const tokenVerifier = new TokenVerifier({
  tenancyId: PUBLIC_PASSLOCK_TENANCY_ID,
  apiKey: PASSLOCK_API_KEY
})

...

Try to register a passkey

Although we're not yet finished, you should be at a point where you can register a passkey.

Navigate to the /register page and complete the form. You should be prompted to create a passkey and the form action will spit out details of the passkey registration.

You should also see an entry in the users tab of your Passlock console. The console can be used to view security related events, suspend and delete users and more.

Too slow?

At this stage things may seem slow and clunky. We'll address this in a subsequent tutorial, for now we just want to get things working.

Create a login route

We can now register a passkey on the users device. Let’s use that passkey to authenticate. The process is essentially the same as it was for registration.

Create a login template at src/routes/login/+page.svelte:

<!-- src/routes/login/+page.svelte -->
<script lang="ts">
  import { enhance } from '$app/forms'
  import { login } from '@passlock/sveltekit'

  import {
    PUBLIC_PASSLOCK_TENANCY_ID,
    PUBLIC_PASSLOCK_CLIENT_ID
  } from '$env/static/public'

  const { onSubmit } = login({ 
    tenancyId: PUBLIC_PASSLOCK_TENANCY_ID, 
    clientId: PUBLIC_PASSLOCK_CLIENT_ID
  })
</script>

<form method="post" use:enhance={onSubmit}>
  Email:
  <input type="text" name="email" />
  <br />

  <button type="submit">Login</button>
</form>

Notice how we’re only passing the email this time. Now for the form action:

// src/routes/login/+page.server.ts
import type { Actions } from './$types'
import { Passlock, TokenVerifier } from '@passlock/sveltekit'
import { PUBLIC_PASSLOCK_TENANCY_ID } from '$env/static/public'
import { PASSLOCK_API_KEY } from '$env/static/private'

const tokenVerifier = new TokenVerifier({
  tenancyId: PUBLIC_PASSLOCK_TENANCY_ID,
  apiKey: PASSLOCK_API_KEY
})

export const actions: Actions = {
  default: async ({ request }) => {
    const formData = await request.formData()
    const token = formData.get('token') as string
    const result = await tokenVerifier.exchangeToken(token)

    if (Passlock.isPrincipal(result)) {
      console.log(result)
    } else {
      console.error(result.message)
    }
  }
}

The form action is the same (at this stage). Passlock abstracts passkey registration and authentication into a common structure known as a Principal.

Try to login using your passkey

Navigate to the /login page, enter your email (the one you used for registration) and click login. If all goes well, you should see your user details in the server console.

Within your Passlock console, under the users tab you should see an entry. If you click on the user you'll be able to see the passkey registration and authentication events.

Summary

We used the Passlock library to register a passkey on the users device. The public key component of the passkey is stored in your Passlock vault.

During authentication we ask the user to present their passkey. Passlock verifies that the passkey is authentic, then generates a secure token. This token is passed to the backend form action in the form submission.

The form action verifies the secure token is authentic, exchanging it for details about the user and the passkey they used to authenticate.

Next steps

We've made a great start but we now need to link the passkeys to local user accounts and sessions. That's the subject of the next tutorial..