mirror of
https://github.com/SrIzan10/next-auth.git
synced 2026-05-01 10:55:20 +00:00
**What**: These changes ensure that we work more tightly with React that can also result in unforeseen performance boosts. In case we would decide on expanding to other libraries/frameworks, a new file per framework could be added. **Why**: Some performance issues (https://github.com/nextauthjs/next-auth/issues/844) could only be fixed by moving more of the client code into the `Provider`. **How**: Refactoring `next-auth/client` Related: #1461, #1084, #1462 BREAKING CHANGE: **1.** `next-auth/client` is renamed to `next-auth/react`. **2.** In the past, we exposed most of the functions with different names for convenience. To simplify our source code, the new React specific client code exports only the following functions, listed with the necessary changes: - `setOptions`: Not exposed anymore, use `SessionProvider` props - `options`: Not exposed anymore, use `SessionProvider` props - `session`: Rename to `getSession` - `providers`: Rename to `getProviders` - `csrfToken`: Rename to `getCsrfToken` - `signin`: Rename to `signIn` - `signout`: Rename to `signOut` - `Provider`: Rename to `SessionProvider` **3.** `Provider` changes. - `Provider` is renamed to `SessionProvider` - The `options` prop is now flattened as the props of `SessionProvider`. - `clientMaxAge` has been renamed to `staleTime`. - `keepAlive` has been renamed to `refetchInterval`. An example of the changes: ```diff - <Provider options={{clientMaxAge: 0, keepAlive: 0}}>{children}</Provider> + <SessionProvider staleTime={0} refetchInterval={0}>{children}</SessionProvider> ``` **4.** It is now **required** to wrap the part of your application that uses `useSession` into a `SessionProvider`. Usually, the best place for this is in your `pages/_app.jsx` file: ```jsx import { SessionProvider } from "next-auth/react" export default function App({ Component, pageProps: { session, ...pageProps } }) { return ( // `session` comes from `getServerSideProps` or `getInitialProps`. // Avoids flickering/session loading on first load. <SessionProvider session={session}> <Component {...pageProps} /> </SessionProvider> ) } ```
177 lines
5.0 KiB
TypeScript
177 lines
5.0 KiB
TypeScript
import * as React from "react"
|
|
import { IncomingMessage } from "http"
|
|
import { Session } from "."
|
|
import { ProviderType } from "./providers"
|
|
|
|
export interface CtxOrReq {
|
|
req?: IncomingMessage
|
|
ctx?: { req: IncomingMessage }
|
|
}
|
|
|
|
/***************
|
|
* Session types
|
|
**************/
|
|
|
|
export type GetSessionOptions = CtxOrReq & {
|
|
event?: "storage" | "timer" | "hidden" | string
|
|
triggerEvent?: boolean
|
|
}
|
|
|
|
/**
|
|
* React Hook that gives you access
|
|
* to the logged in user's session data.
|
|
*
|
|
* [Documentation](https://next-auth.js.org/getting-started/client#usesession)
|
|
*/
|
|
export function useSession(): [Session | null, boolean]
|
|
|
|
/**
|
|
* Can be called client or server side to return a session asynchronously.
|
|
* It calls `/api/auth/session` and returns a promise with a session object,
|
|
* or null if no session exists.
|
|
*
|
|
* [Documentation](https://next-auth.js.org/getting-started/client#getsession)
|
|
*/
|
|
export function getSession(options?: GetSessionOptions): Promise<Session | null>
|
|
|
|
/*******************
|
|
* CSRF Token types
|
|
******************/
|
|
|
|
/**
|
|
* Returns the current Cross Site Request Forgery Token (CSRF Token)
|
|
* required to make POST requests (e.g. for signing in and signing out).
|
|
* You likely only need to use this if you are not using the built-in
|
|
* `signIn()` and `signOut()` methods.
|
|
*
|
|
* [Documentation](https://next-auth.js.org/getting-started/client#getcsrftoken)
|
|
*/
|
|
export function getCsrfToken(ctxOrReq?: CtxOrReq): Promise<string | null>
|
|
|
|
/******************
|
|
* Providers types
|
|
*****************/
|
|
|
|
export interface ClientSafeProvider {
|
|
id: string
|
|
name: string
|
|
type: ProviderType
|
|
signinUrl: string
|
|
callbackUrl: string
|
|
}
|
|
|
|
/**
|
|
* It calls `/api/auth/providers` and returns
|
|
* a list of the currently configured authentication providers.
|
|
* It can be useful if you are creating a dynamic custom sign in page.
|
|
*
|
|
* [Documentation](https://next-auth.js.org/getting-started/client#getproviders)
|
|
*/
|
|
export function getProviders(): Promise<Record<
|
|
string,
|
|
ClientSafeProvider
|
|
> | null>
|
|
|
|
/****************
|
|
* Sign in types
|
|
***************/
|
|
|
|
export type RedirectableProvider = "email" | "credentials"
|
|
|
|
export type SignInProvider = RedirectableProvider | string | undefined
|
|
|
|
export interface SignInOptions extends Record<string, unknown> {
|
|
/**
|
|
* Defaults to the current URL.
|
|
* @docs https://next-auth.js.org/getting-started/client#specifying-a-callbackurl
|
|
*/
|
|
callbackUrl?: string
|
|
/** @docs https://next-auth.js.org/getting-started/client#using-the-redirect-false-option */
|
|
redirect?: boolean
|
|
}
|
|
|
|
export interface SignInResponse {
|
|
error: string | undefined
|
|
status: number
|
|
ok: boolean
|
|
url: string | null
|
|
}
|
|
|
|
/** Match `inputType` of `new URLSearchParams(inputType)` */
|
|
export type SignInAuthorisationParams =
|
|
| string
|
|
| string[][]
|
|
| Record<string, string>
|
|
| URLSearchParams
|
|
|
|
/**
|
|
* Client-side method to initiate a signin flow
|
|
* or send the user to the signin page listing all possible providers.
|
|
* Automatically adds the CSRF token to the request.
|
|
*
|
|
* [Documentation](https://next-auth.js.org/getting-started/client#signin)
|
|
*/
|
|
export function signIn<P extends SignInProvider = undefined>(
|
|
provider?: P,
|
|
options?: SignInOptions,
|
|
authorizationParams?: SignInAuthorisationParams
|
|
): Promise<
|
|
P extends RedirectableProvider ? SignInResponse | undefined : undefined
|
|
>
|
|
|
|
/****************
|
|
* Sign out types
|
|
****************/
|
|
|
|
/** @docs https://next-auth.js.org/getting-started/client#using-the-redirect-false-option-1 */
|
|
export interface SignOutResponse {
|
|
url: string
|
|
}
|
|
|
|
export interface SignOutParams<R extends boolean = true> {
|
|
/** @docs https://next-auth.js.org/getting-started/client#specifying-a-callbackurl-1 */
|
|
callbackUrl?: string
|
|
/** @docs https://next-auth.js.org/getting-started/client#using-the-redirect-false-option-1 */
|
|
redirect?: R
|
|
}
|
|
|
|
/**
|
|
* Signs the user out, by removing the session cookie.
|
|
* Automatically adds the CSRF token to the request.
|
|
*
|
|
* [Documentation](https://next-auth.js.org/getting-started/client#signout)
|
|
*/
|
|
export function signOut<R extends boolean = true>(
|
|
params?: SignOutParams<R>
|
|
): Promise<R extends true ? undefined : SignOutResponse>
|
|
|
|
/************************
|
|
* SessionProvider types
|
|
***********************/
|
|
|
|
/** @docs: https://next-auth.js.org/getting-started/client#options */
|
|
export interface SessionProviderProps {
|
|
session?: Session
|
|
baseUrl?: string
|
|
basePath?: string
|
|
/**
|
|
* The amount of time (in seconds) after a session should be considered stale.
|
|
* If set to `0` (default), the session will never be re-fetched.
|
|
*/
|
|
staleTime?: number
|
|
/**
|
|
* A time interval (in seconds) after which the session will be re-fetched.
|
|
* If set to `0` (default), the session is not polled.
|
|
*/
|
|
refetchInterval?: number
|
|
}
|
|
|
|
/**
|
|
* Provider to wrap the app in to make session data available globally.
|
|
* Can also be used to throttle the number of requests to the endpoint
|
|
* `/api/auth/session`.
|
|
*
|
|
* [Documentation](https://next-auth.js.org/getting-started/client#sessionprovider)
|
|
*/
|
|
export const SessionProvider: React.FC<SessionProviderProps>
|