Skip to content
Migrating from NextAuth.js v4? Read our migration guide.
API reference
react

react

NextAuth.js methods and components that work in Client components and the Pages Router.

For use in Server Actions, check out these methods

GetSessionParams

Properties

broadcast?

optional broadcast: boolean;

event?

optional event: string;

triggerEvent?

optional triggerEvent: boolean;

SessionProviderProps

If you have session expiry times of 30 days (the default) or more, then you probably don’t need to change any of the default options.

However, if you need to customize the session behavior and/or are using short session expiry times, you can pass options to the provider to customize the behavior of the useSession hook.

Properties

basePath?

optional basePath: string;

baseUrl?

optional baseUrl: string;

children

children: ReactNode;

refetchInterval?

optional refetchInterval: number;

A time interval (in seconds) after which the session will be re-fetched. If set to 0 (default), the session is not polled.

refetchOnWindowFocus?

optional refetchOnWindowFocus: boolean;

SessionProvider automatically refetches the session when the user switches between windows. This option activates this behaviour if set to true (default).

refetchWhenOffline?

optional refetchWhenOffline: false;

Set to false to stop polling when the device has no internet access offline (determined by navigator.onLine)

navigator.onLine documentation

session?

optional session: null | Session;

SignInOptions

Extends

  • Record<string, unknown>

Properties

callbackUrl?

optional callbackUrl: string;

Specify to which URL the user will be redirected after signing in. Defaults to the page URL the sign-in is initiated from.

Documentation

redirect?

optional redirect: boolean;

Documentation


SignInResponse

Properties

code

code: undefined | string;

error

error: undefined | string;

ok

ok: boolean;

status

status: number;

url

url: null | string;

SignOutParams<R>

Type parameters

Type parameterValue
R extends booleantrue

Properties

callbackUrl?

optional callbackUrl: string;

Documentation

redirect?

optional redirect: R;

[Documentation](https://next-auth.js.org/getting-started/client#using-the-redirect-false-option-1


LiteralUnion<T, U>

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

Type parameters

Type parameterValue
T extends U-
Ustring

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() returns an object containing three things: a method called update, data and status.

Type parameters

Type parameterValue
R extends booleanfalse

UpdateSession()

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

Todo

Document

Parameters

ParameterType
data?any

Returns

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 provider to wrap the app (pages/) to make session data available anywhere.

When used, the session state is automatically synchronized across all open tabs/windows and they are all updated whenever they gain or lose focus or the state changes (e.g. a user signs in or out) when SessionProviderProps.refetchOnWindowFocus is true.

SessionProvider is for client-side use only and when using Next.js App Router (app/) you should prefer the auth() export.

Parameters

ParameterType
propsSessionProviderProps

Returns

Element


getCsrfToken()

getCsrfToken(): Promise<string>

Returns the current Cross-Site Request Forgery Token (CSRF Token) required to make requests that changes state. (e.g. signing in or out, or updating the session).

CSRF Prevention: Double Submit Cookie

Returns

Promise<string>


getProviders()

getProviders(): Promise<null | ProvidersType>

Returns a client-safe configuration object of the currently available providers.

Returns

Promise<null | ProvidersType>


getSession()

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

Parameters

ParameterType
params?GetSessionParams

Returns

Promise<null | Session>


signIn()

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

Initiate a signin flow or send the user to the signin page listing all possible providers. Handles CSRF protection.

Type parameters

Type parameterValue
P extends undefined | RedirectableProviderTypeundefined

Parameters

ParameterType
provider?LiteralUnion<P extends RedirectableProviderType ? BuiltInProviderType | P : BuiltInProviderType>
options?SignInOptions
authorizationParams?SignInAuthorizationParams

Returns

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


signOut()

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

Initiate a signout, by destroying the current session. Handles CSRF protection.

Type parameters

Type parameterValue
R extends booleantrue

Parameters

ParameterType
options?SignOutParams<R>

Returns

Promise<R extends true ? undefined : SignOutResponse>


useSession()

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

React Hook that gives you access to the logged in user’s session data and lets you modify it.

useSession is for client-side use only and when using Next.js App Router (app/) you should prefer the auth() export.

Type parameters

Type parameter
R extends boolean

Parameters

ParameterType
options?UseSessionOptions<R>

Returns

SessionContextValue<R>

Auth.js © Balázs Orbán and Team - 2024