fix(react): don't use localStorage on server side (#2166)

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

.github/FUNDING.yml

@@ -1,4 +1,3 @@
 # https://docs.github.com/en/github/administering-a-repository/displaying-a-sponsor-button-in-your-repository
 
-open_collective: nextauth
 github: [balazsorban44]

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,43 @@
+---
+name: Bug report
+about: Report a defect with NextAuth.js
+labels: bug
+assignees: ""
+---
+
+## Description 🐜
+
+Please provide a clear and concise description of the bug in NextAuth.js.
+
+🚧 – _Do not report bugs with your own project here; ask for help [by raising a question instead](https://github.com/nextauthjs/next-auth/issues/new?assignees=&labels=question&template=question.md) - this helps us a lot with administration overhead._
+
+## How to reproduce ☕️
+
+We encourage you to use one of the templates set up on **CodeSandbox** to reproduce your issue:
+
+- [`next-auth-example`](https://codesandbox.io/s/next-auth-example-1kktb)
+- [`next-auth-typescript-example`](https://codesandbox.io/s/next-auth-typescript-example-se32w)
+
+🚧 – _If you don't provide any way to reproduce the bug, the issue is at risk of being closed._
+
+## Screenshots / Logs 📽
+
+**Help us help you**. We can address the bug you found much faster if you provide contextual screenshots or screen recordings showcasing the issue.
+
+See [Kap](https://getkap.co/) for a good, easy-to-use, cross-platform screen recording tool.
+
+## Environment 🖥
+
+Please run this command:
+
+```
+$ npx envinfo --system --binaries --browsers --npmPackages "{next-auth}"
+```
+
+and paste the output here.
+
+## Contributing 🙌🏽
+
+It takes a lot of work 🏋🏻‍♀️ maintaining a library like `next-auth`; any contribution is more than welcome 💚
+
+In case you're willing to help fix this bug, please let us know here, and we'll reach you 😊 . Otherwise, you can have a look at the issues labelled with [`"good first issue"`](https://github.com/nextauthjs/next-auth/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) and pick any of them.

.github/ISSUE_TEMPLATE/bug_report.yaml

@@ -1,91 +0,0 @@
-name: Bug Report
-description: File a bug report
-labels: bug
-
-# note: markdown sections will NOT appear as part of the issue as per documentation, rather they provide context to the user
-# https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/syntax-for-githubs-form-schema#markdown
-
-
-body:
-  - type: markdown
-    attributes:
-      value: |
-        Thanks for taking the time to fill out this bug report! Please provide the following information:
-  - type: textarea
-    id: description
-    attributes: 
-      label: Description 🐜
-      description: Please provide a clear and concise description of the bug in NextAuth.js
-    validations:
-      required: true  
-
-  - type: dropdown
-    id: ownproject
-    attributes: 
-      label: Is this a bug in your own project?
-      description: 🚧 – _Do not report bugs with your own project here; ask for help [by raising a question instead](https://github.com/nextauthjs/next-auth/issues/new?assignees=&labels=question&template=question.md) or use the [Discussions tab](https://github.com/nextauthjs/next-auth/discussions) - this helps us reduce the maintenance overhead._
-      multiple: false
-      options:
-        - "Yes"
-        - "No"
-    validations:
-      required: true
-      
-  - type: textarea
-    id: reproduction
-    attributes:
-      label: How to reproduce ☕️ 
-      description: Please provide a link or code snippets to a minimal reproduction of the bug
-    validations:
-      required: true 
-  - type: markdown
-    attributes:
-      value: |
-        We encourage you to use one of the templates set up on **CodeSandbox** to reproduce your issue:
-        - [`next-auth-example`](https://codesandbox.io/s/next-auth-example-1kktb)
-        - [`next-auth-typescript-example`](https://codesandbox.io/s/next-auth-typescript-example-se32w)
-
-        🚧 – _If you don't provide any way to reproduce the bug, the issue is at risk of being closed._
-  
-  - type: textarea
-    id: logs
-    attributes: 
-      label: Screenshots / Logs 📽
-      description: We can address the bug you found much faster if you provide contextual screenshots or screen recordings showcasing the issue.
-  - type: markdown
-    attributes:
-      value: |
-        See [Kap](https://getkap.co/) for a good, easy-to-use, cross-platform screen recording tool.
-    validations:
-      required: false
-
-  - type: textarea
-    id: environment
-    attributes: 
-      label: Environment 🖥
-    validations:
-      required: true
-  - type: markdown
-    attributes:
-      value: |
-        Please run this command in your project's root folder:
-
-        ```sh
-        npx envinfo --system --binaries --browsers --npmPackages "next,next-auth,react"
-        ```
- 
-  - type: dropdown
-    id: pr
-    attributes:
-      label: Contributing 🙌🏽
-      multiple: false
-      options:
-        - "Yes,  I am willing to help solve this bug in a PR"
-        - "No, I am afraid I cannot help regarding this"
-    validations:
-      required: true
-  - type: markdown
-    attributes: 
-      value: |
-        It takes a lot of work 🏋🏻‍♀️ maintaining a library like `next-auth`; any contribution is more than welcome 💚
-  

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,39 @@
+---
+name: Feature request
+about: Suggest an idea for NextAuth.js
+labels: enhancement
+assignees: ""
+---
+
+## Summary 💭
+
+A clear and concise summary of the feature being proposed.
+
+## Description 📓
+
+Please provide a more in-depth description of the feature proposed.
+
+Make sure you provide plenty of [links]() to external documentation and inline code examples like so:
+
+```js
+function myAwesomeNextAuthFeature() {
+  return 💚
+}
+```
+
+Take time thinking about what you want to say and help us understand your proposal making sure that this description contains:
+
+- **purpose of the feature**
+- **potential problems**
+- **potential alternatives**
+
+You can use one of the templates set up on **CodeSandbox** to better illustrate your idea:
+
+- [`next-auth-example`](https://codesandbox.io/s/next-auth-example-1kktb)
+- [`next-auth-typescript-example`](https://codesandbox.io/s/next-auth-typescript-example-se32w)
+
+## Contributing 🙌🏽
+
+It takes a lot of work 🏋🏻‍♀️ maintaining a library like `next-auth`; any contribution is more than welcome 💚
+
+In case you're willing to help implement this feature, please let us know here, and we'll reach you 😊 . Otherwise, you can have a look at the issues labelled with [`"good first issue"`](https://github.com/nextauthjs/next-auth/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) and pick any of them.

.github/ISSUE_TEMPLATE/feature_request.yaml

@@ -1,68 +0,0 @@
-name: Feature Request
-description: Suggest an idea for NextAuth.js
-labels: enhancement
-
-# note: markdown sections will NOT appear as part of the issue as per documentation, rather they provide context to the user
-# https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/syntax-for-githubs-form-schema#markdown
-
-body:
-  - type: markdown
-    attributes:
-      value: | 
-        Thank you very much for reaching out to us regarding the awesome feature that you believe should be included in the NextAuth.js library. Please provide the following information:
- 
-  - type: textarea
-    id: description
-    attributes:
-      label: Description 📓
-      description: Please provide a more in-depth description of the feature proposed.
-    validations:
-      required: true
-
-  - type: markdown
-    attributes:
-      value: |
-        Make sure you provide plenty of [links]() to external documentation and inline code examples like so:
-
-        ```js
-        function myAwesomeNextAuthFeature() {
-          return 💚
-        }
-        ```
-
-        Take time thinking about what you want to say and help us understand your proposal making sure that this description contains:
-
-        - **purpose of the feature**
-        - **potential problems**
-        - **potential alternatives**
-
-  - type: textarea
-    id: reproduction
-    attributes:
-      label: How to reproduce ☕️ 
-      description: If you have a CodeSandbox playground or some code snippets to help us visualize your idea better, please provide it here.
-    validations:
-      required: true
-  - type: markdown
-    attributes:
-      value: |
-        You can use one of the templates set up on **CodeSandbox** to better illustrate your idea:
-
-        - [`next-auth-example`](https://codesandbox.io/s/next-auth-example-1kktb)
-        - [`next-auth-typescript-example`](https://codesandbox.io/s/next-auth-typescript-example-se32w)        
-
-  - type: dropdown
-    id: pr
-    attributes:
-      label: Contributing 🙌🏽
-      multiple: false
-      options:
-        - "Yes, I am willing to help implement this feature in a PR"
-        - "No, I am afraid I cannot help regarding this"
-    validations:
-      required: true
-  - type: markdown
-    attributes: 
-      value: |
-        It takes a lot of work 🏋🏻‍♀️ maintaining a library like `next-auth`; any contribution is more than welcome 💚
-  

.github/ISSUE_TEMPLATE/question.md

@@ -0,0 +1,32 @@
+---
+name: Question
+about: Ask a question about NextAuth.js or for help using it
+labels: question
+assignees: ""
+---
+
+## Question 💬
+
+Please provide an in-depth description of the question you have.
+
+Make sure you [link]() to external documentation if necessary and provide inline code examples like so:
+
+```js
+function myAwesomeNextAuthFeature() {
+  return 💚
+}
+```
+
+**NOTE:** Questions will be converted to Discussions. You can find them [here](https://github.com/nextauthjs/next-auth/discussions)!
+
+## How to reproduce ☕️
+
+We encourage you to use the template set-up on **CodeSandbox** as a playground to represent your question or doubt:
+
+- [`next-auth-example`](https://codesandbox.io/s/next-auth-example-1kktb)
+
+## Contributing 🙌🏽
+
+It takes a lot of work 🏋🏻‍♀️ maintaining a library like `next-auth`; any contribution is more than welcome 💚
+
+In case you're willing to help answer this question, please let us know here, and we'll reach you 😊 . Otherwise, you can have a look at the issues labelled with [`"good first issue"`](https://github.com/nextauthjs/next-auth/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) and pick any of them.

.github/ISSUE_TEMPLATE/question.yaml

@@ -1,62 +0,0 @@
-name: Question
-description: Ask a question about NextAuth.js or for help using it
-labels: question
-
-# note: markdown sections will NOT appear as part of the issue as per documentation, rather they provide context to the user
-# https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/syntax-for-githubs-form-schema#markdown
-
-body:
-
-  - type: markdown
-    attributes:
-      value: |
-        We are glad that you have a question about this library. Please provide the following information:
-
-  - type: textarea
-    id: question
-    attributes:
-      label: Question 💬
-      description: Please provide an in-depth description of the question you have.
-    validations:
-      required: true
-  - type: markdown
-    attributes:
-      value: |   
-        Make sure you [link]() to external documentation if necessary and provide inline code examples like so:
-
-        ```js
-        function myAwesomeNextAuthFeature() {
-          return 💚
-        }
-        ```
-
-        **NOTE:** Questions will be converted to Discussions. You can find them [here](https://github.com/nextauthjs/next-auth/discussions)!    
-
-  - type: textarea
-    id: reproduction
-    attributes: 
-      label: How to reproduce ☕️ 
-      description: Please provide a link to a minimal reproduction or code snippets that represents your question
-    validations:
-      required: true 
-  - type: markdown
-    attributes:
-      value: |
-        We encourage you to use the template set-up on **CodeSandbox** as a playground to represent your question or doubt:
-        - [`next-auth-example`](https://codesandbox.io/s/next-auth-example-1kktb)
-  
-  - type: dropdown
-    id: pr
-    attributes:
-      label: Contributing 🙌🏽
-      multiple: false
-      options:
-        - "Yes, I am willing to help answer this question in a PR"
-        - "No, I am afraid I cannot help regarding this"
-    validations:
-      required: true
-  - type: markdown
-    attributes: 
-      value: |
-        It takes a lot of work 🏋🏻‍♀️ maintaining a library like `next-auth`; any contribution is more than welcome 💚
-  

.github/ISSUE_TEMPLATE/typescript.md

@@ -0,0 +1,36 @@
+---
+name: TypeScript
+about: Ask a question about NextAuth.js TypeScript integration
+labels:
+  - question
+  - TypeScript
+assignees:
+  - lluia
+  - balazsorban44
+---
+
+## Question 💬
+
+Please provide an in-depth description of the question you have when using NextAuth.js on a Typescript project or when consuming the built-in types for `next-auth`.
+
+Make sure you [link]() to external documentation if necessary and provide inline code examples like so:
+
+```js
+function myAwesomeNextAuthFeature() {
+  return 💚
+}
+```
+
+**NOTE:** Questions will be converted to Discussions. You can find them [here](https://github.com/nextauthjs/next-auth/discussions)!
+
+## How to reproduce ☕️
+
+We encourage you to use the template set-up on **CodeSandbox** as a playground to represent your question or doubt:
+
+- [`next-auth-typescript-example`](https://codesandbox.io/s/next-auth-typescript-example-se32w)
+
+## Contributing 🙌🏽
+
+It takes a lot of work 🏋🏻‍♀️ maintaining a library like `next-auth`; any contribution is more than welcome 💚
+
+In case you're willing to help answer this TypeScript question, please let us know here, and we'll reach you 😊 . Otherwise, you can have a look at the issues labelled with [`"good first issue"`](https://github.com/nextauthjs/next-auth/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) and pick any of them.

.github/ISSUE_TEMPLATE/typescript.yaml

@@ -1,58 +0,0 @@
-name: TypeScript
-description: Ask a question about NextAuth.js TypeScript integration
-labels: [question, TypeScript]
-assignees: [lluia, balazsorban44]
-
-# note: markdown sections will NOT appear as part of the issue as per documentation, rather they provide context to the user
-# https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/syntax-for-githubs-form-schema#markdown
-
-body:
-  - type: textarea
-    id: question
-    attributes:
-      label: Question 💬
-      description: Please provide an in-depth description of the question you have when using NextAuth.js on a Typescript project or when consuming the built-in types for `next-auth`.
-    validations:
-      required: true
-  - type: markdown
-    attributes:
-      value: |
-        Make sure you [link]() to external documentation if necessary and provide inline code examples like so:
-
-        ```js
-        function myAwesomeNextAuthFeature() {
-          return 💚
-        }
-        ```
-
-        **NOTE:** Questions will be converted to Discussions. You can find them [here](https://github.com/nextauthjs/next-auth/discussions)!    
-
-  - type: textarea
-    id: codesandbox
-    attributes: 
-      label: How to reproduce ☕️ 
-      description: Please provide a link to a minimal reproduction or code snippets that represents your question
-    validations:
-      required: true 
-  - type: markdown
-    attributes:
-      value: |
-        We encourage you to use the template set-up on **CodeSandbox** as a playground to represent your question or doubt:
-        - [`next-auth-typescript-example`](https://codesandbox.io/s/next-auth-typescript-example-se32w)
-  
-
-  - type: dropdown
-    id: pr
-    attributes:
-      label: Contributing 🙌🏽
-      multiple: false
-      options:
-        - "Yes, I am willing to help answer this question in a PR"
-        - "No, I am afraid I cannot help regarding this"
-    validations:
-      required: true
-  - type: markdown
-    attributes: 
-      value: |
-        It takes a lot of work 🏋🏻‍♀️ maintaining a library like `next-auth`; any contribution is more than welcome 💚
-  

.github/workflows/release.yml

@@ -1,4 +1,4 @@
-name: Release
+name: Release Flow
 
 on:
   push:
@@ -11,66 +11,41 @@ on:
 
 jobs:
   test:
-    name: Test
+    name: Tests
     runs-on: ubuntu-latest
     steps:
       - name: Init
         uses: actions/checkout@v2
       - name: Setup Node
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
-          node-version: 16
+          node-version: "16"
       - name: Dependencies
         uses: bahmutov/npm-install@v1
-      - name: Build
-        run: npm run build
       - name: Run tests
-        run: npm test -- --coverage --verbose && npm run test:types
+        run: npm test -- --coverage --verbose
       - name: Coverage
         uses: codecov/codecov-action@v1
         with:
           directory: ./coverage
           fail_ci_if_error: false
-  release-branch:
-    name: Publish branch
-    runs-on: ubuntu-latest
+      - name: Build
+        run: npm run build
+  release:
+    name: Release
     needs: test
-    if: ${{ github.event_name == 'push' }}
-    environment: Production
+    runs-on: ubuntu-latest
     steps:
       - name: Init
         uses: actions/checkout@v2
       - name: Setup Node
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
-          node-version: 16
+          node-version: "16"
       - name: Dependencies
         uses: bahmutov/npm-install@v1
-      - name: Publish to npm and GitHub
+      - name: Release
         run: npx semantic-release@17
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-  release-pr:
-    name: Publish PR
-    runs-on: ubuntu-latest
-    needs: test
-    if: ${{ github.event_name == 'pull_request' }}
-    environment: Preview
-    steps:
-      - name: Init
-        uses: actions/checkout@v2
-      - name: Setup Node
-        uses: actions/setup-node@v1
-        with:
-          node-version: 16
-      - name: Dependencies
-        uses: bahmutov/npm-install@v1
-      - name: Publish to npm
-        run: |
-          echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> .npmrc
-          npm run version:pr
-          npm publish --access public --tag experimental
-        env:
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-          PR_NUMBER: ${{ github.event.number }}
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+          NPM_TOKEN: ${{secrets.NPM_TOKEN}}

.gitignore

@@ -40,6 +40,8 @@ src/providers/index.js
 /providers.js
 /errors.js
 /errors.d.ts
+/react.js
+/react.d.ts
 
 # Development app
 app/next-auth
@@ -61,9 +63,4 @@ app/yarn.lock
 /prisma/migrations
 
 # Tests
-/coverage
-
-# v4
-packages
-apps
-docs/providers.json
+/coverage

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx pretty-quick --staged
+# npx pretty-quick --staged

CODE_OF_CONDUCT.md

@@ -14,22 +14,22 @@ appearance, race, religion, or sexual identity and orientation.
 Examples of behavior that contributes to creating a positive environment
 include:
 
-- Using welcoming and inclusive language
-- Being respectful of differing viewpoints and experiences
-- Gracefully accepting constructive criticism
-- Focusing on what is best for the community
-- Showing empathy towards other community members
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-- The use of sexualized language or imagery and unwelcome sexual attention or
-  advances
-- Trolling, insulting/derogatory comments, and personal or political attacks
-- Public or private harassment
-- Publishing others' private information, such as a physical or electronic
-  address, without explicit permission
-- Other conduct which could reasonably be considered inappropriate in a
-  professional setting
+* The use of sexualized language or imagery and unwelcome sexual attention or
+advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+professional setting
 
 ## Our Responsibilities
 
@@ -55,11 +55,11 @@ further defined and clarified by project maintainers.
 ## Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting me@iaincollins.com or info@balazsorban.com and yo@ndo.dev.
-All complaints will be reviewed and investigated and will result in a response
-that is deemed necessary and appropriate to the circumstances. The project team
-is obligated to maintain confidentiality with regard to the reporter of an
-incident. Further details of specific enforcement policies may be posted separately.
+reported by contacting me@iaincollins.com. All complaints will be reviewed and
+investigated and will result in a response that is deemed necessary and
+appropriate to the circumstances. The project team is obligated to maintain
+confidentiality with regard to the reporter of an incident. Further details of
+specific enforcement policies may be posted separately.
 
 Project maintainers who do not follow or enforce the Code of Conduct in good
 faith may face temporary or permanent repercussions as determined by other

CONTRIBUTING.md

@@ -25,8 +25,6 @@ Anyone can be a contributor. Either you found a typo, or you have an awesome fea
 
 A quick guide on how to setup _next-auth_ locally to work on it and test out any changes:
 
-The dev application requires you to use `npm@7`.
-
 1. Clone the repo:
 
 ```sh
@@ -34,10 +32,10 @@ git clone git@github.com:nextauthjs/next-auth.git
 cd next-auth
 ```
 
-2. Install packages, set up the dev application:
+2. Install packages:
 
 ```sh
-npm run dev:setup
+npm i && npm run dev:setup
 ```
 
 3. Populate `.env.local`:
@@ -80,12 +78,26 @@ You can look at the existing built-in providers for inspiration.
 
 #### Databases
 
-If you would like to contribute to an existing database adapter or help create a new one, head over to the [nextauthjs/adapters](https://www.github.com/nextauthjs/adapters) repository and follow the instructions provided there.
+Included is a Docker Compose file that starts up MySQL, PostgreSQL, and MongoDB databases on localhost.
+
+It will use port `3306`, `5432`, and `27017` on localhost respectively; please make sure those ports are not used by other services on localhost.
+
+You can start them with `npm run db:start` and stop them with `npm run db:stop`.
+
+You will need Docker and Docker Compose installed to be able to start / stop the databases.
+
+When stopping the databases, it will reset their contents.
+
 #### Testing
 
 Tests can be run with `npm run test`.
 
 Automated tests are currently crude and limited in functionality, but improvements are in development.
+
+Currently, to run tests you need to first have started local test databases (e.g. using `npm run db:start`).
+
+The databases can take a few seconds to start up, so you might need to give it a minute before running the tests.
+
 ## For maintainers
 
 We use [semantic-release](https://github.com/semantic-release/semantic-release) together with [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0) to automate releases. This makes the maintenance process easier and less error-prone to human error. Please study the "Conventional Commits" site to understand how to write a good commit message.

README.md

@@ -110,15 +110,13 @@ export default NextAuth({
       from: "<no-reply@example.com>",
     }),
   ],
-  // SQL or MongoDB database (or leave empty)
-  database: process.env.DATABASE_URL,
 })
 ```
 
 ### Add React Component
 
 ```javascript
-import { useSession, signIn, signOut } from "next-auth/client"
+import { useSession, signIn, signOut } from "next-auth/react"
 
 export default function Component() {
   const [session, loading] = useSession()
@@ -147,43 +145,13 @@ export default function Component() {
   <img width="500px" src="https://contrib.rocks/image?repo=nextauthjs/next-auth" />
 </a>
 <div>
-<a href="https://vercel.com?utm_source=nextauthjs&utm_campaign=oss"></a>
+<a href="https://vercel.com?utm_source=nextauthjs&utm_campaign=oss">
+<img width="170px" src="https://raw.githubusercontent.com/nextauthjs/next-auth/canary/www/static/img/powered-by-vercel.svg" alt="Powered By Vercel" />
+</a>
+</div>
+<div>
+<p align="left">Thanks to Vercel sponsoring this project by allowing it to be deployed for free for the entire NextAuth.js Team</p>
 </div>
-
-### Support
-
-We're happy to announce we've recently created an [OpenCollective](https://opencollective.org/nextauth) for individuals and companies looking to contribute financially to the project!
-
-<!--sponsors start-->
-<table>
-  <tbody>
-    <tr>
-      <td align="center" valign="top">
-        <a href="https://vercel.com" target="_blank">
-          <img width="128px" src="https://avatars.githubusercontent.com/u/14985020?v=4" alt="Vercel Logo" />
-        </a><br />
-        <div>Vercel</div><br />
-        <sub>🥉 Bronze Financial Sponsor <br /> ☁️ Infrastructure Support</sub>
-      </td>
-      <td align="center" valign="top">
-        <a href="https://prisma.io" target="_blank">
-          <img width="128px" src="https://avatars.githubusercontent.com/u/17219288?v=4" alt="Prisma Logo" />
-        </a><br />
-        <div>Prisma</div><br />
-        <sub>🥉 Bronze Financial Sponsor</sub>
-      </td>
-      <td align="center" valign="top">
-        <a href="https://checklyhq.com" target="_blank">
-          <img width="128px" src="https://avatars.githubusercontent.com/u/25982255?v=4" alt="Checkly Logo" />
-        </a><br />
-        <div>Checkly</div><br />
-        <sub>☁️ Infrastructure Support</sub>
-      </td>
-    </tr><tr></tr>
-  </tbody>
-</table>
-<br />
-<!--sponsors end-->
 
 ## Contributing
 

SECURITY.md

@@ -19,6 +19,6 @@ If you contact us regarding a serious issue:
 - We will disclose the issue (and credit you, with your consent) once a fix to resolve the issue has been released.
 - If 90 days has elapsed and we still don't have a fix, we will disclose the issue publicly.
 
-Currently, the best way to report an issue is by contacting us via email at me@iaincollins.com or info@balazsorban.com and yo@ndo.dev.
+Currently, the best way to report an issue is by emailing me@iaincollins.com
 
 For less serious issues (e.g. RFC compliance for unsupported flows or potential issues that may cause a problem future or default behaviour / options) it is appropriate to submit these these publically as bug reports or feature requests or to raise a question to open a discussion around them.

app/.env.local.example

@@ -23,6 +23,8 @@ TWITTER_SECRET=
 EMAIL_SERVER=smtps://user@gmail.com:password@smtp.gmail.com:465
 EMAIL_FROM=user@gmail.com
 
+# You can use any of these as the "DATABASE_URL" for
+# databases started with Docker using `npm run db:start`.
 # Note: If using with Prisma adapter, you need to use a `.env`
 # file rather than a `.env.local` file to configure env vars.
 # Postgres: DATABASE_URL=postgres://nextauth:password@127.0.0.1:5432/nextauth?synchronize=true

app/components/access-denied.js

@@ -1,17 +1,18 @@
-import { signIn } from 'next-auth/client'
+import { signIn } from "next-auth/react"
 
-export default function AccessDenied () {
+export default function AccessDenied() {
   return (
     <>
       <h1>Access Denied</h1>
       <p>
         <a
-          href='/api/auth/signin'
+          href="/api/auth/signin"
           onClick={(e) => {
             e.preventDefault()
             signIn()
           }}
-        >You must be signed in to view this page
+        >
+          You must be signed in to view this page
         </a>
       </p>
     </>

app/components/footer.js

@@ -1,29 +1,17 @@
-import Link from "next/link"
-import styles from "./footer.module.css"
-import packageJSON from "package.json"
+import Link from 'next/link'
+import styles from './footer.module.css'
+import { version } from 'package.json'
 
-export default function Footer() {
+export default function Footer () {
   return (
     <footer className={styles.footer}>
       <hr />
       <ul className={styles.navItems}>
-        <li className={styles.navItem}>
-          <a href="https://next-auth.js.org">Documentation</a>
-        </li>
-        <li className={styles.navItem}>
-          <a href="https://www.npmjs.com/package/next-auth">NPM</a>
-        </li>
-        <li className={styles.navItem}>
-          <a href="https://github.com/nextauthjs/next-auth-example">GitHub</a>
-        </li>
-        <li className={styles.navItem}>
-          <Link href="/policy">
-            <a>Policy</a>
-          </Link>
-        </li>
-        <li className={styles.navItem}>
-          <em>{packageJSON.version}</em>
-        </li>
+        <li className={styles.navItem}><a href='https://next-auth.js.org'>Documentation</a></li>
+        <li className={styles.navItem}><a href='https://www.npmjs.com/package/next-auth'>NPM</a></li>
+        <li className={styles.navItem}><a href='https://github.com/nextauthjs/next-auth-example'>GitHub</a></li>
+        <li className={styles.navItem}><Link href='/policy'><a>Policy</a></Link></li>
+        <li className={styles.navItem}><em>{version}</em></li>
       </ul>
     </footer>
   )

app/components/header.js

@@ -1,17 +1,17 @@
-import Link from 'next/link'
-import { signIn, signOut, useSession } from 'next-auth/client'
-import styles from './header.module.css'
+import Link from "next/link"
+import { signIn, signOut, useSession } from "next-auth/react"
+import styles from "./header.module.css"
 
 // The approach used in this component shows how to built a sign in and sign out
 // component that works on pages which support both client and server side
 // rendering, and avoids any flash incorrect content on initial page load.
-export default function Header () {
+export default function Header() {
   const [session, loading] = useSession()
 
   return (
     <header>
       <noscript>
-        <style>{'.nojs-show { opacity: 1; top: 0; }'}</style>
+        <style>{".nojs-show { opacity: 1; top: 0; }"}</style>
       </noscript>
       <div className={styles.signedInStatus}>
         <p
@@ -25,7 +25,7 @@ export default function Header () {
                 You are not signed in
               </span>
               <a
-                href='/api/auth/signin'
+                href="/api/auth/signin"
                 className={styles.buttonPrimary}
                 onClick={(e) => {
                   e.preventDefault()
@@ -50,7 +50,7 @@ export default function Header () {
                 <strong>{session.user.email || session.user.name}</strong>
               </span>
               <a
-                href='/api/auth/signout'
+                href="/api/auth/signout"
                 className={styles.button}
                 onClick={(e) => {
                   e.preventDefault()
@@ -66,42 +66,42 @@ export default function Header () {
       <nav>
         <ul className={styles.navItems}>
           <li className={styles.navItem}>
-            <Link href='/'>
+            <Link href="/">
               <a>Home</a>
             </Link>
           </li>
           <li className={styles.navItem}>
-            <Link href='/client'>
+            <Link href="/client">
               <a>Client</a>
             </Link>
           </li>
           <li className={styles.navItem}>
-            <Link href='/server'>
+            <Link href="/server">
               <a>Server</a>
             </Link>
           </li>
           <li className={styles.navItem}>
-            <Link href='/protected'>
+            <Link href="/protected">
               <a>Protected</a>
             </Link>
           </li>
           <li className={styles.navItem}>
-            <Link href='/protected-ssr'>
+            <Link href="/protected-ssr">
               <a>Protected(SSR)</a>
             </Link>
           </li>
           <li className={styles.navItem}>
-            <Link href='/api-example'>
+            <Link href="/api-example">
               <a>API</a>
             </Link>
           </li>
           <li className={styles.navItem}>
-            <Link href='/credentials'>
+            <Link href="/credentials">
               <a>Credentials</a>
             </Link>
           </li>
           <li className={styles.navItem}>
-            <Link href='/email'>
+            <Link href="/email">
               <a>Email</a>
             </Link>
           </li>

app/next.config.js

@@ -7,7 +7,7 @@ module.exports = {
       alias: {
         ...config.resolve.alias,
         "next-auth$": path.join(process.cwd(), "next-auth/server"),
-        "next-auth/client$": path.join(process.cwd(), "next-auth/client"),
+        "next-auth/react$": path.join(process.cwd(), "next-auth/client/react"),
         "next-auth/jwt$": path.join(process.cwd(), "next-auth/lib/jwt"),
         "next-auth/adapters": path.join(process.cwd(), "next-auth/adapters"),
         "next-auth/providers": path.join(process.cwd(), "next-auth/providers"),

app/package.json

@@ -14,7 +14,8 @@
   },
   "license": "ISC",
   "dependencies": {
-    "next": "^11.0.1",
+    "next": "^10.1.3",
+    "nodemailer": "^6.6.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

app/pages/_app.js

@@ -1,31 +1,32 @@
-import { Provider } from "next-auth/client"
+import { SessionProvider } from "next-auth/react"
 import "./styles.css"
 
-// Use the <Provider> to improve performance and allow components that call
+// Use the <SessionProvider> to improve performance and allow components that call
 // `useSession()` anywhere in your application to access the `session` object.
-export default function App({ Component, pageProps }) {
+export default function App({
+  Component,
+  pageProps: { session, ...pageProps },
+}) {
   return (
-    <Provider
-      // Provider options are not required but can be useful in situations where
+    <SessionProvider
+      // SessionProvider options are not required but can be useful in situations where
       // you have a short session maxAge time. Shown here with default values.
-      options={{
-        // Client Max Age controls how often the useSession in the client should
-        // contact the server to sync the session state. Value in seconds.
-        // e.g.
-        // * 0  - Disabled (always use cache value)
-        // * 60 - Sync session state with server if it's older than 60 seconds
-        clientMaxAge: 0,
-        // Keep Alive tells windows / tabs that are signed in to keep sending
-        // a keep alive request (which extends the current session expiry) to
-        // prevent sessions in open windows from expiring. Value in seconds.
-        //
-        // Note: If a session has expired when keep alive is triggered, all open
-        // windows / tabs will be updated to reflect the user is signed out.
-        keepAlive: 0,
-      }}
-      session={pageProps.session}
+      // Client Max Age controls how often the useSession in the client should
+      // contact the server to sync the session state. Value in seconds.
+      // e.g.
+      // * 0  - Disabled (always use cache value)
+      // * 60 - Sync session state with server if it's older than 60 seconds
+      staleTime={0}
+      // Keep Alive tells windows / tabs that are signed in to keep sending
+      // a keep alive request (which extends the current session expiry) to
+      // prevent sessions in open windows from expiring. Value in seconds.
+      //
+      // Note: If a session has expired when keep alive is triggered, all open
+      // windows / tabs will be updated to reflect the user is signed out.
+      refetchInterval={0}
+      session={session}
     >
       <Component {...pageProps} />
-    </Provider>
+    </SessionProvider>
   )
 }

app/pages/api/auth/[...nextauth].js

@@ -5,10 +5,6 @@ import Auth0Provider from "next-auth/providers/auth0"
 import TwitterProvider from "next-auth/providers/twitter"
 import CredentialsProvider from "next-auth/providers/credentials"
 
-// import Adapters from 'next-auth/adapters'
-// import { PrismaClient } from '@prisma/client'
-// const prisma = new PrismaClient()
-
 export default NextAuth({
   // Used to debug https://github.com/nextauthjs/next-auth/issues/1664
   // cookies: {
@@ -79,13 +75,4 @@ export default NextAuth({
   },
   debug: false,
   theme: "auto",
-
-  // Default Database Adapter (TypeORM)
-  // database: process.env.DATABASE_URL
-
-  // Prisma Database Adapter
-  // To configure this app to use the schema in `prisma/schema.prisma` run:
-  // npx prisma generate
-  // npx prisma migrate dev
-  // adapter: Adapters.Prisma.Adapter({ prisma })
 })

app/pages/api/examples/jwt.js

@@ -1,5 +1,5 @@
 // This is an example of how to read a JSON Web Token from an API route
-import jwt from 'next-auth/jwt'
+import jwt from "next-auth/jwt"
 
 const secret = process.env.SECRET
 

app/pages/api/examples/protected.js

@@ -1,12 +1,17 @@
 // This is an example of to protect an API route
-import { getSession } from 'next-auth/client'
+import { getSession } from "next-auth/react"
 
 export default async (req, res) => {
   const session = await getSession({ req })
 
   if (session) {
-    res.send({ content: 'This is protected content. You can access this content because you are signed in.' })
+    res.send({
+      content:
+        "This is protected content. You can access this content because you are signed in.",
+    })
   } else {
-    res.send({ error: 'You must be sign in to view the protected content on this page.' })
+    res.send({
+      error: "You must be sign in to view the protected content on this page.",
+    })
   }
 }

app/pages/api/examples/session.js

@@ -1,5 +1,5 @@
 // This is an example of how to access a session from an API route
-import { getSession } from 'next-auth/client'
+import { getSession } from "next-auth/react"
 
 export default async (req, res) => {
   const session = await getSession({ req })

app/pages/credentials.js

@@ -1,15 +1,15 @@
 // eslint-disable-next-line no-use-before-define
-import * as React from 'react'
-import { signIn, signOut, useSession } from 'next-auth/client'
-import Layout from 'components/layout'
+import * as React from "react"
+import { signIn, signOut, useSession } from "next-auth/react"
+import Layout from "components/layout"
 
-export default function Page () {
+export default function Page() {
   const [response, setResponse] = React.useState(null)
   const handleLogin = (options) => async () => {
     if (options.redirect) {
-      return signIn('credentials', options)
+      return signIn("credentials", options)
     }
-    const response = await signIn('credentials', options)
+    const response = await signIn("credentials", options)
     setResponse(response)
   }
 
@@ -27,12 +27,16 @@ export default function Page () {
     return (
       <Layout>
         <h1>Test different flows for Credentials logout</h1>
-        <span className='spacing'>Default:</span>
-        <button onClick={handleLogout({ redirect: true })}>Logout</button><br />
-        <span className='spacing'>No redirect:</span>
-        <button onClick={handleLogout({ redirect: false })}>Logout</button><br />
+        <span className="spacing">Default:</span>
+        <button onClick={handleLogout({ redirect: true })}>Logout</button>
+        <br />
+        <span className="spacing">No redirect:</span>
+        <button onClick={handleLogout({ redirect: false })}>Logout</button>
+        <br />
         <p>Response:</p>
-        <pre style={{ background: '#eee', padding: 16 }}>{JSON.stringify(response, null, 2)}</pre>
+        <pre style={{ background: "#eee", padding: 16 }}>
+          {JSON.stringify(response, null, 2)}
+        </pre>
       </Layout>
     )
   }
@@ -40,14 +44,24 @@ export default function Page () {
   return (
     <Layout>
       <h1>Test different flows for Credentials login</h1>
-      <span className='spacing'>Default:</span>
-      <button onClick={handleLogin({ redirect: true, password: 'password' })}>Login</button><br />
-      <span className='spacing'>No redirect:</span>
-      <button onClick={handleLogin({ redirect: false, password: 'password' })}>Login</button><br />
-      <span className='spacing'>No redirect, wrong password:</span>
-      <button onClick={handleLogin({ redirect: false, password: '' })}>Login</button>
+      <span className="spacing">Default:</span>
+      <button onClick={handleLogin({ redirect: true, password: "password" })}>
+        Login
+      </button>
+      <br />
+      <span className="spacing">No redirect:</span>
+      <button onClick={handleLogin({ redirect: false, password: "password" })}>
+        Login
+      </button>
+      <br />
+      <span className="spacing">No redirect, wrong password:</span>
+      <button onClick={handleLogin({ redirect: false, password: "" })}>
+        Login
+      </button>
       <p>Response:</p>
-      <pre style={{ background: '#eee', padding: 16 }}>{JSON.stringify(response, null, 2)}</pre>
+      <pre style={{ background: "#eee", padding: 16 }}>
+        {JSON.stringify(response, null, 2)}
+      </pre>
     </Layout>
   )
 }

app/pages/email.js

@@ -1,11 +1,11 @@
 // eslint-disable-next-line no-use-before-define
-import * as React from 'react'
-import { signIn, signOut, useSession } from 'next-auth/client'
-import Layout from 'components/layout'
+import * as React from "react"
+import { signIn, signOut, useSession } from "next-auth/react"
+import Layout from "components/layout"
 
-export default function Page () {
+export default function Page() {
   const [response, setResponse] = React.useState(null)
-  const [email, setEmail] = React.useState('')
+  const [email, setEmail] = React.useState("")
 
   const handleChange = (event) => {
     setEmail(event.target.value)
@@ -15,9 +15,9 @@ export default function Page () {
     event.preventDefault()
 
     if (options.redirect) {
-      return signIn('email', options)
+      return signIn("email", options)
     }
-    const response = await signIn('email', options)
+    const response = await signIn("email", options)
     setResponse(response)
   }
 
@@ -35,12 +35,16 @@ export default function Page () {
     return (
       <Layout>
         <h1>Test different flows for Email logout</h1>
-        <span className='spacing'>Default:</span>
-        <button onClick={handleLogout({ redirect: true })}>Logout</button><br />
-        <span className='spacing'>No redirect:</span>
-        <button onClick={handleLogout({ redirect: false })}>Logout</button><br />
+        <span className="spacing">Default:</span>
+        <button onClick={handleLogout({ redirect: true })}>Logout</button>
+        <br />
+        <span className="spacing">No redirect:</span>
+        <button onClick={handleLogout({ redirect: false })}>Logout</button>
+        <br />
         <p>Response:</p>
-        <pre style={{ background: '#eee', padding: 16 }}>{JSON.stringify(response, null, 2)}</pre>
+        <pre style={{ background: "#eee", padding: 16 }}>
+          {JSON.stringify(response, null, 2)}
+        </pre>
       </Layout>
     )
   }
@@ -48,20 +52,29 @@ export default function Page () {
   return (
     <Layout>
       <h1>Test different flows for Email login</h1>
-      <label className='spacing'>
-        Email address:{' '}
-        <input type='text' id='email' name='email' value={email} onChange={handleChange} />
-      </label><br />
+      <label className="spacing">
+        Email address:{" "}
+        <input
+          type="text"
+          id="email"
+          name="email"
+          value={email}
+          onChange={handleChange}
+        />
+      </label>
+      <br />
       <form onSubmit={handleLogin({ redirect: true, email })}>
-        <span className='spacing'>Default:</span>
-        <button type='submit'>Sign in with Email</button>
+        <span className="spacing">Default:</span>
+        <button type="submit">Sign in with Email</button>
       </form>
       <form onSubmit={handleLogin({ redirect: false, email })}>
-        <span className='spacing'>No redirect:</span>
-        <button type='submit'>Sign in with Email</button>
+        <span className="spacing">No redirect:</span>
+        <button type="submit">Sign in with Email</button>
       </form>
       <p>Response:</p>
-      <pre style={{ background: '#eee', padding: 16 }}>{JSON.stringify(response, null, 2)}</pre>
+      <pre style={{ background: "#eee", padding: 16 }}>
+        {JSON.stringify(response, null, 2)}
+      </pre>
     </Layout>
   )
 }

app/pages/protected-ssr.js

@@ -1,37 +1,47 @@
 // This is an example of how to protect content using server rendering
-import { getSession } from 'next-auth/client'
-import Layout from '../components/layout'
-import AccessDenied from '../components/access-denied'
+import { getSession } from "next-auth/react"
+import Layout from "../components/layout"
+import AccessDenied from "../components/access-denied"
 
-export default function Page ({ content, session }) {
+export default function Page({ content, session }) {
   // If no session exists, display access denied message
-  if (!session) { return <Layout><AccessDenied /></Layout> }
+  if (!session) {
+    return (
+      <Layout>
+        <AccessDenied />
+      </Layout>
+    )
+  }
 
   // If session exists, display content
   return (
     <Layout>
       <h1>Protected Page</h1>
-      <p><strong>{content}</strong></p>
+      <p>
+        <strong>{content}</strong>
+      </p>
     </Layout>
   )
 }
 
-export async function getServerSideProps (context) {
+export async function getServerSideProps(context) {
   const session = await getSession(context)
   let content = null
 
   if (session) {
-    const hostname = process.env.NEXTAUTH_URL || 'http://localhost:3000'
+    const hostname = process.env.NEXTAUTH_URL || "http://localhost:3000"
     const options = { headers: { cookie: context.req.headers.cookie } }
     const res = await fetch(`${hostname}/api/examples/protected`, options)
     const json = await res.json()
-    if (json.content) { content = json.content }
+    if (json.content) {
+      content = json.content
+    }
   }
 
   return {
     props: {
       session,
-      content
-    }
+      content,
+    },
   }
 }

app/pages/protected.js

@@ -1,33 +1,43 @@
-import { useState, useEffect } from 'react'
-import { useSession } from 'next-auth/client'
-import Layout from '../components/layout'
-import AccessDenied from '../components/access-denied'
+import { useState, useEffect } from "react"
+import { useSession } from "next-auth/react"
+import Layout from "../components/layout"
+import AccessDenied from "../components/access-denied"
 
-export default function Page () {
+export default function Page() {
   const [session, loading] = useSession()
   const [content, setContent] = useState()
 
   // Fetch content from protected route
   useEffect(() => {
     const fetchData = async () => {
-      const res = await fetch('/api/examples/protected')
+      const res = await fetch("/api/examples/protected")
       const json = await res.json()
-      if (json.content) { setContent(json.content) }
+      if (json.content) {
+        setContent(json.content)
+      }
     }
     fetchData()
   }, [session])
 
   // When rendering client side don't display anything until loading is complete
-  if (typeof window !== 'undefined' && loading) return null
+  if (typeof window !== "undefined" && loading) return null
 
   // If no session exists, display access denied message
-  if (!session) { return <Layout><AccessDenied /></Layout> }
+  if (!session) {
+    return (
+      <Layout>
+        <AccessDenied />
+      </Layout>
+    )
+  }
 
   // If session exists, display content
   return (
     <Layout>
       <h1>Protected Page</h1>
-      <p><strong>{content}</strong></p>
+      <p>
+        <strong>{content}</strong>
+      </p>
     </Layout>
   )
 }

app/pages/server.js

@@ -1,7 +1,7 @@
-import { getSession } from 'next-auth/client'
-import Layout from '../components/layout'
+import { getSession } from "next-auth/react"
+import Layout from "../components/layout"
 
-export default function Page () {
+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
@@ -11,27 +11,31 @@ export default function Page () {
     <Layout>
       <h1>Server Side Rendering</h1>
       <p>
-        This page uses the universal <strong>getSession()</strong> method in <strong>getServerSideProps()</strong>.
+        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.
+        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.
+        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.
+        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) {
+export async function getServerSideProps(context) {
   return {
     props: {
-      session: await getSession(context)
-    }
+      session: await getSession(context),
+    },
   }
 }

config/babel.config.js

@@ -12,7 +12,10 @@ module.exports = {
   overrides: [
     {
       test: ["../src/client/**"],
-      presets: [["@babel/preset-env", { targets: { ie: "11" } }]],
+      presets: [
+        ["@babel/preset-env", { targets: { ie: "11" } }],
+        ["@babel/preset-react", { runtime: "automatic" }],
+      ],
     },
     {
       test: ["../src/server/pages/**"],
@@ -20,14 +23,7 @@ module.exports = {
     },
     {
       test: ["../src/**/*.test.js"],
-      presets: [
-        [
-          "@babel/preset-react",
-          {
-            runtime: "automatic",
-          },
-        ],
-      ],
+      presets: [["@babel/preset-react", { runtime: "automatic" }]],
     },
   ],
 }

config/build.js

@@ -3,7 +3,7 @@ const path = require("path")
 
 const MODULE_ENTRIES = {
   SERVER: "index",
-  CLIENT: "client",
+  REACT: "react",
   PROVIDERS: "providers",
   ADAPTERS: "adapters",
   JWT: "jwt",
@@ -13,12 +13,16 @@ const MODULE_ENTRIES = {
 // Building submodule entries
 
 const BUILD_TARGETS = {
-  [`${MODULE_ENTRIES.SERVER}.js`]: "module.exports = require('./dist/server').default\n",
-  [`${MODULE_ENTRIES.CLIENT}.js`]: "module.exports = require('./dist/client').default\n",
-  [`${MODULE_ENTRIES.ADAPTERS}.js`]: "module.exports = require('./dist/adapters').default\n",
-  [`${MODULE_ENTRIES.PROVIDERS}.js`]: "module.exports = require('./dist/providers').default\n",
-  [`${MODULE_ENTRIES.JWT}.js`]: "module.exports = require('./dist/lib/jwt').default\n",
-  [`${MODULE_ENTRIES.ERRORS}.js`]: "module.exports = require('./dist/lib/errors').default\n",
+  [`${MODULE_ENTRIES.SERVER}.js`]:
+    "module.exports = require('./dist/server').default\n",
+  [`${MODULE_ENTRIES.REACT}.js`]:
+    "module.exports = require('./dist/client/react').default\n",
+  [`${MODULE_ENTRIES.PROVIDERS}.js`]:
+    "module.exports = require('./dist/providers').default\n",
+  [`${MODULE_ENTRIES.JWT}.js`]:
+    "module.exports = require('./dist/lib/jwt').default\n",
+  [`${MODULE_ENTRIES.ERRORS}.js`]:
+    "module.exports = require('./dist/lib/errors').default\n",
 }
 
 Object.entries(BUILD_TARGETS).forEach(([target, content]) => {
@@ -32,7 +36,7 @@ Object.entries(BUILD_TARGETS).forEach(([target, content]) => {
 
 const TYPES_TARGETS = [
   `${MODULE_ENTRIES.SERVER}.d.ts`,
-  `${MODULE_ENTRIES.CLIENT}.d.ts`,
+  `${MODULE_ENTRIES.REACT}-client.d.ts`,
   `${MODULE_ENTRIES.ADAPTERS}.d.ts`,
   `${MODULE_ENTRIES.PROVIDERS}.d.ts`,
   `${MODULE_ENTRIES.JWT}.d.ts`,
@@ -43,7 +47,10 @@ const TYPES_TARGETS = [
 TYPES_TARGETS.forEach((target) => {
   fs.copy(
     path.resolve("types", target),
-    path.join(process.cwd(), target),
+    path.join(
+      process.cwd(),
+      target.startsWith("react-client") ? "react.d.ts" : target
+    ),
     (err) => {
       if (err) throw err
       console.log(`[build-types] copying "${target}" to root folder`)

config/version-pr.js

@@ -1,17 +0,0 @@
-const fs = require("fs-extra")
-const path = require("path")
-
-try {
-  const packageJSONPath = path.join(process.cwd(), "package.json")
-  const packageJSON = JSON.parse(fs.readFileSync(packageJSONPath, "utf8"))
-
-  const sha8 = process.env.GITHUB_SHA.substr(0, 8)
-  const prNumber = process.env.PR_NUMBER
-
-  packageJSON.version = `0.0.0-pr.${prNumber}.${sha8}`
-
-  fs.writeFileSync(packageJSONPath, JSON.stringify(packageJSON))
-} catch (error) {
-  console.error("Could not set PR version", error)
-  process.exit(1)
-}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-auth",
-  "version": "3.29.9",
+  "version": "0.0.0-semantically-released",
   "description": "Authentication for Next.js",
   "homepage": "https://next-auth.js.org",
   "repository": "https://github.com/nextauthjs/next-auth.git",
@@ -22,8 +22,7 @@
   "exports": {
     ".": "./dist/server/index.js",
     "./jwt": "./dist/lib/jwt.js",
-    "./adapters": "./dist/adapters/index.js",
-    "./client": "./dist/client/index.js",
+    "./react": "./dist/client/react.js",
     "./providers": "./dist/providers/index.js",
     "./providers/*": "./dist/providers/*.js",
     "./errors": "./dist/lib/errors.js"
@@ -32,7 +31,7 @@
     "build": "npm run build:js && npm run build:css",
     "build:js": "node ./config/build.js && babel --config-file ./config/babel.config.js src --out-dir dist",
     "build:css": "postcss --config config/postcss.config.js src/**/*.css --base src --dir dist && node config/wrap-css.js",
-    "dev:setup": "npm i && npm run build:css && cd app && npm i",
+    "dev:setup": "npm run build:css && cd app && npm i",
     "dev": "cd app && npm run dev",
     "watch": "npm run watch:js | npm run watch:css",
     "watch:js": "babel --config-file ./config/babel.config.js --watch src --out-dir dist",
@@ -42,8 +41,7 @@
     "test:types": "dtslint types --onlyTestTsNext",
     "prepublishOnly": "npm run build",
     "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "version:pr": "node ./config/version-pr"
+    "lint:fix": "eslint . --fix"
   },
   "files": [
     "dist",
@@ -64,28 +62,26 @@
   "license": "ISC",
   "dependencies": {
     "@babel/runtime": "^7.14.0",
-    "@next-auth/prisma-legacy-adapter": "0.1.2",
-    "@next-auth/typeorm-legacy-adapter": "0.1.4",
     "futoin-hkdf": "^1.3.2",
     "jose": "^1.27.2",
     "jsonwebtoken": "^8.5.1",
-    "nodemailer": "^6.4.16",
     "oauth": "^0.9.15",
     "pkce-challenge": "^2.1.0",
     "preact": "^10.4.1",
-    "preact-render-to-string": "^5.1.14",
-    "querystring": "^0.2.0"
+    "preact-render-to-string": "^5.1.14"
   },
   "peerDependencies": {
-    "react": "^16.13.1 || ^17",
-    "react-dom": "^16.13.1 || ^17"
+    "nodemailer": "^6.4.16",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "peerOptionalDependencies": {
-    "mongodb": "^3.5.9",
-    "mysql": "^2.18.1",
-    "mssql": "^6.2.1",
-    "pg": "^8.2.1",
-    "@prisma/client": "^2.16.1"
+    "nodemailer": "^6.4.16"
+  },
+  "peerDependenciesMeta": {
+    "nodemailer": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
@@ -94,10 +90,13 @@
     "@babel/plugin-transform-runtime": "^7.13.15",
     "@babel/preset-env": "^7.9.6",
     "@babel/preset-react": "^7.13.13",
+    "@semantic-release/commit-analyzer": "^8.0.1",
+    "@semantic-release/github": "^7.2.0",
+    "@semantic-release/npm": "7.0.8",
+    "@semantic-release/release-notes-generator": "^9.0.1",
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^13.1.9",
-    "@types/nodemailer": "^6.4.2",
     "@types/react": "^17.0.0",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
     "@typescript-eslint/parser": "^4.22.0",
@@ -119,7 +118,7 @@
     "husky": "^6.0.0",
     "jest": "^26.6.3",
     "msw": "^0.28.2",
-    "next": "^11.0.1",
+    "next": "^10.0.5",
     "postcss-cli": "^7.1.1",
     "postcss-nested": "^4.2.1",
     "prettier": "^2.2.1",

src/adapters/index.js

@@ -1,10 +0,0 @@
-import * as TypeORM from "./typeorm"
-import * as Prisma from "./prisma"
-
-export { TypeORM, Prisma }
-
-export default {
-  Default: TypeORM.Adapter,
-  TypeORM,
-  Prisma,
-}

src/adapters/prisma.js

@@ -1,6 +0,0 @@
-/*
- * Source code can be found at:
- * https://github.com/nextauthjs/adapters/tree/canary/packages/prisma-legacy
- */
-
-export { PrismaLegacyAdapter as Adapter } from "@next-auth/prisma-legacy-adapter"

src/adapters/typeorm.js

@@ -1,9 +0,0 @@
-/*
- * Source code can be found at:
- * https://github.com/nextauthjs/adapters/tree/canary/packages/typeorm-legacy
- */
-
-export {
-  TypeORMLegacyAdapter as Adapter,
-  Models,
-} from "@next-auth/typeorm-legacy-adapter"

src/client/__tests__/client-provider.test.js

@@ -1,9 +1,7 @@
-import { useState } from "react"
 import { rest } from "msw"
 import { render, screen, waitFor } from "@testing-library/react"
 import { server, mockSession } from "./helpers/mocks"
-import { Provider, useSession } from ".."
-import userEvent from "@testing-library/user-event"
+import { SessionProvider, useSession } from "../react"
 
 beforeAll(() => {
   server.listen()
@@ -43,10 +41,10 @@ test("fetches the session once and re-uses it for different consumers", async ()
 function ProviderFlow({ options = {} }) {
   return (
     <>
-      <Provider options={options}>
+      <SessionProvider {...options}>
         <SessionConsumer />
         <SessionConsumer testId="2" />
-      </Provider>
+      </SessionProvider>
     </>
   )
 }

src/client/__tests__/csrf.test.js

@@ -3,7 +3,7 @@ import userEvent from "@testing-library/user-event"
 import { render, screen, waitFor } from "@testing-library/react"
 import { server, mockCSRFToken } from "./helpers/mocks"
 import logger from "../../lib/logger"
-import { getCsrfToken } from ".."
+import { getCsrfToken } from "../react"
 import { rest } from "msw"
 
 jest.mock("../../lib/logger", () => ({

src/client/__tests__/providers.test.js

@@ -2,7 +2,7 @@ import { useState } from "react"
 import userEvent from "@testing-library/user-event"
 import { render, screen, waitFor } from "@testing-library/react"
 import { server, mockProviders } from "./helpers/mocks"
-import { getProviders } from ".."
+import { getProviders } from "../react"
 import logger from "../../lib/logger"
 import { rest } from "msw"
 

src/client/__tests__/session.test.js

@@ -3,7 +3,7 @@ import { rest } from "msw"
 import { server, mockSession } from "./helpers/mocks"
 import logger from "../../lib/logger"
 import { useState, useEffect } from "react"
-import { getSession } from ".."
+import { getSession } from "../react"
 import { getBroadcastEvents } from "./helpers/utils"
 
 jest.mock("../../lib/logger", () => ({

src/client/__tests__/sign-in.test.js

@@ -8,7 +8,7 @@ import {
   mockEmailResponse,
   mockGithubResponse,
 } from "./helpers/mocks"
-import { signIn } from ".."
+import { signIn } from "../react"
 import { rest } from "msw"
 
 const { location } = window

src/client/__tests__/sign-out.test.js

@@ -2,7 +2,7 @@ import { useState } from "react"
 import userEvent from "@testing-library/user-event"
 import { render, screen, waitFor } from "@testing-library/react"
 import { server, mockSignOutResponse } from "./helpers/mocks"
-import { signOut } from ".."
+import { signOut } from "../react"
 import { rest } from "msw"
 import { getBroadcastEvents } from "./helpers/utils"
 

src/client/index.js

@@ -1,418 +0,0 @@
-// Note about signIn() and signOut() methods:
-//
-// On signIn() and signOut() we pass 'json: true' to request a response in JSON
-// instead of HTTP as redirect URLs on other domains are not returned to
-// requests made using the fetch API in the browser, and we need to ask the API
-// to return the response as a JSON object (the end point still defaults to
-// returning an HTTP response with a redirect for non-JavaScript clients).
-//
-// We use HTTP POST requests with CSRF Tokens to protect against CSRF attacks.
-
-import {
-  useState,
-  useEffect,
-  useContext,
-  createContext,
-  createElement,
-} from "react"
-import _logger, { proxyLogger } from "../lib/logger"
-import parseUrl from "../lib/parse-url"
-
-// This behaviour mirrors the default behaviour for getting the site name that
-// happens server side in server/index.js
-// 1. An empty value is legitimate when the code is being invoked client side as
-//    relative URLs are valid in that context and so defaults to empty.
-// 2. When invoked server side the value is picked up from an environment
-//    variable and defaults to 'http://localhost:3000'.
-/** @type {import("types/internals/client").NextAuthConfig} */
-const __NEXTAUTH = {
-  baseUrl: parseUrl(process.env.NEXTAUTH_URL || process.env.VERCEL_URL).baseUrl,
-  basePath: parseUrl(process.env.NEXTAUTH_URL).basePath,
-  baseUrlServer: parseUrl(
-    process.env.NEXTAUTH_URL_INTERNAL ||
-      process.env.NEXTAUTH_URL ||
-      process.env.VERCEL_URL
-  ).baseUrl,
-  basePathServer: parseUrl(
-    process.env.NEXTAUTH_URL_INTERNAL || process.env.NEXTAUTH_URL
-  ).basePath,
-  keepAlive: 0,
-  clientMaxAge: 0,
-  // Properties starting with _ are used for tracking internal app state
-  _clientLastSync: 0,
-  _clientSyncTimer: null,
-  _eventListenersAdded: false,
-  _clientSession: undefined,
-  _getSession: () => {},
-}
-
-const logger = proxyLogger(_logger, __NEXTAUTH.basePath)
-
-const broadcast = BroadcastChannel()
-
-// Add event listners on load
-if (typeof window !== "undefined" && !__NEXTAUTH._eventListenersAdded) {
-  __NEXTAUTH._eventListenersAdded = true
-  // Listen for storage events and update session if event fired from
-  // another window (but suppress firing another event to avoid a loop)
-  // Fetch new session data but tell it to not to fire another event to
-  // avoid an infinite loop.
-  // Note: We could pass session data through and do something like
-  // `setData(message.data)` but that can cause problems depending
-  // on how the session object is being used in the client; it is
-  // more robust to have each window/tab fetch it's own copy of the
-  // session object rather than share it across instances.
-  broadcast.receive(() => __NEXTAUTH._getSession({ event: "storage" }))
-
-  // Listen for document visibility change events and
-  // if visibility of the document changes, re-fetch the session.
-  document.addEventListener(
-    "visibilitychange",
-    () => {
-      !document.hidden && __NEXTAUTH._getSession({ event: "visibilitychange" })
-    },
-    false
-  )
-}
-
-// Context to store session data globally
-/** @type {import("types/internals/client").SessionContext} */
-const SessionContext = createContext()
-
-export function useSession(session) {
-  const context = useContext(SessionContext)
-  if (context) return context
-  return _useSessionHook(session)
-}
-
-function _useSessionHook(session) {
-  const [data, setData] = useState(session)
-  const [loading, setLoading] = useState(!data)
-
-  useEffect(() => {
-    __NEXTAUTH._getSession = async ({ event = null } = {}) => {
-      try {
-        const triggredByEvent = event !== null
-        const triggeredByStorageEvent = event === "storage"
-
-        const clientMaxAge = __NEXTAUTH.clientMaxAge
-        const clientLastSync = parseInt(__NEXTAUTH._clientLastSync)
-        const currentTime = _now()
-        const clientSession = __NEXTAUTH._clientSession
-
-        // Updates triggered by a storage event *always* trigger an update and we
-        // always update if we don't have any value for the current session state.
-        if (!triggeredByStorageEvent && clientSession !== undefined) {
-          if (clientMaxAge === 0 && triggredByEvent !== true) {
-            // If there is no time defined for when a session should be considered
-            // stale, then it's okay to use the value we have until an event is
-            // triggered which updates it.
-            return
-          } else if (clientMaxAge > 0 && clientSession === null) {
-            // If the client doesn't have a session then we don't need to call
-            // the server to check if it does (if they have signed in via another
-            // tab or window that will come through as a triggeredByStorageEvent
-            // event and will skip this logic)
-            return
-          } else if (
-            clientMaxAge > 0 &&
-            currentTime < clientLastSync + clientMaxAge
-          ) {
-            // If the session freshness is within clientMaxAge then don't request
-            // it again on this call (avoids too many invokations).
-            return
-          }
-        }
-
-        if (clientSession === undefined) {
-          __NEXTAUTH._clientSession = null
-        }
-
-        // Update clientLastSync before making response to avoid repeated
-        // invokations that would otherwise be triggered while we are still
-        // waiting for a response.
-        __NEXTAUTH._clientLastSync = _now()
-
-        // If this call was invoked via a storage event (i.e. another window) then
-        // tell getSession not to trigger an event when it calls to avoid an
-        // infinate loop.
-        const newClientSessionData = await getSession({
-          triggerEvent: !triggeredByStorageEvent,
-        })
-
-        // Save session state internally, just so we can track that we've checked
-        // if a session exists at least once.
-        __NEXTAUTH._clientSession = newClientSessionData
-
-        setData(newClientSessionData)
-        setLoading(false)
-      } catch (error) {
-        logger.error("CLIENT_USE_SESSION_ERROR", error)
-        setLoading(false)
-      }
-    }
-
-    __NEXTAUTH._getSession()
-  })
-
-  return [data, loading]
-}
-
-export async function getSession(ctx) {
-  const session = await _fetchData("session", ctx)
-  if (ctx?.triggerEvent ?? true) {
-    broadcast.post({ event: "session", data: { trigger: "getSession" } })
-  }
-  return session
-}
-
-export async function getCsrfToken(ctx) {
-  return (await _fetchData("csrf", ctx))?.csrfToken
-}
-
-export async function getProviders() {
-  return await _fetchData("providers")
-}
-
-export async function signIn(provider, options = {}, authorizationParams = {}) {
-  const { callbackUrl = window.location.href, redirect = true } = options
-
-  const baseUrl = _apiBaseUrl()
-  const providers = await getProviders()
-
-  if (!providers) {
-    return window.location.replace(`${baseUrl}/error`)
-  }
-
-  if (!(provider in providers)) {
-    return window.location.replace(
-      `${baseUrl}/signin?callbackUrl=${encodeURIComponent(callbackUrl)}`
-    )
-  }
-
-  const isCredentials = providers[provider].type === "credentials"
-  const isEmail = providers[provider].type === "email"
-  const isSupportingReturn = isCredentials || isEmail
-
-  const signInUrl = isCredentials
-    ? `${baseUrl}/callback/${provider}`
-    : `${baseUrl}/signin/${provider}`
-
-  const _signInUrl = `${signInUrl}?${new URLSearchParams(authorizationParams)}`
-
-  const res = await fetch(_signInUrl, {
-    method: "post",
-    headers: {
-      "Content-Type": "application/x-www-form-urlencoded",
-    },
-    body: new URLSearchParams({
-      ...options,
-      csrfToken: await getCsrfToken(),
-      callbackUrl,
-      json: true,
-    }),
-  })
-
-  const data = await res.json()
-
-  if (redirect || !isSupportingReturn) {
-    const url = data.url ?? callbackUrl
-    window.location.replace(url)
-    // If url contains a hash, the browser does not reload the page. We reload manually
-    if (url.includes("#")) window.location.reload()
-    return
-  }
-
-  const error = new URL(data.url).searchParams.get("error")
-
-  if (res.ok) {
-    await __NEXTAUTH._getSession({ event: "storage" })
-  }
-
-  return {
-    error,
-    status: res.status,
-    ok: res.ok,
-    url: error ? null : data.url,
-  }
-}
-
-export async function signOut(options = {}) {
-  const { callbackUrl = window.location.href, redirect = true } = options
-  const baseUrl = _apiBaseUrl()
-  const fetchOptions = {
-    method: "post",
-    headers: {
-      "Content-Type": "application/x-www-form-urlencoded",
-    },
-    body: new URLSearchParams({
-      csrfToken: await getCsrfToken(),
-      callbackUrl,
-      json: true,
-    }),
-  }
-  const res = await fetch(`${baseUrl}/signout`, fetchOptions)
-  const data = await res.json()
-  broadcast.post({ event: "session", data: { trigger: "signout" } })
-
-  if (redirect) {
-    const url = data.url ?? callbackUrl
-    window.location.replace(url)
-    // If url contains a hash, the browser does not reload the page. We reload manually
-    if (url.includes("#")) window.location.reload()
-    return
-  }
-
-  await __NEXTAUTH._getSession({ event: "storage" })
-
-  return data
-}
-
-// Method to set options. The documented way is to use the provider, but this
-// method is being left in as an alternative, that will be helpful if/when we
-// expose a vanilla JavaScript version that doesn't depend on React.
-export function setOptions({
-  baseUrl,
-  basePath,
-  clientMaxAge,
-  keepAlive,
-} = {}) {
-  if (baseUrl) __NEXTAUTH.baseUrl = baseUrl
-  if (basePath) __NEXTAUTH.basePath = basePath
-  if (clientMaxAge) __NEXTAUTH.clientMaxAge = clientMaxAge
-  if (keepAlive) {
-    __NEXTAUTH.keepAlive = keepAlive
-    if (typeof window === "undefined") return
-
-    // Clear existing timer (if there is one)
-    if (__NEXTAUTH._clientSyncTimer !== null) {
-      clearTimeout(__NEXTAUTH._clientSyncTimer)
-    }
-
-    // Set next timer to trigger in number of seconds
-    __NEXTAUTH._clientSyncTimer = setTimeout(async () => {
-      // Only invoke keepalive when a session exists
-      if (!__NEXTAUTH._clientSession) return
-      await __NEXTAUTH._getSession({ event: "timer" })
-    }, keepAlive * 1000)
-  }
-}
-
-export function Provider({ children, session, options }) {
-  setOptions(options)
-  return createElement(
-    SessionContext.Provider,
-    { value: useSession(session) },
-    children
-  )
-}
-
-/**
- * If passed 'appContext' via getInitialProps() in _app.js
- * then get the req object from ctx and use that for the
- * req value to allow _fetchData to
- * work seemlessly in getInitialProps() on server side
- * pages *and* in _app.js.
- */
-async function _fetchData(path, { ctx, req = ctx?.req } = {}) {
-  try {
-    const baseUrl = await _apiBaseUrl()
-    const options = req ? { headers: { cookie: req.headers.cookie } } : {}
-    const res = await fetch(`${baseUrl}/${path}`, options)
-    const data = await res.json()
-    if (!res.ok) throw data
-    return Object.keys(data).length > 0 ? data : null // Return null if data empty
-  } catch (error) {
-    logger.error("CLIENT_FETCH_ERROR", path, error)
-    return null
-  }
-}
-
-function _apiBaseUrl() {
-  if (typeof window === "undefined") {
-    // NEXTAUTH_URL should always be set explicitly to support server side calls - log warning if not set
-    if (!process.env.NEXTAUTH_URL) {
-      logger.warn("NEXTAUTH_URL", "NEXTAUTH_URL environment variable not set")
-    }
-
-    // Return absolute path when called server side
-    return `${__NEXTAUTH.baseUrlServer}${__NEXTAUTH.basePathServer}`
-  }
-  // Return relative path when called client side
-  return __NEXTAUTH.basePath
-}
-
-/** Returns the number of seconds elapsed since January 1, 1970 00:00:00 UTC. */
-function _now() {
-  return Math.floor(Date.now() / 1000)
-}
-
-/**
- * Inspired by [Broadcast Channel API](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API)
- * Only not using it directly, because Safari does not support it.
- *
- * https://caniuse.com/?search=broadcastchannel
- */
-function BroadcastChannel(name = "nextauth.message") {
-  return {
-    /**
-     * Get notified by other tabs/windows.
-     * @param {(message: import("types/internals/client").BroadcastMessage) => void} onReceive
-     */
-    receive(onReceive) {
-      if (typeof window === "undefined") return
-      window.addEventListener("storage", async (event) => {
-        if (event.key !== name) return
-        /** @type {import("types/internals/client").BroadcastMessage} */
-        const message = JSON.parse(event.newValue)
-        if (message?.event !== "session" || !message?.data) return
-
-        onReceive(message)
-      })
-    },
-    /** Notify other tabs/windows. */
-    post(message) {
-      if (typeof localStorage === "undefined") return
-      localStorage.setItem(
-        name,
-        JSON.stringify({ ...message, timestamp: _now() })
-      )
-    },
-  }
-}
-
-// Some methods are exported with more than one name. This provides some
-// flexibility over how they can be invoked and backwards compatibility
-// with earlier releases. These should be removed in a newer release, as it only
-// creates problems for bundlers and adds confusion to users. TypeScript declarations
-// will provide sufficient help when importing
-export {
-  setOptions as options,
-  getSession as session,
-  getProviders as providers,
-  getCsrfToken as csrfToken,
-  signIn as signin,
-  signOut as signout,
-}
-
-export default {
-  getSession,
-  getCsrfToken,
-  getProviders,
-  useSession,
-  signIn,
-  signOut,
-  Provider,
-  /* Deprecated / unsupported features below this line */
-  // Use setOptions() set options globally in the app.
-  setOptions,
-  // Some methods are exported with more than one name. This provides some
-  // flexibility over how they can be invoked and backwards compatibility
-  // with earlier releases.
-  options: setOptions,
-  session: getSession,
-  providers: getProviders,
-  csrfToken: getCsrfToken,
-  signin: signIn,
-  signout: signOut,
-}

src/client/react.js

@@ -0,0 +1,352 @@
+// Note about signIn() and signOut() methods:
+//
+// On signIn() and signOut() we pass 'json: true' to request a response in JSON
+// instead of HTTP as redirect URLs on other domains are not returned to
+// requests made using the fetch API in the browser, and we need to ask the API
+// to return the response as a JSON object (the end point still defaults to
+// returning an HTTP response with a redirect for non-JavaScript clients).
+//
+// We use HTTP POST requests with CSRF Tokens to protect against CSRF attacks.
+
+// eslint-disable-next-line no-use-before-define
+import * as React from "react"
+import _logger, { proxyLogger } from "../lib/logger"
+import parseUrl from "../lib/parse-url"
+
+// This behaviour mirrors the default behaviour for getting the site name that
+// happens server side in server/index.js
+// 1. An empty value is legitimate when the code is being invoked client side as
+//    relative URLs are valid in that context and so defaults to empty.
+// 2. When invoked server side the value is picked up from an environment
+//    variable and defaults to 'http://localhost:3000'.
+/** @type {import("types/internals/react").NextAuthConfig} */
+const __NEXTAUTH = {
+  baseUrl: parseUrl(process.env.NEXTAUTH_URL || process.env.VERCEL_URL).baseUrl,
+  basePath: parseUrl(process.env.NEXTAUTH_URL).basePath,
+  baseUrlServer: parseUrl(
+    process.env.NEXTAUTH_URL_INTERNAL ||
+      process.env.NEXTAUTH_URL ||
+      process.env.VERCEL_URL
+  ).baseUrl,
+  basePathServer: parseUrl(
+    process.env.NEXTAUTH_URL_INTERNAL || process.env.NEXTAUTH_URL
+  ).basePath,
+  _lastSync: 0,
+  _session: undefined,
+  _getSession: () => {},
+}
+
+const broadcast = BroadcastChannel()
+
+const logger = proxyLogger(_logger, __NEXTAUTH.basePath)
+
+/** @type {import("types/internals/react").SessionContext} */
+const SessionContext = React.createContext()
+
+export function useSession() {
+  return React.useContext(SessionContext)
+}
+
+export async function getSession(ctx) {
+  const session = await _fetchData("session", ctx)
+  if (ctx?.broadcast ?? true) {
+    broadcast.post({ event: "session", data: { trigger: "getSession" } })
+  }
+  return session
+}
+
+export async function getCsrfToken(ctx) {
+  const response = await _fetchData("csrf", ctx)
+  return response?.csrfToken
+}
+
+export async function getProviders() {
+  return await _fetchData("providers")
+}
+
+export async function signIn(provider, options = {}, authorizationParams = {}) {
+  const { callbackUrl = window.location.href, redirect = true } = options
+
+  const baseUrl = _apiBaseUrl()
+  const providers = await getProviders()
+
+  if (!providers) {
+    return window.location.replace(`${baseUrl}/error`)
+  }
+
+  if (!(provider in providers)) {
+    return window.location.replace(
+      `${baseUrl}/signin?${new URLSearchParams({ callbackUrl })}`
+    )
+  }
+
+  const isCredentials = providers[provider].type === "credentials"
+  const isEmail = providers[provider].type === "email"
+  const isSupportingReturn = isCredentials || isEmail
+
+  const signInUrl = `${baseUrl}/${
+    isCredentials ? "callback" : "signin"
+  }/${provider}`
+
+  const _signInUrl = `${signInUrl}?${new URLSearchParams(authorizationParams)}`
+
+  const res = await fetch(_signInUrl, {
+    method: "post",
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+    },
+    body: new URLSearchParams({
+      ...options,
+      csrfToken: await getCsrfToken(),
+      callbackUrl,
+      json: true,
+    }),
+  })
+
+  const data = await res.json()
+
+  if (redirect || !isSupportingReturn) {
+    const url = data.url ?? callbackUrl
+    window.location.replace(url)
+    // If url contains a hash, the browser does not reload the page. We reload manually
+    if (url.includes("#")) window.location.reload()
+    return
+  }
+
+  const error = new URL(data.url).searchParams.get("error")
+
+  if (res.ok) {
+    await __NEXTAUTH._getSession({ event: "storage" })
+  }
+
+  return {
+    error,
+    status: res.status,
+    ok: res.ok,
+    url: error ? null : data.url,
+  }
+}
+
+export async function signOut(options = {}) {
+  const { callbackUrl = window.location.href, redirect = true } = options
+  const baseUrl = _apiBaseUrl()
+  const fetchOptions = {
+    method: "post",
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+    },
+    body: new URLSearchParams({
+      csrfToken: await getCsrfToken(),
+      callbackUrl,
+      json: true,
+    }),
+  }
+  const res = await fetch(`${baseUrl}/signout`, fetchOptions)
+  const data = await res.json()
+  broadcast.post({ event: "session", data: { trigger: "signout" } })
+
+  if (redirect) {
+    const url = data.url ?? callbackUrl
+    window.location.replace(url)
+    // If url contains a hash, the browser does not reload the page. We reload manually
+    if (url.includes("#")) window.location.reload()
+    return
+  }
+
+  await __NEXTAUTH._getSession({ event: "storage" })
+
+  return data
+}
+
+/** @param {import("types/react-client").SessionProviderProps} props */
+export function SessionProvider(props) {
+  const { children, baseUrl, basePath, staleTime = 0 } = props
+
+  if (baseUrl) __NEXTAUTH.baseUrl = baseUrl
+  if (basePath) __NEXTAUTH.basePath = basePath
+
+  /**
+   * If session was `null`, there was an attempt to fetch it,
+   * but it failed, but we still treat it as a valid initial value.
+   */
+  const hasInitialSession = props.session !== undefined
+
+  /** If session was passed, initialize as already synced */
+  __NEXTAUTH._lastSync = hasInitialSession ? _now() : 0
+
+  const [session, setSession] = React.useState(() => {
+    if (hasInitialSession) __NEXTAUTH._session = props.session
+    return props.session
+  })
+
+  /** If session was passed, initialize as not loading */
+  const [loading, setLoading] = React.useState(hasInitialSession)
+
+  React.useEffect(() => {
+    __NEXTAUTH._getSession = async ({ event } = {}) => {
+      try {
+        const storageEvent = event === "storage"
+        // We should always update if we don't have a client session yet
+        // or if there are events from other tabs/windows
+        if (storageEvent || __NEXTAUTH._session === undefined) {
+          __NEXTAUTH._lastSync = _now()
+          __NEXTAUTH._session = await getSession({
+            broadcast: !storageEvent,
+          })
+          setSession(__NEXTAUTH._session)
+          return
+        }
+
+        if (
+          // If there is no time defined for when a session should be considered
+          // stale, then it's okay to use the value we have until an event is
+          // triggered which updates it
+          (staleTime === 0 && !event) ||
+          // If the client doesn't have a session then we don't need to call
+          // the server to check if it does (if they have signed in via another
+          // tab or window that will come through as a "stroage" event
+          // event anyway)
+          (staleTime > 0 && __NEXTAUTH._session === null) ||
+          // Bail out early if the client session is not stale yet
+          (staleTime > 0 && _now() < __NEXTAUTH._lastSync + staleTime)
+        ) {
+          return
+        }
+
+        // An event or session staleness occurred, update the client session.
+        __NEXTAUTH._lastSync = _now()
+        __NEXTAUTH._session = await getSession()
+        setSession(__NEXTAUTH._session)
+      } catch (error) {
+        logger.error("CLIENT_SESSION_ERROR", error)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    __NEXTAUTH._getSession()
+  }, [staleTime])
+
+  React.useEffect(() => {
+    // Listen for storage events and update session if event fired from
+    // another window (but suppress firing another event to avoid a loop)
+    // Fetch new session data but tell it to not to fire another event to
+    // avoid an infinite loop.
+    // Note: We could pass session data through and do something like
+    // `setData(message.data)` but that can cause problems depending
+    // on how the session object is being used in the client; it is
+    // more robust to have each window/tab fetch it's own copy of the
+    // session object rather than share it across instances.
+    const unsubscribe = broadcast.receive(
+      async () => await __NEXTAUTH._getSession({ event: "storage" })
+    )
+
+    return () => unsubscribe()
+  }, [])
+
+  React.useEffect(() => {
+    // Set up visibility change
+    // Listen for document visibility change events and
+    // if visibility of the document changes, re-fetch the session.
+    const visibilityHandler = () => {
+      !document.hidden && __NEXTAUTH._getSession({ event: "visibilitychange" })
+    }
+    document.addEventListener("visibilitychange", visibilityHandler, false)
+    return () =>
+      document.removeEventListener("visibilitychange", visibilityHandler, false)
+  }, [])
+
+  React.useEffect(() => {
+    const { refetchInterval } = props
+    // Set up polling
+    if (refetchInterval) {
+      const refetchIntervalTimer = setInterval(async () => {
+        if (__NEXTAUTH._session) {
+          await __NEXTAUTH._getSession({ event: "poll" })
+        }
+      }, refetchInterval * 1000)
+      return () => clearInterval(refetchIntervalTimer)
+    }
+  }, [props.refetchInterval])
+
+  const value = React.useMemo(() => [session, loading], [session, loading])
+
+  return (
+    <SessionContext.Provider value={value}>{children}</SessionContext.Provider>
+  )
+}
+
+/**
+ * If passed 'appContext' via getInitialProps() in _app.js
+ * then get the req object from ctx and use that for the
+ * req value to allow _fetchData to
+ * work seemlessly in getInitialProps() on server side
+ * pages *and* in _app.js.
+ */
+async function _fetchData(path, { ctx, req = ctx?.req } = {}) {
+  try {
+    const baseUrl = await _apiBaseUrl()
+    const options = req ? { headers: { cookie: req.headers.cookie } } : {}
+    const res = await fetch(`${baseUrl}/${path}`, options)
+    const data = await res.json()
+    if (!res.ok) throw data
+    return Object.keys(data).length > 0 ? data : null // Return null if data empty
+  } catch (error) {
+    logger.error("CLIENT_FETCH_ERROR", path, error)
+    return null
+  }
+}
+
+function _apiBaseUrl() {
+  if (typeof window === "undefined") {
+    // NEXTAUTH_URL should always be set explicitly to support server side calls - log warning if not set
+    if (!process.env.NEXTAUTH_URL) {
+      logger.warn("NEXTAUTH_URL", "NEXTAUTH_URL environment variable not set")
+    }
+
+    // Return absolute path when called server side
+    return `${__NEXTAUTH.baseUrlServer}${__NEXTAUTH.basePathServer}`
+  }
+  // Return relative path when called client side
+  return __NEXTAUTH.basePath
+}
+
+/** Returns the number of seconds elapsed since January 1, 1970 00:00:00 UTC. */
+function _now() {
+  return Math.floor(Date.now() / 1000)
+}
+
+/**
+ * Inspired by [Broadcast Channel API](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API)
+ * Only not using it directly, because Safari does not support it.
+ *
+ * https://caniuse.com/?search=broadcastchannel
+ */
+function BroadcastChannel(name = "nextauth.message") {
+  return {
+    /**
+     * Get notified by other tabs/windows.
+     * @param {(message: import("types/internals/react").BroadcastMessage) => void} onReceive
+     */
+    receive(onReceive) {
+      const handler = (event) => {
+        if (event.key !== name) return
+        /** @type {import("types/internals/react").BroadcastMessage} */
+        const message = JSON.parse(event.newValue)
+        if (message?.event !== "session" || !message?.data) return
+
+        onReceive(message)
+      }
+      window.addEventListener("storage", handler)
+      return () => window.removeEventListener("storage", handler)
+    },
+    /** Notify other tabs/windows. */
+    post(message) {
+      if (typeof window === "undefined") return
+      localStorage.setItem(
+        name,
+        JSON.stringify({ ...message, timestamp: _now() })
+      )
+    },
+  }
+}

src/providers/azure-ad-b2c.js

@@ -1,5 +1,7 @@
 export default function AzureADB2C(options) {
-  const tenant = options.tenantId ? options.tenantId : "common"
+  const { tenantName, primaryUserFlow } = options
+  const authorizeUrl = `https://${tenantName}.b2clogin.com/${tenantName}.onmicrosoft.com/${primaryUserFlow}/oauth2/v2.0/authorize`
+  const tokenUrl = `https://${tenantName}.b2clogin.com/${tenantName}.onmicrosoft.com/${primaryUserFlow}/oauth2/v2.0/token`
 
   return {
     id: "azure-ad-b2c",
@@ -9,14 +11,29 @@ export default function AzureADB2C(options) {
     params: {
       grant_type: "authorization_code",
     },
-    accessTokenUrl: `https://login.microsoftonline.com/${tenant}/oauth2/v2.0/token`,
-    authorizationUrl: `https://login.microsoftonline.com/${tenant}/oauth2/v2.0/authorize?response_type=code&response_mode=query`,
-    profileUrl: "https://graph.microsoft.com/v1.0/me/",
-    profile(profile) {
+    accessTokenUrl: tokenUrl,
+    requestTokenUrl: tokenUrl,
+    authorizationUrl: `${authorizeUrl}?response_type=code+id_token&response_mode=query`,
+    profileUrl: 'https://graph.microsoft.com/oidc/userinfo',
+    idToken: true,
+    profile: (profile) => {
+      let name = ''
+
+      if (profile.name) {
+        // B2C "Display Name"
+        name = profile.name
+      } else if (profile.given_name && profile.family_name) {
+        // B2C "Given Name" & "Surname"
+        name = `${profile.given_name} ${profile.family_name}`
+      } else if (profile.given_name) {
+        // B2C "Given Name"
+        name = `${profile.given_name}`
+      }
+
       return {
-        id: profile.id,
-        name: profile.displayName,
-        email: profile.userPrincipalName,
+        name,
+        id: profile.oid,
+        email: profile.emails[0]
       }
     },
     ...options,

src/providers/azure-ad.js

@@ -0,0 +1,24 @@
+export default function AzureAD(options) {
+  const tenant = options.tenantId ?? 'common'
+
+  return {
+    id: 'azure-ad',
+    name: 'Azure Active Directory',
+    type: 'oauth',
+    version: '2.0',
+    params: {
+      grant_type: 'authorization_code'
+    },
+    accessTokenUrl: `https://login.microsoftonline.com/${tenant}/oauth2/v2.0/token`,
+    authorizationUrl: `https://login.microsoftonline.com/${tenant}/oauth2/v2.0/authorize?response_type=code&response_mode=query`,
+    profileUrl: 'https://graph.microsoft.com/v1.0/me/',
+    profile: (profile) => {
+      return {
+        id: profile.id,
+        name: profile.displayName,
+        email: profile.userPrincipalName
+      }
+    },
+    ...options
+  }
+}

src/providers/dropbox.js

@@ -15,7 +15,7 @@
  * ...
  *
  * // pages/index
- * import { signIn } from "next-auth/client"
+ * import { signIn } from "next-auth/react"
  * ...
  * <button onClick={() => signIn("dropbox")}>
  *   Sign in
@@ -29,26 +29,26 @@
  */
 export default function Dropbox(options) {
   return {
-    id: 'dropbox',
-    name: 'Dropbox',
-    type: 'oauth',
-    version: '2.0',
-    scope: 'account_info.read',
-    params: { grant_type: 'authorization_code' },
-    accessTokenUrl: 'https://api.dropboxapi.com/oauth2/token',
+    id: "dropbox",
+    name: "Dropbox",
+    type: "oauth",
+    version: "2.0",
+    scope: "account_info.read",
+    params: { grant_type: "authorization_code" },
+    accessTokenUrl: "https://api.dropboxapi.com/oauth2/token",
     authorizationUrl:
-      'https://www.dropbox.com/oauth2/authorize?token_access_type=offline&response_type=code',
-    profileUrl: 'https://api.dropboxapi.com/2/users/get_current_account',
+      "https://www.dropbox.com/oauth2/authorize?token_access_type=offline&response_type=code",
+    profileUrl: "https://api.dropboxapi.com/2/users/get_current_account",
     profile: (profile) => {
       return {
         id: profile.account_id,
         name: profile.name.display_name,
         email: profile.email,
         image: profile.profile_photo_url,
-        email_verified: profile.email_verified
+        email_verified: profile.email_verified,
       }
     },
     protection: ["state", "pkce"],
-    ...options
+    ...options,
   }
 }

src/providers/email.js

@@ -1,5 +1,5 @@
+import logger from '../lib/logger'
 import nodemailer from "nodemailer"
-import logger from "../lib/logger"
 
 export default function Email(options) {
   return {
@@ -22,42 +22,33 @@ export default function Email(options) {
   }
 }
 
-const sendVerificationRequest = ({
-  identifier: email,
-  url,
-  baseUrl,
-  provider,
-}) => {
-  return new Promise((resolve, reject) => {
-    const { server, from } = provider
-    // Strip protocol from URL and use domain as site name
-    const site = baseUrl.replace(/^https?:\/\//, "")
-
-    nodemailer.createTransport(server).sendMail(
-      {
+async function sendVerificationRequest ({ identifier: email, url, baseUrl, provider }) {
+  const { server, from } = provider
+  // Strip protocol from URL and use domain as site name
+  const site = baseUrl.replace(/^https?:\/\//, '')
+  try {
+    await nodemailer
+      .createTransport(server)
+      .sendMail({
         to: email,
         from,
         subject: `Sign in to ${site}`,
         text: text({ url, site, email }),
-        html: html({ url, site, email }),
-      },
-      (error) => {
-        if (error) {
-          logger.error("SEND_VERIFICATION_EMAIL_ERROR", error)
-          return reject(new Error("SEND_VERIFICATION_EMAIL_ERROR", error))
-        }
-        return resolve()
-      }
-    )
-  })
+        html: html({ url, site, email })
+      })
+  } catch (error) {
+    logger.error('SEND_VERIFICATION_EMAIL_ERROR', email, error)
+    throw new Error('SEND_VERIFICATION_EMAIL_ERROR')
+  }
 }
 
 // Email HTML body
-const html = ({ url, site }) => {
-  // Insert invisible space into domains to prevent the
-  // the domain from being turned into a hyperlink by email
+const html = ({ url, site, email }) => {
+  // Insert invisible space into domains and email address to prevent both the
+  // email address and the domain from being turned into a hyperlink by email
   // clients like Outlook and Apple mail, as this is confusing because it seems
-  // like they are supposed to click it to sign in.
+  // like they are supposed to click on their email address to sign in.
+  const escapedEmail = `${email.replace(/\./g, "​.")}`
   const escapedSite = `${site.replace(/\./g, "​.")}`
 
   // Some simple styling options
@@ -72,12 +63,17 @@ const html = ({ url, site }) => {
 <body style="background: ${backgroundColor};">
   <table width="100%" border="0" cellspacing="0" cellpadding="0">
     <tr>
-      <td align="center" style="padding: 10px 0px; font-size: 22px; font-family: Helvetica, Arial, sans-serif; color: ${textColor};">
-        Sign in to <strong>${escapedSite}</strong>
+      <td align="center" style="padding: 10px 0px 20px 0px; font-size: 22px; font-family: Helvetica, Arial, sans-serif; color: ${textColor};">
+        <strong>${escapedSite}</strong>
       </td>
     </tr>
   </table>
   <table width="100%" border="0" cellspacing="20" cellpadding="0" style="background: ${mainBackgroundColor}; max-width: 600px; margin: auto; border-radius: 10px;">
+    <tr>
+      <td align="center" style="padding: 10px 0px 0px 0px; font-size: 18px; font-family: Helvetica, Arial, sans-serif; color: ${textColor};">
+        Sign in as <strong>${escapedEmail}</strong>
+      </td>
+    </tr>
     <tr>
       <td align="center" style="padding: 20px 0;">
         <table border="0" cellspacing="0" cellpadding="0">

src/providers/freshbooks.js

@@ -1,20 +0,0 @@
-export default function Freshbooks(options) {
-  return {
-  id: 'freshbooks',
-  name: 'Freshbooks',
-  type: 'oauth',
-  version: '2.0',
-  params: { grant_type: 'authorization_code' },
-  accessTokenUrl: 'https://api.freshbooks.com/auth/oauth/token',
-  authorizationUrl: 'https://auth.freshbooks.com/service/auth/oauth/authorize?response_type=code',
-  profileUrl: 'https://api.freshbooks.com/auth/api/v1/users/me',
-  async profile(profile) {
-    return {
-      id: profile.response.id,
-      name: `${profile.response.first_name} ${profile.response.last_name}`,
-      email: profile.response.email,
-    };
-  },
-  ...options
-  };
-}

src/providers/github.js

@@ -10,7 +10,7 @@ export default function GitHub(options) {
     profileUrl: "https://api.github.com/user",
     profile(profile) {
       return {
-        id: profile.id,
+        id: profile.id.toString(),
         name: profile.name || profile.login,
         email: profile.email,
         image: profile.avatar_url,

src/providers/instagram.js

@@ -15,7 +15,7 @@
  * ...
  *
  * // pages/index
- * import { signIn } from "next-auth/client"
+ * import { signIn } from "next-auth/react"
  * ...
  * <button onClick={() => signIn("instagram")}>
  *   Sign in

src/providers/naver.js

@@ -1,18 +0,0 @@
-export default function Naver(options) {
-  return {
-    id: "naver",
-    name: "Naver",
-    type: "oauth",
-    version: "2.0",
-    params: { grant_type: "authorization_code" },
-    protection: ["state"],
-    accessTokenUrl: "https://nid.naver.com/oauth2.0/token",
-    authorizationUrl:
-      "https://nid.naver.com/oauth2.0/authorize?response_type=code",
-    profileUrl: "https://openapi.naver.com/v1/nid/me",
-    profile(profile) {
-      return profile.response
-    },
-    ...options,
-  }
-}

src/providers/onelogin.js

@@ -1,19 +0,0 @@
-export default function OneLogin(options) {
-  return {
-    id: "onelogin",
-    name: "OneLogin",
-    type: "oauth",
-    version: "2.0",
-    scope: "openid profile name email",
-    params: { grant_type: "authorization_code" },
-    // These will be different depending on the Org.
-    accessTokenUrl: `https://${options.domain}/oidc/2/token`,
-    requestTokenUrl: `https://${options.domain}/oidc/2/auth`,
-    authorizationUrl: `https://${options.domain}/oidc/2/auth?response_type=code`,
-    profileUrl: `https://${options.domain}/oidc/2/me`,
-    profile(profile) {
-      return { ...profile, id: profile.sub }
-    },
-    ...options,
-  }
-}

src/providers/twitter.js

@@ -15,7 +15,10 @@ export default function Twitter(options) {
         id: profile.id_str,
         name: profile.name,
         email: profile.email,
-        image: profile.profile_image_url_https.replace(/_normal\.(jpg|png|gif)$/, ".$1"),
+        image: profile.profile_image_url_https.replace(
+          /_normal\.(jpg|png|gif)$/,
+          ".$1"
+        ),
       }
     },
     ...options,

src/providers/workos.js

@@ -1,16 +1,16 @@
 export default function WorkOS(options) {
-  const domain = options.domain || 'api.workos.com';
+  const domain = options.domain || "api.workos.com"
 
   return {
-    id: 'workos',
-    name: 'WorkOS',
-    type: 'oauth',
-    version: '2.0',
-    scope: '',
+    id: "workos",
+    name: "WorkOS",
+    type: "oauth",
+    version: "2.0",
+    scope: "",
     params: {
-      grant_type: 'authorization_code',
+      grant_type: "authorization_code",
       client_id: options.clientId,
-      client_secret: options.clientSecret
+      client_secret: options.clientSecret,
     },
     accessTokenUrl: `https://${domain}/sso/token`,
     authorizationUrl: `https://${domain}/sso/authorize?response_type=code`,
@@ -18,9 +18,9 @@ export default function WorkOS(options) {
     profile: (profile) => {
       return {
         ...profile,
-        name: `${profile.first_name} ${profile.last_name}`
+        name: `${profile.first_name} ${profile.last_name}`,
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/yandex.js

@@ -4,7 +4,7 @@ export default function Yandex(options) {
     name: "Yandex",
     type: "oauth",
     version: "2.0",
-    scope: "login:email login:info login:avatar",
+    scope: "login:email login:info",
     params: { grant_type: "authorization_code" },
     accessTokenUrl: "https://oauth.yandex.ru/token",
     requestTokenUrl: "https://oauth.yandex.ru/token",
@@ -15,7 +15,7 @@ export default function Yandex(options) {
         id: profile.id,
         name: profile.real_name,
         email: profile.default_email,
-        image: profile.is_avatar_empty ? null : `https://avatars.yandex.net/get-yapic/${profile.default_avatar_id}/islands-200`,
+        image: null,
       }
     },
     ...options,

src/server/index.js

@@ -1,4 +1,3 @@
-import adapters from "../adapters"
 import jwt from "../lib/jwt"
 import parseUrl from "../lib/parse-url"
 import logger, { setLogger } from "../lib/logger"
@@ -21,16 +20,6 @@ if (!process.env.NEXTAUTH_URL) {
   logger.warn("NEXTAUTH_URL", "NEXTAUTH_URL environment variable not set")
 }
 
-function isValidHttpUrl(url, baseUrl) {
-  try {
-    return /^https?:/.test(
-      new URL(url, url.startsWith("/") ? baseUrl : undefined).protocol
-    )
-  } catch {
-    return false
-  }
-}
-
 /**
  * @param {import("next").NextApiRequest} req
  * @param {import("next").NextApiResponse} res
@@ -81,23 +70,6 @@ async function NextAuthHandler(req, res, userOptions) {
       ...userOptions.cookies,
     }
 
-    const errorPage = userOptions.pages?.error ?? `${baseUrl}${basePath}/error`
-
-    const callbackUrlParam = req.query?.callbackUrl
-    if (callbackUrlParam && !isValidHttpUrl(callbackUrlParam, baseUrl)) {
-      return res.redirect(`${errorPage}?error=Configuration`)
-    }
-
-    const { callbackUrl: defaultCallbackUrl } = cookie.defaultCookies(
-      userOptions.useSecureCookies ?? baseUrl.startsWith("https://")
-    )
-    const callbackUrlCookie =
-      req.cookies?.[cookies?.callbackUrl?.name ?? defaultCallbackUrl.name]
-
-    if (callbackUrlCookie && !isValidHttpUrl(callbackUrlCookie, baseUrl)) {
-      return res.redirect(`${errorPage}?error=Configuration`)
-    }
-
     const secret = createSecret({ userOptions, basePath, baseUrl })
 
     const providers = parseProviders({
@@ -129,13 +101,6 @@ async function NextAuthHandler(req, res, userOptions) {
 
     const maxAge = 30 * 24 * 60 * 60 // Sessions expire after 30 days of being idle
 
-    // Parse database / adapter
-    // If adapter is provided, use it (advanced usage, overrides database)
-    // If database URI or config object is provided, use it (simple usage)
-    const adapter =
-      userOptions.adapter ??
-      (userOptions.database && adapters.Default(userOptions.database))
-
     // User provided options are overriden by other options,
     // except for the options with special handling above
     req.options = {
@@ -146,7 +111,6 @@ async function NextAuthHandler(req, res, userOptions) {
       ...userOptions,
       // These computed settings can have values in userOptions but we override them
       // and are request-specific.
-      adapter,
       baseUrl,
       basePath,
       action,
@@ -156,7 +120,7 @@ async function NextAuthHandler(req, res, userOptions) {
       providers,
       // Session options
       session: {
-        jwt: !adapter, // If no adapter specified, force use of JSON Web Tokens (stateless)
+        jwt: !userOptions.adapter, // If no adapter specified, force use of JSON Web Tokens (stateless)
         maxAge,
         updateAge: 24 * 60 * 60, // Sessions updated only if session is greater than this value (0 = always, 24*60*60 = every 24 hours)
         ...userOptions.session,
@@ -307,9 +271,7 @@ async function NextAuthHandler(req, res, userOptions) {
     }
     return res
       .status(400)
-      .end(
-        `Error: This action with HTTP ${req.method} is not supported by NextAuth.js`
-      )
+      .end(`Error: HTTP ${req.method} is not supported for ${req.url}`)
   })
 }
 

src/server/lib/cookie.js

@@ -8,115 +8,115 @@
  * As only partial functionlity is required, only the code we need has been incorporated here
  * (with fixes for specific issues) to keep dependancy size down.
  */
-export function set(res, name, value, options = {}) {
+export function set (res, name, value, options = {}) {
   const stringValue =
-    typeof value === "object" ? "j:" + JSON.stringify(value) : String(value)
+    typeof value === 'object' ? 'j:' + JSON.stringify(value) : String(value)
 
-  if ("maxAge" in options) {
+  if ('maxAge' in options) {
     options.expires = new Date(Date.now() + options.maxAge)
     options.maxAge /= 1000
   }
 
   // Preserve any existing cookies that have already been set in the same session
-  let setCookieHeader = res.getHeader("Set-Cookie") || []
+  let setCookieHeader = res.getHeader('Set-Cookie') || []
   // If not an array (i.e. a string with a single cookie) convert it into an array
   if (!Array.isArray(setCookieHeader)) {
     setCookieHeader = [setCookieHeader]
   }
   setCookieHeader.push(_serialize(name, String(stringValue), options))
-  res.setHeader("Set-Cookie", setCookieHeader)
+  res.setHeader('Set-Cookie', setCookieHeader)
 }
 
-function _serialize(name, val, options) {
+function _serialize (name, val, options) {
   const fieldContentRegExp = /^[\u0009\u0020-\u007e\u0080-\u00ff]+$/ // eslint-disable-line no-control-regex
 
   const opt = options || {}
   const enc = opt.encode || encodeURIComponent
 
-  if (typeof enc !== "function") {
-    throw new TypeError("option encode is invalid")
+  if (typeof enc !== 'function') {
+    throw new TypeError('option encode is invalid')
   }
 
   if (!fieldContentRegExp.test(name)) {
-    throw new TypeError("argument name is invalid")
+    throw new TypeError('argument name is invalid')
   }
 
   const value = enc(val)
 
   if (value && !fieldContentRegExp.test(value)) {
-    throw new TypeError("argument val is invalid")
+    throw new TypeError('argument val is invalid')
   }
 
-  let str = name + "=" + value
+  let str = name + '=' + value
 
   if (opt.maxAge != null) {
     const maxAge = opt.maxAge - 0
 
     if (isNaN(maxAge) || !isFinite(maxAge)) {
-      throw new TypeError("option maxAge is invalid")
+      throw new TypeError('option maxAge is invalid')
     }
 
-    str += "; Max-Age=" + Math.floor(maxAge)
+    str += '; Max-Age=' + Math.floor(maxAge)
   }
 
   if (opt.domain) {
     if (!fieldContentRegExp.test(opt.domain)) {
-      throw new TypeError("option domain is invalid")
+      throw new TypeError('option domain is invalid')
     }
 
-    str += "; Domain=" + opt.domain
+    str += '; Domain=' + opt.domain
   }
 
   if (opt.path) {
     if (!fieldContentRegExp.test(opt.path)) {
-      throw new TypeError("option path is invalid")
+      throw new TypeError('option path is invalid')
     }
 
-    str += "; Path=" + opt.path
+    str += '; Path=' + opt.path
   } else {
-    str += "; Path=/"
+    str += '; Path=/'
   }
 
   if (opt.expires) {
     let expires = opt.expires
-    if (typeof opt.expires.toUTCString === "function") {
+    if (typeof opt.expires.toUTCString === 'function') {
       expires = opt.expires.toUTCString()
     } else {
       const dateExpires = new Date(opt.expires)
       expires = dateExpires.toUTCString()
     }
-    str += "; Expires=" + expires
+    str += '; Expires=' + expires
   }
 
   if (opt.httpOnly) {
-    str += "; HttpOnly"
+    str += '; HttpOnly'
   }
 
   if (opt.secure) {
-    str += "; Secure"
+    str += '; Secure'
   }
 
   if (opt.sameSite) {
     const sameSite =
-      typeof opt.sameSite === "string"
+      typeof opt.sameSite === 'string'
         ? opt.sameSite.toLowerCase()
         : opt.sameSite
 
     switch (sameSite) {
       case true:
-        str += "; SameSite=Strict"
+        str += '; SameSite=Strict'
         break
-      case "lax":
-        str += "; SameSite=Lax"
+      case 'lax':
+        str += '; SameSite=Lax'
         break
-      case "strict":
-        str += "; SameSite=Strict"
+      case 'strict':
+        str += '; SameSite=Strict'
         break
-      case "none":
-        str += "; SameSite=None"
+      case 'none':
+        str += '; SameSite=None'
         break
       default:
-        throw new TypeError("option sameSite is invalid")
+        throw new TypeError('option sameSite is invalid')
     }
   }
 
@@ -134,47 +134,46 @@ function _serialize(name, val, options) {
  * @TODO Review cookie settings (names, options)
  * @return {import("types").CookiesOptions}
  */
-export function defaultCookies(useSecureCookies) {
-  const cookiePrefix = useSecureCookies ? "__Secure-" : ""
+export function defaultCookies (useSecureCookies) {
+  const cookiePrefix = useSecureCookies ? '__Secure-' : ''
   return {
     // default cookie options
     sessionToken: {
       name: `${cookiePrefix}next-auth.session-token`,
       options: {
         httpOnly: true,
-        sameSite: "lax",
-        path: "/",
-        secure: useSecureCookies,
-      },
+        sameSite: 'lax',
+        path: '/',
+        secure: useSecureCookies
+      }
     },
     callbackUrl: {
       name: `${cookiePrefix}next-auth.callback-url`,
       options: {
-        httpOnly: true,
-        sameSite: "lax",
-        path: "/",
-        secure: useSecureCookies,
-      },
+        sameSite: 'lax',
+        path: '/',
+        secure: useSecureCookies
+      }
     },
     csrfToken: {
       // Default to __Host- for CSRF token for additional protection if using useSecureCookies
       // NB: The `__Host-` prefix is stricter than the `__Secure-` prefix.
-      name: `${useSecureCookies ? "__Host-" : ""}next-auth.csrf-token`,
+      name: `${useSecureCookies ? '__Host-' : ''}next-auth.csrf-token`,
       options: {
         httpOnly: true,
-        sameSite: "lax",
-        path: "/",
-        secure: useSecureCookies,
-      },
+        sameSite: 'lax',
+        path: '/',
+        secure: useSecureCookies
+      }
     },
     pkceCodeVerifier: {
       name: `${cookiePrefix}next-auth.pkce.code_verifier`,
       options: {
         httpOnly: true,
-        sameSite: "lax",
-        path: "/",
-        secure: useSecureCookies,
-      },
-    },
+        sameSite: 'lax',
+        path: '/',
+        secure: useSecureCookies
+      }
+    }
   }
 }

src/server/lib/csrf-token-handler.js

@@ -3,7 +3,7 @@ import * as cookie from './cookie'
 
 /**
  * Ensure CSRF Token cookie is set for any subsequent requests.
- * Used as part of the strategy for mitigation for CSRF tokens.
+ * Used as part of the strateigy for mitigation for CSRF tokens.
  *
  * Creates a cookie like 'next-auth.csrf-token' with the value 'token|hash',
  * where 'token' is the CSRF token and 'hash' is a hash made of the token and

src/server/lib/default-callbacks.js

@@ -15,7 +15,7 @@
  * @return {Promise<boolean|never>}  Return `true` (or a modified JWT) to allow sign in
  *                                   Return `false` to deny access
  */
-export async function signIn() {
+export async function signIn () {
   return true
 }
 
@@ -28,9 +28,10 @@ export async function signIn() {
  * @param  {string} baseUrl  Default base URL of site (can be used as fallback)
  * @return {Promise<string>} URL the client will be redirect to
  */
-export async function redirect(url, baseUrl) {
-  if (url.startsWith("/")) return `${baseUrl}${url}`
-  else if (new URL(url).origin === baseUrl) return url
+export async function redirect (url, baseUrl) {
+  if (url.startsWith(baseUrl)) {
+    return url
+  }
   return baseUrl
 }
 
@@ -42,7 +43,7 @@ export async function redirect(url, baseUrl) {
  * @param  {object} token    JSON Web Token (if enabled)
  * @return {Promise<object>} Session that will be returned to the client
  */
-export async function session(session) {
+export async function session (session) {
   return session
 }
 
@@ -58,6 +59,6 @@ export async function session(session) {
  * @param  {object} oAuthProfile  OAuth profile - only available on sign in
  * @return {Promise<object>}      JSON Web Token that will be saved
  */
-export async function jwt(token) {
+export async function jwt (token) {
   return token
 }

src/server/lib/oauth/callback.js

@@ -30,7 +30,6 @@ export default async function oAuthCallback(req) {
           provider.id,
           code
         )
-        logger.debug("OAUTH_CALLBACK_HANDLER_ERROR", req.body)
         throw error
       }
     }
@@ -63,7 +62,7 @@ export default async function oAuthCallback(req) {
 
       return getProfile({ profileData, provider, tokens, user })
     } catch (error) {
-      logger.error("OAUTH_GET_ACCESS_TOKEN_ERROR", error, provider.id)
+      logger.error("OAUTH_GET_ACCESS_TOKEN_ERROR", error, provider.id, code)
       throw error
     }
   }
@@ -75,11 +74,7 @@ export default async function oAuthCallback(req) {
 
     // eslint-disable-next-line camelcase
     const { token_secret } = await client.getOAuthRequestToken(provider.params)
-    const tokens = await client.getOAuthAccessToken(
-      oauth_token,
-      token_secret,
-      oauth_verifier
-    )
+    const tokens = await client.getOAuthAccessToken(oauth_token, token_secret, oauth_verifier)
     const profileData = await client.get(
       provider.profileUrl,
       tokens.oauth_token,
@@ -148,11 +143,11 @@ async function getProfile({ profileData, tokens, provider, user }) {
     // If we didn't get a response either there was a problem with the provider
     // response *or* the user cancelled the action with the provider.
     //
-    // Unfortunately, we can't tell which - at least not in a way that works for
+    // Unfortuately, we can't tell which - at least not in a way that works for
     // all providers, so we return an empty object; the user should then be
     // redirected back to the sign up page. We log the error to help developers
     // who might be trying to debug this when configuring a new provider.
-    logger.error("OAUTH_PARSE_PROFILE_ERROR", exception)
+    logger.error("OAUTH_PARSE_PROFILE_ERROR", exception, profileData)
     return {
       profile: null,
       account: null,

src/server/lib/oauth/client.js

@@ -180,44 +180,51 @@ async function getOAuth2AccessToken(code, provider, codeVerifier) {
   const postData = querystring.stringify(params)
 
   return new Promise((resolve, reject) => {
-    this._request("POST", url, headers, postData, null, (error, data) => {
-      if (error) {
-        logger.error("OAUTH_GET_ACCESS_TOKEN_ERROR", error)
-        return reject(error)
-      }
-
-      let raw
-      try {
-        // As of http://tools.ietf.org/html/draft-ietf-oauth-v2-07
-        // responses should be in JSON
-        raw = JSON.parse(data)
-      } catch {
-        // However both Facebook + Github currently use rev05 of the spec  and neither
-        // seem to specify a content-type correctly in their response headers. :(
-        // Clients of these services suffer a minor performance cost.
-        raw = querystring.parse(data)
-      }
-
-      let accessToken
-      if (provider.id === "slack") {
-        const { ok, error } = raw
-        if (!ok) {
+    this._request(
+      "POST",
+      url,
+      headers,
+      postData,
+      null,
+      (error, data, response) => {
+        if (error) {
+          logger.error("OAUTH_GET_ACCESS_TOKEN_ERROR", error, data, response)
           return reject(error)
         }
 
-        accessToken = raw.authed_user.access_token
-      } else {
-        accessToken = raw.access_token
-      }
+        let raw
+        try {
+          // As of http://tools.ietf.org/html/draft-ietf-oauth-v2-07
+          // responses should be in JSON
+          raw = JSON.parse(data)
+        } catch {
+          // However both Facebook + Github currently use rev05 of the spec  and neither
+          // seem to specify a content-type correctly in their response headers. :(
+          // Clients of these services suffer a minor performance cost.
+          raw = querystring.parse(data)
+        }
 
-      resolve({
-        accessToken,
-        accessTokenExpires: null,
-        refreshToken: raw.refresh_token,
-        idToken: raw.id_token,
-        ...raw,
-      })
-    })
+        let accessToken
+        if (provider.id === "slack") {
+          const { ok, error } = raw
+          if (!ok) {
+            return reject(error)
+          }
+
+          accessToken = raw.authed_user.access_token
+        } else {
+          accessToken = raw.access_token
+        }
+
+        resolve({
+          accessToken,
+          accessTokenExpires: null,
+          refreshToken: raw.refresh_token,
+          idToken: raw.id_token,
+          ...raw,
+        })
+      }
+    )
   })
 }
 

src/server/lib/oauth/pkce-handler.js

@@ -36,11 +36,7 @@ export async function handleCallback (req, res) {
       pkceLength: PKCE_LENGTH,
       method: PKCE_CODE_CHALLENGE_METHOD
     })
-    // remove PKCE after it has been used
-    cookie.set(res, cookies.pkceCodeVerifier.name, "", { 
-      ...cookies.pkceCodeVerifier.options,
-      maxAge: 0 
-    })
+    cookie.set(res, cookies.pkceCodeVerifier.name, null, { maxAge: 0 }) // remove PKCE after it has been used
   } catch (error) {
     logger.error('CALLBACK_OAUTH_ERROR', error)
     return res.redirect(`${baseUrl}${basePath}/error?error=OAuthCallback`)

src/server/lib/signin/oauth.js

@@ -1,23 +1,23 @@
-import oAuthClient from '../oauth/client'
-import logger from '../../../lib/logger'
+import oAuthClient from "../oauth/client"
+import logger from "../../../lib/logger"
 
 /** @param {import("types/internals").NextAuthRequest} req */
-export default async function getAuthorizationUrl (req) {
+export default async function getAuthorizationUrl(req) {
   const { provider } = req.options
 
   delete req.query?.nextauth
   const params = {
     ...provider.authorizationParams,
-    ...req.query
+    ...req.query,
   }
 
   const client = oAuthClient(provider)
-  if (provider.version?.startsWith('2.')) {
+  if (provider.version?.startsWith("2.")) {
     // Handle OAuth v2.x
     let url = client.getAuthorizeUrl({
       scope: provider.scope,
       ...params,
-      redirect_uri: provider.callbackUrl
+      redirect_uri: provider.callbackUrl,
     })
 
     // If the authorizationUrl specified in the config has query parameters on it
@@ -27,13 +27,13 @@ export default async function getAuthorizationUrl (req) {
     // which inadvertantly strips them.
     //
     // https://github.com/ciaranj/node-oauth/pull/193
-    if (provider.authorizationUrl.includes('?')) {
+    if (provider.authorizationUrl.includes("?")) {
       const parseUrl = new URL(provider.authorizationUrl)
       const baseUrl = `${parseUrl.origin}${parseUrl.pathname}?`
-      url = url.replace(baseUrl, provider.authorizationUrl + '&')
+      url = url.replace(baseUrl, provider.authorizationUrl + "&")
     }
 
-    logger.debug('GET_AUTHORIZATION_URL', url)
+    logger.debug("GET_AUTHORIZATION_URL", url)
     return url
   }
 
@@ -42,12 +42,12 @@ export default async function getAuthorizationUrl (req) {
     const url = `${provider.authorizationUrl}?${new URLSearchParams({
       oauth_token: tokens.oauth_token,
       oauth_token_secret: tokens.oauth_token_secret,
-      ...tokens.params
+      ...tokens.params,
     })}`
-    logger.debug('GET_AUTHORIZATION_URL', url)
+    logger.debug("GET_AUTHORIZATION_URL", url)
     return url
   } catch (error) {
-    logger.error('GET_AUTHORIZATION_URL_ERROR', error)
+    logger.error("GET_AUTHORIZATION_URL_ERROR", error)
     throw error
   }
 }

src/server/pages/signin.js

@@ -1,18 +1,12 @@
-import { h } from "preact" // eslint-disable-line no-unused-vars
+import { h } from 'preact' // eslint-disable-line no-unused-vars
 
-export default function signin({
-  csrfToken,
-  providers,
-  callbackUrl,
-  email,
-  error: errorType,
-}) {
+export default function signin ({ csrfToken, providers, callbackUrl, email, error: errorType }) {
   // We only want to render providers
-  const providersToRender = providers.filter((provider) => {
-    if (provider.type === "oauth" || provider.type === "email") {
+  const providersToRender = providers.filter(provider => {
+    if (provider.type === 'oauth' || provider.type === 'email') {
       // Always render oauth and email type providers
       return true
-    } else if (provider.type === "credentials" && provider.credentials) {
+    } else if (provider.type === 'credentials' && provider.credentials) {
       // Only render credentials type provider if credentials are defined
       return true
     }
@@ -21,93 +15,70 @@ export default function signin({
   })
 
   const errors = {
-    Signin: "Try signing in with a different account.",
-    OAuthSignin: "Try signing in with a different account.",
-    OAuthCallback: "Try signing in with a different account.",
-    OAuthCreateAccount: "Try signing in with a different account.",
-    EmailCreateAccount: "Try signing in with a different account.",
-    Callback: "Try signing in with a different account.",
-    OAuthAccountNotLinked:
-      "To confirm your identity, sign in with the same account you used originally.",
-    EmailSignin: "Check your email inbox.",
-    CredentialsSignin:
-      "Sign in failed. Check the details you provided are correct.",
-    default: "Unable to sign in.",
+    Signin: 'Try signing with a different account.',
+    OAuthSignin: 'Try signing with a different account.',
+    OAuthCallback: 'Try signing with a different account.',
+    OAuthCreateAccount: 'Try signing with a different account.',
+    EmailCreateAccount: 'Try signing with a different account.',
+    Callback: 'Try signing with a different account.',
+    OAuthAccountNotLinked: 'To confirm your identity, sign in with the same account you used originally.',
+    EmailSignin: 'Check your email address.',
+    CredentialsSignin: 'Sign in failed. Check the details you provided are correct.',
+    default: 'Unable to sign in.'
   }
 
   const error = errorType && (errors[errorType] ?? errors.default)
 
   return (
-    <div className="signin">
-      {error && (
-        <div className="error">
+    <div className='signin'>
+      {error &&
+        <div className='error'>
           <p>{error}</p>
-        </div>
-      )}
-      {providersToRender.map((provider, i) => (
-        <div key={provider.id} className="provider">
-          {provider.type === "oauth" && (
-            <form action={provider.signinUrl} method="POST">
-              <input type="hidden" name="csrfToken" value={csrfToken} />
-              {callbackUrl && (
-                <input type="hidden" name="callbackUrl" value={callbackUrl} />
-              )}
-              <button type="submit" className="button">
-                Sign in with {provider.name}
-              </button>
-            </form>
-          )}
-          {(provider.type === "email" || provider.type === "credentials") &&
-            i > 0 &&
-            providersToRender[i - 1].type !== "email" &&
-            providersToRender[i - 1].type !== "credentials" && <hr />}
-          {provider.type === "email" && (
-            <form action={provider.signinUrl} method="POST">
-              <input type="hidden" name="csrfToken" value={csrfToken} />
-              <label for={`input-email-for-${provider.id}-provider`}>
-                Email
-              </label>
-              <input
-                id={`input-email-for-${provider.id}-provider`}
-                autoFocus
-                type="text"
-                name="email"
-                value={email}
-                placeholder="email@example.com"
-              />
-              <button type="submit">Sign in with {provider.name}</button>
-            </form>
-          )}
-          {provider.type === "credentials" && (
-            <form action={provider.callbackUrl} method="POST">
-              <input type="hidden" name="csrfToken" value={csrfToken} />
-              {Object.keys(provider.credentials).map((credential) => {
+        </div>}
+      {providersToRender.map((provider, i) =>
+        <div key={provider.id} className='provider'>
+          {provider.type === 'oauth' &&
+            <form action={provider.signinUrl} method='POST'>
+              <input type='hidden' name='csrfToken' value={csrfToken} />
+              {callbackUrl && <input type='hidden' name='callbackUrl' value={callbackUrl} />}
+              <button type='submit' className='button'>Sign in with {provider.name}</button>
+            </form>}
+          {(provider.type === 'email' || provider.type === 'credentials') && (i > 0) &&
+          providersToRender[i - 1].type !== 'email' && providersToRender[i - 1].type !== 'credentials' &&
+            <hr />}
+          {provider.type === 'email' &&
+            <form action={provider.signinUrl} method='POST'>
+              <input type='hidden' name='csrfToken' value={csrfToken} />
+              <label for={`input-email-for-${provider.id}-provider`}>Email</label>
+              <input id={`input-email-for-${provider.id}-provider`} autoFocus type='text' name='email' value={email} placeholder='email@example.com' />
+              <button type='submit'>Sign in with {provider.name}</button>
+            </form>}
+          {provider.type === 'credentials' &&
+            <form action={provider.callbackUrl} method='POST'>
+              <input type='hidden' name='csrfToken' value={csrfToken} />
+              {Object.keys(provider.credentials).map(credential => {
                 return (
                   <div key={`input-group-${provider.id}`}>
                     <label
                       for={`input-${credential}-for-${provider.id}-provider`}
-                    >
-                      {provider.credentials[credential].label || credential}
+                    >{provider.credentials[credential].label || credential}
                     </label>
                     <input
                       name={credential}
                       id={`input-${credential}-for-${provider.id}-provider`}
-                      type={provider.credentials[credential].type || "text"}
-                      value={provider.credentials[credential].value || ""}
-                      placeholder={
-                        provider.credentials[credential].placeholder || ""
-                      }
+                      type={provider.credentials[credential].type || 'text'}
+                      value={provider.credentials[credential].value || ''}
+                      placeholder={provider.credentials[credential].placeholder || ''}
                     />
                   </div>
                 )
               })}
-              <button type="submit">Sign in with {provider.name}</button>
-            </form>
-          )}
-          {(provider.type === "email" || provider.type === "credentials") &&
-            i + 1 < providersToRender.length && <hr />}
+              <button type='submit'>Sign in with {provider.name}</button>
+            </form>}
+          {(provider.type === 'email' || provider.type === 'credentials') && ((i + 1) < providersToRender.length) &&
+            <hr />}
         </div>
-      ))}
+      )}
     </div>
   )
 }

src/server/routes/callback.js

@@ -77,7 +77,7 @@ export default async function callback(req, res) {
             account,
             OAuthProfile
           )
-          if (signInCallbackResponse === false) {
+          if (!signInCallbackResponse) {
             return res.redirect(
               `${baseUrl}${basePath}/error?error=AccessDenied`
             )
@@ -85,16 +85,11 @@ export default async function callback(req, res) {
             return res.redirect(signInCallbackResponse)
           }
         } catch (error) {
-          if (error instanceof Error) {
-            return res.redirect(
-              `${baseUrl}${basePath}/error?error=${encodeURIComponent(
-                error.message
-              )}`
-            )
-          }
-          // TODO: Remove in a future major release
-          logger.warn("SIGNIN_CALLBACK_REJECT_REDIRECT")
-          return res.redirect(error)
+          return res.redirect(
+            `${baseUrl}${basePath}/error?error=${encodeURIComponent(
+              error.message
+            )}`
+          )
         }
 
         // Sign user in
@@ -226,22 +221,17 @@ export default async function callback(req, res) {
           account,
           { email }
         )
-        if (signInCallbackResponse === false) {
+        if (!signInCallbackResponse) {
           return res.redirect(`${baseUrl}${basePath}/error?error=AccessDenied`)
         } else if (typeof signInCallbackResponse === "string") {
           return res.redirect(signInCallbackResponse)
         }
       } catch (error) {
-        if (error instanceof Error) {
-          return res.redirect(
-            `${baseUrl}${basePath}/error?error=${encodeURIComponent(
-              error.message
-            )}`
-          )
-        }
-        // TODO: Remove in a future major release
-        logger.warn("SIGNIN_CALLBACK_REJECT_REDIRECT")
-        return res.redirect(error)
+        return res.redirect(
+          `${baseUrl}${basePath}/error?error=${encodeURIComponent(
+            error.message
+          )}`
+        )
       }
 
       // Sign user in
@@ -336,7 +326,8 @@ export default async function callback(req, res) {
     let userObjectReturnedFromAuthorizeHandler
     try {
       userObjectReturnedFromAuthorizeHandler = await provider.authorize(
-        credentials, {...req, options: {}, cookies: {}}
+        credentials,
+        { ...req, options: {}, cookies: {} }
       )
       if (!userObjectReturnedFromAuthorizeHandler) {
         return res
@@ -346,16 +337,13 @@ export default async function callback(req, res) {
               provider.id
             )}`
           )
+      } else if (typeof userObjectReturnedFromAuthorizeHandler === "string") {
+        return res.redirect(userObjectReturnedFromAuthorizeHandler)
       }
     } catch (error) {
-      if (error instanceof Error) {
-        return res.redirect(
-          `${baseUrl}${basePath}/error?error=${encodeURIComponent(
-            error.message
-          )}`
-        )
-      }
-      return res.redirect(error)
+      return res.redirect(
+        `${baseUrl}${basePath}/error?error=${encodeURIComponent(error.message)}`
+      )
     }
 
     const user = userObjectReturnedFromAuthorizeHandler
@@ -367,20 +355,17 @@ export default async function callback(req, res) {
         account,
         credentials
       )
-      if (signInCallbackResponse === false) {
+      if (!signInCallbackResponse) {
         return res
           .status(403)
           .redirect(`${baseUrl}${basePath}/error?error=AccessDenied`)
+      } else if (typeof signInCallbackResponse === "string") {
+        return res.redirect(signInCallbackResponse)
       }
     } catch (error) {
-      if (error instanceof Error) {
-        return res.redirect(
-          `${baseUrl}${basePath}/error?error=${encodeURIComponent(
-            error.message
-          )}`
-        )
-      }
-      return res.redirect(error)
+      return res.redirect(
+        `${baseUrl}${basePath}/error?error=${encodeURIComponent(error.message)}`
+      )
     }
 
     const defaultJwtPayload = {

src/server/routes/signin.js

@@ -40,10 +40,6 @@ export default async function signin(req, res) {
     // complains about this we can make strict RFC 2821 compliance an option.
     const email = req.body.email?.toLowerCase() ?? null
 
-    if (!email) {
-      return res.redirect(`${baseUrl}${basePath}/error?error=EmailSignin`)
-    }
-
     // If is an existing user return a user object (otherwise use placeholder)
     const profile = (await getUserByEmail(email)) || { email }
     const account = { id: provider.id, type: "email", providerAccountId: email }
@@ -60,14 +56,9 @@ export default async function signin(req, res) {
         return res.redirect(signInCallbackResponse)
       }
     } catch (error) {
-      if (error instanceof Error) {
-        return res.redirect(
-          `${baseUrl}${basePath}/error?error=${encodeURIComponent(error)}`
-        )
-      }
-      // TODO: Remove in a future major release
-      logger.warn("SIGNIN_CALLBACK_REJECT_REDIRECT")
-      return res.redirect(error)
+      return res.redirect(
+        `${baseUrl}${basePath}/error?error=${encodeURIComponent(error)}`
+      )
     }
 
     try {

tsconfig.json

@@ -6,9 +6,9 @@
       "types": ["./types"],
       "next-auth": ["./src/server"],
       "next-auth/adapters": ["./src/adapters"],
-      "next-auth/client": ["./src/client"],
+      "next-auth/react": ["./src/client/react"],
       "next-auth/jwt": ["./src/lib/jwt"],
-      "next-auth/providers": ["./src/providers"]
+      "next-auth/providers": ["./src/providers"],
     },
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],

types/adapters.d.ts

@@ -2,38 +2,6 @@ import { AppOptions } from "./internals"
 import { User, Profile, Session } from "."
 import { EmailConfig } from "./providers"
 
-/** Legacy */
-
-export {
-  TypeORMAccountModel,
-  TypeORMSessionModel,
-  TypeORMUserModel,
-  TypeORMVerificationRequestModel,
-} from "@next-auth/typeorm-legacy-adapter"
-
-import {
-  TypeORMAdapter,
-  TypeORMAdapterModels,
-} from "@next-auth/typeorm-legacy-adapter"
-
-import { PrismaLegacyAdapter } from "@next-auth/prisma-legacy-adapter"
-
-export const TypeORM: {
-  Models: TypeORMAdapterModels
-  Adapter: TypeORMAdapter
-}
-
-export const Prisma: {
-  Adapter: PrismaLegacyAdapter
-}
-
-declare const Adapters: {
-  Default: TypeORMAdapter
-  TypeORM: typeof TypeORM
-  Prisma: typeof Prisma
-}
-export default Adapters
-
 /**
  * Using a custom adapter you can connect to any database backend or even several different databases.
  * Custom adapters created and maintained by our community can be found in the adapters repository.

types/index.d.ts

@@ -29,14 +29,6 @@ export interface NextAuthOptions {
    * [Documentation](https://next-auth.js.org/configuration/options#providers) | [Providers documentation](https://next-auth.js.org/configuration/providers)
    */
   providers: AppProviders
-  /**
-   * A database connection string or configuration object.
-   * * **Default value**: `null`
-   * * **Required**: *No (unless using email provider)*
-   *
-   * [Documentation](https://next-auth.js.org/configuration/options#database) | [Databases](https://next-auth.js.org/configuration/databases)
-   */
-  database?: string | Record<string, any> | ConnectionOptions
   /**
    * A random string used to hash tokens, sign cookies and generate cryptographic keys.
    * If not specified is uses a hash of all configuration options, including Client ID / Secrets for entropy.
@@ -82,7 +74,7 @@ export interface NextAuthOptions {
    *     signOut: '/auth/signout',
    *     error: '/auth/error',
    *     verifyRequest: '/auth/verify-request',
-   *     newUser: '/auth/new-user'
+   *     newUser: null
    *   }
    * ```
    *
@@ -113,18 +105,11 @@ export interface NextAuthOptions {
    */
   events?: Partial<JWTEventCallbacks | SessionEventCallbacks>
   /**
-   * By default NextAuth.js uses a database adapter that uses TypeORM and supports MySQL, MariaDB, Postgres and MongoDB and SQLite databases.
-   * An alternative adapter that uses Prisma, which currently supports MySQL, MariaDB and Postgres, is also included.
-   * You can use the adapter option to use the Prisma adapter - or pass in your own adapter
-   * if you want to use a database that is not supported by one of the built-in adapters.
-   * * **Default value**: TypeORM adapter
+   * You can use the adapter option to pass in your database adapter.
+   *
    * * **Required**: *No*
    *
-   * - ⚠ If the `adapter` option is specified it overrides the `database` option, only specify one or the other.
-   * - ⚠ Adapters are being migrated to their own home in a Community maintained repository.
-   *
    * [Documentation](https://next-auth.js.org/configuration/options#adapter) |
-   * [Default adapter](https://next-auth.js.org/schemas/adapters#typeorm-adapter) |
    * [Community adapters](https://github.com/nextauthjs/adapters)
    */
   adapter?: ReturnType<Adapter>
@@ -428,11 +413,11 @@ export interface DefaultSession extends Record<string, unknown> {
 
 /**
  * Returned by `useSession`, `getSession`, returned by the `session` callback
- * and also the shape received as a prop on the `Provider` React Context
+ * and also the shape received as a prop on the `SessionProvider` React Context
  *
  * [`useSession`](https://next-auth.js.org/getting-started/client#usesession) |
  * [`getSession`](https://next-auth.js.org/getting-started/client#getsession) |
- * [`Provider`](https://next-auth.js.org/getting-started/client#provider) |
+ * [`SessionProvider`](https://next-auth.js.org/getting-started/client#sessionprovider) |
  * [`session` callback](https://next-auth.js.org/configuration/callbacks#jwt-callback)
  */
 export interface Session extends Record<string, unknown>, DefaultSession {}

types/internals/client.d.ts

@@ -1,34 +0,0 @@
-import * as React from "react"
-import { Session } from ".."
-
-export interface BroadcastMessage {
-  event?: "session"
-  data?: {
-    trigger?: "signout" | "getSession"
-  }
-  clientId: string
-  timestamp: number
-}
-
-export interface NextAuthConfig {
-  baseUrl: string
-  basePath: string
-  baseUrlServer: string
-  basePathServer: string
-  /** 0 means disabled (don't send); 60 means send every 60 seconds */
-  keepAlive: number
-  /** 0 means disabled (only use cache); 60 means sync if last checked > 60 seconds ago */
-  clientMaxAge: number
-  /** Used for timestamp since last sycned (in seconds) */
-  _clientLastSync: number
-  /** Stores timer for poll interval */
-  _clientSyncTimer: ReturnType<typeof setTimeout>
-  /** Tracks if event listeners have been added */
-  _eventListenersAdded: boolean
-  /** Stores last session response from hook */
-  _clientSession: Session | null | undefined
-  /** Used to store to function export by getSession() hook */
-  _getSession: any
-}
-
-export type SessionContext = React.Context<Session>

types/internals/react.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react"
+import { Session } from ".."
+
+export interface BroadcastMessage {
+  event?: "session"
+  data?: {
+    trigger?: "signout" | "getSession"
+  }
+  clientId: string
+  timestamp: number
+}
+
+export interface NextAuthConfig {
+  baseUrl: string
+  basePath: string
+  baseUrlServer: string
+  basePathServer: string
+  /** Stores last session response */
+  _session?: Session | null
+  /** Used for timestamp since last sycned (in seconds) */
+  _lastSync: number
+  /**
+   * Stores the `SessionProvider`'s session update method to be able to
+   * trigger session updates from places like `signIn` or `signOut`
+   */
+  _getSession: any
+}
+
+export type SessionContext = React.Context<Session>

types/providers.d.ts

@@ -1,6 +1,5 @@
 import { Profile, TokenSet, User } from "."
 import { Awaitable, NextApiRequest } from "./internals/utils"
-import { Options as SMTPConnectionOptions } from 'nodemailer/lib/smtp-connection'
 
 export type ProviderType = "oauth" | "email" | "credentials"
 
@@ -27,7 +26,7 @@ export interface OAuthConfig<P extends Record<string, unknown> = Profile>
   headers?: Record<string, any>
   type: "oauth"
   version: string
-  scope: string | string[]
+  scope: string
   params: { grant_type: string }
   accessTokenUrl: string
   requestTokenUrl?: string
@@ -58,6 +57,7 @@ export type OAuthProviderType =
   | "Apple"
   | "Atlassian"
   | "Auth0"
+  | "AzureAD"
   | "AzureADB2C"
   | "Basecamp"
   | "BattleNet"
@@ -72,7 +72,6 @@ export type OAuthProviderType =
   | "FACEIT"
   | "FortyTwo"
   | "Foursquare"
-  | "Freshbooks"
   | "FusionAuth"
   | "GitHub"
   | "GitLab"
@@ -85,10 +84,8 @@ export type OAuthProviderType =
   | "Mailchimp"
   | "MailRu"
   | "Medium"
-  | "Naver"
   | "Netlify"
   | "Okta"
-  | "OneLogin"
   | "Osso"
   | "Reddit"
   | "Salesforce"
@@ -121,15 +118,29 @@ interface CredentialsConfig<C extends Record<string, CredentialInput> = {}>
   extends CommonProviderOptions {
   type: "credentials"
   credentials: C
-  authorize(credentials: Record<keyof C, string>, req: NextApiRequest): Awaitable<User | null>
+  authorize(
+    credentials: Record<keyof C, string>,
+    req: NextApiRequest
+  ): Awaitable<User | null>
 }
 
-export type CredentialsProvider = <C extends Record<string, CredentialInput>>(
-  options: Partial<CredentialsConfig<C>>
-) => CredentialsConfig<C>
+export type CredentialsProvider = (
+  options: Partial<CredentialsConfig>
+) => CredentialsConfig
 
 export type CredentialsProviderType = "Credentials"
 
+/** Email Provider */
+
+export interface EmailConfigServerOptions {
+  host: string
+  port: number
+  auth: {
+    user: string
+    pass: string
+  }
+}
+
 export type SendVerificationRequest = (params: {
   identifier: string
   url: string
@@ -141,7 +152,7 @@ export type SendVerificationRequest = (params: {
 export interface EmailConfig extends CommonProviderOptions {
   type: "email"
   // TODO: Make use of https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html
-  server: string | SMTPConnectionOptions
+  server: string | EmailConfigServerOptions
   /** @default "NextAuth <no-reply@example.com>" */
   from?: string
   /**

types/react-client.d.ts

@@ -34,12 +34,6 @@ export function useSession(): [Session | null, boolean]
  */
 export function getSession(options?: GetSessionOptions): Promise<Session | null>
 
-/**
- * Alias for `getSession`
- * @docs https://next-auth.js.org/getting-started/client#getsession
- */
-export const session: typeof getSession
-
 /*******************
  * CSRF Token types
  ******************/
@@ -54,12 +48,6 @@ export const session: typeof getSession
  */
 export function getCsrfToken(ctxOrReq?: CtxOrReq): Promise<string | null>
 
-/**
- * Alias for `getCsrfToken`
- * @docs https://next-auth.js.org/getting-started/client#getcsrftoken
- */
-export const csrfToken: typeof getCsrfToken
-
 /******************
  * Providers types
  *****************/
@@ -84,12 +72,6 @@ export function getProviders(): Promise<Record<
   ClientSafeProvider
 > | null>
 
-/**
- * Alias for `getProviders`
- * @docs https://next-auth.js.org/getting-started/client#getproviders
- */
-export const providers: typeof getProviders
-
 /****************
  * Sign in types
  ***************/
@@ -137,12 +119,6 @@ export function signIn<P extends SignInProvider = undefined>(
   P extends RedirectableProvider ? SignInResponse | undefined : undefined
 >
 
-/**
- * Alias for `signIn`
- * @docs https://next-auth.js.org/getting-started/client#signin
- */
-export const signin: typeof signIn
-
 /****************
  * Sign out types
  ****************/
@@ -169,21 +145,25 @@ export function signOut<R extends boolean = true>(
   params?: SignOutParams<R>
 ): Promise<R extends true ? undefined : SignOutResponse>
 
-/**
- * @docs https://next-auth.js.org/getting-started/client#signout
- * Alias for `signOut`
- */
-export const signout: typeof signOut
 /************************
  * SessionProvider types
  ***********************/
 
 /** @docs: https://next-auth.js.org/getting-started/client#options */
-export interface SessionProviderOptions {
+export interface SessionProviderProps {
+  session?: Session
   baseUrl?: string
   basePath?: string
-  clientMaxAge?: number
-  keepAlive?: number
+  /**
+   * 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
 }
 
 /**
@@ -191,28 +171,6 @@ export interface SessionProviderOptions {
  * 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#provider)
+ * [Documentation](https://next-auth.js.org/getting-started/client#sessionprovider)
  */
-export type SessionProvider = React.FC<{
-  children: React.ReactNode
-  session?: Session
-  options?: SessionProviderOptions
-}>
-
-/**
- * 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#provider)
- */
-export const Provider: SessionProvider
-
-/** @docs: https://next-auth.js.org/getting-started/client#options */
-export function setOptions(options: SessionProviderOptions): void
-
-/**
- * Alias for `setOptions`
- * @docs: https://next-auth.js.org/getting-started/client#options
- */
-export const options: typeof setOptions
+export const SessionProvider: React.FC<SessionProviderProps>

types/tests/adapters.test.ts

@@ -1,26 +1 @@
-import Adapters from "next-auth/adapters"
-
-// ExpectType TypeORMAdapter["Adapter"]
-Adapters.Default({
-  type: "sqlite",
-  database: ":memory:",
-  synchronize: true,
-})
-
-// ExpectType TypeORMAdapter
-Adapters.TypeORM.Adapter({
-  type: "sqlite",
-  database: ":memory:",
-  synchronize: true,
-})
-
-// ExpectType PrismaAdapter
-Adapters.Prisma.Adapter({
-  prisma: {},
-  modelMapping: {
-    User: "foo",
-    Account: "bar",
-    Session: "session",
-    VerificationRequest: "foo",
-  },
-})
+// TODO:

types/tests/providers.test.ts

@@ -19,12 +19,12 @@ Providers.Email({
   from: "path/from",
 })
 
-// $ExpectType CredentialsConfig<{ username: { label: string; type: string; }; password: { label: string; type: string; }; }>
+// $ExpectType CredentialsConfig<{}>
 Providers.Credentials({
   id: "login",
   name: "account",
   credentials: {
-    username: {
+    user: {
       label: "Password",
       type: "password",
     },
@@ -33,7 +33,7 @@ Providers.Credentials({
       type: "password",
     },
   },
-  authorize: async ({ username, password }) => {
+  authorize: async (credentials) => {
     const user = {
       /* fetched user */
     }
@@ -152,13 +152,6 @@ Providers.Okta({
   domain: "https://foo.auth0.com",
 })
 
-// $ExpectType OAuthConfig<Profile>
-Providers.OneLogin({
-  clientId: "foo123",
-  clientSecret: "bar123",
-  domain: "foo.onelogin.com",
-})
-
 // $ExpectType OAuthConfig<Profile>
 Providers.BattleNet({
   clientId: "foo123",
@@ -264,9 +257,3 @@ Providers.Zoho({
   clientId: "foo123",
   clientSecret: "bar123",
 })
-
-// $ExpectType OAuthConfig<Profile>
-Providers.Freshbooks({
-  clientId: "foo123",
-  clientSecret: "bar123",
-})

types/tests/react.test.ts

@@ -1,4 +1,4 @@
-import * as client from "next-auth/client"
+import * as client from "../react-client"
 import { nextReq } from "./test-helpers"
 
 const clientSession = {
@@ -17,81 +17,67 @@ client.useSession()
 // $ExpectType Promise<Session | null>
 client.getSession({ req: nextReq })
 
-// $ExpectType Promise<Session | null>
-client.session({ req: nextReq })
-
 // $ExpectType Promise<Record<string, ClientSafeProvider> | null>
 client.getProviders()
 
-// $ExpectType Promise<Record<string, ClientSafeProvider> | null>
-client.providers()
-
 // $ExpectType Promise<string | null>
 client.getCsrfToken({ req: nextReq })
 
 // $ExpectType Promise<string | null>
-client.csrfToken({ req: nextReq })
-
-// $ExpectType Promise<string | null>
-client.csrfToken({ ctx: { req: nextReq } })
+client.getCsrfToken({ ctx: { req: nextReq } })
 
 // $ExpectType Promise<undefined>
-client.signin("github", { callbackUrl: "foo" }, { login: "username" })
+client.signIn("github", { callbackUrl: "foo" }, { login: "username" })
 
 // $ExpectType Promise<SignInResponse | undefined>
-client.signin("credentials", { callbackUrl: "foo", redirect: true })
+client.signIn("credentials", { callbackUrl: "foo", redirect: true })
 
 // $ExpectType Promise<SignInResponse | undefined>
-client.signin("credentials", { redirect: false })
+client.signIn("credentials", { redirect: false })
 
 // $ExpectType Promise<SignInResponse | undefined>
-client.signin("email", { callbackUrl: "foo", redirect: false })
+client.signIn("email", { callbackUrl: "foo", redirect: false })
 
 // $ExpectType Promise<SignInResponse | undefined>
-client.signin("email", { callbackUrl: "foo", redirect: true })
+client.signIn("email", { callbackUrl: "foo", redirect: true })
 
 // $ExpectType Promise<undefined>
-client.signout()
+client.signOut()
 
 // $ExpectType Promise<undefined>
-client.signout({ callbackUrl: "https://foo.com/callback", redirect: true })
+client.signOut({ callbackUrl: "https://foo.com/callback", redirect: true })
 
 // $ExpectType Promise<SignOutResponse>
 client.signOut({ callbackUrl: "https://foo.com/callback", redirect: false })
 
 // $ExpectType ReactElement<any, any> | null
-client.Provider({
+client.SessionProvider({
   children: null,
   session: clientSession,
-  options: {
-    baseUrl: "https://foo.com",
-    basePath: "/",
-    clientMaxAge: 1234,
-  },
+  baseUrl: "https://foo.com",
+  basePath: "/",
+  staleTime: 1234,
 })
 
 // $ExpectType ReactElement<any, any> | null
-client.Provider({
+client.SessionProvider({
   children: null,
   session: clientSession,
 })
 
 // $ExpectType ReactElement<any, any> | null
-client.Provider({
+client.SessionProvider({
   children: null,
-  options: {},
 })
 
 // $ExpectType ReactElement<any, any> | null
-client.Provider({
+client.SessionProvider({
   children: null,
   session: {
     expires: "",
   },
-  options: {
-    baseUrl: "https://foo.com",
-    basePath: "/",
-    clientMaxAge: 1234,
-    keepAlive: 4321,
-  },
+  baseUrl: "https://foo.com",
+  basePath: "/",
+  staleTime: 1234,
+  refetchInterval: 4321,
 })

types/tests/server.test.ts

@@ -135,7 +135,6 @@ const allConfig: NextAuthTypes.NextAuthOptions = {
       clientSecret: "123",
     }),
   ],
-  database: "path/to/db",
   debug: true,
   secret: "my secret",
   session: {

types/tsconfig.json

@@ -15,7 +15,7 @@
       "next-auth": ["."],
       "next-auth/providers": ["./providers"],
       "next-auth/adapters": ["./adapters"],
-      "next-auth/client": ["./client"],
+      "next-auth/react": ["./react-client"],
       "next-auth/jwt": ["./jwt"]
     }
   }

www/docs/adapters/dynamodb.md

@@ -13,10 +13,10 @@ You can find the full schema in the table structure section below.
 
 ## Getting Started
 
-1. Install `next-auth` and `@next-auth/dynamodb-adapter`
+1. Install `next-auth` and `@next-auth/dynamodb-adapter@canary`
 
 ```js
-npm install next-auth @next-auth/dynamodb-adapter
+npm install next-auth @next-auth/dynamodb-adapter@canary
 ```
 
 2. Add this adapter to your `pages/api/auth/[...nextauth].js` next-auth configuration object.

www/docs/adapters/fauna.md

@@ -11,10 +11,10 @@ You can find the Fauna schema and seed information in the docs at [next-auth.js.
 
 ## Getting Started
 
-1. Install `next-auth` and `@next-auth/fauna-adapter`
+1. Install `next-auth` and `@next-auth/fauna-adapter@canary`
 
 ```js
-npm install next-auth @next-auth/fauna-adapter
+npm install next-auth @next-auth/fauna-adapter@canary
 ```
 
 2. Add this adapter to your `pages/api/[...nextauth].js` next-auth configuration object.
@@ -49,8 +49,6 @@ export default NextAuth({
 
 ## Schema
 
-Run the following commands inside of the `Shell` tab in the Fauna dashboard to setup the appropriate collections and indexes.
-
 ```javascript
 CreateCollection({ name: "accounts" })
 CreateCollection({ name: "sessions" })
@@ -78,7 +76,7 @@ CreateIndex({
   terms: [{ field: ["data", "email"] }],
 })
 CreateIndex({
-  name: "verification_request_by_token_and_identifier",
+  name: "verification_request_by_token",
   source: Collection("verification_requests"),
   unique: true,
   terms: [{ field: ["data", "token"] }, { field: ["data", "identifier"] }],

www/docs/adapters/firebase.md

@@ -9,13 +9,13 @@ This is the Firebase Adapter for [`next-auth`](https://next-auth.js.org). This p
 
 ## Getting Started
 
-1. Install `next-auth` and `@next-auth/firebase-adapter`
+1. Install `next-auth` and `@next-auth/firebase-adapter@canary`
 
 ```js
-npm install next-auth @next-auth/firebase-adapter
+npm install next-auth @next-auth/firebase-adapter@canary
 ```
 
-2. Add this adapter to your `pages/api/auth/[...nextauth].js` next-auth configuration object.
+2. Add this adapter to your `pages/api/[...nextauth].js` next-auth configuration object.
 
 ```javascript title="pages/api/auth/[...nextauth].js"
 import NextAuth from "next-auth"

www/docs/adapters/models.md

@@ -11,7 +11,6 @@ All table/collection names in the built in models are plural, and all table name
 You can [extend the built in models](/tutorials/typeorm-custom-models) and even [create your own database adapter](/tutorials/creating-a-database-adapter) if you want to use NextAuth.js with a database that is not supported out of the box.
 :::
 
-
 ---
 
 ## User
@@ -30,7 +29,7 @@ If a user first signs in with OAuth then their email address is automatically po
 This provides a way to contact users and for users to maintain access to their account and sign in using email in the event they are unable to sign in with the OAuth provider in future (if email sign in is configured).
 :::
 
-## Account 
+## Account
 
 Table: `accounts`
 
@@ -60,4 +59,4 @@ The Verification Request model is used to store tokens for passwordless sign in
 
 A single User can have multiple open Verification Requests (e.g. to sign in to different devices).
 
-It has been designed to be extendable for other verification purposes in future (e.g. 2FA / short codes).
+It has been designed to be extendable for other verification purposes in future (e.g. 2FA / short codes).

www/docs/adapters/pouchdb.md

@@ -13,10 +13,10 @@ Depending on your architecture you can use PouchDB's http adapter to reach any d
 
 > **Prerequesite**: Your PouchDB instance MUST provide the `pouchdb-find` plugin since it is used internally by the adapter to build and manage indexes
 
-1. Install `next-auth` and `@next-auth/pouchdb-adapter`
+1. Install `next-auth` and `@next-auth/pouchdb-adapter@canary`
 
 ```js
-npm install next-auth @next-auth/pouchdb-adapter
+npm install next-auth @next-auth/pouchdb-adapter@canary
 ```
 
 2. Add this adapter to your `pages/api/auth/[...nextauth].js` next-auth configuration object

www/docs/adapters/prisma-legacy.md

@@ -23,7 +23,7 @@ Configure your NextAuth.js to use the Prisma Adapter:
 ```javascript title="pages/api/auth/[...nextauth].js"
 import NextAuth from "next-auth"
 import Providers from "next-auth/providers"
-import Adapters from "next-auth/adapters"
+import { PrismaLegacyAdapter } from "@next-auth/prisma-legacy-adapter"
 import { PrismaClient } from "@prisma/client"
 
 const prisma = new PrismaClient()
@@ -35,7 +35,7 @@ export default NextAuth({
       clientSecret: process.env.GOOGLE_CLIENT_SECRET,
     }),
   ],
-  adapter: Adapters.Prisma.Adapter({ prisma }),
+  adapter: PrismaLegacyAdapter({ prisma }),
 })
 ```
 
@@ -161,7 +161,7 @@ You can use custom model names by using the `modelMapping` option (shown here wi
 
 ```javascript title="pages/api/auth/[...nextauth].js"
 ...
-adapter: Adapters.Prisma.Adapter({
+adapter: PrismaLegacyAdapter({
   prisma,
   modelMapping: {
     User: 'user',

www/docs/adapters/prisma.md

@@ -11,10 +11,10 @@ You can also use NextAuth.js with the new experimental Adapter for [Prisma](http
 You may have noticed there is a `prisma` and `prisma-legacy` adapter. This is due to historical reasons, but the code has mostly converged so that there is no longer much difference between the two. The legacy adapter, however, does have the ability to rename tables which the newer version does not.
 :::
 
-To use this Adapter, you need to install Prisma Client, Prisma CLI, and the separate `@next-auth/prisma-adapter` package:
+To use this Adapter, you need to install Prisma Client, Prisma CLI, and the separate `@next-auth/prisma-adapter@canary` package:
 
 ```
-npm install @prisma/client @next-auth/prisma-adapter
+npm install @prisma/client @next-auth/prisma-adapter@canary
 npm install prisma --save-dev
 ```
 

www/docs/adapters/typeorm/mongodb.md

@@ -19,4 +19,4 @@ Objects stored in MongoDB use similar datatypes to SQL, with some differences:
 
 4. A sparse index is used on the User `email` property to allow it to be optional, while still enforcing uniqueness if it is specified.
 
-  This is functionally equivalent to the ANSI SQL behaviour for a `unique` but `nullable` property.
+This is functionally equivalent to the ANSI SQL behaviour for a `unique` but `nullable` property.

www/docs/adapters/typeorm/mssql.md

@@ -1,88 +1,88 @@
----
-id: mssql
-title: Microsoft SQL Server
----
-
-Schema for a Microsoft SQL Server (mssql) database.
-
-:::note
-When using a  Microsoft SQL Server database with the default adapter (TypeORM) all properties of type `timestamp` are transformed to `datetime`.
-
-This transform is also applied to any properties of type `timestamp` when using custom models.
-:::
-
-```sql
-CREATE TABLE accounts
-  (
-    id                    int IDENTITY(1,1) NOT NULL,
-    compound_id           varchar(255) NOT NULL,
-    user_id               int NOT NULL,
-    provider_type         varchar(255) NOT NULL,
-    provider_id           varchar(255) NOT NULL,
-    provider_account_id   varchar(255) NOT NULL,
-    refresh_token         text NULL,
-    access_token          text NULL,
-    access_token_expires  datetime NULL,
-    created_at            datetime NOT NULL DEFAULT getdate(),
-    updated_at            datetime NOT NULL DEFAULT getdate()
-  );
-
-CREATE TABLE sessions
-  (
-    id            int IDENTITY(1,1) NOT NULL,
-    user_id       int NOT NULL,
-    expires       datetime NOT NULL,
-    session_token varchar(255) NOT NULL,
-    access_token  varchar(255) NOT NULL,
-    created_at    datetime NOT NULL DEFAULT getdate(),
-    updated_at    datetime NOT NULL DEFAULT getdate()
-  );
-
-CREATE TABLE users
-  (
-    id              int IDENTITY(1,1) NOT NULL,
-    name            varchar(255) NULL,
-    email           varchar(255) NULL,
-    email_verified  datetime NULL,
-    image           varchar(255) NULL,
-    created_at      datetime NOT NULL DEFAULT getdate(),
-    updated_at      datetime NOT NULL DEFAULT getdate()
-  );
-
-CREATE TABLE verification_requests
-  (
-    id          int IDENTITY(1,1) NOT NULL,
-    identifier  varchar(255) NOT NULL,
-    token       varchar(255) NOT NULL,
-    expires     datetime NOT NULL,
-    created_at  datetime NOT NULL DEFAULT getdate(),
-    updated_at  datetime NOT NULL DEFAULT getdate()
-  );
-
-CREATE UNIQUE INDEX compound_id
-  ON accounts(compound_id);
-
-CREATE INDEX provider_account_id
-  ON accounts(provider_account_id);
-
-CREATE INDEX provider_id
-  ON accounts(provider_id);
-
-CREATE INDEX user_id
-  ON accounts(user_id);
-
-CREATE UNIQUE INDEX session_token
-  ON sessions(session_token);
-
-CREATE UNIQUE INDEX access_token
-  ON sessions(access_token);
-
-CREATE UNIQUE INDEX email
-  ON users(email);
-
-CREATE UNIQUE INDEX token
-  ON verification_requests(token);
-```
-
-When using NextAuth.js with SQL Server for the first time, run NextAuth.js once against your database with `?synchronize=true` on the connection string and export the schema that is created.
-:::
+---
+id: mssql
+title: Microsoft SQL Server
+---
+
+Schema for a Microsoft SQL Server (mssql) database.
+
+:::note
+When using a Microsoft SQL Server database with the default adapter (TypeORM) all properties of type `timestamp` are transformed to `datetime`.
+
+This transform is also applied to any properties of type `timestamp` when using custom models.
+:::
+
+```sql
+CREATE TABLE accounts
+  (
+    id                    int IDENTITY(1,1) NOT NULL,
+    compound_id           varchar(255) NOT NULL,
+    user_id               int NOT NULL,
+    provider_type         varchar(255) NOT NULL,
+    provider_id           varchar(255) NOT NULL,
+    provider_account_id   varchar(255) NOT NULL,
+    refresh_token         text NULL,
+    access_token          text NULL,
+    access_token_expires  datetime NULL,
+    created_at            datetime NOT NULL DEFAULT getdate(),
+    updated_at            datetime NOT NULL DEFAULT getdate()
+  );
+
+CREATE TABLE sessions
+  (
+    id            int IDENTITY(1,1) NOT NULL,
+    user_id       int NOT NULL,
+    expires       datetime NOT NULL,
+    session_token varchar(255) NOT NULL,
+    access_token  varchar(255) NOT NULL,
+    created_at    datetime NOT NULL DEFAULT getdate(),
+    updated_at    datetime NOT NULL DEFAULT getdate()
+  );
+
+CREATE TABLE users
+  (
+    id              int IDENTITY(1,1) NOT NULL,
+    name            varchar(255) NULL,
+    email           varchar(255) NULL,
+    email_verified  datetime NULL,
+    image           varchar(255) NULL,
+    created_at      datetime NOT NULL DEFAULT getdate(),
+    updated_at      datetime NOT NULL DEFAULT getdate()
+  );
+
+CREATE TABLE verification_requests
+  (
+    id          int IDENTITY(1,1) NOT NULL,
+    identifier  varchar(255) NOT NULL,
+    token       varchar(255) NOT NULL,
+    expires     datetime NOT NULL,
+    created_at  datetime NOT NULL DEFAULT getdate(),
+    updated_at  datetime NOT NULL DEFAULT getdate()
+  );
+
+CREATE UNIQUE INDEX compound_id
+  ON accounts(compound_id);
+
+CREATE INDEX provider_account_id
+  ON accounts(provider_account_id);
+
+CREATE INDEX provider_id
+  ON accounts(provider_id);
+
+CREATE INDEX user_id
+  ON accounts(user_id);
+
+CREATE UNIQUE INDEX session_token
+  ON sessions(session_token);
+
+CREATE UNIQUE INDEX access_token
+  ON sessions(access_token);
+
+CREATE UNIQUE INDEX email
+  ON users(email);
+
+CREATE UNIQUE INDEX token
+  ON verification_requests(token);
+```
+
+When using NextAuth.js with SQL Server for the first time, run NextAuth.js once against your database with `?synchronize=true` on the connection string and export the schema that is created.
+:::

www/docs/adapters/typeorm/mysql.md

@@ -84,4 +84,4 @@ CREATE UNIQUE INDEX email
 
 CREATE UNIQUE INDEX token
   ON verification_requests(token);
-```
+```

www/docs/configuration/callbacks.md

@@ -44,7 +44,7 @@ callbacks: {
   /**
    * @param  {object} user     User object
    * @param  {object} account  Provider account
-   * @param  {object} profile  Provider profile 
+   * @param  {object} profile  Provider profile
    * @return {boolean|string}  Return `true` to allow sign in
    *                           Return `false` to deny access
    *                           Return `string` to redirect to (eg.: "/unauthorized")
@@ -64,13 +64,13 @@ callbacks: {
 ...
 ```
 
-* When using the **Email Provider** the `signIn()` callback is triggered both when the user makes a **Verification Request** (before they are sent email with a link that will allow them to sign in) and again *after* they activate the link in the sign in email.
+- When using the **Email Provider** the `signIn()` callback is triggered both when the user makes a **Verification Request** (before they are sent email with a link that will allow them to sign in) and again _after_ they activate the link in the sign in email.
+
+  Email accounts do not have profiles in the same way OAuth accounts do. On the first call during email sign in the `profile` object will include a property `verificationRequest: true` to indicate it is being triggered in the verification request flow. When the callback is invoked _after_ a user has clicked on a sign in link, this property will not be present.
 
-  Email accounts do not have profiles in the same way OAuth accounts do. On the first call during email sign in the `profile` object will include a property `verificationRequest: true` to indicate it is being triggered in the verification request flow. When the callback is invoked *after* a user has clicked on a sign in link, this property will not be present.
-  
   You can check for the `verificationRequest` property to avoid sending emails to addresses or domains on a blocklist (or to only explicitly generate them for email address in an allow list).
 
-* When using the **Credentials Provider** the `user` object is the response returned from the `authorize` callback and the `profile` object is the raw body of the `HTTP POST` submission.
+- When using the **Credentials Provider** the `user` object is the response returned from the `authorization` callback and the `profile` object is the raw body of the `HTTP POST` submission.
 
 :::note
 When using NextAuth.js with a database, the User object will be either a user object from the database (including the User ID) if the user has signed in before or a simpler prototype user object (i.e. name, email, image) for users who have not signed in before.
@@ -107,22 +107,21 @@ callbacks: {
 ...
 ```
 
-
 :::note
 The redirect callback may be invoked more than once in the same flow.
 :::
 
 ## JWT callback
 
-This JSON Web Token callback is called whenever a JSON Web Token is created (i.e. at sign 
+This JSON Web Token callback is called whenever a JSON Web Token is created (i.e. at sign
 in) or updated (i.e whenever a session is accessed in the client).
 
 e.g. `/api/auth/signin`, `getSession()`, `useSession()`, `/api/auth/session`
 
-* As with database session expiry times, token expiry time is extended whenever a session is active.
-* The arguments *user*, *account*, *profile* and *isNewUser* are only passed the first time this callback is called on a new session, after the user signs in.
+- As with database session expiry times, token expiry time is extended whenever a session is active.
+- The arguments _user_, _account_, _profile_ and _isNewUser_ are only passed the first time this callback is called on a new session, after the user signs in.
 
-The contents *user*, *account*, *profile* and *isNewUser* will vary depending on the provider and on if you are using a database or not. If you want to pass data such as User ID, OAuth Access Token, etc. to the browser, you can persist it in the token and use the `session()` callback to return it.
+The contents _user_, _account_, _profile_ and _isNewUser_ will vary depending on the provider and on if you are using a database or not. If you want to pass data such as User ID, OAuth Access Token, etc. to the browser, you can persist it in the token and use the `session()` callback to return it.
 
 ```js title="pages/api/auth/[...nextauth].js"
 ...
@@ -167,8 +166,8 @@ The session callback is called whenever a session is checked. By default, only a
 
 e.g. `getSession()`, `useSession()`, `/api/auth/session`
 
-* When using database sessions, the User object is passed as an argument.
-* When using JSON Web Tokens for sessions, the JWT payload is provided instead.
+- When using database sessions, the User object is passed as an argument.
+- When using JSON Web Tokens for sessions, the JWT payload is provided instead.
 
 ```js title="pages/api/auth/[...nextauth].js"
 ...
@@ -177,7 +176,7 @@ callbacks: {
    * @param  {object} session      Session object
    * @param  {object} token        User object    (if using database sessions)
    *                               JSON Web Token (if not using database sessions)
-   * @return {object}              Session that will be returned to the client 
+   * @return {object}              Session that will be returned to the client
    */
   async session(session, token) {
     // Add property to session, like an access_token from a provider.
@@ -188,8 +187,6 @@ callbacks: {
 ...
 ```
 
-If you're using TypeScript, you will want to [augment the session type](/getting-started/typescript#module-augmentation).
-
 :::tip
 When using JSON Web Tokens the `jwt()` callback is invoked before the `session()` callback, so anything you add to the
 JSON Web Token will be immediately available in the session callback, like for example an `access_token` from a provider.

www/docs/configuration/databases.md

@@ -26,24 +26,31 @@ To learn more about databases in NextAuth.js and how they are used, check out [d
 
 ## How to use a database
 
-You can specify database credentials as as a connection string or a [TypeORM configuration](https://github.com/typeorm/typeorm/blob/master/docs/using-ormconfig.md) object.
+## How to use a database
 
-The following approaches are exactly equivalent:
+You can specify database credentials as a [TypeORM configuration](https://github.com/typeorm/typeorm/blob/master/docs/using-ormconfig.md) object or connection string:
 
-```js
-database: "mysql://nextauth:password@127.0.0.1:3306/database_name"
+```js title="pages/api/auth/[...nextauth].js"
+import TypeORMAdapter from "@next-auth/typeorm-legacy-adapter"
+import NextAuth from "next-auth"
+
+export default NextAuth({
+  adapter: TypeORMAdapter(
+    "mysql://nextauth:password@127.0.0.1:3306/database_name"
+  ),
+  // or...
+  adapter: TypeORMAdapter({
+    type: "mysql",
+    host: "127.0.0.1",
+    port: 3306,
+    username: "nextauth",
+    password: "password",
+    database: "database_name",
+  }),
+})
 ```
 
-```js
-database: {
-  type: 'mysql',
-  host: '127.0.0.1',
-  port: 3306,
-  username: 'nextauth',
-  password: 'password',
-  database: 'database_name'
-}
-```
+Both approaches are exactly equivalent:
 
 :::tip
 You can pass in any valid [TypeORM configuration option](https://github.com/typeorm/typeorm/blob/master/docs/using-ormconfig.md).
@@ -51,22 +58,23 @@ You can pass in any valid [TypeORM configuration option](https://github.com/type
 _e.g. To set a prefix for all table names you can use the **entityPrefix** option as connection string parameter:_
 
 ```js
-"mysql://nextauth:password@127.0.0.1:3306/database_name?entityPrefix=nextauth_"
-
+adapter: TypeORMAdapter(
+  "mysql://nextauth:password@127.0.0.1:3306/database_name?entityPrefix=nextauth_"
+)
 ```
 
 _…or as a database configuration object:_
 
 ```js
-database: {
-  type: 'mysql',
-  host: '127.0.0.1',
+adapter: TypeORMAdapter({
+  type: "mysql",
+  host: "127.0.0.1",
   port: 3306,
-  username: 'nextauth',
-  password: 'password',
-  database: 'database_name',
-  entityPrefix: 'nextauth_'
-}
+  username: "nextauth",
+  password: "password",
+  database: "database_name",
+  entityPrefix: "nextauth_",
+})
 ```
 
 :::
@@ -87,19 +95,21 @@ _If you are running SQLite, MongoDB or a Document database you can skip this ste
 Alternatively, you can also have your database configured automatically using the `synchronize: true` option:
 
 ```js
-database: "mysql://nextauth:password@127.0.0.1:3306/database_name?synchronize=true"
+adapter: TypeORMAdapter(
+  "mysql://nextauth:password@127.0.0.1:3306/database_name?synchronize=true"
+)
 ```
 
 ```js
-database: {
-  type: 'mysql',
-  host: '127.0.0.1',
+adapter: TypeORMAdapter({
+  type: "mysql",
+  host: "127.0.0.1",
   port: 3306,
-  username: 'nextauth',
-  password: 'password',
-  database: 'database_name',
-  synchronize: true
-}
+  username: "nextauth",
+  password: "password",
+  database: "database_name",
+  synchronize: true,
+})
 ```
 
 :::warning
@@ -128,7 +138,9 @@ Install module:
 #### Example
 
 ```js
-database: "mysql://username:password@127.0.0.1:3306/database_name"
+adapter: TypeORMAdapter(
+  "mysql://username:password@127.0.0.1:3306/database_name"
+)
 ```
 
 ### MariaDB
@@ -139,7 +151,9 @@ Install module:
 #### Example
 
 ```js
-database: "mariadb://username:password@127.0.0.1:3306/database_name"
+adapter: TypeORMAdapter(
+  "mariadb://username:password@127.0.0.1:3306/database_name"
+)
 ```
 
 ### Postgres / CockroachDB
@@ -152,30 +166,34 @@ Install module:
 PostgresDB
 
 ```js
-database: "postgres://username:password@127.0.0.1:5432/database_name"
+adapter: TypeORMAdapter(
+  "postgres://username:password@127.0.0.1:5432/database_name"
+)
 ```
 
 CockroachDB
 
 ```js
-database: "postgres://username:password@127.0.0.1:26257/database_name"
+adapter: TypeORMAdapter(
+  "postgres://username:password@127.0.0.1:26257/database_name"
+)
 ```
 
 If the node is using Self-signed cert
 
 ```js
-database: {
-    type: "cockroachdb",
-    host: process.env.DATABASE_HOST,
-    port: 26257,
-    username: process.env.DATABASE_USER,
-    password: process.env.DATABASE_PASSWORD,
-    database: process.env.DATABASE_NAME,
-    ssl: {
-      rejectUnauthorized: false,
-      ca: fs.readFileSync('/path/to/server-certificates/root.crt').toString()
-    },
+adapter: TypeORMAdapter({
+  type: "cockroachdb",
+  host: process.env.DATABASE_HOST,
+  port: 26257,
+  username: process.env.DATABASE_USER,
+  password: process.env.DATABASE_PASSWORD,
+  database: process.env.DATABASE_NAME,
+  ssl: {
+    rejectUnauthorized: false,
+    ca: fs.readFileSync("/path/to/server-certificates/root.crt").toString(),
   },
+})
 ```
 
 Read more: [https://node-postgres.com/features/ssl](https://node-postgres.com/features/ssl)
@@ -190,7 +208,7 @@ Install module:
 #### Example
 
 ```js
-database: "mssql://sa:password@localhost:1433/database_name"
+adapter: TypeORMAdapter("mssql://sa:password@localhost:1433/database_name")
 ```
 
 ### MongoDB
@@ -201,7 +219,9 @@ Install module:
 #### Example
 
 ```js
-database: "mongodb://username:password@127.0.0.1:3306/database_name"
+adapter: TypeORMAdapter(
+  "mongodb://username:password@127.0.0.1:3306/database_name"
+)
 ```
 
 ### SQLite
@@ -214,7 +234,7 @@ Install module:
 #### Example
 
 ```js
-database: "sqlite://localhost/:memory:"
+adapter: TypeORMAdapter("sqlite://localhost/:memory:")
 ```
 
 ## Other databases

www/docs/configuration/options.md

@@ -123,34 +123,27 @@ jwt: {
   // Defaults to NextAuth.js secret if not explicitly specified.
   // This is used to generate the actual signingKey and produces a warning
   // message if not defined explicitly.
-  // You can generate a secret be using `openssl rand -base64 64`
-  secret: 'INp8IvdIyeMcoGAgFGoA61DdBglwwSqnXJZkgz8PSnw',
+  // secret: 'INp8IvdIyeMcoGAgFGoA61DdBglwwSqnXJZkgz8PSnw',
   // You can generate a signing key using `jose newkey -s 512 -t oct -a HS512`
   // This gives you direct knowledge of the key used to sign the token so you can use it
   // to authenticate indirectly (eg. to a database driver)
-  signingKey: {
-     kty: "oct",
-     kid: "Dl893BEV-iVE-x9EC52TDmlJUgGm9oZ99_ZL025Hc5Q",
-     alg: "HS512",
-     k: "K7QqRmJOKRK2qcCKV_pi9PSBv3XP0fpTu30TP8xn4w01xR3ZMZM38yL2DnTVPVw6e4yhdh0jtoah-i4c_pZagA"
-  },
+  // signingKey: {"kty":"oct","kid":"Dl893BEV-iVE-x9EC52TDmlJUgGm9oZ99_ZL025Hc5Q","alg":"HS512","k":"K7QqRmJOKRK2qcCKV_pi9PSBv3XP0fpTu30TP8xn4w01xR3ZMZM38yL2DnTVPVw6e4yhdh0jtoah-i4c_pZagA"},
   // If you chose something other than the default algorithm for the signingKey (HS512)
   // you also need to configure the algorithm
-  verificationOptions: {
-     algorithms: ['HS256']
-  },
+  // verificationOptions: {
+  //    algorithms: ['HS256']
+  // },
   // Set to true to use encryption. Defaults to false (signing only).
-  encryption: true,
-  // You can generate an encryption key by using `npx node-jose-tools newkey -s 256 -t oct -a A256GCM -u enc`
-  encryptionKey: "",
-  // decryptionKey: encryptionKey,
-  decryptionOptions: {
-     algorithms: ['A256GCM']
-  },
+  // encryption: true,
+  // encryptionKey: "",
+  // decryptionKey = encryptionKey,
+  // decryptionOptions = {
+  //    algorithms: ['A256GCM']
+  // },
   // You can define your own encode/decode functions for signing and encryption
   // if you want to override the default behaviour.
-  async encode({ secret, token, maxAge }) {},
-  async decode({ secret, token, maxAge }) {},
+  // async encode({ secret, token, maxAge }) {},
+  // async decode({ secret, token, maxAge }) {},
 }
 ```
 
@@ -236,7 +229,7 @@ pages: {
   signOut: '/auth/signout',
   error: '/auth/error', // Error code passed in query string as ?error=
   verifyRequest: '/auth/verify-request', // (used for check email message)
-  newUser: '/auth/new-user' // New users will be directed here on first sign in (leave the property out if not of interest)
+  newUser: null // If set, new users will be directed here on first sign in
 }
 ```
 

www/docs/configuration/pages.md

@@ -16,15 +16,17 @@ To add a custom login page, you can use the `pages` option:
     signOut: '/auth/signout',
     error: '/auth/error', // Error code passed in query string as ?error=
     verifyRequest: '/auth/verify-request', // (used for check email message)
-    newUser: '/auth/new-user' // New users will be directed here on first sign in (leave the property out if not of interest)
+    newUser: null // If set, new users will be directed here on first sign in
   }
 ...
 ```
 
 ## Error codes
+
 We purposefully restrict the returned error codes for increased security.
 
 ### Error page
+
 The following errors are passed as error query parameters to the default or overriden error page:
 
 - **Configuration**: There is a problem with the server configuration. Check if your [options](/configuration/options#options) is correct.
@@ -35,6 +37,7 @@ The following errors are passed as error query parameters to the default or over
 Example: `/auth/error?error=Configuration`
 
 ### Sign-in page
+
 The following errors are passed as error query parameters to the default or overriden sign-in page:
 
 - **OAuthSignin**: Error in constructing an authorization URL ([1](https://github.com/nextauthjs/next-auth/blob/457952bb5abf08b09861b0e5da403080cd5525be/src/server/lib/signin/oauth.js), [2](https://github.com/nextauthjs/next-auth/blob/main/src/server/lib/oauth/pkce-handler.js), [3](https://github.com/nextauthjs/next-auth/blob/main/src/server/lib/oauth/state-handler.js)),
@@ -60,14 +63,16 @@ By default, the built-in pages will follow the system theme, utilizing the [`pre
 In order to get the available authentication providers and the URLs to use for them, you can make a request to the API endpoint `/api/auth/providers`:
 
 ```jsx title="pages/auth/signin.js"
-import { getProviders, signIn } from 'next-auth/client'
+import { getProviders, signIn } from "next-auth/react"
 
 export default function SignIn({ providers }) {
   return (
     <>
-      {Object.values(providers).map(provider => (
+      {Object.values(providers).map((provider) => (
         <div key={provider.name}>
-          <button onClick={() => signIn(provider.id)}>Sign in with {provider.name}</button>
+          <button onClick={() => signIn(provider.id)}>
+            Sign in with {provider.name}
+          </button>
         </div>
       ))}
     </>
@@ -75,10 +80,10 @@ export default function SignIn({ providers }) {
 }
 
 // This is the recommended way for Next.js 9.3 or newer
-export async function getServerSideProps(context){
+export async function getServerSideProps(context) {
   const providers = await getProviders()
   return {
-    props: { providers }
+    props: { providers },
   }
 }
 
@@ -97,26 +102,26 @@ SignIn.getInitialProps = async () => {
 If you create a custom sign in form for email sign in, you will need to submit both fields for the **email** address and **csrfToken** from **/api/auth/csrf** in a POST request to **/api/auth/signin/email**.
 
 ```jsx title="pages/auth/email-signin.js"
-import { getCsrfToken } from 'next-auth/client'
+import { getCsrfToken } from "next-auth/react"
 
 export default function SignIn({ csrfToken }) {
   return (
-    <form method='post' action='/api/auth/signin/email'>
-      <input name='csrfToken' type='hidden' defaultValue={csrfToken}/>
+    <form method="post" action="/api/auth/signin/email">
+      <input name="csrfToken" type="hidden" defaultValue={csrfToken} />
       <label>
         Email address
-        <input type='email' id='email' name='email'/>
+        <input type="email" id="email" name="email" />
       </label>
-      <button type='submit'>Sign in with Email</button>
+      <button type="submit">Sign in with Email</button>
     </form>
   )
 }
 
 // This is the recommended way for Next.js 9.3 or newer
-export async function getServerSideProps(context){
+export async function getServerSideProps(context) {
   const csrfToken = await getCsrfToken(context)
   return {
-    props: { csrfToken }
+    props: { csrfToken },
   }
 }
 
@@ -133,7 +138,7 @@ SignIn.getInitialProps = async (context) => {
 You can also use the `signIn()` function which will handle obtaining the CSRF token for you:
 
 ```js
-signIn('email', { email: 'jsmith@example.com' })
+signIn("email", { email: "jsmith@example.com" })
 ```
 
 ### Credentials Sign in
@@ -141,21 +146,21 @@ signIn('email', { email: 'jsmith@example.com' })
 If you create a sign in form for credentials based authentication, you will need to pass a **csrfToken** from **/api/auth/csrf** in a POST request to **/api/auth/callback/credentials**.
 
 ```jsx title="pages/auth/credentials-signin.js"
-import { getCsrfToken } from 'next-auth/client'
+import { getCsrfToken } from "next-auth/react"
 
 export default function SignIn({ csrfToken }) {
   return (
-    <form method='post' action='/api/auth/callback/credentials'>
-      <input name='csrfToken' type='hidden' defaultValue={csrfToken}/>
+    <form method="post" action="/api/auth/callback/credentials">
+      <input name="csrfToken" type="hidden" defaultValue={csrfToken} />
       <label>
         Username
-        <input name='username' type='text'/>
+        <input name="username" type="text" />
       </label>
       <label>
         Password
-        <input name='password' type='password'/>
+        <input name="password" type="password" />
       </label>
-      <button type='submit'>Sign in</button>
+      <button type="submit">Sign in</button>
     </form>
   )
 }
@@ -164,8 +169,8 @@ export default function SignIn({ csrfToken }) {
 export async function getServerSideProps(context) {
   return {
     props: {
-      csrfToken: await getCsrfToken(context)
-    }
+      csrfToken: await getCsrfToken(context),
+    },
   }
 }
 
@@ -182,7 +187,7 @@ SignIn.getInitialProps = async (context) => {
 You can also use the `signIn()` function which will handle obtaining the CSRF token for you:
 
 ```js
-signIn('credentials', { username: 'jsmith', password: '1234' })
+signIn("credentials", { username: "jsmith", password: "1234" })
 ```
 
 :::tip

www/docs/configuration/providers.md

@@ -187,7 +187,7 @@ You only need to add two changes:
 2. Add provider documentation: [`www/docs/providers/{provider}.md`](https://github.com/nextauthjs/next-auth/tree/main/www/docs/providers)
 3. Add it to our [provider types](https://github.com/nextauthjs/next-auth/blob/main/types/providers.d.ts) (for TS projects)<br />
    • you just need to add your new provider name to [this list](https://github.com/nextauthjs/next-auth/blob/main/types/providers.d.ts#L56-L97)<br />
-   • in case your new provider accepts some custom options, you can [add them here](https://github.com/nextauthjs/next-auth/blob/main/types/providers.d.ts#L48-L53)
+   • in case you new provider accepts some custom options, you can [add them here](https://github.com/nextauthjs/next-auth/blob/main/types/providers.d.ts#L48-L53)
 
 That's it! 🎉 Others will be able to discover this provider much more easily now!
 
@@ -260,14 +260,14 @@ providers: [
       // that is false/null if the credentials are invalid.
       // e.g. return { id: 1, name: 'J Smith', email: 'jsmith@example.com' }
       // You can also use the `req` object to obtain additional parameters
-      // (i.e., the request IP address) 
+      // (i.e., the request IP address)
       const res = await fetch("/your/endpoint", {
         method: 'POST',
         body: JSON.stringify(credentials),
         headers: { "Content-Type": "application/json" }
       })
       const user = await res.json()
-      
+
       // If no error and we have user data, return it
       if (res.ok && user) {
         return user
@@ -288,10 +288,10 @@ The Credentials provider can only be used if JSON Web Tokens are enabled for ses
 
 ### Options
 
-|    Name     |                    Description                    |               Type                    | Required |
+|    Name     |                    Description                    |                 Type                  | Required |
 | :---------: | :-----------------------------------------------: | :-----------------------------------: | :------: |
-|     id      |            Unique ID for the provider             |             `string`                  |   Yes    |
-|    name     |         Descriptive name for the provider         |             `string`                  |   Yes    |
-|    type     |   Type of provider, in this case `credentials`    |         `"credentials"`               |   Yes    |
-| credentials |          The credentials to sign-in with          |             `Object`                  |   Yes    |
+|     id      |            Unique ID for the provider             |               `string`                |   Yes    |
+|    name     |         Descriptive name for the provider         |               `string`                |   Yes    |
+|    type     |   Type of provider, in this case `credentials`    |            `"credentials"`            |   Yes    |
+| credentials |          The credentials to sign-in with          |               `Object`                |   Yes    |
 |  authorize  | Callback to execute once user is to be authorized | `(credentials, req) => Promise<User>` |   Yes    |

www/docs/errors.md

@@ -15,9 +15,9 @@ If you are seeing any of these errors in the console, something is wrong.
 
 These errors are returned from the client. As the client is [Universal JavaScript (or "Isomorphic JavaScript")](https://en.wikipedia.org/wiki/Isomorphic_JavaScript) it can be run on the client or server, so these errors can occur in both in the terminal and in the browser console.
 
-#### CLIENT_USE_SESSION_ERROR
+#### CLIENT_SESSION_ERROR
 
-This error occurs when the `useSession()` React Hook has a problem fetching session data.
+This error occurs when the `SessionProvider` Context has a problem fetching session data.
 
 #### CLIENT_FETCH_ERROR
 
@@ -87,20 +87,20 @@ https://next-auth.js.org/errors#jwt_session_error JWKKeySupport: the key does no
 
 The algorithm used for generating your key isn't listed as supported. You can generate a HS512 key using
 
-````
+```
   jose newkey -s 512 -t oct -a HS512
-````
+```
 
 If you are unable to use an HS512 key (for example to interoperate with other services) you can define what is supported using
 
-````
+```
   jwt: {
     signingKey: {"kty":"oct","kid":"--","alg":"HS256","k":"--"},
     verificationOptions: {
       algorithms: ["HS256"]
     }
   }
-````
+```
 
 #### SESSION_ERROR
 

www/docs/faq.md

@@ -98,7 +98,7 @@ If you are deploying directly to a particular cloud platform you may also want t
 
 Less serious or edge case issues (e.g. queries about compatibility with optional RFC specifications) can be raised as public issues on GitHub.
 
-If you discover what you think may be a potentially serious security problem, please contact a core team member via a private channel (e.g. via email to me@iaincollins.com or info@balazsorban.com and yo@ndo.dev) or raise a public issue requesting someone get in touch with you via whatever means you prefer for more details.
+If you discover what you think may be a potentially serious security problem, please contact a core team member via a private channel (e.g. via email to me@iaincollins.com) or raise a public issue requesting someone get in touch with you via whatever means you prefer for more details.
 
 ### What is the disclosure policy for NextAuth.js?
 
@@ -202,7 +202,7 @@ JSON Web Tokens can be used for session tokens, but are also used for lots of ot
 
   Avoid storing any data in a token that might be problematic if it were to be decrypted in the future.
 
-- If you do not explicitly specify a secret for NextAuth.js, existing sessions will be invalidated any time your NextAuth.js configuration changes, as NextAuth.js will default to an auto-generated secret.
+- If you do not explicitly specify a secret for for NextAuth.js, existing sessions will be invalidated any time your NextAuth.js configuration changes, as NextAuth.js will default to an auto-generated secret.
 
   If using JSON Web Token you should at least specify a secret and ideally configure public/private keys.