feat(core): use named params in callbacks (#2173)

Some of our user-facing callbacks come with a bunch of parameters, and it is not always the case that a user needs all of them. Picking out certain parameters from the end of the list would require the user to define params that they wouldn't even need.

Therefore this PR changes such callbacks so the user can only pick the necessary parameters.

This comes with the bonus of better TS support on the `session` and `signIn` callbacks, where some parameters historically could have been different types.

In the `session` callback, the second param could have been `token` (when using JWT sessions) or `user` (when using DB persisted sessions). Now they are separate parameters.

In the `signIn` callback, we now separate `profile` (OAuth), `email` (Email) and `credentials` (Credentials) provider params.

BREAKING CHANGE:

The `callbacks` method signatures are changing the following way:

```diff
- signIn(user, account, profileOrEmailOrCredentials)
+ signIn({ user, account, profile, email, credentials })
```
```diff
- redirect(url, baseUrl)
+ redirect({ url, baseUrl })
```
```diff
- session(session, tokenOrUser)
+ session({ session, token, user })
```
```diff
- jwt(token, user, account, OAuthProfile, isNewUser)
+ jwt({ token, user, account, profile, isNewUser })
```

> NOTE: You only need to define the params that you actually need (no more need  for `_` params.)

This way, if you only need `token` and `account` in the `jwt` callback, you can write:

```js
jwt({ token, account }) {
  if(account) {
    token.accessToken = account.access_token
  }
  return token
}
```

.github/CODEOWNERS

@@ -1 +1,2 @@
 /types/ @balazsorban44 @lluia
+/__tests__/ @lluia

.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 in your project's root folder:
+
+```sh
+npx envinfo --system --binaries --browsers --npmPackages "next,next-auth,react"
+```
+
+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,19 +11,17 @@ 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
       - name: Coverage
@@ -31,46 +29,23 @@ jobs:
         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
@@ -62,8 +64,3 @@ app/yarn.lock
 
 # Tests
 /coverage
-
-# v4
-packages
-apps
-docs/providers.json

.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

@@ -3,7 +3,7 @@
 // https://nextjs.org/docs/basic-features/supported-browsers-features
 
 module.exports = {
-  presets: [["@babel/preset-env", { targets: { node: "10.13" } }]],
+  presets: [["@babel/preset-env", { targets: { node: "12" } }]],
   plugins: [
     "@babel/plugin-proposal-optional-catch-binding",
     "@babel/plugin-transform-runtime",
@@ -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/jest.config.js

@@ -8,4 +8,5 @@ module.exports = {
   collectCoverageFrom: ["!client/__tests__/**"],
   testMatch: ["**/*.test.js"],
   coverageDirectory: "../coverage",
+  testEnvironment: "jsdom",
 }

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",
@@ -53,8 +51,8 @@
     "providers.d.ts",
     "adapters.js",
     "adapters.d.ts",
-    "client.js",
-    "client.d.ts",
+    "react.js",
+    "react.d.ts",
     "errors.js",
     "errors.d.ts",
     "jwt.js",
@@ -63,70 +61,66 @@
   ],
   "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",
+    "@babel/runtime": "^7.14.6",
+    "futoin-hkdf": "^1.3.3",
     "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"
+    "pkce-challenge": "^2.2.0",
+    "preact": "^10.5.13",
+    "preact-render-to-string": "^5.1.19"
   },
   "peerDependencies": {
-    "react": "^16.13.1 || ^17",
-    "react-dom": "^16.13.1 || ^17"
+    "nodemailer": "^6.6.2",
+    "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.6.2"
+  },
+  "peerDependenciesMeta": {
+    "nodemailer": {
+      "optional": true
+    }
   },
   "devDependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.9.6",
-    "@babel/plugin-proposal-optional-catch-binding": "^7.14.2",
-    "@babel/plugin-transform-runtime": "^7.13.15",
-    "@babel/preset-env": "^7.9.6",
-    "@babel/preset-react": "^7.13.13",
-    "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.6",
+    "@babel/cli": "^7.14.5",
+    "@babel/core": "^7.14.6",
+    "@babel/plugin-proposal-optional-catch-binding": "^7.14.5",
+    "@babel/plugin-transform-runtime": "^7.14.5",
+    "@babel/preset-env": "^7.14.7",
+    "@babel/preset-react": "^7.14.5",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
     "@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",
-    "autoprefixer": "^9.7.6",
-    "babel-jest": "^26.6.3",
+    "@types/react": "^17.0.11",
+    "@typescript-eslint/eslint-plugin": "^4.28.0",
+    "@typescript-eslint/parser": "^4.28.0",
+    "autoprefixer": "^10.2.6",
+    "babel-jest": "^27.0.5",
     "babel-preset-preact": "^2.0.0",
-    "conventional-changelog-conventionalcommits": "4.4.0",
-    "cssnano": "^4.1.10",
-    "dotenv": "^8.2.0",
-    "dtslint": "^4.0.8",
-    "eslint": "^7.19.0",
-    "eslint-config-prettier": "^8.2.0",
-    "eslint-config-standard-with-typescript": "^19.0.1",
-    "eslint-plugin-import": "^2.22.1",
+    "conventional-changelog-conventionalcommits": "4.6.0",
+    "cssnano": "^5.0.6",
+    "dtslint": "^4.1.0",
+    "eslint": "^7.29.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-standard-with-typescript": "^20.0.0",
+    "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-jest": "^24.3.6",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.3.1",
-    "eslint-plugin-standard": "^5.0.0",
+    "eslint-plugin-promise": "^5.1.0",
+    "fs-extra": "^10.0.0",
     "husky": "^6.0.0",
-    "jest": "^26.6.3",
-    "msw": "^0.28.2",
+    "jest": "^27.0.5",
+    "msw": "^0.30.0",
     "next": "^11.0.1",
-    "postcss-cli": "^7.1.1",
-    "postcss-nested": "^4.2.1",
-    "prettier": "^2.2.1",
-    "pretty-quick": "^3.1.0",
+    "postcss-cli": "^8.3.1",
+    "postcss-nested": "^5.0.5",
+    "prettier": "^2.3.1",
+    "pretty-quick": "^3.1.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "typescript": "^4.1.3",
+    "typescript": "^4.3.4",
     "whatwg-fetch": "^3.6.2"
   },
   "prettier": {

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()
@@ -30,6 +28,9 @@ test("fetches the session once and re-uses it for different consumers", async ()
 
   render(<ProviderFlow />)
 
+  expect(screen.getByTestId("session-consumer-1")).toHaveTextContent("loading")
+  expect(screen.getByTestId("session-consumer-2")).toHaveTextContent("loading")
+
   await waitFor(() => {
     expect(sessionRouteCall).toHaveBeenCalledTimes(1)
 
@@ -40,13 +41,36 @@ test("fetches the session once and re-uses it for different consumers", async ()
   })
 })
 
+test("when there's an existing session, it won't initialize as loading", async () => {
+  const sessionRouteCall = jest.fn()
+
+  server.use(
+    rest.get("/api/auth/session", (req, res, ctx) => {
+      sessionRouteCall()
+      res(ctx.status(200), ctx.json(mockSession))
+    })
+  )
+
+  render(<ProviderFlow session={mockSession} />)
+
+  expect(await screen.findByTestId("session-consumer-1")).not.toHaveTextContent(
+    "loading"
+  )
+
+  expect(screen.getByTestId("session-consumer-2")).not.toHaveTextContent(
+    "loading"
+  )
+
+  expect(sessionRouteCall).not.toHaveBeenCalled()
+})
+
 function ProviderFlow({ options = {} }) {
   return (
     <>
-      <Provider options={options}>
+      <SessionProvider {...options}>
         <SessionConsumer />
         <SessionConsumer testId="2" />
-      </Provider>
+      </SessionProvider>
     </>
   )
 }
@@ -54,11 +78,9 @@ function ProviderFlow({ options = {} }) {
 function SessionConsumer({ testId = 1 }) {
   const [session, loading] = useSession()
 
-  if (loading) return <span>loading</span>
-
   return (
     <div data-testid={`session-consumer-${testId}`}>
-      {JSON.stringify(session)}
+      {loading ? "loading" : JSON.stringify(session)}
     </div>
   )
 }

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/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/callback-handler.js

@@ -16,7 +16,7 @@ import adapterErrorHandler from "../../adapters/error-handler"
  * @param {import("types").Session} sessionToken
  * @param {import("types").Profile} profile
  * @param {import("types").Account} account
- * @param {import("types/internals").AppOptions} options
+ * @param {import("types/internals").InternalOptions} options
  */
 export default async function callbackHandler(
   sessionToken,

src/server/lib/callback-url-handler.js

@@ -1,32 +1,42 @@
-import * as cookie from '../lib/cookie'
+// @ts-check
+import * as cookie from "../lib/cookie"
 
 /**
  * Get callback URL based on query param / cookie + validation,
  * and add it to `req.options.callbackUrl`.
- * @note: `req.options` must already be defined when called.
+ * @type {import("types/internals").NextAuthApiHandler}
  */
-export default async function callbackUrlHandler (req, res) {
+export default async function callbackUrlHandler(req, res) {
   const { query } = req
   const { body } = req
-  const { cookies, baseUrl, defaultCallbackUrl, callbacks } = req.options
+  const { cookies, baseUrl, callbacks } = req.options
 
-  // Handle preserving and validating callback URLs
-  // If no defaultCallbackUrl option specified, default to the homepage for the site
-  let callbackUrl = defaultCallbackUrl || baseUrl
+  let callbackUrl = baseUrl
   // Try reading callbackUrlParamValue from request body (form submission) then from query param (get request)
   const callbackUrlParamValue = body.callbackUrl || query.callbackUrl || null
   const callbackUrlCookieValue = req.cookies[cookies.callbackUrl.name] || null
   if (callbackUrlParamValue) {
     // If callbackUrl form field or query parameter is passed try to use it if allowed
-    callbackUrl = await callbacks.redirect(callbackUrlParamValue, baseUrl)
+    callbackUrl = await callbacks.redirect({
+      url: callbackUrlParamValue,
+      baseUrl,
+    })
   } else if (callbackUrlCookieValue) {
     // If no callbackUrl specified, try using the value from the cookie if allowed
-    callbackUrl = await callbacks.redirect(callbackUrlCookieValue, baseUrl)
+    callbackUrl = await callbacks.redirect({
+      url: callbackUrlCookieValue,
+      baseUrl,
+    })
   }
 
-  // Save callback URL in a cookie so that can be used for subsequent requests in signin/signout/callback flow
-  if (callbackUrl && (callbackUrl !== callbackUrlCookieValue)) {
-    cookie.set(res, cookies.callbackUrl.name, callbackUrl, cookies.callbackUrl.options)
+  // Save callback URL in a cookie so that it can be used for subsequent requests in signin/signout/callback flow
+  if (callbackUrl && callbackUrl !== callbackUrlCookieValue) {
+    cookie.set(
+      res,
+      cookies.callbackUrl.name,
+      callbackUrl,
+      cookies.callbackUrl.options
+    )
   }
 
   req.options.callbackUrl = callbackUrl

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

@@ -1,63 +1,24 @@
-/**
- * Use the signIn callback to control if a user is allowed to sign in or not.
- *
- * This is triggered before sign in flow completes, so the user profile may be
- * a user object (with an ID) or it may be just their name and email address,
- * depending on the sign in flow and if they have an account already.
- *
- * When using email sign in, this method is triggered both when the user
- * requests to sign in and again when they activate the link in the sign in
- * email.
- *
- * @param  {object} profile          User profile (e.g. user id, name, email)
- * @param  {object} account          Account used to sign in (e.g. OAuth account)
- * @param  {object} metadata         Provider specific metadata (e.g. OAuth Profile)
- * @return {Promise<boolean|never>}  Return `true` (or a modified JWT) to allow sign in
- *                                   Return `false` to deny access
- */
-export async function signIn() {
+// @ts-check
+
+/** @type {import("types").CallbacksOptions["signIn"]} */
+export function signIn() {
   return true
 }
 
-/**
- * Redirect is called anytime the user is redirected on signin or signout.
- * By default, for security, only Callback URLs on the same URL as the site
- * are allowed, you can use this callback to customise that behaviour.
- *
- * @param  {string} url      URL provided as callback URL by the client
- * @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
+/** @type {import("types").CallbacksOptions["redirect"]} */
+export function redirect({ url, baseUrl }) {
+  if (url.startsWith(baseUrl)) {
+    return url
+  }
   return baseUrl
 }
 
-/**
- * The session callback is called whenever a session is checked.
- * e.g. `getSession()`, `useSession()`, `/api/auth/session` (etc)
- *
- * @param  {object} session  Session object
- * @param  {object} token    JSON Web Token (if enabled)
- * @return {Promise<object>} Session that will be returned to the client
- */
-export async function session(session) {
+/** @type {import("types").CallbacksOptions["session"]} */
+export function session({ session }) {
   return session
 }
 
-/**
- * This callback is called whenever a JSON Web Token is created / updated.
- * e.g. On sign in, `getSession()`, `useSession()`, `/api/auth/session` (etc)
- *
- * On initial sign in, the raw OAuthProfile is passed if the user is signing in
- * with an OAuth provider. It is not avalible on subsequent calls. You can
- * take advantage of this to persist additional data you need to in the JWT.
- *
- * @param  {object} token         Decrypted JSON Web Token
- * @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) {
+/** @type {import("types").CallbacksOptions["jwt"]} */
+export 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/email.js

@@ -5,7 +5,7 @@ import adapterErrorHandler from "../../../adapters/error-handler"
  *
  * @param {string} email
  * @param {import("types/providers").EmailConfig} provider
- * @param {import("types/internals").AppOptions} options
+ * @param {import("types/internals").InternalOptions} options
  * @returns
  */
 export default async function email(email, provider, options) {

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

@@ -6,8 +6,7 @@ import adapterErrorHandler from "../../adapters/error-handler"
 
 /**
  * Handle callbacks from login services
- * @param {import("types/internals").NextAuthRequest} req
- * @param {import("types/internals").NextAuthResponse} res
+ * @type {import("types/internals").NextAuthApiHandler}
  */
 export default async function callback(req, res) {
   const {
@@ -72,12 +71,12 @@ export default async function callback(req, res) {
         }
 
         try {
-          const signInCallbackResponse = await callbacks.signIn(
-            userOrProfile,
+          const signInCallbackResponse = await callbacks.signIn({
+            user: userOrProfile,
             account,
-            OAuthProfile
-          )
-          if (signInCallbackResponse === false) {
+            profile: OAuthProfile,
+          })
+          if (!signInCallbackResponse) {
             return res.redirect(
               `${baseUrl}${basePath}/error?error=AccessDenied`
             )
@@ -85,16 +84,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
@@ -106,22 +100,22 @@ export default async function callback(req, res) {
         )
 
         if (useJwtSession) {
-          const defaultJwtPayload = {
+          const defaultToken = {
             name: user.name,
             email: user.email,
             picture: user.image,
             sub: user.id?.toString(),
           }
-          const jwtPayload = await callbacks.jwt(
-            defaultJwtPayload,
+          const token = await callbacks.jwt({
+            token: defaultToken,
             user,
             account,
-            OAuthProfile,
-            isNewUser
-          )
+            profile: OAuthProfile,
+            isNewUser,
+          })
 
           // Sign and encrypt token
-          const newEncodedJwt = await jwt.encode({ ...jwt, token: jwtPayload })
+          const newEncodedJwt = await jwt.encode({ ...jwt, token })
 
           // Set cookie expiry date
           const cookieExpires = new Date()
@@ -221,27 +215,22 @@ export default async function callback(req, res) {
 
       // Check if user is allowed to sign in
       try {
-        const signInCallbackResponse = await callbacks.signIn(
-          profile,
+        const signInCallbackResponse = await callbacks.signIn({
+          user: profile,
           account,
-          { email }
-        )
-        if (signInCallbackResponse === false) {
+          email: { email },
+        })
+        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
@@ -253,22 +242,22 @@ export default async function callback(req, res) {
       )
 
       if (useJwtSession) {
-        const defaultJwtPayload = {
+        const defaultToken = {
           name: user.name,
           email: user.email,
           picture: user.image,
           sub: user.id?.toString(),
         }
-        const jwtPayload = await callbacks.jwt(
-          defaultJwtPayload,
+        const token = await callbacks.jwt({
+          token: defaultToken,
           user,
           account,
           profile,
-          isNewUser
-        )
+          isNewUser,
+        })
 
         // Sign and encrypt token
-        const newEncodedJwt = await jwt.encode({ ...jwt, token: jwtPayload })
+        const newEncodedJwt = await jwt.encode({ ...jwt, token })
 
         // Set cookie expiry date
         const cookieExpires = new Date()
@@ -336,7 +325,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,59 +336,53 @@ 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
     const account = { id: provider.id, type: "credentials" }
 
     try {
-      const signInCallbackResponse = await callbacks.signIn(
+      const signInCallbackResponse = await callbacks.signIn({
         user,
         account,
-        credentials
-      )
-      if (signInCallbackResponse === false) {
+        credentials,
+      })
+      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 = {
+    const defaultToken = {
       name: user.name,
       email: user.email,
       picture: user.image,
       sub: user.id?.toString(),
     }
-    const jwtPayload = await callbacks.jwt(
-      defaultJwtPayload,
+    const token = await callbacks.jwt({
+      token: defaultToken,
       user,
       account,
-      userObjectReturnedFromAuthorizeHandler,
-      false
-    )
+      profile: userObjectReturnedFromAuthorizeHandler,
+      isNewUser: false,
+    })
 
     // Sign and encrypt token
-    const newEncodedJwt = await jwt.encode({ ...jwt, token: jwtPayload })
+    const newEncodedJwt = await jwt.encode({ ...jwt, token })
 
     // Set cookie expiry date
     const cookieExpires = new Date()

src/server/routes/session.js

@@ -22,7 +22,7 @@ export default async function session(req, res) {
   if (useJwtSession) {
     try {
       // Decrypt and verify token
-      const decodedJwt = await jwt.decode({ ...jwt, token: sessionToken })
+      const decodedToken = await jwt.decode({ ...jwt, token: sessionToken })
 
       // Generate new session expiry date
       const sessionExpiresDate = new Date()
@@ -33,38 +33,35 @@ export default async function session(req, res) {
 
       // By default, only exposes a limited subset of information to the client
       // as needed for presentation purposes (e.g. "you are logged in as…").
-      const defaultSessionPayload = {
+      const defaultSession = {
         user: {
-          name: decodedJwt.name || null,
-          email: decodedJwt.email || null,
-          image: decodedJwt.picture || null,
+          name: decodedToken.name || null,
+          email: decodedToken.email || null,
+          image: decodedToken.picture || null,
         },
         expires: sessionExpires,
       }
 
       // Pass Session and JSON Web Token through to the session callback
-      const jwtPayload = await callbacks.jwt(decodedJwt)
-      const sessionPayload = await callbacks.session(
-        defaultSessionPayload,
-        jwtPayload
-      )
+      const token = await callbacks.jwt({ token: decodedToken })
+      const session = await callbacks.session({
+        session: defaultSession,
+        token,
+      })
 
       // Return session payload as response
-      response = sessionPayload
+      response = session
 
       // Refresh JWT expiry by re-signing it, with an updated expiry date
-      const newEncodedJwt = await jwt.encode({ ...jwt, token: jwtPayload })
+      const newToken = await jwt.encode({ ...jwt, token })
 
       // Set cookie, to also update expiry date on cookie
-      cookie.set(res, cookies.sessionToken.name, newEncodedJwt, {
+      cookie.set(res, cookies.sessionToken.name, newToken, {
         expires: sessionExpires,
         ...cookies.sessionToken.options,
       })
 
-      await dispatchEvent(events.session, {
-        session: sessionPayload,
-        jwt: jwtPayload,
-      })
+      await dispatchEvent(events.session, { session, token })
     } catch (error) {
       // If JWT not verifiable, make sure the cookie for it is removed and return empty object
       logger.error("JWT_SESSION_ERROR", error)
@@ -88,7 +85,7 @@ export default async function session(req, res) {
 
         // By default, only exposes a limited subset of information to the client
         // as needed for presentation purposes (e.g. "you are logged in as…").
-        const defaultSessionPayload = {
+        const defaultSession = {
           user: {
             name: user.name,
             email: user.email,
@@ -99,10 +96,10 @@ export default async function session(req, res) {
         }
 
         // Pass Session through to the session callback
-        const sessionPayload = await callbacks.session(
-          defaultSessionPayload,
-          user
-        )
+        const sessionPayload = await callbacks.session({
+          session: defaultSession,
+          user,
+        })
 
         // Return session payload as response
         response = sessionPayload

src/server/routes/signin.js

@@ -40,19 +40,16 @@ 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 user = (await getUserByEmail(email)) || { email }
     const account = { id: provider.id, type: "email", providerAccountId: email }
 
     // Check if user is allowed to sign in
     try {
-      const signInCallbackResponse = await callbacks.signIn(profile, account, {
-        email,
-        verificationRequest: true,
+      const signInCallbackResponse = await callbacks.signIn({
+        user,
+        account,
+        email: { email, verificationRequest: true },
       })
       if (signInCallbackResponse === false) {
         return res.redirect(`${baseUrl}${basePath}/error?error=AccessDenied`)
@@ -60,14 +57,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

@@ -1,39 +1,7 @@
-import { AppOptions } from "./internals"
+import { InternalOptions } 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.
@@ -152,5 +120,5 @@ export type Adapter<
   client: C,
   options?: O
 ) => {
-  getAdapter(appOptions: AppOptions): Promise<AdapterInstance<U, P, S>>
+  getAdapter(appOptions: InternalOptions): Promise<AdapterInstance<U, P, S>>
 }

types/index.d.ts

@@ -2,10 +2,9 @@
 
 /// <reference types="node" />
 
-import { ConnectionOptions } from "typeorm"
 import { Adapter } from "./adapters"
 import { JWTOptions, JWT } from "./jwt"
-import { AppProviders } from "./providers"
+import { AppProviders, Credentials } from "./providers"
 import {
   Awaitable,
   NextApiRequest,
@@ -29,14 +28,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 +73,7 @@ export interface NextAuthOptions {
    *     signOut: '/auth/signout',
    *     error: '/auth/error',
    *     verifyRequest: '/auth/verify-request',
-   *     newUser: '/auth/new-user'
+   *     newUser: null
    *   }
    * ```
    *
@@ -98,7 +89,7 @@ export interface NextAuthOptions {
    *
    * [Documentation](https://next-auth.js.org/configuration/options#callbacks) | [Callbacks documentation](https://next-auth.js.org/configuration/callbacks)
    */
-  callbacks?: CallbacksOptions
+  callbacks?: Partial<CallbacksOptions>
   /**
    * Events are asynchronous functions that do not return a response, they are useful for audit logging.
    * You can specify a handler for any of these events below - e.g. for debugging or to create an audit log.
@@ -113,18 +104,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>
@@ -212,7 +196,7 @@ export interface NextAuthOptions {
    *
    * [Documentation](https://next-auth.js.org/configuration/options#cookies) | [Usage example](https://next-auth.js.org/configuration/options#example)
    */
-  cookies?: CookiesOptions
+  cookies?: Partial<CookiesOptions>
 }
 
 /**
@@ -283,7 +267,29 @@ export interface CallbacksOptions<
    *
    * [Documentation](https://next-auth.js.org/configuration/callbacks#sign-in-callback)
    */
-  signIn?(user: User, account: A, profile: P): Awaitable<string | boolean>
+  signIn(params: {
+    user: User
+    account: A
+    /**
+     * If OAuth provider is used, it contains the full
+     * OAuth profile returned by your provider.
+     */
+    profile: P & Record<string, unknown>
+    /**
+     * If Email provider is used, it contains the email, and optionally on the first call a
+     * `verificationRequest: true` property 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.
+     */
+    email: {
+      email: string | null
+      verificationRequest?: boolean
+    }
+    /** If Credentials provider is used, it contains the user credentials */
+    credentials: Credentials
+  }): Awaitable<string | boolean>
   /**
    * This callback is called anytime the user is redirected to a callback URL (e.g. on signin or signout).
    * By default only URLs on the same URL as the site are allowed,
@@ -291,12 +297,19 @@ export interface CallbacksOptions<
    *
    * [Documentation](https://next-auth.js.org/configuration/callbacks#redirect-callback)
    */
-  redirect?(url: string, baseUrl: string): Awaitable<string>
+  redirect(params: {
+    /** URL provided as callback URL by the client */
+    url: string
+    /** Default base URL of site (can be used as fallback) */
+    baseUrl: string
+  }): Awaitable<string>
   /**
    * This callback is called whenever a session is checked.
    * (Eg.: invoking the `/api/session` endpoint, using `useSession` or `getSession`)
    *
-   * - ⚠ By default, only a subset of the token is returned for increased security.
+   * ⚠ By default, only a subset (email, name, imgage)
+   * of the token is returned for increased security.
+   *
    * If you want to make something available you added to the token through the `jwt` callback,
    * you have to explicitely forward it here to make it available to the client.
    *
@@ -306,7 +319,11 @@ export interface CallbacksOptions<
    * [`getSession`](https://next-auth.js.org/getting-started/client#getsession) |
    *
    */
-  session?(session: Session, userOrToken: JWT | User): Awaitable<Session>
+  session(params: {
+    session: Session
+    user: User
+    token: JWT
+  }): Awaitable<Session>
   /**
    * This 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).
@@ -314,18 +331,18 @@ export interface CallbacksOptions<
    * where you can control what should be returned to the client.
    * Anything else will be kept from your front-end.
    *
-   * - ⚠ By default the JWT is signed, but not encrypted.
+   * ⚠ By default the JWT is signed, but not encrypted.
    *
    * [Documentation](https://next-auth.js.org/configuration/callbacks#jwt-callback) |
    * [`session` callback](https://next-auth.js.org/configuration/callbacks#session-callback)
    */
-  jwt?(
-    token: JWT,
-    user?: User,
-    account?: A,
-    profile?: P,
+  jwt(params: {
+    token: JWT
+    user?: User
+    account?: A
+    profile?: P
     isNewUser?: boolean
-  ): Awaitable<JWT>
+  }): Awaitable<JWT>
 }
 
 /** [Documentation](https://next-auth.js.org/configuration/options#cookies) */
@@ -343,10 +360,10 @@ export interface CookieOption {
 
 /** [Documentation](https://next-auth.js.org/configuration/options#cookies) */
 export interface CookiesOptions {
-  sessionToken?: CookieOption
-  callbackUrl?: CookieOption
-  csrfToken?: CookieOption
-  pkceCodeVerifier?: CookieOption
+  sessionToken: CookieOption
+  callbackUrl: CookieOption
+  csrfToken: CookieOption
+  pkceCodeVerifier: CookieOption
 }
 
 /** [Documentation](https://next-auth.js.org/configuration/events) */
@@ -428,11 +445,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/index.d.ts

@@ -1,18 +1,18 @@
-import { NextApiRequest, NextApiResponse } from "./utils"
-import { LoggerInstance, NextAuthOptions, SessionOptions, Theme } from ".."
+import { Awaitable, NextApiRequest, NextApiResponse } from "./utils"
+import {
+  CallbacksOptions,
+  CookiesOptions,
+  EventCallbacks,
+  LoggerInstance,
+  PagesOptions,
+  SessionOptions,
+  Theme,
+} from ".."
 import { AppProvider } from "../providers"
+import { JWTOptions } from "next-auth/jwt"
+import { Adapter } from "next-auth/adapters"
 
-/** Options that are the same both in internal and user provided options. */
-export type NextAuthSharedOptions =
-  | "pages"
-  | "jwt"
-  | "events"
-  | "callbacks"
-  | "cookies"
-  | "adapter"
-
-export interface AppOptions
-  extends Required<Pick<NextAuthOptions, NextAuthSharedOptions>> {
+export interface InternalOptions {
   providers: AppProvider[]
   baseUrl: string
   basePath: string
@@ -42,10 +42,22 @@ export interface AppOptions
   debug: boolean
   logger: LoggerInstance
   session: Required<SessionOptions>
+  pages: PagesOptions
+  jwt: JWTOptions
+  events: EventCallbacks
+  adapter: ReturnType<Adapter>
+  callbacks: CallbacksOptions
+  cookies: CookiesOptions
+  callbackUrl: string
 }
 
 export interface NextAuthRequest extends NextApiRequest {
-  options: AppOptions
+  options: InternalOptions
 }
 
 export type NextAuthResponse = NextApiResponse
+
+export type NextAuthApiHandler = (
+  req: NextAuthRequest,
+  res: NextAuthResponse
+) => Awaitable<void>

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"
@@ -88,7 +87,6 @@ export type OAuthProviderType =
   | "Naver"
   | "Netlify"
   | "Okta"
-  | "OneLogin"
   | "Osso"
   | "Reddit"
   | "Salesforce"
@@ -117,19 +115,35 @@ interface CredentialInput {
   placeholder?: string
 }
 
-interface CredentialsConfig<C extends Record<string, CredentialInput> = {}>
+export type Credentials = Record<string, CredentialInput>
+
+interface CredentialsConfig<C extends Credentials = {}>
   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 +155,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 +0,0 @@
-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",
-  },
-})

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 "next-auth/react"
 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

@@ -4,7 +4,7 @@ import NextAuth, * as NextAuthTypes from "next-auth"
 import { IncomingMessage, ServerResponse } from "http"
 import { Socket } from "net"
 import { NextApiRequest, NextApiResponse } from "internals/utils"
-import { AppOptions } from "internals"
+import { InternalOptions } from "internals"
 
 const req: NextApiRequest = Object.assign(new IncomingMessage(new Socket()), {
   query: {},
@@ -62,7 +62,7 @@ const exampleVerificationRequest = {
 
 const MyAdapter: Adapter<Record<string, unknown>> = () => {
   return {
-    async getAdapter(appOptions: AppOptions) {
+    async getAdapter(appOptions: InternalOptions) {
       return {
         async createUser(profile) {
           return exampleUser
@@ -135,7 +135,6 @@ const allConfig: NextAuthTypes.NextAuthOptions = {
       clientSecret: "123",
     }),
   ],
-  database: "path/to/db",
   debug: true,
   secret: "my secret",
   session: {
@@ -154,16 +153,16 @@ const allConfig: NextAuthTypes.NextAuthOptions = {
   },
   pages: pageOptions,
   callbacks: {
-    async signIn(user, account, profile) {
+    async signIn({ user, account, email, credentials, profile }) {
       return true
     },
-    async redirect(url, baseUrl) {
+    async redirect({ url, baseUrl }) {
       return "path/to/foo"
     },
-    async session(session, userOrToken) {
-      return { ...session }
+    async session({ session, user, token }) {
+      return session
     },
-    async jwt(token, user, account, profile, isNewUser) {
+    async jwt({ token, user, account, profile, isNewUser }) {
       return token
     },
   },

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/overview.md

@@ -15,6 +15,7 @@ There you can find the following adapters:
 - [`fauna`](./fauna)
 - [`dynamodb`](./dynamodb)
 - [`firebase`](./firebase)
+- [`pouchdb`](./pouchdb)
 
 ## Custom Adapter
 

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);
-```
+```