SvelteKit Passkey Template

SvelteKit template project featuring Passkey authentication, Google sign in and mailbox verification.
Demo (Master/Preline)   |   Demo (Shadcn branch)

Features

1. Passkey registration and authentication
2. Google sign in / one-tap
3. Mailbox verification (via a one time code or link)
4. Dark mode with theme selection (light/dark/system)
5. Preline and Shadcn variants

Screenshots

Creating a new account and passkey

Shadcn/ui variant (dark mode)

Frameworks used

1. Passlock - Serverless passkey platform
2. Superforms - Makes form handling a breeze
3. Lucia - Robust session management
4. Tailwind - Utility-first CSS framework
5. Preline - Tailwind UI library ¹
6. shadcn-svelte - Tailwind components for Svelte ²
7. Melt UI - Headless component library for Svelte

^[1] Uses native Svelte in place of Preline JavaScript
^[2] See the shadcn branch

(back to top)

About

Pretty much every web application requires authentication and authorization. The future of web authenticaton lies in passkeys, and this starter app makes full use of them. Learn how to register and authenticate your users using passkeys, perform facial or fingerprint recognition and more. You'll also learn how to use some of SvelteKit's hottest libraries and implement Google's latest social sign in feature.

Demos

I've deployed 2 live versions of this project:

• Master demo - A version of the master branch (uses Preline + Melt UI)

• Shadcn demo - A version of the shadcn branch (uses shadcn-svelte)

Getting started

Prerequisites

This example project uses the cloud based Passlock framework for passkey registration and authentication. Create a free account at passlock.dev

Clone this repo

git clone git@github.com:passlock-dev/svelte-passkeys.git

Install the dependencies

cd svelte-passkeys
npm install

Set the environment variables

You'll need to set four variables:

1. PUBLIC_PASSLOCK_TENANCY_ID
2. PUBLIC_PASSLOCK_CLIENT_ID
3. PASSLOCK_API_KEY
4. PUBLIC_GOOGLE_CLIENT_ID ¹

^[1] - If you don't wish to use Google sign in/One tap set this variable to an empty string

Your Passlock tenancy id, client id and api key (token) can be found in your Passlock console under settings and API Keys. Please see the section Sign in with google if using Google sign in.

Create a .env.local file containing the relevant credentials.

Alternatively you can download a ready made .env file from your passlock console settings:

Tenancy information -> Vite .env -> Download

(back to top)

Usage

Start the dev server

npm run dev

Note: by default this app runs on port 5174 when in dev mode (see vite.config.ts)

Register a passkey

Navigate to the home page page and complete the form. Assuming your browser supports passkeys (most do), you should be prompted to create a passkey.

Authenticate

Logout then navigate to the login page. You should be prompted to authenticate using your newly created passkey.

Tip

Prompting for an email address during authentication is optional but highly recommended.

Imagine the user hasn't created a passkey, or they signed up using Google. When they try to sign in using a passkey you might expect that they would receive an error telling them that no passkey can be found, but unfortunately that's not how browsers behave. Instead the browser/device will prompt them to use a passkey on another different device. In my experience this confuses 90% of users.

By asking for an email address we can check if they have a passkey registered in the backed or they have a linked Google account. This allows us to display a helpful message telling them to either sign up or login using their Google credentials.

(back to top)

Sign in with Google

This app also allows users to register/sign in using a Google account. It uses the latest sign in with google code, avoiding redirects.

Adding Google sign in

1. Obtain your Google API Client ID
2. Update your .env or .env.local to include a PUBLIC_GOOGLE_CLIENT_ID variable.
3. Record your Google Client ID in your Passlock settings: Social Login -> Google Client ID

Important

Don't forget the last step!

Testing Google sign in

If all went well you should be able to register an account and then sign in using your Google credentials.

IMPORTANT! If you previously registered a passkey using the same email address that you wish to use for Google, you'll need to first delete the user in your Passlock console. This starter project doesn't support account linking although we may update it in the future to illustrate this.

(back to top)

Mailbox verification

This starter project also supports mailbox verification emails (via Passlock):

You can choose to verify an email address during passkey registration. Take a look at src/routes/(other)/+page.svelte:

// Email a verification link
const verifyEmailLink: VerifyEmail = {
  method: 'link',
  redirectUrl: String(new URL('/verify-email', $page.url))
}

// Email a verification code
const verifyEmailCode: VerifyEmail = {
  method: 'code'
}

// If you want to verify the user's email during registration
// choose one of the options above and take a look at /verify/email/+page.svelte
let verifyEmail: VerifyEmail | undefined = verifyEmailCode

Customizing the verification emails

See the emails section of your Passlock console

(back to top)

Shadcn/ui variant

Shadcn/ui variant

The default (master) branch uses Preline, however a shadcn-svelte variant is also available:

git checkout -b shadcn origin/shadcn

IMPORTANT: When switching between branches please re-install the NPM dependencies:

rm -r node_modules pnpm-lock.yaml
pnpm install

(back to top)

Documentation

Please see the developer docs

Questions? Problems

Please file an issue and I'll respond ASAP.