React

NextAuth.js は、Next.js アプリケーション向けの Auth.js の公式インテグレーションです。 クライアントコンポーネント と Pages ルーター の両方をサポートしています。 ログイン、ログアウト、フック、Reactコンテキストプロバイダーが含まれており、アプリケーションをラップしてセッションデータをどこからでも利用できるようにします。

サーバーアクション での使用については、これらのメソッド をご覧ください。

GetSessionParams

プロパティ

broadcast?

optional broadcast: boolean;

event?

optional event: string;

triggerEvent?

optional triggerEvent: boolean;

SessionProviderProps

セッション有効期限が30日（デフォルト）以上の場合、デフォルトオプションを変更する必要はありません。

ただし、セッションの動作をカスタマイズする必要がある場合、または短いセッション有効期限を使用している場合は、プロバイダーにオプションを渡して、useSessionフックの動作をカスタマイズできます。

プロパティ

basePath?

optional basePath: string;

baseUrl?

optional baseUrl: string;

children

children: ReactNode;

refetchInterval?

optional refetchInterval: number;

セッションを再フェッチする時間間隔（秒単位）。0（デフォルト）に設定すると、セッションはポーリングされません。

refetchOnWindowFocus?

optional refetchOnWindowFocus: boolean;

SessionProviderは、ユーザーがウィンドウ間を切り替える際に自動的にセッションを再フェッチします。このオプションは、true（デフォルト）に設定するとこの動作を有効にします。

refetchWhenOffline?

optional refetchWhenOffline: false;

falseに設定すると、デバイスがインターネットにアクセスできないオフライン状態（navigator.onLineで判定）の場合、ポーリングを停止します。

navigator.onLine ドキュメント

session?

optional session: null | Session;

SignInOptions

拡張

• Record<string, unknown>

プロパティ

callbackUrl?

optional callbackUrl: string;

非推奨

redirectTo を代わりに使用してください。

redirect?

optional redirect: boolean;

別のページにリダイレクトする代わりに、同じページでサインイン応答を処理したい場合があります。たとえば、エラーが発生した場合（ユーザーが間違った資格情報を入力した場合など）、入力フィールドにインラインエラーメッセージを表示したい場合があります。

この目的のために、このオプションをredirect: falseに設定できます。

redirectTo?

optional redirectTo: string;

サインイン成功後にユーザーをリダイレクトする場所を指定します。デフォルトでは、サインインが開始されたページのURLになります。

SignInResponse

プロパティ

code

code: undefined | string;

error

error: undefined | string;

ok

ok: boolean;

status

status: number;

url

url: null | string;

SignOutParams<R>

型パラメータ

プロパティ

callbackUrl?

optional callbackUrl: string;

非推奨

redirectTo を代わりに使用してください。

redirect?

optional redirect: R;

[ドキュメント](https://next-auth.js.org/getting-started/client#using-the-redirect-false-option-1)

redirectTo?

optional redirectTo: string;

redirect: false を渡すと、ページはリロードされません。セッションは削除され、useSession に通知されるため、ユーザーに関する情報は自動的にログアウト済みとして表示されます。ユーザーにとって非常に良いエクスペリエンスを提供できます。

LiteralUnion<T, U>

type LiteralUnion<T, U>: T | U & Record<never, never>;

型パラメータ

SessionContextValue<R>

type SessionContextValue<R>: R extends true ? {
  data: Session;
  status: "authenticated";
  update: UpdateSession;
  } | {
  data: null;
  status: "loading";
  update: UpdateSession;
  } : {
  data: Session;
  status: "authenticated";
  update: UpdateSession;
  } | {
  data: null;
  status: "unauthenticated" | "loading";
  update: UpdateSession;
};

useSession() は、update というメソッド、data、status の3つの要素を含むオブジェクトを返します。

型パラメータ

UpdateSession()

type UpdateSession: (data?) => Promise<Session | null>;

ToDo

ドキュメント

パラメータ

戻り値

Promise<Session | null>

SessionContext

const SessionContext: Context<undefined | {
  data: Session;
  status: "authenticated";
  update: UpdateSession;
  } | {
  data: null;
  status: "loading" | "unauthenticated";
  update: UpdateSession;
}>;

__NEXTAUTH

const __NEXTAUTH: AuthClientConfig;

SessionProvider()

SessionProvider(props): Element

React Context プロバイダーは、アプリ(pages/)をラップして、どこからでもセッションデータを利用できるようにします。

使用する場合、セッション状態は開いているすべてのタブ/ウィンドウ間で自動的に同期され、フォーカスを取得または失う場合、またはSessionProviderProps.refetchOnWindowFocusがtrueの場合、状態が変化する（例：ユーザーがサインインまたはサインアウトする）たびに、すべて更新されます。

パラメータ

戻り値

Element

getCsrfToken()

getCsrfToken(): Promise<string>

状態を変更するリクエストを行うために必要な現在のクロスサイトリクエストフォージェリトークン（CSRFトークン）を返します。（例：サインインまたはサインアウト、セッションの更新）

CSRF対策：ダブルサブミットクッキー

戻り値

Promise<string>

getProviders()

getProviders(): Promise<null | ProvidersType>

現在利用可能なプロバイダーのクライアントセーフな設定オブジェクトを返します。

戻り値

Promise<null | ProvidersType>

getSession()

getSession(params?): Promise<null | Session>

パラメータ

戻り値

Promise<null | Session>

signIn()

signIn<P>(
   provider?, 
   options?, 
authorizationParams?): Promise<P extends RedirectableProviderType ? SignInResponse | undefined : undefined>

サインインフローを開始するか、ユーザーをすべての可能なプロバイダーをリストするサインインページに送信します。CSRF保護を処理します。

型パラメータ

パラメータ

戻り値

Promise<P extends RedirectableProviderType ? SignInResponse | undefined : undefined>

signOut()

signOut<R>(options?): Promise<R extends true ? undefined : SignOutResponse>

現在のセッションを破棄することで、サインアウトを開始します。CSRF保護を処理します。

型パラメータ

パラメータ

戻り値

Promise<R extends true ? undefined : SignOutResponse>

useSession()

useSession<R>(options?): SessionContextValue<R>

ログイン中のユーザーのセッションデータにアクセスし、それを変更できるReactフックです。

型パラメータ

パラメータ

戻り値

SessionContextValue<R>