OAuthプロバイダーの設定

デフォルトのプロバイダー設定のオーバーライド

ビルトインプロバイダーの場合、通常はクライアントIDとクライアントシークレット、そしてOIDC（OpenID Connect）の場合はissuerも指定するだけで済みます。環境変数からこれらを推測できます。

デフォルトのプロバイダー設定オプションをオーバーライドする必要がある場合は、プロバイダーの関数呼び出しにそれらを追加すると、デフォルト値と深くマージされます。つまり、異なる必要があるオプションの一部だけをオーバーライドするだけで済みます。たとえば、スコープを変更する場合は、authorizationオプション全体ではなく、authorization.params.scopeをオーバーライドするだけで十分です。

たとえば、プロバイダーのデフォルトの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"

次に、プロバイダーのダッシュボードでコールバック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 typeドロップダウンオプションに新しいプロバイダー名を追加します。

ロゴの追加

docs/static/img/providersディレクトリに、{provider}.svgロゴを追加します。

PRがマージされると、他の人も当社の統合を使用してこのプロバイダーを発見し、使用できるようになります。以上です！🎉

マジックリンクのためのResendの設定カスタムHTTPメールプロバイダーの設定

OAuthプロバイダーの設定

デフォルトのプロバイダー設定のオーバーライド

独自の提供者の使用

新しいビルトインプロバイダーの追加

プロバイダーファイルの作成

コード規約への準拠

ロゴの追加

Auth.jsについて

ダウンロード

謝辞

OAuthプロバイダーの設定

デフォルトのプロバイダー設定のオーバーライド

独自の提供者の使用

新しいビルトインプロバイダーの追加

プロバイダーファイルの作成

コード規約への準拠

GitHub issue ドロップダウンへのプロバイダーの追加

ロゴの追加

Auth.jsについて

ダウンロード

謝辞