セッション取得
ユーザーがログインすると、多くの場合、セッションオブジェクトを取得して何らかの方法でデータを使用したいと考えています。一般的なユースケースとしては、プロフィール画像の表示やその他のユーザー情報の表示などがあります。
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は、App RouterとPages Routerの両方で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>
)
}Pages サーバーサイド
Pages Routerでコンポーネント内のセッションにアクセスするには、まずページで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,
},
}
}Pages クライアントサイド
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ファイルのロード関数から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)
// Now in your route
app.get("/", (req, res) => {
const { session } = res.locals
res.render("index", { user: session?.user })
})OAuthプロバイダーからさらに多くのフィールドを使用してセッションを拡張したい場合は、「セッションの拡張」ガイドをご覧ください。