mirror of
https://github.com/SrIzan10/next-auth.git
synced 2026-05-01 10:55:20 +00:00
ca0ed1e2a8
**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> ) } ```
42 lines
1.3 KiB
JavaScript
42 lines
1.3 KiB
JavaScript
import { getSession } from "next-auth/react"
|
|
import Layout from "../components/layout"
|
|
|
|
export default function Page() {
|
|
// As this page uses Server Side Rendering, the `session` will be already
|
|
// populated on render without needing to go through a loading stage.
|
|
// This is possible because of the shared context configured in `_app.js` that
|
|
// is used by `useSession()`.
|
|
|
|
return (
|
|
<Layout>
|
|
<h1>Server Side Rendering</h1>
|
|
<p>
|
|
This page uses the universal <strong>getSession()</strong> method in{" "}
|
|
<strong>getServerSideProps()</strong>.
|
|
</p>
|
|
<p>
|
|
Using <strong>getSession()</strong> in{" "}
|
|
<strong>getServerSideProps()</strong> is the recommended approach if you
|
|
need to support Server Side Rendering with authentication.
|
|
</p>
|
|
<p>
|
|
The advantage of Server Side Rendering is this page does not require
|
|
client side JavaScript.
|
|
</p>
|
|
<p>
|
|
The disadvantage of Server Side Rendering is that this page is slower to
|
|
render.
|
|
</p>
|
|
</Layout>
|
|
)
|
|
}
|
|
|
|
// Export the `session` prop to use sessions with Server Side Rendering
|
|
export async function getServerSideProps(context) {
|
|
return {
|
|
props: {
|
|
session: await getSession(context),
|
|
},
|
|
}
|
|
}
|