設定 OAuth 供應商

覆寫預設供應商設定

對於內建供應商，通常您只需要指定客戶端 ID 和客戶端密鑰，如果是 OIDC (OpenID Connect)，則還需要指定發行者。我們可以從環境變數推斷這些。

如果您需要覆寫任何預設供應商設定選項，您可以將它們新增至供應商的函式呼叫中，它們將與我們的預設值進行深度合併。這表示您只需要覆寫需要不同的部分選項。例如，如果您想要不同的範圍，覆寫 authorization.params.scope 就足夠了，而不需要整個 authorization 選項。

例如，要覆寫供應商的預設 scope，您可以執行以下操作

./auth.ts

import NextAuth from "next-auth";
import Auth0 from "next-auth/providers/auth0";
 
export const { handlers, auth } = NextAuth({
  providers: [
    Auth0({ authorization: { params: { scope: "openid custom_scope" } } }),
  ],
});

/src/routes/plugin@auth.ts

import { QwikAuth$ } from "@auth/qwik"
import Auth0 from "@auth/qwik/providers/auth0";
 
export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
  () => ({
    providers: [
      Auth0({ authorization: { params: { scope: "openid custom_scope" } } }),
    ],
  })
)

src/auth.ts

import { SvelteKitAuth } from "@auth/sveltekit";
import Auth0 from "@auth/sveltekit/providers/auth0";
 
export const { handle, signIn } = SvelteKitAuth({
  providers: [
    Auth0({ authorization: { params: { scope: "openid custom_scope" } } }),
  ],
});

src/hooks.server.ts

export { handle } from "./auth"

另一個範例，profile 回呼預設會傳回 name、email 和 picture，但您可能想要從供應商傳回更多資訊。您傳回的內容將用於在資料庫中建立使用者物件。

./auth.ts

import NextAuth from "next-auth";
import Auth0 from "next-auth/providers/auth0";
 
export const { handlers, auth } = NextAuth({
  providers: [
    Auth0({
      // You can also make calls to external resources if necessary.
      async profile(profile) {
        return {};
      },
    }),
  ],
});

/src/routes/plugin@auth.ts

import { QwikAuth$ } from "@auth/qwik"
import Auth0 from "@auth/qwik/providers/auth0";
 
export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
  () => ({
    providers: [
      Auth0({
        // You can also make calls to external resources if necessary.
        async profile(profile) {
          return {};
        },
      }),
    ],
  })
)

src/auth.ts

import { SvelteKitAuth } from "@auth/sveltekit";
import Auth0 from "@auth/sveltekit/providers/auth0";
 
export const { handle } = SvelteKitAuth({
  providers: [
    Auth0({
      // You can also make calls to external resources if necessary.
      async profile(profile) {
        return {};
      },
    }),
  ],
});

src/hooks.server.ts

export { handle } from "./auth"

使用您自己的供應商

💡

在從頭建立之前，請先檢查我們的內建 OAuth 供應商。

我們支援任何符合 OAuth 或 OIDC 標準的供應商。首先將一個物件傳遞至providers 清單

./auth.ts

import NextAuth from "next-auth";
 
export const { handlers, auth } = NextAuth({
  providers: [{
    id: "my-provider", // signIn("my-provider") and will be part of the callback URL
    name: "My Provider", // optional, used on the default login page as the button text.
    type: "oidc", // or "oauth" for OAuth 2 providers
    issuer: "https://my.oidc-provider.com", // to infer the .well-known/openid-configuration URL
    clientId: process.env.AUTH_CLIENT_ID, // from the provider's dashboard
    clientSecret: process.env.AUTH_CLIENT_SECRET, // from the provider's dashboard
  }],
});

/src/routes/plugin@auth.ts

import { QwikAuth$ } from "@auth/qwik"
 
export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
  () => ({
    providers: [{
      id: "my-provider", // signIn("my-provider") and will be part of the callback URL
      name: "My Provider", // optional, used on the default login page as the button text.
      type: "oidc", // or "oauth" for OAuth 2 providers
      issuer: "https://my.oidc-provider.com", // to infer the .well-known/openid-configuration URL
      clientId: import.meta.env.AUTH_CLIENT_ID, // from the provider's dashboard
      clientSecret: import.meta.env.AUTH_CLIENT_SECRET, // from the provider's dashboard
    }],
  })
)

src/auth.ts

import { SvelteKitAuth } from "@auth/sveltekit";
 
export const { handle } = SvelteKitAuth({
  providers: [{
    id: "my-provider", // signIn("my-provider") and will be part of the callback URL
    name: "My Provider", // optional, used on the default login page as the button text.
    type: "oidc", // or "oauth" for OAuth 2 providers
    issuer: "https://my.oidc-provider.com", // to infer the .well-known/openid-configuration URL
    clientId: process.env.AUTH_CLIENT_ID, // from the provider's dashboard
    clientSecret: process.env.AUTH_CLIENT_SECRET, // from the provider's dashboard
  }],
});

src/hooks.server.ts

export { handle } from "./auth"

然後，在您供應商的儀表板中，將回呼網址設定為 https://app.com/{basePath}/callback/{id}。

預設情況下，Next.js 的 basePath 為 /api/auth，而在所有其他整合中為 /auth。請參閱 basePath。

就是這樣！🎉

新增內建供應商

如果您認為您的自訂供應商可能對其他人有用，我們鼓勵您開啟 PR 並將其新增至內建清單。

建立供應商的檔案

在 packages/core/src/providers 目錄下建立新的 {provider}.ts 檔案。

遵守我們的程式碼慣例

以內建供應商作為指南，請確保您的供應商遵守相同的程式碼慣例，例如

使用 TypeScript
使用具名的預設匯出：export default function YourProvider
匯出定義供應商可用使用者資訊屬性的 TypeScript interface
新增必要的 JSDoc 註解/文件。例如，Auth0 供應商是 OIDC 的一個好範例，而GitHub 供應商是 OAuth 供應商。）
新增供應商 API 參考/文件連結，以便其他人了解如何設定此供應商

在供應商 issue 範本中，將新的供應商名稱新增至 供應商類型 下拉式選單選項中

新增標誌

將標誌 {provider}.svg 新增至 docs/static/img/providers 目錄。

一旦 PR 合併，其他人也可以發現並將此供應商與我們的任何整合一起使用。就是這樣！🎉

設定 Resend 進行魔法連結設定自訂 HTTP 電子郵件供應商

設定 OAuth 供應商

覆寫預設供應商設定

使用您自己的供應商

新增內建供應商

建立供應商的檔案

遵守我們的程式碼慣例

新增標誌

關於 Auth.js

下載

誌謝

設定 OAuth 供應商

覆寫預設供應商設定

使用您自己的供應商

新增內建供應商

建立供應商的檔案

遵守我們的程式碼慣例

在 GitHub issue 下拉式選單中新增您的供應商

新增標誌

關於 Auth.js

下載

誌謝