Svelte Kit Integration

Before you start, make sure you have a Better Auth instance configured. If you haven't done that yet, check out the installation.

Mount the handler

We need to mount the handler to svelte kit server hook.

hooks.server.ts

import { auth } from "$lib/auth";
import { svelteKitHandler } from "better-auth/svelte-kit";
 
export async function handle({ event, resolve }) {
	return svelteKitHandler({ event, resolve, auth });
}

Create a client

Create a client instance. You can name the file anything you want. Here we are creating client.ts file inside the lib/ directory.

client.ts

import { createAuthClient } from "better-auth/svelte" // make sure to import from better-auth/svelte
 
export const authClient = createAuthClient({
    //you can pass client configuration here
})

Once you have created the client, you can use it to sign up, sign in, and perform other actions. Some of the actions are reactive. The client use nano-store to store the state and reflect changes when there is a change like a user signing in or out affecting the session state.

Example usage

<script lang="ts">
  import { authClient } from "$lib/client";
  const session = authClient.useSession();
</script>
    <div>
      {#if $session.data}
        <div>
          <p>
            {$session?.data?.user.name}
          </p>
          <button
            on:click={async () => {
              await authClient.signOut();
            }}
          >
            Signout
          </button>
        </div>
      {:else}
        <button
          on:click={async () => {
            await authClient.signIn.social({
              provider: "github",
            });
          }}
        >
          Continue with github
        </button>
      {/if}
    </div>

Example: Getting Session on a loader

+page.server.ts

import { auth } from "$lib/auth";
import type { PageServerLoad } from "./$types";
 
export const load: PageServerLoad = async ({request}) => {
	const session = await auth.api.getSession({
		headers: request.headers,
	});
	if (!session) {
		return {
			status: 401,
			headers: {
				"Content-Type": "application/json",
			},
			body: JSON.stringify({
				error: "Unauthorized",
			}),
		};
	}
	return session;
}

Svelte Kit Integration

Mount the handler

Create a client

Example usage

Example: Getting Session on a loader

On this page