docs

SvelteKit Starter App

Sveltekit starter template featuring Passkeys, Social Login (Apple & Google), CRUD operations and more...
Demo (Daisy UI)   |   Demo (Preline)   |   Demo (Shadcn)

Features

1. 🔑 Passkey registration and authentication
2. 📱 Apple sign in
3. ☝️ Google sign in / one-tap
4. 📪 Mailbox verification (via a one time code or link)
5. 💾 CRUD operations via Prisma
6. 🌘 Dark mode with theme selection (light/dark/system)
7. 🚀 Daisy UI, Preline & Shadcn/UI variants

Screen recording

passlock-demo.mp4

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. Prisma ORM - Typescript ORM
5. Tailwind - Utility-first CSS framework
6. Daisy UI = Tailwind UI library
7. Preline UI - Tailwind UI library ¹
8. Shadcn UI - Tailwind components for Svelte
9. Melt UI - Headless component library for Svelte

^[1] Uses native Svelte in place of Preline JavaScript

(back to top)

Requirements

• Node 18+
• pnpm (optional)
• This example project uses the cloud based Passlock framework for passkey registration and authentication. Passlock is free for personal and commercial use. Create an account at https://passlock.dev

Usage

Use the CLI to create a SvelteKit app. Choose from Daisy, Preline or Shadcn variants

pnpm create @passlock/sveltekit

Then follow the instructions:

Set the environment variables

1. PUBLIC_PASSLOCK_TENANCY_ID
2. PUBLIC_PASSLOCK_CLIENT_ID
3. PUBLIC_APPLE_CLIENT_ID (optional) ¹
4. PUBLIC_APPLE_REDIRECT_URL (optional) ¹
5. PUBLIC_GOOGLE_CLIENT_ID (optional) ¹
6. PASSLOCK_API_KEY

^[1] If not using Apple/Google set to an empty string

Note

Your Passlock Tenancy ID, Client ID and API Key (token) can be found in your Passlock console under settings and API Keys.

Update your .env file with the relevant credentials.

Tip

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

Tenancy information -> Vite .env -> Download

Start the dev server

pnpm run dev

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

(back to top)

Navigate the app

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 a social provider. 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. Unfortunately that's not how browsers behave. Instead the browser/device will prompt them to use a passkey from a 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 backend or they have a linked social account. This allows us to display a helpful message telling them to either sign up or login using their Google credentials.

(back to top)

Social Login

This template also supports Social Login from both Apple and Google..

Sign in with Google

Allow your users to register/sign in using a Google account. The app 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 under 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 used the same email address with another authenticator (i.e. passkey or apple), you'll need to first delete the user in your Passlock console. This app doesn't yet support account linking (but it's coming in a couple of weeks)

(back to top)

Sign in with Apple

Similar to Google, users can sign in using an Apple account, however there are a few more steps and gotchas to be aware of...

1. You need a (paid) Apple developer account
2. You must have an App ID, however you don't need an app, just a registered App ID
3. You can't test using localhost, you'll need to tunnel a public, https url to your local server using something like ngrok
4. We need to pass a redirect URL to Apple, even though we're not using redirects 🤯. In practice this means registering https://mysite.com with Apple and using it for PUBLIC_APPLE_REDIRECT_URL. Everything will work, even on https://mysite.com/login
5. Apple only returns user data for the first call. In normal use this isn't an issue, but if during testing you delete your account and register again, you will also need to break the link in your apple account. Go to https://appleid.apple.com -> Sign in with Apple -> Passlock Demo -> Stop using Sign in with Apple

Adding Apple sign in

1. Create an Apple App ID with "Sign in with Apple" enabled
2. Create an Apple Service ID with "Sign in with Apple" enabled
3. Register the relevant website domains and redirect URLs with the service account
4. Update your .env or .env.local to include the PUBLIC_APPLE_CLIENT_ID and PUBLIC_APPLE_REDIRECT_URL variables.
5. Record your Apple Client ID in your Passlock settings: Social Login -> Apple Client ID

Testing Apple sign in

If all went well you should be able to register an account and sign in using your Apple id.

IMPORTANT! If you previously used the same email address with another authenticator (i.e. passkey or Google), you'll need to first delete the user in your Passlock console. This app doesn't yet support account linking (but it's coming in a couple of weeks)

(back to top)

Mailbox verification

This app 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)

Questions? Problems

Please file an issue and I'll respond ASAP.