첫 번째 플러그인 만들기
이 가이드에서는 첫 번째 Better Auth 플러그인을 만드는 단계를 안내합니다.
이 가이드는 Better Auth의 기본 설정을 완료하고 첫 번째 플러그인을 만들 준비가 되었다고 가정합니다.
서버 플러그인 먼저
Better Auth 플러그인은 쌍으로 작동합니다: 서버 플러그인과 클라이언트 플러그인. 서버 플러그인은 인증 시스템의 기반을 형성하고, 클라이언트 플러그인은 서버 구현과 상호 작용할 수 있는 편리한 프론트엔드 API를 제공합니다.
문서에서 서버/클라이언트 플러그인에 대해 자세히 읽을 수 있습니다.
서버 플러그인 만들기
적절한 위치에 index.ts 파일이 있는 생일 플러그인 폴더를 만드세요.
index.ts 파일에서 서버 플러그인을 나타내는 함수를 내보냅니다.
이것이 나중에 auth.ts 파일의 플러그인 목록에 추가할 것입니다.
import { createAuthClient } from "better-auth/client";
import type { BetterAuthPlugin } from "better-auth";
export const birthdayPlugin = () =>
({
id: "birthdayPlugin",
} satisfies BetterAuthPlugin);이것은 아무것도 하지 않지만 기술적으로 첫 번째 플러그인을 만든 것입니다. 축하합니다! 🎉
스키마 정의
각 사용자의 생일 데이터를 저장하려면 user 모델 위에 스키마를 만들어야 합니다.
여기에서 스키마를 만들면 Better Auth의 CLI가 데이터베이스를 업데이트하는 데 필요한 스키마를 생성할 수 있습니다.
플러그인 스키마에 대해 자세히 알아볼 수 있습니다.
//...
export const birthdayPlugin = () =>
({
id: "birthdayPlugin",
schema: {
user: {
fields: {
birthday: {
type: "date", // string, number, boolean, date
required: true, // 새 레코드에 필드가 필요한 경우. (기본값: false)
unique: false, // 필드가 고유한 경우. (기본값: false)
references: null // 필드가 다른 테이블에 대한 참조인 경우. (기본값: null)
},
},
},
},
} satisfies BetterAuthPlugin);인증 로직
이 예제 가이드에서는 가입하는 사용자가 5세 이상인지 확인하고 보장하는 인증 로직을 설정합니다. 그러나 동일한 개념을 TOS에 동의하는 사용자를 확인하거나 이와 유사한 작업에 적용할 수 있습니다.
이를 위해 작업이 수행되기 전 또는 후에 코드를 실행할 수 있는 훅을 활용합니다.
export const birthdayPlugin = () => ({
//...
// 우리의 경우 인증 로직을 작성하려고 하므로
// `전`에 가로채고 싶습니다.
hooks: {
before: [
{
matcher: (context) => /* ... */,
handler: createAuthMiddleware(async (ctx) => {
//...
}),
},
],
},
} satisfies BetterAuthPlugin)우리의 경우 가입 경로로 가는 모든 요청을 일치시키려고 합니다:
{
matcher: (context) => context.path.startsWith("/sign-up/email"),
//...
}그리고 로직의 경우 사용자의 생일이 5세 이상인지 확인하는 다음 코드를 작성합니다.
import { APIError } from "better-auth/api";
import { createAuthMiddleware } from "better-auth/plugins";{
//...
handler: createAuthMiddleware(async (ctx) => {
const { birthday } = ctx.body;
if(!(birthday instanceof Date)) {
throw new APIError("BAD_REQUEST", { message: "Birthday must be of type Date." });
}
const today = new Date();
const fiveYearsAgo = new Date(today.setFullYear(today.getFullYear() - 5));
if(birthday >= fiveYearsAgo) {
throw new APIError("BAD_REQUEST", { message: "User must be above 5 years old." });
}
return { context: ctx };
}),
}인증 완료! 🔒
5세 이상의 사용자에 대한 인증을 보장하는 코드를 성공적으로 작성했습니다!
클라이언트 플러그인
결승선에 가까워지고 있습니다! 🏁
이제 서버 플러그인을 만들었으므로 다음 단계는 클라이언트 플러그인을 개발하는 것입니다. 이 플러그인에는 프론트엔드 API가 많지 않으므로 할 일이 많지 않습니다!
먼저 client.ts 파일을 만드세요:
그런 다음 다음 코드를 추가하세요:
import { BetterAuthClientPlugin } from "better-auth";
import type { birthdayPlugin } from "./index"; // 서버 플러그인을 타입으로 가져오세요
type BirthdayPlugin = typeof birthdayPlugin;
export const birthdayClientPlugin = () => {
return {
id: "birthdayPlugin",
$InferServerPlugin: {} as ReturnType<BirthdayPlugin>,
} satisfies BetterAuthClientPlugin;
};우리가 한 것은 클라이언트 플러그인이 서버 플러그인에서 스키마에 의해 정의된 타입을 추론하도록 허용하는 것입니다.
그게 전부입니다! 생일 클라이언트 플러그인에 필요한 전부입니다. 🎂
플러그인 시작!
클라이언트 및 서버 플러그인이 모두 준비되었으므로 마지막 단계는 플러그인을 시작하기 위해 auth-client.ts 및 server.ts 파일에 각각 가져오는 것입니다.
서버 시작
import { betterAuth } from "better-auth";
import { birthdayPlugin } from "./birthday-plugin";
export const auth = betterAuth({
plugins: [
birthdayPlugin(),
]
});클라이언트 시작
import { createAuthClient } from "better-auth/client";
import { birthdayClientPlugin } from "./birthday-plugin/client";
const authClient = createAuthClient({
plugins: [
birthdayClientPlugin()
]
});아, 스키마!
user 테이블 모델에 birthday 필드를 추가하는 것을 잊지 마세요!
또는 generate CLI 명령을 사용하세요:
npx @better-auth/cli@latest generate마무리
축하합니다! 첫 번째 Better Auth 플러그인을 성공적으로 만들었습니다. 플러그인 문서를 방문하여 더 많은 정보를 얻는 것이 좋습니다.
커뮤니티와 공유하고 싶은 플러그인이 있다면 Discord 서버를 통해 알려주거나 pull-request를 통해 알려주시면 community-plugins 목록에 추가할 수 있습니다!