Auth.js | 安裝 - Auth.js 繁體中文

安裝 Auth.js

首先，為您的框架安裝適當的套件。

npm install next-auth@beta

pnpm add next-auth@beta

yarn add next-auth@beta

bun add next-auth@beta

npm run qwik add auth

pnpm run qwik add auth

yarn qwik add auth

bun run qwik add auth

npm install @auth/sveltekit

pnpm add @auth/sveltekit

yarn add @auth/sveltekit

bun add @auth/sveltekit

npm install @auth/express

pnpm add @auth/express

yarn add @auth/express

bun add @auth/express

安裝 @auth/core 不是必要的，身為使用者，您不應該與 @auth/core 互動。

設定環境

唯一強制性的環境變數是 AUTH_SECRET。這是程式庫用來加密 Token 和電子郵件驗證雜湊的隨機值。（請參閱部署以了解更多資訊）。您可以透過官方的 Auth.js CLI 執行來產生一個。

npx auth secret

這也會將其新增至您的 .env 檔案，並遵守框架慣例 (例如：Next.js 的 .env.local)。

設定

接下來，建立 Auth.js 設定檔和物件。您可以在此處控制程式庫的行為，並指定自訂身份驗證邏輯、配接器等等。我們建議所有框架在專案中建立一個 auth.ts 檔案。在這個檔案中，我們會將所有選項傳遞給特定框架的初始化函式，然後匯出路由處理程式、登入和登出方法等等。

您可以隨意命名這個檔案，並將其放置在任何您喜歡的位置，這些只是我們想出來的慣例。

首先，在您的應用程式根目錄中建立一個新的 auth.ts 檔案，並包含以下內容。

./auth.ts

import NextAuth from "next-auth"
 
export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [],
})

在 /app/api/auth/[...nextauth]/route.ts 下新增一個路由處理程式。

💡

這個檔案必須是應用程式路由器的路由處理程式，但是，如果需要，您的應用程式的其餘部分可以保留在 page/ 下。

./app/api/auth/[...nextauth]/route.ts

import { handlers } from "@/auth" // Referring to the auth.ts we just created
export const { GET, POST } = handlers

新增選用的中介軟體以保持工作階段有效，這會在每次呼叫時更新工作階段的到期時間。

./middleware.ts

export { auth as middleware } from "@/auth"

首先，在您的 src/routes 目錄中建立一個新的 plugin@auth.ts 檔案，並包含以下內容。

/src/routes/plugin@auth.ts

import { QwikAuth$ } from "@auth/qwik"
 
export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
  () => ({
    providers: [...],
  })
)

首先，在您的 src/ 目錄中建立一個新的 auth.ts 檔案，並包含以下內容。

./src/auth.ts

import { SvelteKitAuth } from "@auth/sveltekit"
 
export const { handle } = SvelteKitAuth({
  providers: [],
})

在 SvelteKit 的 src/hooks.server.ts 檔案中重新匯出 handle 方法。

./src/hooks.server.ts

export { handle } from "./auth"

該 handle 函式會在我們的 event.locals 上新增一個 auth() 方法，該方法可在任何 +layout.server.ts 或 +page.server.ts 檔案中使用。因此，我們可以在 load 函式中存取工作階段，如下所示。

./src/routes/+layout.server.ts

import type { LayoutServerLoad } from "./$types"
 
export const load: LayoutServerLoad = async (event) => {
  const session = await event.locals.auth()
 
  return {
    session,
  }
}

首先，匯入 ExpressAuth，並將處理程式新增至 auth 路由。

./src/routes/auth.route.ts

import { ExpressAuth } from "@auth/express"
import express from "express"
 
const app = express()
 
// If your app is served through a proxy
// trust the proxy to allow us to read the `X-Forwarded-*` headers
app.set("trust proxy", true)
app.use("/auth/*", ExpressAuth({ providers: [] }))

請注意，這會建立 Auth.js API，但尚未保護資源。請繼續前往保護資源以了解更多詳細資訊。

設定身份驗證方法

這樣，基本設定就完成了！接下來，我們將設定第一個身份驗證方法，並填寫 providers 陣列。

遷移至 NextAuth.js v5 身份驗證

安裝 Auth.js

設定環境

設定

設定身份驗證方法

關於 Auth.js

下載

致謝