TanStack Start 통합
이 통합 가이드는 TanStack Start를 사용한다고 가정합니다.
시작하기 전에 Better Auth 인스턴스가 구성되어 있는지 확인하세요. 아직 설정하지 않았다면 설치 가이드를 확인하세요.
핸들러 마운트
TanStack API 엔드포인트/서버 라우트에 핸들러를 마운트해야 합니다.
새 파일 /src/routes/api/auth/$.ts를 생성하세요
import { auth } from '@/lib/auth'
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/api/auth/$')({
server: {
handlers: {
GET: ({ request }) => {
return auth.handler(request)
},
POST: ({ request }) => {
return auth.handler(request)
},
},
},
})아직 서버 라우트 핸들러를 생성하지 않았다면 파일 /src/server.ts를 생성하여 만들 수 있습니다
import {
createStartHandler,
defaultStreamHandler,
} from '@tanstack/react-start/server'
import { createRouter } from './router'
export default createStartHandler({
createRouter,
})(defaultStreamHandler)사용 팁
- 서버 액션과
auth.api보다는 클라이언트 SDK 또는authClient를 사용하여 인증을 처리하는 것을 권장합니다. - 쿠키를 설정해야 하는 함수(예:
signInEmail또는signUpEmail)를 호출할 때 TanStack Start에 대한 쿠키 설정을 처리해야 합니다. Better Auth는 이를 자동으로 처리하는reactStartCookies플러그인을 제공합니다.
import { betterAuth } from "better-auth";
import { reactStartCookies } from "better-auth/react-start";
export const auth = betterAuth({
//...설정
plugins: [reactStartCookies()] // 배열의 마지막 플러그인으로 추가해야 합니다
})이제 쿠키를 설정하는 함수를 호출하면 TanStack Start의 쿠키 처리 시스템을 사용하여 자동으로 설정됩니다.
import { auth } from "@/lib/auth"
const signIn = async () => {
await auth.api.signInEmail({
body: {
email: "user@email.com",
password: "password",
}
})
}