Hono 통합
시작하기 전에, Better Auth 인스턴스가 설정되어 있는지 확인하세요. 아직 설정하지 않았다면 설치를 확인하세요.
핸들러 마운트
Hono 엔드포인트에 핸들러를 마운트해야 합니다.
import { Hono } from "hono";
import { auth } from "./auth";
import { serve } from "@hono/node-server";
const app = new Hono();
app.on(["POST", "GET"], "/api/auth/*", (c) => {
return auth.handler(c.req.raw);
});
serve(app);CORS
CORS를 구성하려면, hono/cors의 cors 플러그인을 사용해야 합니다.
import { Hono } from "hono";
import { auth } from "./auth";
import { serve } from "@hono/node-server";
import { cors } from "hono/cors";
const app = new Hono();
app.use(
"/api/auth/*", // 또는 모든 라우트에 대해 CORS를 활성화하려면 "*"로 교체
cors({
origin: "http://localhost:3001", // 출처로 교체
allowHeaders: ["Content-Type", "Authorization"],
allowMethods: ["POST", "GET", "OPTIONS"],
exposeHeaders: ["Content-Length"],
maxAge: 600,
credentials: true,
}),
);
app.on(["POST", "GET"], "/api/auth/*", (c) => {
return auth.handler(c.req.raw);
});
serve(app);중요: CORS 미들웨어는 라우트보다 먼저 등록되어야 합니다. 이렇게 하면 크로스 오리진 요청이 인증 엔드포인트에 도달하기 전에 적절히 처리됩니다.
미들웨어
미들웨어를 추가하여 context에 session과 user를 저장하고 모든 라우트에 대한 유효성 검사를 추가할 수 있습니다.
import { Hono } from "hono";
import { auth } from "./auth";
import { serve } from "@hono/node-server";
import { cors } from "hono/cors";
const app = new Hono<{
Variables: {
user: typeof auth.$Infer.Session.user | null;
session: typeof auth.$Infer.Session.session | null
}
}>();
app.use("*", async (c, next) => {
const session = await auth.api.getSession({ headers: c.req.raw.headers });
if (!session) {
c.set("user", null);
c.set("session", null);
return next();
}
c.set("user", session.user);
c.set("session", session.session);
return next();
});
app.on(["POST", "GET"], "/api/auth/*", (c) => {
return auth.handler(c.req.raw);
});
serve(app);이렇게 하면 모든 라우트에서 user 및 session 객체에 접근할 수 있습니다.
app.get("/session", (c) => {
const session = c.get("session")
const user = c.get("user")
if(!user) return c.body(null, 401);
return c.json({
session,
user
});
});크로스 도메인 쿠키
기본적으로 모든 Better Auth 쿠키는 SameSite=Lax로 설정됩니다. 다른 도메인 간에 쿠키를 사용해야 하는 경우, SameSite=None 및 Secure=true를 설정해야 합니다. 그러나 가능한 경우 서브도메인을 사용하는 것이 좋습니다. 이렇게 하면 SameSite=Lax를 유지할 수 있습니다. 크로스 서브도메인 쿠키를 활성화하려면, auth 설정에서 crossSubDomainCookies를 켜기만 하면 됩니다.
export const auth = createAuth({
advanced: {
crossSubDomainCookies: {
enabled: true
}
}
})여전히 SameSite=None 및 Secure=true를 설정해야 하는 경우, createAuth 구성의 cookieOptions를 통해 이러한 속성을 전역적으로 조정할 수 있습니다.
export const auth = createAuth({
advanced: {
defaultCookieAttributes: {
sameSite: "none",
secure: true,
partitioned: true // 새로운 브라우저 표준은 외부 쿠키에 대해 이를 의무화합니다
}
}
})auth 설정의 cookies 내에서 설정하여 쿠키 속성을 개별적으로 사용자 정의할 수도 있습니다.
export const auth = createAuth({
advanced: {
cookies: {
sessionToken: {
attributes: {
sameSite: "none",
secure: true,
partitioned: true // 새로운 브라우저 표준은 외부 쿠키에 대해 이를 의무화합니다
}
}
}
}
})클라이언트 측 구성
Hono 클라이언트(@hono/client)를 사용하여 Better Auth로 보호된 엔드포인트에 요청을 할 때, 크로스 오리진 요청과 함께 자격 증명(쿠키)을 보내도록 구성해야 합니다.
import { hc } from "hono/client";
import type { AppType } from "./server"; // Hono 앱 타입
const client = hc<AppType>("http://localhost:8787/", {
init: {
credentials: "include", // 크로스 오리진으로 쿠키를 보내는 데 필요
},
});
// 이제 클라이언트 요청에 자격 증명이 포함됩니다
const response = await client.someProtectedEndpoint.$get();이 구성은 다음과 같은 경우에 필요합니다:
- 개발 중에 클라이언트와 서버가 다른 도메인/포트에 있는 경우
- 프로덕션에서 크로스 오리진 요청을 하는 경우
- 요청과 함께 인증 쿠키를 보내야 하는 경우
credentials: "include" 옵션은 fetch 클라이언트에게 크로스 오리진 요청에 대해서도 쿠키를 보내도록 지시합니다. 이것은 credentials: true가 설정된 서버의 CORS 구성과 함께 작동합니다.
참고: 서버의 CORS 구성이 클라이언트의 도메인과 일치하는지, 서버의 CORS 설정과 클라이언트의 fetch 설정 모두에
credentials: true가 설정되어 있는지 확인하세요.