取得 Session

一旦使用者登入，您通常會想要取得 session 物件，以便以某種方式使用資料。一個常見的用例是顯示他們的個人資料圖片或顯示其他使用者資訊。

./components/UserAvatar.tsx

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 和 Pages Router），但在實際情況中，這些不常用。通常，您會想要充分利用伺服器端渲染來優化效能和安全性。

App Router

app/admin/dashboard.tsx

"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>
}

app/admin/page.tsx

import { SessionProvider } from "next-auth/react"
import { Dashboard } from "./Dashboard"
 
export default function Administrator() {
  return (
    <SessionProvider>
      <Dashboard />
    </SessionProvider>
  )
}

頁面伺服器端

在 pages router 中，若要在元件中存取 session，您首先需要在頁面中取得 session 物件，然後將其傳遞給元件。

./pages/dashboard.tsx

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() 在用戶端存取 session 時，請確保 Auth.js <SessionProvider /> 包裹您的頁面。

pages/_app.tsx

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>
  )
}

pages/dashboard.tsx

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>
  )
}

最後，我們可以在元件中使用它。

./components/UserAvatar.tsx

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 的底層，會自動為您準備 session，因此您不必為此實作自訂邏輯。您可以使用 event.sharedMap.get("session") 在伺服器端讀取 session，並使用 useSession() action 在用戶端讀取 session。

使用 SvelteKit，您必須從 +page.server.ts 或 +layout.server.ts 檔案中的 load 函式傳回 session 物件。

src/routes/+page.server.ts

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。

src/routes/+page.svelte

<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>

app.ts

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 提供者的更多欄位來擴充您的 session，例如，請查看我們的「擴充 session」指南。

登入和登出保護資源

取得 Session

App Router

頁面伺服器端

頁面用戶端

關於 Auth.js

下載

致謝