Nuxt 통합

시작하기 전에 Better Auth 인스턴스가 구성되어 있는지 확인하세요. 아직 설정하지 않았다면 설치 가이드를 확인하세요.

API 라우트 생성

핸들러를 API 라우트에 마운트해야 합니다. /server/api/auth 내에 [...all].ts라는 파일을 생성하고 다음 코드를 추가하세요:

server/api/auth/[...all].ts
import { auth } from "~/lib/auth"; // auth 설정을 import합니다

export default defineEventHandler((event) => {
	return auth.handler(toWebRequest(event));
});

Better Auth 설정에서 경로를 변경할 수 있지만 /api/auth/[...all]로 유지하는 것을 권장합니다

데이터베이스 마이그레이션

다음 명령어를 실행하여 데이터베이스에 필요한 테이블을 생성하세요:

npx @better-auth/cli migrate

클라이언트 생성

클라이언트 인스턴스를 생성합니다. 파일 이름은 원하는 대로 지정할 수 있습니다. 여기서는 lib/ 디렉터리 내에 client.ts 파일을 생성합니다.

auth-client.ts
import { createAuthClient } from "better-auth/vue" // better-auth/vue에서 import해야 합니다

export const authClient = createAuthClient({
    // 클라이언트 설정을 여기에 전달할 수 있습니다
})

클라이언트를 생성한 후에는 회원가입, 로그인 및 기타 작업을 수행할 수 있습니다. 일부 작업은 반응형입니다.

사용 예제

index.vue
<script setup lang="ts">
import { authClient } from "~/lib/client"
const session = authClient.useSession()
</script>

<template>
    <div>
        <button v-if="!session?.data" @click="() => authClient.signIn.social({
            provider: 'github'
        })">
            GitHub로 계속하기
        </button>
        <div>
            <pre>{{ session.data }}</pre>
            <button v-if="session.data" @click="authClient.signOut()">
                로그아웃
            </button>
        </div>
    </div>
</template>

서버 사용법

auth 인스턴스에서 내보낸 api 객체에는 서버에서 수행할 수 있는 모든 작업이 포함되어 있습니다. Better Auth 내에서 만들어진 모든 엔드포인트는 함수로 호출할 수 있습니다. 플러그인 엔드포인트도 포함됩니다.

예제: 서버 API 라우트에서 세션 가져오기

server/api/example.ts
import { auth } from "~/lib/auth";

export default defineEventHandler((event) => {
    const session = await auth.api.getSession({
      headers: event.headers
    });

   if(session) {
     // session.session 및 session.user에 액세스
   }
});

SSR 사용법

SSR과 함께 Nuxt를 사용하는 경우 페이지 컴포넌트의 setup 함수에서 useSession 함수를 사용하고 useFetch를 전달하여 SSR에서 작동하도록 할 수 있습니다.

index.vue
<script setup lang="ts">
import { authClient } from "~/lib/auth-client";

const { data: session } = await authClient.useSession(useFetch);
</script>

<template>
    <p>
        {{ session }}
    </p>
</template>

미들웨어

Nuxt 프로젝트에 미들웨어를 추가하려면 클라이언트에서 useSession 메서드를 사용할 수 있습니다.

middleware/auth.global.ts
import { authClient } from "~/lib/auth-client";
export default defineNuxtRouteMiddleware(async (to, from) => {
	const { data: session } = await authClient.useSession(useFetch);
	if (!session.value) {
		if (to.path === "/dashboard") {
			return navigateTo("/");
		}
	}
});

리소스 및 예제

Edit on GitHub

Previous Page

Next

Next Page

SvelteKit

On this page