react

NextAuth.js 是 Auth.js 針對 Next.js 應用程式的官方整合。它同時支援客戶端元件和 Pages Router。它包括登入、登出方法、鉤子，以及一個 React Context 提供者來包裝您的應用程式，並使會話資料在任何地方都可使用。

若要在 伺服器動作中使用，請查看這些方法

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。

類型參數

UpdateSession()

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

待辦事項

文件

參數

返回

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 時，它們會在獲得或失去焦點或狀態變更時（例如，使用者登入或登出）全部更新。

參數

返回

元素

getCsrfToken()

getCsrfToken(): Promise<string>

返回目前跨站請求偽造 (CSRF) 令牌，此令牌是發出更改狀態的請求時所必需的。（例如，登入或登出，或更新會話）。

CSRF 防範：雙重提交 Cookie

返回

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 繼承 RedirectableProviderType ? SignInResponse | undefined : undefined>

signOut()

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

透過銷毀目前的會話來啟動登出。處理 CSRF 保護。

類型參數

參數

返回

Promise<R 繼承 true ? undefined : SignOutResponse>

useSession()

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

React Hook，可讓您存取已登入使用者的會話資料，並讓您修改它。

類型參數

參數

返回

SessionContextValue<R>