providers/workos
組み込みのWorkOS統合。
WorkOSProfile
拡張
Record<string,any>
プロパティ
connection_id
connection_id: string;connection_type
connection_type: string;email: string;first_name
first_name: string;id
id: string;idp_id
idp_id: string;last_name
last_name: string;object
object: string;organization_id
organization_id: string;raw_attributes
raw_attributes: {
email: string;
firstName: string;
id: string;
lastName: string;
picture: string;
};email: string;firstName
firstName: string;id
id: string;lastName
lastName: string;picture
picture: string;default()
default<P>(options): OAuthConfig<P>ページにWorkOSログインを追加します。
セットアップ
コールバックURL
https://example.com/api/auth/callback/workos構成
import { Auth } from "@auth/core"
import WorkOS from "@auth/core/providers/workos"
const request = new Request(origin)
const response = await Auth(request, {
providers: [
WorkOS({
clientId: WORKOS_CLIENT_ID,
clientSecret: WORKOS_CLIENT_SECRET,
issuer: WORKOS_ISSUER,
}),
],
})リソース
注意事項
デフォルトでは、Auth.jsはWorkOSプロバイダーがOAuth 2仕様に基づいていると想定しています。
WorkOSはそれ自体がIDプロバイダーではなく、複数のシングルサインオン（SSO）プロバイダーへのブリッジです。そのため、WorkOSを使用してユーザーを認証するために追加の変更を行う必要があります。
WorkOSを使用してユーザーをサインインさせるには、使用するWorkOS接続を指定する必要があります。これを行う一般的な方法は、ユーザーのメールアドレスを収集し、ドメインを抽出することです。これは、カスタムログインページを使用して行うことができます。カスタムログインページを追加するには、pagesオプションを使用できます。
pages: {
signIn: "/auth/signin",
}次に、ユーザーがメールアドレスを入力できる入力を表示するカスタムログインページを追加できます。次に、ユーザーのメールアドレスからドメインを抽出し、signIn関数のauthorizationParamsパラメーターに渡します。
pages/auth/signin.js
import { useState } from "react"
import { getProviders, signIn } from "next-auth/react"
export default function SignIn({ providers }) {
const [email, setEmail] = useState("")
return (
<>
{Object.values(providers).map((provider) => {
if (provider.id === "workos") {
return (
<div key={provider.id}>
<input
type="email"
value={email}
placeholder="Email"
onChange={(event) => setEmail(event.target.value)}
/>
<button
onClick={() =>
signIn(provider.id, undefined, {
domain: email.split("@")[1],
})
}
>
Sign in with SSO
</button>
</div>
)
}
return (
<div key={provider.id}>
<button onClick={() => signIn(provider.id)}>
Sign in with {provider.name}
</button>
</div>
)
})}
</>
)
}
export async function getServerSideProps(context) {
const providers = await getProviders()
return {
props: { providers },
}
}💡
WorkOSプロバイダーには、デフォルト設定が付属しています。ユースケースに合わせてデフォルトをオーバーライドするには、組み込みのOAuthプロバイダーのカスタマイズを確認してください。
型パラメータ
| 型パラメータ |
|---|
P は WorkOSProfile を拡張します。 |
パラメータ
| パラメータ | 型 |
|---|---|
options | OAuthUserConfig<P> & { connection: string; } |
戻り値
OAuthConfig<P>