### Start SvelteKit Development Server

Source: https://github.com/passlock-dev/passlock/blob/master/packages/create-sveltekit/README.template.md

After setting up environment variables like PUBLIC_PASSLOCK_TENANCY_ID, PUBLIC_PASSLOCK_CLIENT_ID, and PASSLOCK_API_KEY, run this command to start the local development server for the SvelteKit application.

```bash
pnpm run dev
```

--------------------------------

### Start SvelteKit Development Server

Source: https://github.com/passlock-dev/passlock/blob/master/packages/create-sveltekit/docs/README.md

Command to start the local development server for the SvelteKit application. By default, the app runs on port 5174 in development mode.

```bash
pnpm run dev
```

--------------------------------

### Run SvelteKit Development Server

Source: https://github.com/passlock-dev/passlock/blob/master/packages/create-sveltekit/README.md

Execute this command to start the local development server for your SvelteKit application. Before running, ensure that the PUBLIC_PASSLOCK_TENANCY_ID, PUBLIC_PASSLOCK_CLIENT_ID, and PASSLOCK_API_KEY environment variables are correctly configured in your .env file, as these are crucial for Passlock integration.

```bash
pnpm run dev
```

--------------------------------

### Create a SvelteKit App with Passlock CLI

Source: https://github.com/passlock-dev/passlock/blob/master/packages/create-sveltekit/README.template.md

Use the Passlock CLI to scaffold a new SvelteKit application. This command allows you to choose between Daisy, Preline, or Shadcn UI variants during setup.

```bash
pnpm create @passlock/sveltekit
```

--------------------------------

### Start SvelteKit Development Server

Source: https://github.com/passlock-dev/passlock/blob/master/packages/create-sveltekit/docs/README.template.md

Command to start the SvelteKit development server. By default, this application runs on port 5174 when in development mode, as configured in `vite.config.ts`.

```bash
pnpm run dev
```

--------------------------------

### Authenticate with Passlock Passkey

Source: https://github.com/passlock-dev/passlock/blob/master/packages/client/README.md

This snippet shows how to authenticate a user using an existing passkey via the `@passlock/client` library. It initializes the Passlock client and then calls `authenticatePasskey`. The example includes error checking and logging the token for backend verification.

```typescript
import { Passlock, PasslockError } from '@passlock/client'

const tenancyId = '...'
const clientId = '...'

const passlock = new Passlock({ tenancyId, clientId })
const result = await passlock.authenticatePasskey()

if (!PasslockError.isError(result)) {
  // send the token to your backend for verification
  console.log('Token: %s', result.token)
}
```

--------------------------------

### Verify Passlock Token on Backend using Node.js Library

Source: https://github.com/passlock-dev/passlock/blob/master/packages/client/README.template.md

This example demonstrates how to verify a Passlock token on the backend using the `@passlock/node` library. It shows how to initialize the backend client with `tenancyId` and `apiKey`, then fetch the `principal` object to retrieve user details like the user ID.

```typescript
import { Passlock } from '@passlock/node'

// API Keys can be found in your passlock console
const passlock = new Passlock({ tenancyId, apiKey })

// token comes from your frontend
const principal = await passlock.fetchPrincipal({ token })

// get the user id
console.log(principal.user.id)

```

--------------------------------

### Register Passkey with Passlock Client

Source: https://github.com/passlock-dev/passlock/blob/master/packages/client/README.md

This snippet demonstrates how to register a new passkey using the `@passlock/client` library. It initializes the Passlock client with `tenancyId` and `clientId`, then calls `registerPasskey` with user details. The example shows how to check for errors and log the resulting token for backend verification.

```typescript
import { Passlock, PasslockError } from '@passlock/client'

// you can find these details in the settings area of your Passlock console
const tenancyId = '...'
const clientId = '...'

const passlock = new Passlock({ tenancyId, clientId })

// to register a new passkey, call registerPasskey(). We're using placeholders for
// the user data. You should grab this from an HTML form, React store, Redux etc.
const [email, givenName, familyName] = ["jdoe@gmail.com", "John", "Doe"]

// Passlock doesn't throw but instead returns a union: result | error
const result = await passlock.registerPasskey({ email, givenName, familyName })

// ensure we're error free
if (!PasslockError.isError(result)) {
  // send the token to your backend (json/fetch or hidden form field etc)
  console.log('Token: %s', result.token)
}
```

--------------------------------

### Configuring Email Verification for Passlock Passkey Registration

Source: https://github.com/passlock-dev/passlock/blob/master/packages/create-sveltekit/templates/common/docs/intro.md

Illustrates the `verifyEmail` option within the `passlock.registerPasskey()` call. It provides examples for sending a verification code (`method: 'code'`) or a verification link (`method: 'link'`) with a `redirectUrl`. It also notes that omitting `verifyEmail` will prevent any verification emails from being sent.

```typescript
// email a code
const verifyEmail = {
  method: 'code'
}

// email a link
const verifyEmail = {
  method: 'link',
  redirectUrl: 'http://localhost:5174/verify-email/link'
}

// verifyEmail can also be undefined in which case
// no verification mails will be sent
passlock.registerPasskey({ verifyEmail })
```

--------------------------------

### Verify Passlock Token on Backend with Node.js

Source: https://github.com/passlock-dev/passlock/blob/master/packages/client/README.md

This snippet demonstrates how to verify a token received from the frontend using the `@passlock/node` library. It initializes the Passlock backend client with `tenancyId` and `apiKey`, then fetches the principal details associated with the token. The example shows how to access the user ID from the verified principal.

```typescript
import { Passlock } from '@passlock/node'

// API Keys can be found in your passlock console
const passlock = new Passlock({ tenancyId, apiKey })

// token comes from your frontend
const principal = await passlock.fetchPrincipal({ token })

// get the user id
console.log(principal.user.id)

```

--------------------------------

### Verify Passlock Tokens on the Backend (Node.js & API)

Source: https://github.com/passlock-dev/passlock/blob/master/README.md

This section details how to verify tokens received from the frontend (after passkey registration or authentication) on the backend. It provides two methods: a direct GET request to the Passlock API endpoint and using the `@passlock/node` library. Both methods allow retrieving the principal (user) details associated with the token.

```APIDOC
GET https://api.passlock.dev/{tenancyId}/token/{token}

Description: Verifies a Passlock token and retrieves the associated principal (user) details.
Parameters:
  tenancyId: string (Path) - Your Passlock tenancy ID.
  token: string (Path) - The token received from the frontend after passkey registration or authentication.
Returns:
  JSON object containing principal details (e.g., user.id).
```

```typescript
import { Passlock } from '@passlock/node'

// API Keys can be found in your passlock console
const passlock = new Passlock({ tenancyId, apiKey })

// token comes from your frontend
const principal = await passlock.fetchPrincipal({ token })

// get the user id
console.log(principal.user.id)
```

--------------------------------

### Create SvelteKit App with Passlock CLI

Source: https://github.com/passlock-dev/passlock/blob/master/packages/create-sveltekit/docs/README.template.md

Instructions to initialize a new SvelteKit project using the Passlock CLI. Users can choose from Daisy, Preline, or Shadcn UI variants during creation.

```bash
pnpm create @passlock/sveltekit
```

--------------------------------

### Create SvelteKit App with Passlock CLI

Source: https://github.com/passlock-dev/passlock/blob/master/packages/create-sveltekit/docs/README.md

Instructions to initialize a new SvelteKit project using the Passlock CLI, allowing selection of UI variants like Daisy, Preline, or Shadcn.

```bash
pnpm create @passlock/sveltekit
```

--------------------------------

### Initialize SvelteKit App with Passlock CLI

Source: https://github.com/passlock-dev/passlock/blob/master/packages/create-sveltekit/README.md

Use this command to scaffold a new SvelteKit project integrated with Passlock. The CLI provides options to select different UI frameworks like Daisy, Preline, or Shadcn during creation.

```bash
pnpm create @passlock/sveltekit
```

--------------------------------

### Configure Passlock Environment Variables

Source: https://github.com/passlock-dev/passlock/blob/master/packages/create-sveltekit/docs/README.template.md

Required environment variables for the SvelteKit starter app, including Passlock tenancy and client IDs, API key, and optional Apple/Google client IDs and redirect URLs. These credentials are essential for the application's authentication features and can be found in the Passlock console.

```APIDOC
PUBLIC_PASSLOCK_TENANCY_ID
PUBLIC_PASSLOCK_CLIENT_ID
PUBLIC_APPLE_CLIENT_ID (optional)
PUBLIC_APPLE_REDIRECT_URL (optional)
PUBLIC_GOOGLE_CLIENT_ID (optional)
PASSLOCK_API_KEY
```

--------------------------------

### Initialize Passlock Node.js SDK and Fetch Principal

Source: https://github.com/passlock-dev/passlock/blob/master/packages/node/README.md

This snippet demonstrates how to initialize the Passlock Node.js SDK with your `tenancyId` and `apiKey`. It then shows how to use the `fetchPrincipal` method to retrieve user details, such as the user ID, by providing a secure token obtained from the frontend. This is crucial for server-side validation of frontend authentication.

```typescript
import { Passlock } from '@passlock/node'

const passlock = new Passlock({ tenancyId, apiKey })

// token comes from your frontend
const principal = await passlock.fetchPrincipal({ token })

// get the user id
console.log(principal.user.id)
```

--------------------------------

### Configure Passlock and Social Login Environment Variables

Source: https://github.com/passlock-dev/passlock/blob/master/packages/create-sveltekit/docs/README.md

List of required environment variables for Passlock integration, including tenancy and client IDs, API key, and optional Apple/Google client IDs and redirect URLs. These variables are crucial for connecting the SvelteKit app to the Passlock platform and enabling social logins.

```ENV
PUBLIC_PASSLOCK_TENANCY_ID
PUBLIC_PASSLOCK_CLIENT_ID
PUBLIC_APPLE_CLIENT_ID (optional)
PUBLIC_APPLE_REDIRECT_URL (optional)
PUBLIC_GOOGLE_CLIENT_ID (optional)
PASSLOCK_API_KEY
```

--------------------------------

### Passkey Registration Flow in SvelteKit

Source: https://github.com/passlock-dev/passlock/blob/master/packages/create-sveltekit/templates/common/docs/intro.md

This snippet outlines the process for user registration using passkeys, leveraging Superforms for form handling and Passlock for passkey creation and token generation. The backend verifies the token and links it to a new local user.

```Svelte/TypeScript
1. User completes and submits a form.
2. Superforms intercepts the submission.
3. The Passlock library is used to create a passkey.
4. A token, representing the new passkey, is returned.
5. This token is attached to the form and submitted.
6. In the backend action (e.g., `src/routes/(other)/+page.server.ts`), the token is verified by exchanging it for a Principal.
7. This Principal includes a user ID.
8. A new local user is created and linked to the user ID.
```

--------------------------------

### Initialize Passlock and Fetch Principal

Source: https://github.com/passlock-dev/passlock/blob/master/packages/node/README.template.md

Demonstrates how to initialize the Passlock Node.js SDK with `tenancyId` and `apiKey`, then use a token obtained from the frontend to fetch the principal (user details). The user's ID can then be accessed from the principal object.

```typescript
import { Passlock } from '@passlock/node'

const passlock = new Passlock({ tenancyId, apiKey })

// token comes from your frontend
const principal = await passlock.fetchPrincipal({ token })

// get the user id
console.log(principal.user.id)
```

--------------------------------

### Authenticate with an Existing Passkey using Passlock Client (TypeScript)

Source: https://github.com/passlock-dev/passlock/blob/master/packages/client/README.template.md

This snippet shows how to initialize the Passlock client and use `authenticatePasskey()` to allow users to log in with an existing passkey. It includes error handling to ensure a valid token is obtained for subsequent backend verification.

```typescript
import { Passlock, PasslockError } from '@passlock/client'

const tenancyId = '...'
const clientId = '...'

const passlock = new Passlock({ tenancyId, clientId })
const result = await passlock.authenticatePasskey()

if (!PasslockError.isError(result)) {
  // send the token to your backend for verification
  console.log('Token: %s', result.token)
}
```

--------------------------------

### Register a Passkey using Passlock Client (TypeScript)

Source: https://github.com/passlock-dev/passlock/blob/master/packages/client/README.template.md

This code demonstrates how to initialize the Passlock client with `tenancyId` and `clientId` to register a new passkey. It shows how to provide user details (email, givenName, familyName) and handle the `PasslockError` union type to retrieve the authentication token for backend verification.

```typescript
import { Passlock, PasslockError } from '@passlock/client'

// you can find these details in the settings area of your Passlock console
const tenancyId = '...'
const clientId = '...'

const passlock = new Passlock({ tenancyId, clientId })

// to register a new passkey, call registerPasskey(). We're using placeholders for
// the user data. You should grab this from an HTML form, React store, Redux etc.
const [email, givenName, familyName] = ["jdoe@gmail.com", "John", "Doe"]

// Passlock doesn't throw but instead returns a union: result | error
const result = await passlock.registerPasskey({ email, givenName, familyName })

// ensure we're error free
if (!PasslockError.isError(result)) {
  // send the token to your backend (json/fetch or hidden form field etc)
  console.log('Token: %s', result.token)
}
```

--------------------------------

### Configuring Email Verification Methods in SvelteKit

Source: https://github.com/passlock-dev/passlock/blob/master/packages/create-sveltekit/docs/README.template.md

This snippet demonstrates how to configure different email verification methods (link or code) for user registration within a SvelteKit application using Passlock. It shows how to define `VerifyEmail` objects for both link-based and code-based verification, and how to select one for use during registration.

```typescript
// 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
```

--------------------------------

### Passkey Authentication Flow in SvelteKit

Source: https://github.com/passlock-dev/passlock/blob/master/packages/create-sveltekit/templates/common/docs/intro.md

This snippet details the user authentication process using passkeys, similar to registration. Superforms handles form submission, Passlock authenticates the passkey and returns a token, which is then verified on the backend to create a Lucia session for the user.

```Svelte/TypeScript
1. User completes and submits a form.
2. Superforms intercepts the submission.
3. The Passlock library is used to authenticate via a passkey.
4. A token, representing the passkey authentication, is returned.
5. This token is attached to the form and submitted.
6. In the backend action (e.g., `src/routes/(other)/login/+page.server.ts`), the token is verified by exchanging it for a Principal.
7. This Principal includes a user ID.
8. The local user is looked up by ID, and a new Lucia session is created.
```

--------------------------------

### Authenticate with a Passkey using Passlock Client (TypeScript)

Source: https://github.com/passlock-dev/passlock/blob/master/README.template.md

This snippet shows how to authenticate an existing passkey using the `@passlock/client` TypeScript library. It initializes the Passlock client and calls `authenticatePasskey`. The generated token, if successful, is then sent to the backend for verification.

```TypeScript
import { Passlock, PasslockError } from '@passlock/client'

const tenancyId = '...'
const clientId = '...'

const passlock = new Passlock({ tenancyId, clientId })
const result = await passlock.authenticatePasskey()

if (!PasslockError.isError(result)) {
  // send the token to your backend for verification
  console.log('Token: %s', result.token)
}
```

--------------------------------

### Register a Passkey with Passlock Client (TypeScript)

Source: https://github.com/passlock-dev/passlock/blob/master/README.template.md

This snippet demonstrates how to register a new passkey using the `@passlock/client` TypeScript library. It initializes the Passlock client with `tenancyId` and `clientId`, then calls `registerPasskey` with user details. The resulting token, if no error occurs, should be sent to the backend for verification.

```TypeScript
import { Passlock, PasslockError } from '@passlock/client'

// you can find these details in the settings area of your Passlock console
const tenancyId = '...'
const clientId = '...'

const passlock = new Passlock({ tenancyId, clientId })

// to register a new passkey, call registerPasskey(). We're using placeholders for 
// the user data. You should grab this from an HTML form, React store, Redux etc.
const [email, givenName, familyName] = ["jdoe@gmail.com", "John", "Doe"]

// Passlock doesn't throw but instead returns a union: result | error
const result = await passlock.registerPasskey({ email, givenName, familyName })

// ensure we're error free
if (!PasslockError.isError(result)) {
  // send the token to your backend (json/fetch or hidden form field etc)
  console.log('Token: %s', result.token)
}
```

--------------------------------

### Configure Mailbox Verification Email Options in Passlock

Source: https://github.com/passlock-dev/passlock/blob/master/packages/create-sveltekit/docs/README.md

This snippet demonstrates how to configure email verification methods (link or code) for user registration within a Passlock application. It shows how to define 'VerifyEmail' objects for different verification strategies, allowing developers to choose between sending a verification link or a verification code.

```typescript
// 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
```

--------------------------------

### Social Sign-in Integration with Passlock

Source: https://github.com/passlock-dev/passlock/blob/master/packages/create-sveltekit/templates/common/docs/intro.md

This snippet describes the high-level process for integrating social sign-in (Apple/Google) using Passlock. Passlock handles the authentication with the social provider, returning a token that is then processed similarly to passkey authentication/registration.

```Svelte/TypeScript
1. User clicks the Apple/Google button (or uses one-tap).
2. Apple/Google authenticates the user.
3. The Passlock library processes their response.
4. This call returns a token, representing the user.
5. The token is then handled in the same manner as for passkey registration/authentication (verification, user lookup/creation, session creation).
```

--------------------------------

### Authenticate with a Passkey using Passlock Client (TypeScript)

Source: https://github.com/passlock-dev/passlock/blob/master/README.md

This snippet shows how to authenticate an existing user using a passkey via the `@passlock/client` TypeScript library. After initializing the Passlock client, it calls `authenticatePasskey`. Upon successful authentication, a token is returned, which needs to be sent to the backend for verification.

```typescript
import { Passlock, PasslockError } from '@passlock/client'

const tenancyId = '...'
const clientId = '...'

const passlock = new Passlock({ tenancyId, clientId })
const result = await passlock.authenticatePasskey()

if (!PasslockError.isError(result)) {
  // send the token to your backend for verification
  console.log('Token: %s', result.token)
}
```

--------------------------------

### Verify Passlock Token on Backend with Node.js (TypeScript)

Source: https://github.com/passlock-dev/passlock/blob/master/README.template.md

This snippet illustrates how to verify a token received from the frontend using the `@passlock/node` library. It initializes the Passlock client with `tenancyId` and `apiKey`, then uses `fetchPrincipal` to obtain user details from the token, confirming the authenticity of the passkey registration or authentication.

```TypeScript
import { Passlock } from '@passlock/node'

// API Keys can be found in your passlock console
const passlock = new Passlock({ tenancyId, apiKey })

// token comes from your frontend
const principal = await passlock.fetchPrincipal({ token })

// get the user id
console.log(principal.user.id)

```

--------------------------------

### Register a Passkey with Passlock Client (TypeScript)

Source: https://github.com/passlock-dev/passlock/blob/master/README.md

This snippet demonstrates how to register a new passkey using the `@passlock/client` TypeScript library. It initializes the Passlock client with `tenancyId` and `clientId`, then calls `registerPasskey` with user details like email, given name, and family name. The function returns a token upon successful registration, which should be sent to the backend for verification.

```typescript
import { Passlock, PasslockError } from '@passlock/client'

// you can find these details in the settings area of your Passlock console
const tenancyId = '...'
const clientId = '...'

const passlock = new Passlock({ tenancyId, clientId })

// to register a new passkey, call registerPasskey(). We're using placeholders for 
// the user data. You should grab this from an HTML form, React store, Redux etc.
const [email, givenName, familyName] = ["jdoe@gmail.com", "John", "Doe"]

// Passlock doesn't throw but instead returns a union: result | error
const result = await passlock.registerPasskey({ email, givenName, familyName })

// ensure we're error free
if (!PasslockError.isError(result)) {
  // send the token to your backend (json/fetch or hidden form field etc)
  console.log('Token: %s', result.token)
}
```

--------------------------------

### Protecting Routes with SvelteKit Hooks

Source: https://github.com/passlock-dev/passlock/blob/master/packages/create-sveltekit/templates/common/docs/intro.md

This snippet explains how server-side hooks in SvelteKit are used to protect specific routes. The `src/hooks.server.ts` file checks the route ID and the user/session status to enforce access control.

```Svelte/TypeScript
Route protection is implemented in `src/hooks.server.ts`.
This hook checks the route ID and the current user's session status.
Access to protected routes (e.g., `/todos`) is granted or denied based on these checks.
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.