配置 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/[email protected]

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/[email protected]

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/[email protected]

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"

然后，在您的提供商仪表板中将回调 URL 设置为 https://app.com/{basePath}/callback/{id}。

默认情况下，basePath 对于 Next.js 是 /api/auth，对于所有其他集成是 /auth。参见basePath。

就是这样！🎉

添加新的内置提供商

如果您认为您的自定义提供商可能对其他人有用，我们鼓励您创建一个 PR 并将其添加到内置列表中。

创建提供商的文件

在packages/core/src/providers 目录下创建一个新的 {provider}.ts 文件。

遵守我们的代码约定

以内置提供商作为指南，确保您的提供商遵守相同的代码约定，即

使用 TypeScript
使用命名的默认导出：export default function YourProvider
导出定义提供商可用用户信息属性的 TypeScript interface
添加必要的 JSDoc 注释/文档。例如，Auth0 提供商是 OIDC 的一个很好的例子，GitHub 提供商是 OAuth 提供商的一个例子。
添加指向提供商的 API 参考/文档的链接，以便其他人能够了解如何设置此提供商

将新的提供商名称添加到提供商问题模板 中的 提供商类型 下拉菜单选项中

添加徽标

将徽标 {provider}.svg 添加到docs/static/img/providers 目录中。

PR 合并后，其他人也可以使用我们的任何集成来发现和使用此提供商。就是这样！🎉

配置 Resend 用于魔法链接配置自定义 HTTP 电子邮件提供商

配置 OAuth 提供商

覆盖默认提供商配置

使用您自己的提供商

添加新的内置提供商

创建提供商的文件

遵守我们的代码约定

添加徽标

关于 Auth.js

下载

鸣谢

配置 OAuth 提供商

覆盖默认提供商配置

使用您自己的提供商

添加新的内置提供商

创建提供商的文件

遵守我们的代码约定

在 GitHub 问题下拉菜单中添加您的提供商

添加徽标

关于 Auth.js

下载

鸣谢