세션 가져오기
사용자가 로그인한 후, 세션 객체를 가져와 데이터를 활용하고 싶을 때가 많습니다. 일반적으로 프로필 사진을 보여주거나 다른 사용자 정보를 표시하는 경우가 대표적입니다.
import { auth } from "../auth"
export default async function UserAvatar() {
const session = await auth()
if (!session?.user) return null
return (
<div>
<img src={session.user.image} alt="User Avatar" />
</div>
)
}next-auth는 클라이언트 측 데이터 조회를 위해 useSession과 SessionProvider를 지원하지만, 실제로는 이 기능을 자주 사용하지 않습니다. 일반적으로 서버 사이드 렌더링을 최대한 활용하여 성능과 보안을 최적화하는 것이 좋습니다.
App Router
"use client"
import { useSession } from "next-auth/react"
export default function Dashboard() {
const { data: session } = useSession()
if (session?.user?.role === "admin") {
return <p>You are an admin, welcome!</p>
}
return <p>You are not authorized to view this page!</p>
}import { SessionProvider } from "next-auth/react"
import { Dashboard } from "./Dashboard"
export default function Administrator() {
return (
<SessionProvider>
<Dashboard />
</SessionProvider>
)
}Page Server Side
페이지 라우터에서 컴포넌트에서 세션에 접근하려면, 먼저 페이지에서 session 객체를 가져온 다음 컴포넌트로 전달해야 합니다.
import { auth } from "@/auth.ts"
import { UserAvatar } from "@/components/UserAvatar"
export default function Dashboard({ session }) {
return (
<nav>
<UserAvatar session={session} />
</nav>
)
}
export async function getServerSideProps(ctx) {
const session = await auth(ctx)
return {
props: {
session,
},
}
}페이지 클라이언트 사이드
useSession()을 사용하여 클라이언트 사이드에서 세션에 접근할 때, 페이지가 Auth.js의 <SessionProvider />로 감싸져 있는지 확인하세요.
import type { AppProps } from "next/app"
import { SessionProvider } from "next-auth/react"
export default function MyApp({
Component,
pageProps: { session, ...pageProps },
}: AppProps) {
return (
<SessionProvider session={session}>
<Component {...pageProps} />;
</SessionProvider>
)
}import { useSession } from "next-auth/react"
import { UserAvatar } from "@/components/UserAvatar"
export default function Dashboard() {
const { data: session } = useSession()
return (
<nav>
<UserAvatar session={session} />
</nav>
)
}마지막으로, 컴포넌트에서 이를 사용할 수 있습니다.
import type { Session } from "next-auth"
export function UserAvatar({ session }: { session: Session | null }) {
return (
<div>
<img
src={session?.user?.image ?? "https://i.pravatar.cc/300"}
alt="User Avatar"
/>
</div>
)
}Qwik은 내부적으로 자동으로 세션을 준비하므로, 이를 위해 커스텀 로직을 구현할 필요가 없습니다. 서버에서는 event.sharedMap.get("session")을 통해, 클라이언트에서는 useSession() 액션을 통해 세션을 읽을 수 있습니다.
SvelteKit을 사용할 때는 +page.server.ts 또는 +layout.server.ts 파일의 load 함수에서 session 객체를 반환해야 합니다.
import type { PageServerLoad } from "./$types"
export const load: PageServerLoad = async (events) => {
const session = await events.locals.auth()
if (!session?.user?.userId) {
redirect(303, `/login`)
}
return {
session,
}
}그런 다음 페이지에서 $page.data 객체를 통해 session에 접근할 수 있습니다.
<script lang="ts">
import { page } from "$app/stores"
</script>
<nav>
<img
src={$page.data.session?.user?.image ?? "https://i.pravatar.cc/300"}
alt="User Avatar"
/>
</nav>import { getSession } from "@auth/express"
export function authSession(req: Request, res: Response, next: NextFunction) {
res.locals.session = await getSession(req)
next()
}
app.use(authSession)
// 이제 라우트에서 사용
app.get("/", (req, res) => {
const { session } = res.locals
res.render("index", { user: session?.user })
})OAuth 프로바이더에서 추가 필드를 세션에 포함시키고 싶다면, “세션 확장” 가이드를 확인하세요.