feat(react): create client tailored to React #1473
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. We might also want to update the import from `next-auth/client` to `next-auth/react`. BREAKING CHANGE: Some performance issues (#844) could only be fixed by moving setting up event listeners inside `Provider`. This breaks the current tab/window sync behavior for users who don't use `Provider` in their app. For these users, wrap your app in `<Provider>` at a level above all of your `useSession` calls. If you don't care about tab/window syncing, this might not be needed, but still recommended.
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/nextauthjs/next-auth/G9wkLL8BcqcqvAyACVcfM9dzRH7d |
5 tasks
This was referenced Apr 6, 2021
This was referenced Apr 17, 2021
Conflicts: package-lock.json package.json src/providers/faceit.js src/providers/index.js src/providers/instagram.js src/providers/zoho.js src/server/index.js src/server/lib/oauth/client.js www/docs/configuration/providers.md www/docs/providers/faceit.md www/docs/providers/zoho.md www/package-lock.json
Codecov Report
@@ Coverage Diff @@
## next #1473 +/- ##
=========================================
- Coverage 10.05% 9.71% -0.35%
=========================================
Files 81 82 +1
Lines 1382 1390 +8
Branches 387 381 -6
=========================================
- Hits 139 135 -4
- Misses 1022 1034 +12
Partials 221 221
Continue to review full report at Codecov.
|
hboylan
reviewed
Jun 11, 2021
|
@hboylan yes, from version 4, nodemailer will be optional, as it's only needed if someone uses the email provider. anyone else won't have to install it. smaller bundle size, faster install. 😊 |
0ubbe
approved these changes
Jun 11, 2021
There was a problem hiding this comment.
Impressive work 💯 , did a pair programming review with @balazsorban44 and in my opinion, we're good to go as a base for v4 👍🏽
mnphpexpert
added a commit
to mnphpexpert/next-auth
that referenced
this pull request
Sep 2, 2024
**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 (nextauthjs#844) could only be fixed by moving more of the client code into the `Provider`. **How**: Refactoring `next-auth/client` Related: nextauthjs#1461, nextauthjs#1084, nextauthjs#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> ) } ```
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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 (#844) could only be fixed by moving more of the client code into the
Provider.How:
Refactoring
next-auth/clientRelated: #1461, #1084, #1462
BREAKING CHANGE:
1.
next-auth/clientis renamed tonext-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, useSessionProviderpropsoptions: Not exposed anymore, useSessionProviderpropssession: Rename togetSessionproviders: Rename togetProviderscsrfToken: Rename togetCsrfTokensignin: Rename tosignInsignout: Rename tosignOutProvider: Rename toSessionProvider3.
Providerchanges.Provideris renamed toSessionProvideroptionsprop is now flattened as the props ofSessionProvider.clientMaxAgehas been renamed tostaleTime.keepAlivehas been renamed torefetchInterval.An example of the changes:
4. It is now required to wrap the part of your application that uses
useSessioninto aSessionProvider.Usually, the best place for this is in your
pages/_app.jsxfile: