Merge remote-tracking branch 'origin/main' into thang-origin/feat/svelte-kit-auth-1

* 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>

.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"),
         ],
       },

.gitignore

@@ -34,6 +34,7 @@ packages/next-auth/utils
 packages/next-auth/core
 packages/next-auth/jwt
 packages/next-auth/react
+packages/next-auth/web
 packages/next-auth/adapters.d.ts
 packages/next-auth/adapters.js
 packages/next-auth/index.d.ts

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

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
+	}
+};

apps/playground-sveltekit/.gitignore

@@ -6,3 +6,7 @@ node_modules
 .env
 .env.*
 !.env.example
+.vercel
+.output
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

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

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" } }]
+}

apps/playground-sveltekit/package.json

@@ -1,43 +1,39 @@
 {
-  "name": "sveltekit-nextauth",
+	"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",
+	"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",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write ."
+	},
+	"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",
-    "next-auth": "latest"
+    "next-auth-core": "workspace:^0.0.1",
+    "next-auth-sveltekit": "workspace:^0.0.1"
   },
-  "prettier": {
-    "semi": false,
-    "singleQuote": false
-  }
+	"type": "module"
 }

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 {}

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>

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 "next-auth-sveltekit"
+import GitHub from 'next-auth-core/providers/github';
+import Google from 'next-auth-core/providers/google';
+import Credentials from 'next-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,
+});

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>

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),
-})

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,
   }
 }

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>

apps/playground-sveltekit/src/routes/+page.svelte

@@ -1,7 +1,25 @@
+<script>
+	import { signIn, signOut } from 'next-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>

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)

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;

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
 }

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;

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

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",
@@ -70,5 +71,10 @@
       "type": "opencollective",
       "url": "https://opencollective.com/nextauth"
     }
-  ]
+  ],
+  "pnpm": {
+    "overrides": {
+      "undici": "5.11.0"
+    }
+  }
 }

packages/core/.gitignore

@@ -0,0 +1,5 @@
+adapters.*
+index.*
+jwt
+lib
+providers

packages/core/src/lib/types.ts

@@ -576,3 +576,37 @@ export interface InternalOptions<
   cookies: CookiesOptions
   callbackUrl: string
 }
+
+// Client types
+/**
+ * Util type that matches some strings literally, but allows any other string as well.
+ * @source https://github.com/microsoft/TypeScript/issues/29729#issuecomment-832522611
+ */
+export type LiteralUnion<T extends U, U = string> =
+  | T
+  | (U & Record<never, never>)
+
+
+export interface SignInOptions extends Record<string, unknown> {
+  /**
+   * Specify to which URL the user will be redirected after signing in. Defaults to the page URL the sign-in is initiated from.
+   *
+   * [Documentation](https://next-auth.js.org/getting-started/client#specifying-a-callbackurl)
+   */
+  callbackUrl?: string
+  /** [Documentation](https://next-auth.js.org/getting-started/client#using-the-redirect-false-option) */
+  redirect?: boolean
+}
+/** Match `inputType` of `new URLSearchParams(inputType)` */
+export type SignInAuthorizationParams =
+  | string
+  | string[][]
+  | Record<string, string>
+  | URLSearchParams
+
+export interface SignOutParams<R extends boolean = true> {
+  /** [Documentation](https://next-auth.js.org/getting-started/client#specifying-a-callbackurl-1) */
+  callbackUrl?: string
+  /** [Documentation](https://next-auth.js.org/getting-started/client#using-the-redirect-false-option-1 */
+  redirect?: R
+}

packages/frameworks/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

packages/frameworks/sveltekit/.eslintrc.cjs

@@ -0,0 +1,20 @@
+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
+	}
+};

packages/frameworks/sveltekit/.gitignore

@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

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

packages/frameworks/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" } }]
+}

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.

packages/frameworks/sveltekit/package.json

@@ -0,0 +1,38 @@
+{
+	"name": "next-auth-sveltekit",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "svelte-package -w",
+		"build": "vite build",
+		"preview": "vite preview",
+		"test": "playwright test",
+		"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",
+		"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"
+}

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;

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;
+}

packages/frameworks/sveltekit/src/lib/client/index.ts

@@ -0,0 +1,92 @@
+import type { LiteralUnion, SignInOptions, SignInAuthorizationParams, SignOutParams } from "next-auth-core";
+import type { BuiltInProviderType, RedirectableProviderType } from "next-auth-core/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();
+}

packages/frameworks/sveltekit/src/lib/index.ts

@@ -0,0 +1,65 @@
+import type { Handle } from '@sveltejs/kit';
+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 next-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;

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;

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');
+});

packages/frameworks/sveltekit/tsconfig.json

@@ -0,0 +1,18 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "NodeNext"
+	}
+	// 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
+}

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;

packages/next-auth/tsconfig.dev.json

@@ -2,7 +2,9 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "watch": true,
-    "emitDeclarationOnly": false
+    "emitDeclarationOnly": false,
+    "module": "none",
+    "resolveJsonModule": false
   },
   "watchOptions": {
     "excludeDirectories": [

pnpm-workspace.yaml

@@ -2,4 +2,5 @@ packages:
   - "packages/**"
   - "packages/frameworks/**"
   - "apps/dev"
+  - "apps/playground-sveltekit"
   - "docs"