Announcing SvelteKit Auth: Bringing NextAuth.js to all frameworks

NextAuth.js expands beyond Next.js with SvelteKit Auth

NextAuth.js, the authentication library that sees nearly 300,000 weekly npm downloads for Next.js applications, is no longer tied to that framework alone. The project has announced SvelteKit Auth (experimental), the first officially supported framework outside of Next.js, built on the newly decoupled @auth/core library. This marks the broader transition to Auth.js, a framework-agnostic authentication toolkit for the web.

The move aligns with the release of SvelteKit 1.0, which the Auth.js team sees as a natural fit. SvelteKit's opinionated structure for Svelte apps is conceptually close to what Next.js offers React developers, making it a strong candidate for a low-configuration authentication solution that supports popular OAuth platforms such as Google, Facebook, and GitHub.

Setting up SvelteKit Auth

Once @auth/sveltekit and @auth/core are installed, the first step is to configure the OAuth providers. Environment variables feed the provider configuration securely, as shown in the server hooks file:

import SvelteKitAuth from "@auth/sveltekit"
import GitHub from '@auth/core/providers/github';
import { GITHUB_ID, GITHUB_SECRET } from "$env/static/private"
export const handle = SvelteKitAuth({
  providers: [
    GitHub({ clientId: GITHUB_ID, clientSecret: GITHUB_SECRET }),
  ]
});

With providers configured, user actions are handled through signIn and signOut helpers. Session data can then drive the UI—showing a user's avatar and name when authenticated, or a sign-in button otherwise:

<script>
	import { signIn, signOut } from '@auth/sveltekit/client';
	import { page } from '$app/stores';
</script>
<p>
	{#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>
	{/if}
</p>

This authentication logic can also live in a shared layout to protect groups of routes, or be used directly to guard individual routes from unauthenticated access:

import { redirect } from "@sveltejs/kit"
import type { PageLoad } from "./$types"
export const load: PageLoad = async ({ parent }) => {
  const { session } = await parent()
  if (!session?.user) {
    throw redirect(302, "/")
  }
  return {}
}

Roadmap and community

SvelteKit Auth is still experimental, but the project aims to stabilize the package and extend Auth.js to more frontend frameworks. Users can track progress on Twitter or explore the package on GitHub, where new documentation is actively being developed. A SvelteKit Authentication Template on Vercel offers a quick starting point.

The project acknowledges its foundation of more than 450 community contributors, the original NextAuth.js creator Ian Collins, and open-source library work from Filip Skokan (@panva). Sponsors supporting the effort on OpenCollective include Prisma, Clerk, Lowdefy, WorkOS, Checkly, Superblog, and others.