Better Auth•5mo ago

Working Svelte kit example

I published a Better-Auth example application that uses Svelte 5 and Runes. The existing example given in the Better Auth repository is for Svelte 4 and doesn't actually compile and run. I made a number of improvements to the UI to create a better quality user experience. https://github.com/vanbenj/better-auth-sveltekit5-example

GitHub

GitHub - vanbenj/better-auth-sveltekit5-example: An example app bui...

An example app built using Better-Auth with Svelte 5 Runes and Superform - vanbenj/better-auth-sveltekit5-example

12 Replies

brahma-dev•4mo ago

@benj Firstly, thanks for that. And secondly I have a possibly stupid question (I am new to both svelte and better-auth), but why did you need that svelteCookies plugin ? The official integration docs don't mention needing anything like that.

benjOP•4mo ago

It’s mentioned in the readme. It’s due to a bug where cookie data gets double encoded. Correction - it’s not in the readme. I’ll find the reference. It was a better auth issue.

benjOP•4mo ago

GitHub

Feat: Add a SvelteKit cookie helper · Issue #600 · better-auth/be...

Is your feature request related to a problem? Please describe. Currently, SvelteKit integration has no cookie helper like nextjs Describe the solution you'd like Similar plugin or helper for th...

benjOP•4mo ago

I thought I’d included the reference in the readme. I’ll need to find it.

benjOP•4mo ago

I updated the README with references https://github.com/vanbenj/better-auth-sveltekit5-example?tab=readme-ov-file#sveltecookies-betterauth-plugin

GitHub

GitHub - vanbenj/better-auth-sveltekit5-example: An example app bui...

An example app built using Better-Auth with Svelte 5 Runes and Superform - vanbenj/better-auth-sveltekit5-example

brahma-dev•4mo ago

Thanks a lot!

Budi•4mo ago

This has been incredibly helpful! Thank you for sharing this. @benj I think you can remove the authClient for things like getting the session and signing out too. Here's an example of a signOut via formAction:

    logout: async ({ cookies, request }) => {
        const res = await auth.api.signOut({ headers: request.headers, asResponse: true })

        if (res.ok) {
            flashRedirect(303, '/login', { type: 'success', message: "You're logged out" }, cookies)
        } else {
            const errorData = await res.json()
            console.log('Unexpected error during signOut', errorData)
            setFlash({ type: 'error', message: errorData.message || 'Signout failed' }, cookies)
            return fail(500, { message: 'Failed to log out.' })
        }
    },

    logout: async ({ cookies, request }) => {
        const res = await auth.api.signOut({ headers: request.headers, asResponse: true })

        if (res.ok) {
            flashRedirect(303, '/login', { type: 'success', message: "You're logged out" }, cookies)
        } else {
            const errorData = await res.json()
            console.log('Unexpected error during signOut', errorData)
            setFlash({ type: 'error', message: errorData.message || 'Signout failed' }, cookies)
            return fail(500, { message: 'Failed to log out.' })
        }
    },

And if you use this in your hooks.server.ts (I'm using a bunch of handlers in sequence) you can set the user and session globally with ease, without needing the authClient:

import { type Handle } from '@sveltejs/kit'
import { auth } from '../auth/auth'

export const betterAuthHandler: Handle = async ({ event, resolve }) => {
    const sessionResult = await auth.api.getSession({
        headers: event.request.headers
    })

    if (sessionResult !== null) {
        const { session, user } = sessionResult
        event.locals.user = user
        event.locals.session = session
    }

    return await resolve(event)
}

import { type Handle } from '@sveltejs/kit'
import { auth } from '../auth/auth'

export const betterAuthHandler: Handle = async ({ event, resolve }) => {
    const sessionResult = await auth.api.getSession({
        headers: event.request.headers
    })

    if (sessionResult !== null) {
        const { session, user } = sessionResult
        event.locals.user = user
        event.locals.session = session
    }

    return await resolve(event)
}

This I use in hooks.server.ts:

export const handle: Handle = sequence(rateLimitHandler, trpcHandler, authHandler)

export const handle: Handle = sequence(rateLimitHandler, trpcHandler, authHandler)

benjOP•4mo ago

Don't you need the svelteKitHandler for the verification and password reset url's to function properly? I guess it's not needed in hooks since the api routes handle that. I was going to remove those as redundant but in your case it makes sense. I like this I like the use of flash messages - that looks very useful

Budi•4mo ago

Yeah it's a great package by the maker of Superforms: https://github.com/ciscoheat/sveltekit-flash-message. It's up on Context7 too for easy AI implementation.

Budi•4mo ago

I have this if that's what you mean

Jeno•3mo ago

Thanks for the example! There is a cookies plugin in 1.3, not sure when they release it. https://github.com/better-auth/better-auth/pull/3049

GitHub

feat: sveltekit cookie helper plugin by Kinfe123 · Pull Request #3...

closes #600 #1821

Budi•3mo ago

I think it's in the beta release already.

Gaming

Programming

Working Svelte kit example

Did you find this page helpful?