Skip to main content

SvelteKit

danger

@auth/sveltekit is currently experimental. ๐Ÿ—

Installationโ€‹

npm install @auth/core @auth/sveltekit

Usageโ€‹

Learn more about @auth/sveltekit here

src/hooks.server.ts
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 })],
})

Don't forget to set the AUTH_SECRET environment variable. This should be a random 32 character string. On unix systems you can use openssl rand -hex 32 or check out https://generate-secret.vercel.app/32.

Signing in and signing outโ€‹

<script>
import { signIn, signOut } from "@auth/sveltekit/client"
import { page } from "$app/stores"
</script>

<h1>SvelteKit Auth Example</h1>
<p>
{#if $page.data.session}
{#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?.name ?? "User"}</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>