4.0.0-next.12 (2021-06-11)

Features

• react: create client tailored to React (#1473) (ca0ed1e), closes #1461 #1084 #1462

BREAKING CHANGES

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:

- <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:

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>
  )
}