SvelteKit 통합
시작하기 전에 Better Auth 인스턴스가 구성되어 있는지 확인하세요. 아직 설정하지 않았다면 설치 가이드를 확인하세요.
핸들러 마운트
SvelteKit 서버 훅에 핸들러를 마운트해야 합니다.
import { auth } from "$lib/auth";
import { svelteKitHandler } from "better-auth/svelte-kit";
import { building } from "$app/environment";
export async function handle({ event, resolve }) {
return svelteKitHandler({ event, resolve, auth, building });
}이벤트에 세션 데이터 채우기 (event.locals)
svelteKitHandler는 자동으로 event.locals.user 또는 event.locals.session을 채우지 않습니다. 서버 코드(예: +layout.server.ts, 액션 또는 엔드포인트)에서 현재 세션에 액세스하려면 handle 훅에서 event.locals를 채우세요:
import { auth } from "$lib/auth";
import { svelteKitHandler } from "better-auth/svelte-kit";
import { building } from "$app/environment";
export async function handle({ event, resolve }) {
// Better Auth에서 현재 세션 가져오기
const session = await auth.api.getSession({
headers: event.request.headers,
});
// 서버에서 세션과 사용자를 사용할 수 있도록 만들기
if (session) {
event.locals.session = session.session;
event.locals.user = session.user;
}
return svelteKitHandler({ event, resolve, auth, building });
}서버 액션 쿠키
서버 액션에서 signInEmail이나 signUpEmail과 같은 함수를 호출할 때 쿠키가 제대로 설정되도록 하려면 sveltekitCookies 플러그인을 사용해야 합니다. 이 플러그인은 SvelteKit에서 쿠키 설정을 자동으로 처리합니다.
Better Auth 인스턴스에 플러그인으로 추가해야 합니다.
getRequestEvent 함수는 SvelteKit 2.20.0 이상에서 사용할 수 있습니다.
호환되는 버전을 사용하고 있는지 확인하세요.
import { betterAuth } from "better-auth";
import { sveltekitCookies } from "better-auth/svelte-kit";
import { getRequestEvent } from "$app/server";
export const auth = betterAuth({
// ... 설정
plugins: [sveltekitCookies(getRequestEvent)], // 배열의 마지막 플러그인으로 추가해야 합니다
});클라이언트 생성
클라이언트 인스턴스를 생성합니다. 파일 이름은 원하는 대로 지정할 수 있습니다. 여기서는 lib/ 디렉터리 내에 client.ts 파일을 생성합니다.
import { createAuthClient } from "better-auth/svelte"; // better-auth/svelte에서 import해야 합니다
export const authClient = createAuthClient({
// 클라이언트 설정을 여기에 전달할 수 있습니다
});클라이언트를 생성한 후에는 회원가입, 로그인 및 기타 작업을 수행할 수 있습니다. 일부 작업은 반응형입니다. 클라이언트는 nano-store를 사용하여 상태를 저장하고 사용자 로그인 또는 로그아웃과 같이 세션 상태에 영향을 미치는 변경 사항이 있을 때 반영합니다.
사용 예제
<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();
}}
>
로그아웃
</button>
</div>
{:else}
<button
on:click={async () => {
await authClient.signIn.social({
provider: "github",
});
}}
>
GitHub로 계속하기
</button>
{/if}
</div>