feat(frameworks): Introduce SvelteKit Auth (#6041)

* WIP use `Request` and `Response` for core * bump Next.js * rename ts types * refactor * simplify * upgrade Next.js * implement body reader * use `Request`/`Response` in `next-auth/next` * make linter happy * revert * fix tests * remove workaround for middleware return type * return session in protected api route example * don't export internal handler * fall back host to localhost * refactor `getBody` * refactor `next-auth/next` * chore: add `@edge-runtime/jest-environment` * fix tests, using Node 18 as runtime * fix test * remove patch * upgrade/add dependencies * type and default import on one line * don't import all adapters by default in dev * simplify internal endpoint config Instead of passing url and params around as a string and an object, we parse them into a `URL` instance. * assert if both endpoint and issuer config is missing * allow internal redirect to be `URL` * mark clientId as always internally, fix comments * add web-compatible authorization URL handling * fix type * fix neo4j build * remove new-line * reduce file changes in the PR * simplify types * refactor `crypto` usage In Node.js, inject `globalThis.crypto` instead of import * add `next-auth/web` * refactor * send header instead of body to indicate redirect response * fix eslint * fix tests * chore: upgrade dep * fix import * refactor: more renames * wip core * support OIDC * remove `openid-client` * temprarily remove duplicate logos * revert * move redirect logic to core * feat: add sveltekit auth * wip fix css * revert Logo component * output ESM * fix logout * deprecate OAuth 1, simplify internals, improve defaults * refactor providers, test facebook * fix providers * target es2020 * fix CSS * fix AuthHandler, add getServerSession * update lock file * make logos optional * sync with `next-auth` * clean up `next-auth/edge` * sync * Sync (#2) * fix(core): properly construct url (#5984) * chore(release): bump package version(s) [skip ci] * fix(core): add protocol if missing * fix(core): throw error if no action can be determined * test(core): fix test * chore(release): bump package version(s) [skip ci] * chore(docs): add new tutorial (#5604) Co-authored-by: Nico Domino <yo@ndo.dev> * fix(core): handle `Request` -> `Response` regressions (#5991) * fix(next): don't override `Content-Type` by `unstable_getServerSession` * fix(core): handle `,` while setting `set-cookie` * chore(release): bump package version(s) [skip ci] * fix(sequelize): increase sequelize `id_token` column length (#5929) Co-authored-by: Nico Domino <yo@ndo.dev> * fix(core): correct status code when returning redirects (#6004) * fix(core): correctly set status when returning redirect * update tests * forward other headers * update test * remove default 200 status * fix(core): host detection/NEXTAUTH_URL (#6007) * rename `host` to `origin` internally * rename `userOptions` to `authOptions` internally * use object for `headers` internally * default `method` to GET * simplify `unstable_getServerSession` * allow optional headers * revert middleware * wip getURL * revert host detection * use old `detectHost` * fix/add some tests wip * move more to core, refactor getURL * better type auth actions * fix custom path support (w/ api/auth) * add `getURL` tests * fix email tests * fix assert tests * custom base without api/auth, with trailing slash * remove parseUrl from assert.ts * return 400 when wrong url * fix tests * refactor * fix protocol in dev * fix tests * fix custom url handling * add todo comments * chore(release): bump package version(s) [skip ci] * update lock file * fix(next): correctly bundle next-auth/middleware fixes #6025 * fix(core): preserve incoming set cookies (#6029) * fix(core): preserve `set-cookie` by the user * add test * improve req/res mocking * refactor * fix comment typo * chore(release): bump package version(s) [skip ci] * make logos optional * sync with `next-auth` * clean up `next-auth/edge` * sync Co-authored-by: Balázs Orbán <balazsorban44@users.noreply.github.com> Co-authored-by: Thomas Desmond <24610108+thomas-desmond@users.noreply.github.com> Co-authored-by: Nico Domino <yo@ndo.dev> Co-authored-by: Cyril Perraud <perraud.cyril@gmail.com> * merge * clean up sveltekit auth handler * upgrade playground to latest * upgrade sveltekit auth to latest * Some more refactoring * feat: extract type to core and reuse in sveltekit * remove uuid * make secret required in dev * remove todo comments * pass through OAuth client options * generate declaration map * default env secret to AUTH_SECRET * temporary Headers fix * move pages to lib * move errors to lib * move pages/index to lib * move routes to lib * move init to lib * move styles to lib * move types to lib * move utils to lib * fix imports * update ignore/clean patterns * fix imports * update styles ts * update gitignore * update exports field * revert `next-auth` * remove extra tsconfig files * remove `private` from package.json * revert * feat sveltekit * commit * remove unused file, expose type * remove nextauth_url, memoize locals.getSession * move to dependency * fix * format * fix post build * simplify * fix lock file * add packages/frameworks * update package.json * update gitignore * Delete .gitignore * Update types.ts * Update tsconfig.dev.json * skip test * format * skip format/lint Co-authored-by: Balázs Orbán <info@balazsorban.com> Co-authored-by: Balázs Orbán <balazsorban44@users.noreply.github.com> Co-authored-by: Thomas Desmond <24610108+thomas-desmond@users.noreply.github.com> Co-authored-by: Nico Domino <yo@ndo.dev> Co-authored-by: Cyril Perraud <perraud.cyril@gmail.com>
2026-05-01 10:55:20 +00:00 · 2022-12-14 03:10:53 +07:00
parent 6680860293
commit b5e1b19771
39 changed files with 2114 additions and 2764 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -18,6 +18,7 @@ module.exports = {
      parserOptions: {
        project: [
          path.resolve(__dirname, "./packages/**/tsconfig.eslint.json"),
+          path.resolve(__dirname, "./packages/frameworks/**/tsconfig.json"),
          path.resolve(__dirname, "./apps/**/tsconfig.json"),
        ],
      },
--- a/.gitignore
+++ b/.gitignore
@@ -85,4 +85,13 @@ packages/core/adapters.*
 packages/core/index.*
 packages/core/jwt
 packages/core/lib
-packages/core/providers
+packages/core/providers
+
+
+# SvelteKit
+packages/frameworks/sveltekit/index.*
+packages/frameworks/sveltekit/client.*
+packages/frameworks/sveltekit/.svelte-kit
+packages/frameworks/sveltekit/package
+packages/frameworks/sveltekit/vite.config.js.timestamp-*
+packages/frameworks/sveltekit/vite.config.ts.timestamp-*
--- a/apps/playground-sveltekit/.eslintignore
+++ b/apps/playground-sveltekit/.eslintignore
@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
--- a/apps/playground-sveltekit/.eslintrc.cjs
+++ b/apps/playground-sveltekit/.eslintrc.cjs
@@ -1,24 +1,20 @@
 module.exports = {
-  root: true,
-  parser: "@typescript-eslint/parser",
-  extends: [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "prettier",
-  ],
-  plugins: ["svelte3", "@typescript-eslint"],
-  ignorePatterns: ["*.cjs", "build/**/*"],
-  overrides: [{ files: ["*.svelte"], processor: "svelte3/svelte3" }],
-  settings: {
-    "svelte3/typescript": () => require("typescript"),
-  },
-  parserOptions: {
-    sourceType: "module",
-    ecmaVersion: 2020,
-  },
-  env: {
-    browser: true,
-    es2017: true,
-    node: true,
-  },
-}
+	root: true,
+	parser: '@typescript-eslint/parser',
+	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+	plugins: ['svelte3', '@typescript-eslint'],
+	ignorePatterns: ['*.cjs'],
+	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	settings: {
+		'svelte3/typescript': () => require('typescript')
+	},
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+};
--- a/apps/playground-sveltekit/.gitignore
+++ b/apps/playground-sveltekit/.gitignore
@@ -6,3 +6,7 @@ node_modules
 .env
 .env.*
 !.env.example
+.vercel
+.output
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
--- a/apps/playground-sveltekit/.prettierignore
+++ b/apps/playground-sveltekit/.prettierignore
@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
--- a/apps/playground-sveltekit/.prettierrc
+++ b/apps/playground-sveltekit/.prettierrc
@@ -0,0 +1,9 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"pluginSearchDirs": ["."],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}
--- a/apps/playground-sveltekit/package.json
+++ b/apps/playground-sveltekit/package.json
@@ -1,43 +1,37 @@
 {
-  "name": "sveltekit-nextauth",
-  "private": true,
-  "version": "0.0.1",
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build",
-    "preview": "vite preview",
-    "start": "HOST=127.0.0.1 PORT=5173 ORIGIN=http://localhost:5173 node ./build",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --check . && eslint .",
-    "format": "prettier --write ."
-  },
-  "devDependencies": {
-    "@sveltejs/adapter-auto": "^1.0.0-next.80",
-    "@sveltejs/adapter-node": "1.0.0-next.96",
-    "@sveltejs/kit": "1.0.0-next.511",
-    "@types/cookie": "^0.5.1",
-    "@typescript-eslint/eslint-plugin": "^5.35.1",
-    "@typescript-eslint/parser": "^5.35.1",
-    "eslint": "^8.22.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-svelte3": "^4.0.0",
-    "prettier": "^2.7.1",
-    "prettier-plugin-svelte": "^2.7.0",
-    "svelte": "^3.49.0",
-    "svelte-check": "^2.8.1",
-    "svelte-preprocess": "^4.10.7",
-    "tslib": "^2.4.0",
-    "typescript": "~4.8.2",
-    "vite": "^3.1.0"
-  },
-  "type": "module",
-  "dependencies": {
-    "cookie": "0.5.0",
-    "next-auth": "latest"
-  },
-  "prettier": {
-    "semi": false,
-    "singleQuote": false
-  }
+	"name": "sveltekit-nextauth",
+	"private": true,
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+	},
+	"devDependencies": {
+		"@fontsource/fira-mono": "^4.5.10",
+		"@neoconfetti/svelte": "^1.0.0",
+		"@sveltejs/adapter-auto": "next",
+		"@sveltejs/kit": "next",
+		"@types/cookie": "^0.5.1",
+		"@typescript-eslint/eslint-plugin": "^5.45.0",
+		"@typescript-eslint/parser": "^5.45.0",
+		"eslint": "^8.28.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-svelte3": "^4.0.0",
+		"prettier": "^2.8.0",
+		"prettier-plugin-svelte": "^2.8.1",
+		"svelte": "^3.54.0",
+		"svelte-check": "^2.9.2",
+		"tslib": "^2.4.1",
+		"typescript": "^4.9.3",
+		"vite": "^4.0.0"
+	},
+	"dependencies": {
+		"cookie": "0.5.0",
+		"@auth/core": "workspace:*",
+		"@auth/sveltekit": "workspace:^"
+	},
+	"type": "module"
 }
--- a/apps/playground-sveltekit/src/app.d.ts
+++ b/apps/playground-sveltekit/src/app.d.ts
@@ -1,4 +1,5 @@
 /// <reference types="@sveltejs/kit" />
+/// <reference types="next-auth-sveltekit" />
 import type {
  User as NextAuthUser,
  Session as NextAuthSession,
@@ -18,7 +19,8 @@ interface AppSession extends NextAuthSession {
 declare global {
  declare namespace App {
    interface Locals {
-      session: AppSession
+      // session: AppSession
+      getSession: () => Promise<AppSession>
    }

    interface Platform {}
--- a/apps/playground-sveltekit/src/app.html
+++ b/apps/playground-sveltekit/src/app.html
@@ -1,12 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
-    <meta name="viewport" content="width=device-width" />
-    %sveltekit.head%
-  </head>
-  <body>
-    <div>%sveltekit.body%</div>
-  </body>
-</html>
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+  <meta name="viewport" content="width=device-width" />
+  %sveltekit.head%
+</head>
+
+<body>
+  <div>%sveltekit.body%</div>
+</body>
+
+</html>
--- a/apps/playground-sveltekit/src/hooks.server.ts
+++ b/apps/playground-sveltekit/src/hooks.server.ts
@@ -1,14 +1,25 @@
-import type { Handle } from "@sveltejs/kit"
-import { getServerSession, options as nextAuthOptions } from "$lib/next-auth"
+import SvelteKitAuth from "@auth/sveltekit"
+import GitHub from '@auth/core/providers/github';
+import Google from '@auth/core/providers/google';
+import Credentials from '@auth/core/providers/credentials';
+import {
+  GITHUB_CLIENT_ID,
+  GITHUB_CLIENT_SECRET,
+  GOOGLE_CLIENT_ID,
+  GOOGLE_CLIENT_SECRET,
+} from "$env/static/private"

-export const handle: Handle = async function handle({
-  event,
-  resolve,
-}): Promise<Response> {
-  const session = await getServerSession(event.request, nextAuthOptions)
-  if (session) {
-    event.locals.session = session
-  }
-
-  return resolve(event)
-}
+export const handle = SvelteKitAuth({
+  providers: [
+    GitHub({ clientId: GITHUB_CLIENT_ID, clientSecret: GITHUB_CLIENT_SECRET }),
+    Google({ clientId: GOOGLE_CLIENT_ID, clientSecret: GOOGLE_CLIENT_SECRET }),
+    Credentials({
+      credentials: { password: { label: "Password", type: "password" } },
+      async authorize(credentials) {
+        if (credentials.password !== "pw") return null
+        return { name: "Fill Murray", email: "bill@fillmurray.com", image: "https://www.fillmurray.com/64/64", id: "1", foo: "" }
+      },
+    }),
+  ],
+  debug: true,
+});
--- a/apps/playground-sveltekit/src/lib/SignInButton.svelte
+++ b/apps/playground-sveltekit/src/lib/SignInButton.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	export let provider: any;
+</script>
+
+<form action={provider.signinUrl} method="POST">
+	{#if provider.callbackUrl}
+		<input type="hidden" name="callbackUrl" value={provider.callbackUrl} />
+	{/if}
+	<button type="submit" class="button">
+		<slot>Sign in with {provider.name}</slot>
+	</button>
+</form>
--- a/apps/playground-sveltekit/src/lib/next-auth.ts
+++ b/apps/playground-sveltekit/src/lib/next-auth.ts
@@ -1,144 +0,0 @@
-import type { ServerLoadEvent } from "@sveltejs/kit"
-import type { RequestInternal } from "next-auth"
-import type { NextAuthAction, NextAuthOptions } from "next-auth/core/types"
-import type { OutgoingResponse as NextAuthResponse } from "next-auth/core"
-import { NextAuthHandler } from "next-auth/core"
-import GithubProvider from "next-auth/providers/github"
-import cookie from "cookie"
-import {
-  GITHUB_CLIENT_ID,
-  GITHUB_CLIENT_SECRET,
-  NEXTAUTH_SECRET,
-} from "$env/static/private"
-import { PUBLIC_NEXTAUTH_URL } from "$env/static/public"
-
-// @ts-expect-error import is exported on .default during SSR
-const github = GithubProvider?.default || GithubProvider
-
-export const options: NextAuthOptions = {
-  providers: [
-    github({
-      clientId: GITHUB_CLIENT_ID,
-      clientSecret: GITHUB_CLIENT_SECRET,
-    }),
-  ],
-}
-
-const toSvelteKitResponse = async <
-  T extends string | any[] | Record<string, any>
->(
-  request: Request,
-  nextAuthResponse: NextAuthResponse<T>
-): Promise<Response> => {
-  const { cookies, redirect } = nextAuthResponse
-
-  const headers = new Headers()
-  for (const header of nextAuthResponse?.headers || []) {
-    // pass headers along from next-auth
-    headers.set(header.key, header.value)
-  }
-
-  // set-cookie header
-  if (cookies?.length) {
-    headers.set(
-      "set-cookie",
-      cookies
-        ?.map((item) => cookie.serialize(item.name, item.value, item.options))
-        .join(",") as string
-    )
-  }
-
-  let body = undefined
-  let status = nextAuthResponse.status || 200
-
-  if (redirect) {
-    let formData: FormData | null = null
-    try {
-      formData = await request.formData()
-    } catch {
-      // no formData passed
-    }
-    const { json } = Object.fromEntries(formData ?? [])
-    if (json !== "true") {
-      status = 302
-      headers.set("Location", redirect)
-    } else {
-      body = { url: redirect }
-    }
-  } else {
-    body = nextAuthResponse.body
-  }
-
-  // @ts-expect-error - body is a known HTML document or JSON object
-  return new Response(body, {
-    status,
-    headers,
-  })
-}
-
-const SKNextAuthHandler = async (
-  { request, url, params }: ServerLoadEvent,
-  options: NextAuthOptions
-): Promise<Response> => {
-  const [action, provider] = params.nextauth!.split("/")
-  let body: FormData | undefined
-  try {
-    body = await request.formData()
-  } catch {
-    // no formData passed
-  }
-  options.secret = NEXTAUTH_SECRET
-  const req: RequestInternal = {
-    host: PUBLIC_NEXTAUTH_URL,
-    body: Object.fromEntries(body ?? []),
-    query: Object.fromEntries(url.searchParams),
-    headers: request.headers,
-    method: request.method,
-    cookies: cookie.parse(request.headers.get("cookie") || ""),
-    action: action as NextAuthAction,
-    providerId: provider,
-    error: provider,
-  }
-
-  const response = await NextAuthHandler({
-    req,
-    options,
-  })
-
-  return toSvelteKitResponse(request, response)
-}
-
-export const getServerSession = async (
-  request: Request,
-  options: NextAuthOptions
-): Promise<App.Session | null> => {
-  options.secret = NEXTAUTH_SECRET
-
-  const session = await NextAuthHandler<App.Session>({
-    req: {
-      host: PUBLIC_NEXTAUTH_URL,
-      action: "session",
-      method: "GET",
-      cookies: cookie.parse(request.headers.get("cookie") || ""),
-      headers: request.headers,
-    },
-    options,
-  })
-
-  const { body } = session
-
-  if (body && Object.keys(body).length) {
-    return body as App.Session
-  }
-  return null
-}
-
-export const NextAuth = (
-  options: NextAuthOptions
-): {
-  GET: (event: ServerLoadEvent) => Promise<unknown>
-  POST: (event: ServerLoadEvent) => Promise<unknown>
-} => ({
-  GET: (event) => SKNextAuthHandler(event, options),
-  POST: (event) => SKNextAuthHandler(event, options),
-})
--- a/apps/playground-sveltekit/src/routes/+layout.server.ts
+++ b/apps/playground-sveltekit/src/routes/+layout.server.ts
@@ -1,7 +1,14 @@
 import type { LayoutServerLoad } from "./$types"

-export const load: LayoutServerLoad = ({ locals }) => {
+export const load: LayoutServerLoad = (event) => {
+  console.log('layout server load', event.locals.getSession)
+  let session
+  if (event.locals.getSession)
+   {
+  session = event.locals.getSession()
+
+   }
  return {
-    session: locals.session,
+    session,
  }
 }
--- a/apps/playground-sveltekit/src/routes/+layout.svelte
+++ b/apps/playground-sveltekit/src/routes/+layout.svelte
@@ -1,151 +1,144 @@
 <script lang="ts">
-  import { page } from "$app/stores"
+	import { page } from '$app/stores';
 </script>

 <div>
-  <header>
-    <div class="signedInStatus">
-      <p class="nojs-show loaded">
-        {#if Object.keys($page.data.session || {}).length}
-          {#if $page.data.session.user.image}
-            <span
-              style="background-image: url('{$page.data.session.user.image}')"
-              class="avatar"
-            />
-          {/if}
-          <span class="signedInText">
-            <small>Signed in as</small><br />
-            <strong
-              >{$page.data.session.user.email ||
-                $page.data.session.user.name}</strong
-            >
-          </span>
-          <a href="/api/auth/signout" class="button">Sign out</a>
-        {:else}
-          <span class="notSignedInText">You are not signed in</span>
-          <a href="/api/auth/signin" class="buttonPrimary">Sign in</a>
-        {/if}
-      </p>
-    </div>
-    <nav>
-      <ul class="navItems">
-        <li class="navItem"><a href="/">Home</a></li>
-        <li class="navItem"><a href="/protected">Protected</a></li>
-      </ul>
-    </nav>
-  </header>
-  <slot />
+	<header>
+		<div class="signedInStatus">
+			<p class="nojs-show loaded">
+				{#if Object.keys($page.data.session || {}).length}
+					{#if $page.data.session.user.image}
+						<span style="background-image: url('{$page.data.session.user.image}')" class="avatar" />
+					{/if}
+					<span class="signedInText">
+						<small>Signed in as</small><br />
+						<strong>{$page.data.session.user.email || $page.data.session.user.name}</strong>
+					</span>
+					<a href="/auth/signout" class="button">Sign out</a>
+				{:else}
+					<span class="notSignedInText">You are not signed in</span>
+					<a href="/auth/signin" class="buttonPrimary">Sign in</a>
+				{/if}
+			</p>
+		</div>
+		<nav>
+			<ul class="navItems">
+				<li class="navItem"><a href="/">Home</a></li>
+				<li class="navItem"><a href="/protected">Protected</a></li>
+			</ul>
+		</nav>
+	</header>
+	<slot />
 </div>

 <style>
-  :global(body) {
-    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-      "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
-      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-      "Noto Color Emoji";
-    padding: 0 1rem 1rem 1rem;
-    max-width: 680px;
-    margin: 0 auto;
-    background: #fff;
-    color: #333;
-  }
-  :global(li),
-  :global(p) {
-    line-height: 1.5rem;
-  }
-  :global(a) {
-    font-weight: 500;
-  }
-  :global(hr) {
-    border: 1px solid #ddd;
-  }
-  :global(iframe) {
-    background: #ccc;
-    border: 1px solid #ccc;
-    height: 10rem;
-    width: 100%;
-    border-radius: 0.5rem;
-    filter: invert(1);
-  }
+	:global(body) {
+		font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+			'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+			'Segoe UI Symbol', 'Noto Color Emoji';
+		padding: 0 1rem 1rem 1rem;
+		max-width: 680px;
+		margin: 0 auto;
+		background: #fff;
+		color: #333;
+	}
+	:global(li),
+	:global(p) {
+		line-height: 1.5rem;
+	}
+	:global(a) {
+		font-weight: 500;
+	}
+	:global(hr) {
+		border: 1px solid #ddd;
+	}
+	:global(iframe) {
+		background: #ccc;
+		border: 1px solid #ccc;
+		height: 10rem;
+		width: 100%;
+		border-radius: 0.5rem;
+		filter: invert(1);
+	}

-  .nojs-show {
-    opacity: 1;
-    top: 0;
-  }
-  .signedInStatus {
-    display: block;
-    min-height: 4rem;
-    width: 100%;
-  }
-  .loaded {
-    position: relative;
-    top: 0;
-    opacity: 1;
-    overflow: hidden;
-    border-radius: 0 0 0.6rem 0.6rem;
-    padding: 0.6rem 1rem;
-    margin: 0;
-    background-color: rgba(0, 0, 0, 0.05);
-    transition: all 0.2s ease-in;
-  }
-  .signedInText,
-  .notSignedInText {
-    position: absolute;
-    padding-top: 0.8rem;
-    left: 1rem;
-    right: 6.5rem;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    display: inherit;
-    z-index: 1;
-    line-height: 1.3rem;
-  }
-  .signedInText {
-    padding-top: 0rem;
-    left: 4.6rem;
-  }
-  .avatar {
-    border-radius: 2rem;
-    float: left;
-    height: 2.8rem;
-    width: 2.8rem;
-    background-color: white;
-    background-size: cover;
-    background-repeat: no-repeat;
-  }
-  .button,
-  .buttonPrimary {
-    float: right;
-    margin-right: -0.4rem;
-    font-weight: 500;
-    border-radius: 0.3rem;
-    cursor: pointer;
-    font-size: 1rem;
-    line-height: 1.4rem;
-    padding: 0.7rem 0.8rem;
-    position: relative;
-    z-index: 10;
-    background-color: transparent;
-    color: #555;
-  }
-  .buttonPrimary {
-    background-color: #346df1;
-    border-color: #346df1;
-    color: #fff;
-    text-decoration: none;
-    padding: 0.7rem 1.4rem;
-  }
-  .buttonPrimary:hover {
-    box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.2);
-  }
-  .navItems {
-    margin-bottom: 2rem;
-    padding: 0;
-    list-style: none;
-  }
-  .navItem {
-    display: inline-block;
-    margin-right: 1rem;
-  }
+	.nojs-show {
+		opacity: 1;
+		top: 0;
+	}
+	.signedInStatus {
+		display: block;
+		min-height: 4rem;
+		width: 100%;
+	}
+	.loaded {
+		position: relative;
+		top: 0;
+		opacity: 1;
+		overflow: hidden;
+		border-radius: 0 0 0.6rem 0.6rem;
+		padding: 0.6rem 1rem;
+		margin: 0;
+		background-color: rgba(0, 0, 0, 0.05);
+		transition: all 0.2s ease-in;
+	}
+	.signedInText,
+	.notSignedInText {
+		position: absolute;
+		padding-top: 0.8rem;
+		left: 1rem;
+		right: 6.5rem;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		display: inherit;
+		z-index: 1;
+		line-height: 1.3rem;
+	}
+	.signedInText {
+		padding-top: 0rem;
+		left: 4.6rem;
+	}
+	.avatar {
+		border-radius: 2rem;
+		float: left;
+		height: 2.8rem;
+		width: 2.8rem;
+		background-color: white;
+		background-size: cover;
+		background-repeat: no-repeat;
+	}
+	.button,
+	.buttonPrimary {
+		float: right;
+		margin-right: -0.4rem;
+		font-weight: 500;
+		border-radius: 0.3rem;
+		cursor: pointer;
+		font-size: 1rem;
+		line-height: 1.4rem;
+		padding: 0.7rem 0.8rem;
+		position: relative;
+		z-index: 10;
+		background-color: transparent;
+		color: #555;
+	}
+	.buttonPrimary {
+		background-color: #346df1;
+		border-color: #346df1;
+		color: #fff;
+		text-decoration: none;
+		padding: 0.7rem 1.4rem;
+	}
+	.buttonPrimary:hover {
+		box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.2);
+	}
+	.navItems {
+		margin-bottom: 2rem;
+		padding: 0;
+		list-style: none;
+	}
+	.navItem {
+		display: inline-block;
+		margin-right: 1rem;
+	}
 </style>
--- a/apps/playground-sveltekit/src/routes/+page.svelte
+++ b/apps/playground-sveltekit/src/routes/+page.svelte
@@ -1,7 +1,25 @@
+<script>
+	import { signIn, signOut } from '@auth/sveltekit/client';
+	import { page } from '$app/stores';
+</script>
+
 <h1>SvelteKit + NextAuth.js Example</h1>
 <p>
-  This is an example site to demonstrate how to use <a
-    href="https://kit.svelte.dev/">SvelteKit</a
-  >
-  with <a href="https://next-auth.js.org">NextAuth.js</a> for authentication.
+	This is an example site to demonstrate how to use <a href="https://kit.svelte.dev/">SvelteKit</a>
+	with <a href="https://next-auth.js.org">NextAuth.js</a> for authentication.
+
+	{#if Object.keys($page.data.session || {}).length}
+		{#if $page.data.session.user.image}
+			<span style="background-image: url('{$page.data.session.user.image}')" class="avatar" />
+		{/if}
+		<span class="signedInText">
+			<small>Signed in as</small><br />
+			<strong>{$page.data.session.user.email || $page.data.session.user.name}</strong>
+		</span>
+		<button on:click={() => signOut()} class="button">Sign out</button>
+	{:else}
+		<span class="notSignedInText">You are not signed in</span>
+		<button on:click={() => signIn('github')}>Sign In with GitHub</button>
+		<button on:click={() => signIn('credentials', { redirect: false })}>Sign In credentials</button>
+	{/if}
 </p>
--- a/apps/playground-sveltekit/src/routes/api/auth/[...nextauth]/+server.ts
+++ b/apps/playground-sveltekit/src/routes/api/auth/[...nextauth]/+server.ts
@@ -1,3 +0,0 @@
-import { NextAuth, options } from "$lib/next-auth"
-
-export const { GET, POST } = NextAuth(options)
--- a/apps/playground-sveltekit/static/favicon.ico
+++ b/apps/playground-sveltekit/static/favicon.ico
--- a/apps/playground-sveltekit/svelte.config.js
+++ b/apps/playground-sveltekit/svelte.config.js
@@ -1,14 +1,15 @@
-import adapter from "@sveltejs/adapter-node" // or use https://github.com/sveltejs/kit/tree/master/packages/adapter-auto
-import preprocess from "svelte-preprocess"
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/kit/vite';

 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-  // Consult https://github.com/sveltejs/svelte-preprocess
-  // for more information about preprocessors
-  preprocess: preprocess(),
-  kit: {
-    adapter: adapter(),
-  },
-}
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),

-export default config
+	kit: {
+		adapter: adapter()
+	}
+};
+
+export default config;
--- a/apps/playground-sveltekit/tsconfig.json
+++ b/apps/playground-sveltekit/tsconfig.json
@@ -1,17 +1,17 @@
 {
-  "extends": "./.svelte-kit/tsconfig.json",
-  "compilerOptions": {
-    "allowJs": true,
-    "checkJs": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "sourceMap": true,
-    "strict": true
-  }
-  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
-  //
-  // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
-  // from the referenced tsconfig.json - TypeScript does not merge them in
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
 }
--- a/apps/playground-sveltekit/vite.config.js
+++ b/apps/playground-sveltekit/vite.config.js
@@ -0,0 +1,8 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+
+/** @type {import('vite').UserConfig} */
+const config = {
+	plugins: [sveltekit()]
+};
+
+export default config;
--- a/apps/playground-sveltekit/vite.config.ts
+++ b/apps/playground-sveltekit/vite.config.ts
@@ -1,8 +0,0 @@
-import { sveltekit } from "@sveltejs/kit/vite"
-import type { UserConfig } from "vite"
-
-const config: UserConfig = {
-  plugins: [sveltekit()],
-}
-
-export default config
--- a/apps/playground-sveltekit/yarn.lock
+++ b/apps/playground-sveltekit/yarn.lock
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
    "clean": "turbo run clean --no-cache",
    "dev:db": "turbo run dev --parallel --continue --filter=next-auth-app...",
    "dev": "turbo run dev --parallel --continue --filter=next-auth-app... --filter=!./packages/adapter-*",
+    "dev:kit": "turbo run dev --parallel --continue --filter=sveltekit-nextauth...",
    "dev:docs": "turbo run dev --filter=next-auth-docs",
    "email": "cd apps/dev && pnpm email",
    "release": "release",
@@ -41,7 +42,8 @@
  },
  "release": {
    "packageDirectories": [
-      "packages"
+      "packages",
+      "packages/frameworks"
    ]
  },
  "engines": {
@@ -69,5 +71,10 @@
      "type": "opencollective",
      "url": "https://opencollective.com/nextauth"
    }
-  ]
+  ],
+  "pnpm": {
+    "overrides": {
+      "undici": "5.11.0"
+    }
+  }
 }
--- a/packages/frameworks/sveltekit/.eslintrc.cjs
+++ b/packages/frameworks/sveltekit/.eslintrc.cjs
@@ -0,0 +1,24 @@
+module.exports = {
+  root: true,
+  parser: "@typescript-eslint/parser",
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+  ],
+  plugins: ["svelte3", "@typescript-eslint"],
+  ignorePatterns: ["*.cjs"],
+  overrides: [{ files: ["*.svelte"], processor: "svelte3/svelte3" }],
+  settings: {
+    "svelte3/typescript": () => require("typescript"),
+  },
+  parserOptions: {
+    sourceType: "module",
+    ecmaVersion: 2020,
+  },
+  env: {
+    browser: true,
+    es2017: true,
+    node: true,
+  },
+}
--- a/packages/frameworks/sveltekit/.prettierignore
+++ b/packages/frameworks/sveltekit/.prettierignore
@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
--- a/packages/frameworks/sveltekit/README.md
+++ b/packages/frameworks/sveltekit/README.md
@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
--- a/packages/frameworks/sveltekit/package.json
+++ b/packages/frameworks/sveltekit/package.json
@@ -0,0 +1,64 @@
+{
+  "name": "@auth/sveltekit",
+  "version": "0.0.0",
+  "author": "Thang Huu Vu <hi@thvu.dev>",
+  "contributors": [
+    "Thang Huu Vu <hi@thvu.dev>",
+    "Balázs Orbán <info@balazsorban.com>",
+    "Nico Domino <yo@ndo.dev>",
+    "Lluis Agusti <hi@llu.lu>",
+    "Iain Collins <me@iaincollins.com"
+  ],
+  "scripts": {
+    "dev": "svelte-package -w",
+    "clean": "rm -rf client.* index.* package",
+    "build": "pnpm clean && svelte-package && node ./scripts/postbuild.js && rm -rf package",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "test:unit": "vitest",
+    "lint": "prettier --plugin-search-dir . --check . && eslint .",
+    "format": "prettier --plugin-search-dir . --write ."
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.28.1",
+    "@sveltejs/adapter-auto": "next",
+    "@sveltejs/kit": "next",
+    "@sveltejs/package": "1.0.0-next.6",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
+    "eslint": "^8.28.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-svelte3": "^4.0.0",
+    "next-auth": "workspace:*",
+    "prettier": "^2.8.0",
+    "prettier-plugin-svelte": "^2.8.1",
+    "svelte": "^3.54.0",
+    "svelte-check": "^2.9.2",
+    "tslib": "^2.4.1",
+    "typescript": "^4.9.3",
+    "vite": "^4.0.0",
+    "vitest": "^0.25.3"
+  },
+  "dependencies": {
+    "@auth/core": "workspace:*"
+  },
+  "type": "module",
+  "types": "./index.d.ts",
+  "files": [
+    "client.*",
+    "index.*",
+    "src"
+  ],
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    },
+    "./client": {
+      "types": "./client.d.ts",
+      "import": "./client.js"
+    },
+    "./package.json": "./package.json"
+  }
+}
--- a/packages/frameworks/sveltekit/playwright.config.ts
+++ b/packages/frameworks/sveltekit/playwright.config.ts
@@ -0,0 +1,11 @@
+import type { PlaywrightTestConfig } from "@playwright/test"
+
+const config: PlaywrightTestConfig = {
+  webServer: {
+    command: "npm run build && npm run preview",
+    port: 4173,
+  },
+  testDir: "tests",
+}
+
+export default config
--- a/packages/frameworks/sveltekit/scripts/postbuild.js
+++ b/packages/frameworks/sveltekit/scripts/postbuild.js
@@ -0,0 +1,13 @@
+// After build, copy the files in ./package to the root directory, excluding the package.json file.
+import fs from "fs/promises"
+import path from "path"
+
+const __dirname = path.dirname(new URL(import.meta.url).pathname)
+
+const root = path.join(__dirname, "..")
+const pkgDir = path.join(root, "package")
+
+await fs.cp(pkgDir, root, {
+  recursive: true,
+  filter: (src) => !src.includes("package.json"),
+})
--- a/packages/frameworks/sveltekit/src/app.d.ts
+++ b/packages/frameworks/sveltekit/src/app.d.ts
@@ -0,0 +1,20 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference types="@sveltejs/kit" />
+
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+// and what to do when importing types
+declare namespace App {
+  // interface Error {}
+  interface Locals {
+    getSession: () => Promise<unknown>
+  }
+  // interface PageData {}
+  // interface Platform {}
+}
+
+declare module "$env/static/private" {
+  export const AUTH_SECRET: string
+  export const AUTH_TRUST_HOST: string
+  export const VERCEL: string
+}
--- a/packages/frameworks/sveltekit/src/lib/client.ts
+++ b/packages/frameworks/sveltekit/src/lib/client.ts
@@ -0,0 +1,106 @@
+import type {
+  LiteralUnion,
+  SignInOptions,
+  SignInAuthorizationParams,
+  SignOutParams,
+} from "next-auth/react"
+import type {
+  BuiltInProviderType,
+  RedirectableProviderType,
+} from "next-auth/providers/index"
+
+/**
+ * Client-side method to initiate a signin flow
+ * or send the user to the signin page listing all possible providers.
+ * Automatically adds the CSRF token to the request.
+ *
+ * [Documentation](https://next-auth.js.org/getting-started/client#signin)
+ */
+export async function signIn<
+  P extends RedirectableProviderType | undefined = undefined
+>(
+  providerId?: LiteralUnion<
+    P extends RedirectableProviderType
+      ? P | BuiltInProviderType
+      : BuiltInProviderType
+  >,
+  options?: SignInOptions,
+  authorizationParams?: SignInAuthorizationParams
+) {
+  const { callbackUrl = window.location.href, redirect = true } = options ?? {}
+
+  // TODO: Support custom providers
+  const isCredentials = providerId === "credentials"
+  const isEmail = providerId === "email"
+  const isSupportingReturn = isCredentials || isEmail
+
+  // TODO: Handle custom base path
+  const signInUrl = `/auth/${
+    isCredentials ? "callback" : "signin"
+  }/${providerId}`
+
+  const _signInUrl = `${signInUrl}?${new URLSearchParams(authorizationParams)}`
+
+  // TODO: Handle custom base path
+  // TODO: Remove this since Sveltekit offers the CSRF protection via origin check
+  const csrfTokenResponse = await fetch("/auth/csrf")
+  const { csrfToken } = await csrfTokenResponse.json()
+
+  const res = await fetch(_signInUrl, {
+    method: "post",
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+      "X-Auth-Return-Redirect": "1",
+    },
+    // @ts-expect-error -- ignore
+    body: new URLSearchParams({
+      ...options,
+      csrfToken,
+      callbackUrl,
+    }),
+  })
+
+  const data = await res.clone().json()
+  const error = new URL(data.url).searchParams.get("error")
+
+  if (redirect || !isSupportingReturn || !error) {
+    // TODO: Do not redirect for Credentials and Email providers by default in next major
+    window.location.href = data.url ?? callbackUrl
+    // If url contains a hash, the browser does not reload the page. We reload manually
+    if (data.url.includes("#")) window.location.reload()
+    return
+  }
+
+  return res
+}
+
+/**
+ * Signs the user out, by removing the session cookie.
+ * Automatically adds the CSRF token to the request.
+ *
+ * [Documentation](https://next-auth.js.org/getting-started/client#signout)
+ */
+export async function signOut(options?: SignOutParams) {
+  const { callbackUrl = window.location.href } = options ?? {}
+  // TODO: Custom base path
+  // TODO: Remove this since Sveltekit offers the CSRF protection via origin check
+  const csrfTokenResponse = await fetch("/auth/csrf")
+  const { csrfToken } = await csrfTokenResponse.json()
+  const res = await fetch(`/auth/signout`, {
+    method: "post",
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+      "X-Auth-Return-Redirect": "1",
+    },
+    body: new URLSearchParams({
+      csrfToken,
+      callbackUrl,
+    }),
+  })
+  const data = await res.json()
+
+  const url = data.url ?? callbackUrl
+  window.location.href = url
+  // If url contains a hash, the browser does not reload the page. We reload manually
+  if (url.includes("#")) window.location.reload()
+}
--- a/packages/frameworks/sveltekit/src/lib/index.ts
+++ b/packages/frameworks/sveltekit/src/lib/index.ts
@@ -0,0 +1,71 @@
+import { AUTH_SECRET, AUTH_TRUST_HOST, VERCEL } from "$env/static/private"
+import { dev } from "$app/environment"
+
+import { AuthHandler, type AuthOptions, type AuthAction } from "@auth/core"
+
+export const getServerSession = async (
+  req: Request,
+  options: AuthOptions
+): Promise<unknown> => {
+  options.secret ??= AUTH_SECRET
+  options.trustHost ??= true
+
+  const url = new URL("/api/auth/session", req.url)
+  const response = await AuthHandler(
+    new Request(url, { headers: req.headers }),
+    options
+  )
+
+  const { status = 200 } = response
+
+  const data = await response.json()
+
+  if (!data || !Object.keys(data).length) return null
+
+  if (status === 200) {
+    return data
+  }
+  throw new Error(data.message)
+}
+
+interface SvelteKitAuthOptions extends AuthOptions {
+  /**
+   * @default '/auth'
+   */
+  prefix?: string
+}
+
+const actions: AuthAction[] = [
+  "providers",
+  "session",
+  "csrf",
+  "signin",
+  "signout",
+  "callback",
+  "verify-request",
+  "error",
+  "_log",
+]
+
+/** The main entry point to @auth/sveltekit */
+function SvelteKitAuth({ prefix = "/auth", ...options }: SvelteKitAuthOptions) {
+  options.secret ??= AUTH_SECRET
+  options.trustHost ??= !!(AUTH_TRUST_HOST ?? VERCEL ?? dev)
+
+  return (({ event, resolve }) => {
+    const [action] = event.url.pathname.slice(prefix.length + 1).split("/")
+    const isAuth = actions.includes(action as AuthAction)
+
+    if (!event.locals.getSession)
+      event.locals.getSession = async () =>
+        getServerSession(event.request, options)
+
+    if (!event.url.pathname.startsWith(prefix + "/") || !isAuth) {
+      return resolve(event)
+    }
+
+    return AuthHandler(event.request, options)
+  }) satisfies Handle
+}
+
+export default SvelteKitAuth
--- a/packages/frameworks/sveltekit/svelte.config.js
+++ b/packages/frameworks/sveltekit/svelte.config.js
@@ -0,0 +1,15 @@
+import adapter from "@sveltejs/adapter-auto"
+import { vitePreprocess } from "@sveltejs/kit/vite"
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+
+  kit: {
+    adapter: adapter(),
+  },
+}
+
+export default config
--- a/packages/frameworks/sveltekit/tests/test.ts
+++ b/packages/frameworks/sveltekit/tests/test.ts
@@ -0,0 +1,6 @@
+import { expect, test } from "@playwright/test"
+
+test("index page has expected h1", async ({ page }) => {
+  await page.goto("/")
+  expect(await page.textContent("h1")).toBe("Welcome to SvelteKit")
+})
--- a/packages/frameworks/sveltekit/tsconfig.json
+++ b/packages/frameworks/sveltekit/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  // "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "moduleResolution": "node"
+  },
+  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+  //
+  // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+  // from the referenced tsconfig.json - TypeScript does not merge them in
+  "exclude": ["scripts", "*.js", ".svelte-kit"]
+}
--- a/packages/frameworks/sveltekit/vite.config.js
+++ b/packages/frameworks/sveltekit/vite.config.js
@@ -0,0 +1,11 @@
+import { sveltekit } from "@sveltejs/kit/vite"
+
+/** @type {import('vite').UserConfig} */
+const config = {
+  plugins: [sveltekit()],
+  test: {
+    include: ["src/**/*.{test,spec}.{js,ts}"],
+  },
+}
+
+export default config
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -2,4 +2,5 @@ packages:
  - "packages/**"
  - "packages/frameworks/**"
  - "apps/dev"
+  - "apps/playground-sveltekit"
  - "docs"