chore: add OpenCollective link to FUNDING.yml

* (docs) initial issue template forms as per #2271

* (typo) fix grammar and typo

* (forms) make the requested changes

* (chore) delete the old .md files

* (forms) fix type key

.github/FUNDING.yml

@@ -1,3 +1,4 @@
 # 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

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

.github/ISSUE_TEMPLATE/bug_report.yaml

@@ -0,0 +1,91 @@
+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

@@ -1,39 +0,0 @@
----
-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

@@ -0,0 +1,68 @@
+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

@@ -1,32 +0,0 @@
----
-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

@@ -0,0 +1,62 @@
+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

@@ -1,36 +0,0 @@
----
-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

@@ -0,0 +1,58 @@
+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 Flow
+name: Release
 
 on:
   push:
@@ -11,32 +11,66 @@ on:
 
 jobs:
   test:
-    name: Tests
+    name: Test
     runs-on: ubuntu-latest
     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: Run tests
-        run: npm test
       - name: Build
         run: npm run build
-  release:
-    name: Release
-    needs: test
+      - name: Run tests
+        run: npm test -- --coverage --verbose && npm run test:types
+      - name: Coverage
+        uses: codecov/codecov-action@v1
+        with:
+          directory: ./coverage
+          fail_ci_if_error: false
+  release-branch:
+    name: Publish branch
     runs-on: ubuntu-latest
+    needs: test
+    if: ${{ github.event_name == 'push' }}
+    environment: Production
     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: Release
+      - name: Publish to npm and GitHub
         run: npx semantic-release@17
         env:
-          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
-          NPM_TOKEN: ${{secrets.NPM_TOKEN}}
+          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 }}

.gitignore

@@ -58,4 +58,7 @@ app/yarn.lock
 /_work
 
 # Prisma migrations
-/prisma/migrations
+/prisma/migrations
+
+# Tests
+/coverage

CONTRIBUTING.md

@@ -11,43 +11,49 @@ Please raise any significant new functionality or breaking change an issue for d
 ## For contributors
 
 Anyone can be a contributor. Either you found a typo, or you have an awesome feature request you could implement, we encourage you to create a Pull Request.
+
 ### Pull Requests
 
-* The latest changes are always in `main`, so please make your Pull Request against that branch.
-* Pull Requests should be raised for any change
-* Pull Requests need approval of a [core contributor](https://next-auth.js.org/contributors#core-team) before merging
-* We use ESLint/Prettier for linting/formatting, so please run `npm run lint:fix` before committing to make resolving conflicts easier (VSCode users, check out [this ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and [this Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) to fix lint and formatting issues in development)
-* We encourage you to test your changes, and if you have the opportunity, please make those tests part of the Pull Request
-* If you add new functionality, please provide the corresponding documentation as well and make it part of the Pull Request
+- The latest changes are always in `main`, so please make your Pull Request against that branch.
+- Pull Requests should be raised for any change
+- Pull Requests need approval of a [core contributor](https://next-auth.js.org/contributors#core-team) before merging
+- We use ESLint/Prettier for linting/formatting, so please run `npm run lint:fix` before committing to make resolving conflicts easier (VSCode users, check out [this ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and [this Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) to fix lint and formatting issues in development)
+- We encourage you to test your changes, and if you have the opportunity, please make those tests part of the Pull Request
+- If you add new functionality, please provide the corresponding documentation as well and make it part of the Pull Request
 
 ### Setting up local environment
 
-A quick guide on how to setup *next-auth* locally to work on it and test out any changes:
+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
 git clone git@github.com:nextauthjs/next-auth.git
 cd next-auth
 ```
 
-2. Install packages:
+2. Install packages, set up the dev application:
+
 ```sh
-npm i && npm run dev:setup
+npm run dev:setup
 ```
 
 3. Populate `.env.local`:
-   
-    Copy `app/.env.local.example` to `app/.env.local`, and add your env variables for each provider you want to test.
+
+   Copy `app/.env.local.example` to `app/.env.local`, and add your env variables for each provider you want to test.
 
 > NOTE: You can add any environment variables to .env.local that you would like to use in your dev app.
 > You can find the next-auth config under`app/pages/api/auth/[...nextauth].js`.
 
 1. Start the dev application/server:
+
 ```sh
 npm run dev
 ```
 
-Your dev application will be available on ```http://localhost:3000```
+Your dev application will be available on `http://localhost:3000`
 
 That's it! 🎉
 
@@ -64,6 +70,7 @@ When running `npm run dev`, you start a Next.js dev server on `http://localhost:
 #### Providers
 
 If you think your custom provider might be useful to others, we encourage you to open a PR and add it to the built-in list so others can discover it much more easily! You only need to add two changes:
+
 1. Add your config: [`src/providers/{provider}.js`](https://github.com/nextauthjs/next-auth/tree/main/src/providers) (Make sure you use a named default export, like `export default function YourProvider`!)
 2. Add provider documentation: [`www/docs/providers/{provider}.md`](https://github.com/nextauthjs/next-auth/tree/main/www/docs/providers)
 
@@ -73,40 +80,27 @@ You can look at the existing built-in providers for inspiration.
 
 #### Databases
 
-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.
-
+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.
 #### 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.
 
 When accepting Pull Requests, make sure the following:
 
-* Use "Squash and merge"
-* Make sure you merge contributor PRs into `main`
-* Rewrite the commit message to conform to the `Conventional Commits` style. Check the "Recommended Scopes" section for further advice.
-* Optionally link issues the PR will resolve (You can add "close" in front of the issue numbers to close the issues automatically, when the PR is merged. `semantic-release` will also comment back to connected issues and PRs, notifying the users that a feature is added/bug fixed, etc.)
+- Use "Squash and merge"
+- Make sure you merge contributor PRs into `main`
+- Rewrite the commit message to conform to the `Conventional Commits` style. Check the "Recommended Scopes" section for further advice.
+- Optionally link issues the PR will resolve (You can add "close" in front of the issue numbers to close the issues automatically, when the PR is merged. `semantic-release` will also comment back to connected issues and PRs, notifying the users that a feature is added/bug fixed, etc.)
 
 ### Recommended Scopes
 
 A typical conventional commit looks like this:
+
 ```
 type(scope): title
 
@@ -121,9 +115,8 @@ Some recommended scopes are:
 - **adapter** - Adapter related changes. (eg.: "feat(adapter): add X provider", "docs(provider): fix typo in X documentation"
 - **db** - Database related changes. (eg.: "feat(db): add X database", "docs(db): fix typo in X documentation"
 - **deps** - Adding/removing/updating a dependency (eg.: "chore(deps): add X")
-  
-> NOTE: If you are not sure which scope to use, you can simply ignore it. (eg.: "feat: add something"). Adding the correct type already helps a lot when analyzing the commit messages.
 
+> NOTE: If you are not sure which scope to use, you can simply ignore it. (eg.: "feat: add something"). Adding the correct type already helps a lot when analyzing the commit messages.
 
 ### Skipping a release
 

app/.env.local.example

@@ -23,8 +23,6 @@ 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/footer.js

@@ -1,17 +1,29 @@
-import Link from 'next/link'
-import styles from './footer.module.css'
-import { version } from 'package.json'
+import Link from "next/link"
+import styles from "./footer.module.css"
+import packageJSON 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>{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>{packageJSON.version}</em>
+        </li>
       </ul>
     </footer>
   )

app/package.json

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

config/jest.config.js

@@ -1,8 +1,11 @@
+/** @type {import('@jest/types').Config.InitialOptions} */
 module.exports = {
   transform: {
     "\\.js$": ["babel-jest", { configFile: "./config/babel.config.js" }],
   },
-  roots: ["../src"],
-  setupFilesAfterEnv: ["./jest-setup.js"],
+  rootDir: "../src",
+  setupFilesAfterEnv: ["../config/jest-setup.js"],
+  collectCoverageFrom: ["!client/__tests__/**"],
   testMatch: ["**/*.test.js"],
+  coverageDirectory: "../coverage",
 }

config/version-pr.js

@@ -0,0 +1,17 @@
+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

@@ -32,7 +32,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 run build:css && cd app && npm i",
+    "dev:setup": "npm i && 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,7 +42,8 @@
     "test:types": "dtslint types --onlyTestTsNext",
     "prepublishOnly": "npm run build",
     "lint": "eslint .",
-    "lint:fix": "eslint . --fix"
+    "lint:fix": "eslint . --fix",
+    "version:pr": "node ./config/version-pr"
   },
   "files": [
     "dist",
@@ -93,13 +94,10 @@
     "@babel/plugin-transform-runtime": "^7.13.15",
     "@babel/preset-env": "^7.9.6",
     "@babel/preset-react": "^7.13.13",
-    "@semantic-release/commit-analyzer": "^8.0.1",
-    "@semantic-release/github": "^7.2.0",
-    "@semantic-release/npm": "7.0.8",
-    "@semantic-release/release-notes-generator": "^9.0.1",
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^13.1.9",
+    "@types/nodemailer": "^6.4.2",
     "@types/react": "^17.0.0",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
     "@typescript-eslint/parser": "^4.22.0",
@@ -121,13 +119,13 @@
     "husky": "^6.0.0",
     "jest": "^26.6.3",
     "msw": "^0.28.2",
-    "next": "^10.0.5",
+    "next": "^11.0.1",
     "postcss-cli": "^7.1.1",
     "postcss-nested": "^4.2.1",
     "prettier": "^2.2.1",
     "pretty-quick": "^3.1.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "typescript": "^4.1.3",
     "whatwg-fetch": "^3.6.2"
   },

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

@@ -0,0 +1,64 @@
+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"
+
+beforeAll(() => {
+  server.listen()
+})
+
+afterEach(() => {
+  jest.clearAllMocks()
+  server.resetHandlers()
+})
+
+afterAll(() => {
+  server.close()
+})
+
+test("fetches the session once and re-uses it for different consumers", 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 />)
+
+  await waitFor(() => {
+    expect(sessionRouteCall).toHaveBeenCalledTimes(1)
+
+    const session1 = screen.getByTestId("session-consumer-1").textContent
+    const session2 = screen.getByTestId("session-consumer-2").textContent
+
+    expect(session1).toEqual(session2)
+  })
+})
+
+function ProviderFlow({ options = {} }) {
+  return (
+    <>
+      <Provider options={options}>
+        <SessionConsumer />
+        <SessionConsumer testId="2" />
+      </Provider>
+    </>
+  )
+}
+
+function SessionConsumer({ testId = 1 }) {
+  const [session, loading] = useSession()
+
+  if (loading) return <span>loading</span>
+
+  return (
+    <div data-testid={`session-consumer-${testId}`}>
+      {JSON.stringify(session)}
+    </div>
+  )
+}

src/client/__tests__/csrf.test.js

@@ -0,0 +1,105 @@
+import { useState } from "react"
+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 { rest } from "msw"
+
+jest.mock("../../lib/logger", () => ({
+  __esModule: true,
+  default: {
+    warn: jest.fn(),
+    debug: jest.fn(),
+    error: jest.fn(),
+  },
+  proxyLogger(logger) {
+    return logger
+  },
+}))
+
+beforeAll(() => {
+  server.listen()
+})
+
+afterEach(() => {
+  server.resetHandlers()
+  jest.clearAllMocks()
+})
+
+afterAll(() => {
+  server.close()
+})
+
+test("returns the Cross Site Request Forgery Token (CSRF Token) required to make POST requests", async () => {
+  render(<CSRFFlow />)
+
+  userEvent.click(screen.getByRole("button"))
+
+  await waitFor(() => {
+    expect(screen.getByTestId("csrf-result").textContent).toEqual(
+      mockCSRFToken.csrfToken
+    )
+  })
+})
+
+test("when there's no CSRF token returned, it'll reflect that", async () => {
+  server.use(
+    rest.get("/api/auth/csrf", (req, res, ctx) =>
+      res(
+        ctx.status(200),
+        ctx.json({
+          ...mockCSRFToken,
+          csrfToken: null,
+        })
+      )
+    )
+  )
+
+  render(<CSRFFlow />)
+
+  userEvent.click(screen.getByRole("button"))
+
+  await waitFor(() => {
+    expect(screen.getByTestId("csrf-result").textContent).toBe("null-response")
+  })
+})
+
+test("when the fetch fails it'll throw a client fetch error", async () => {
+  server.use(
+    rest.get("/api/auth/csrf", (req, res, ctx) =>
+      res(ctx.status(500), ctx.text("some error happened"))
+    )
+  )
+
+  render(<CSRFFlow />)
+
+  userEvent.click(screen.getByRole("button"))
+
+  await waitFor(() => {
+    expect(logger.error).toHaveBeenCalledTimes(1)
+    expect(logger.error).toBeCalledWith(
+      "CLIENT_FETCH_ERROR",
+      "csrf",
+      new SyntaxError("Unexpected token s in JSON at position 0")
+    )
+  })
+})
+
+function CSRFFlow() {
+  const [response, setResponse] = useState()
+
+  async function handleCSRF() {
+    const result = await getCsrfToken()
+    setResponse(result)
+  }
+
+  return (
+    <>
+      <p data-testid="csrf-result">
+        {response === null ? "null-response" : response || "no response"}
+      </p>
+      <button onClick={handleCSRF}>Get CSRF</button>
+    </>
+  )
+}

src/client/__tests__/helpers/mocks.js

@@ -3,6 +3,7 @@ import { rest } from "msw"
 import { randomBytes } from "crypto"
 
 export const mockSession = {
+  ok: true,
   user: {
     image: null,
     name: "John",
@@ -12,6 +13,7 @@ export const mockSession = {
 }
 
 export const mockProviders = {
+  ok: true,
   github: {
     id: "github",
     name: "Github",
@@ -34,6 +36,7 @@ export const mockProviders = {
 }
 
 export const mockCSRFToken = {
+  ok: true,
   csrfToken: randomBytes(32).toString("hex"),
 }
 

src/client/__tests__/providers.test.js

@@ -0,0 +1,85 @@
+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 logger from "../../lib/logger"
+import { rest } from "msw"
+
+jest.mock("../../lib/logger", () => ({
+  __esModule: true,
+  default: {
+    warn: jest.fn(),
+    debug: jest.fn(),
+    error: jest.fn(),
+  },
+  proxyLogger(logger) {
+    return logger
+  },
+}))
+
+beforeAll(() => {
+  server.listen()
+})
+
+afterEach(() => {
+  server.resetHandlers()
+  jest.clearAllMocks()
+})
+
+afterAll(() => {
+  server.close()
+})
+
+test("when called it'll return the currently configured providers for sign in", async () => {
+  render(<ProvidersFlow />)
+
+  userEvent.click(screen.getByRole("button"))
+
+  await waitFor(() => {
+    expect(screen.getByTestId("providers-result").textContent).toEqual(
+      JSON.stringify(mockProviders)
+    )
+  })
+})
+
+test("when failing to fetch the providers, it'll log the error", async () => {
+  server.use(
+    rest.get("/api/auth/providers", (req, res, ctx) =>
+      res(ctx.status(500), ctx.text("some error happened"))
+    )
+  )
+
+  render(<ProvidersFlow />)
+
+  userEvent.click(screen.getByRole("button"))
+
+  await waitFor(() => {
+    expect(logger.error).toHaveBeenCalledTimes(1)
+    expect(logger.error).toBeCalledWith(
+      "CLIENT_FETCH_ERROR",
+      "providers",
+      new SyntaxError("Unexpected token s in JSON at position 0")
+    )
+  })
+})
+
+function ProvidersFlow() {
+  const [response, setResponse] = useState()
+
+  async function handleGerProviders() {
+    const result = await getProviders()
+    setResponse(result)
+  }
+
+  return (
+    <>
+      <p data-testid="providers-result">
+        {response === null
+          ? "null-response"
+          : JSON.stringify(response) || "no response"}
+      </p>
+      <button onClick={handleGerProviders}>Get Providers</button>
+    </>
+  )
+}

src/client/__tests__/session.test.js

@@ -1,10 +1,10 @@
 import { render, screen, waitFor } from "@testing-library/react"
 import { rest } from "msw"
-import { server, mockSession } from "./mocks"
+import { server, mockSession } from "./helpers/mocks"
 import logger from "../../lib/logger"
 import { useState, useEffect } from "react"
 import { getSession } from ".."
-import { getBroadcastEvents } from "./utils"
+import { getBroadcastEvents } from "./helpers/utils"
 
 jest.mock("../../lib/logger", () => ({
   __esModule: true,
@@ -27,10 +27,12 @@ beforeEach(() => {
 
 afterEach(() => {
   server.resetHandlers()
-  jest.restoreAllMocks()
+  jest.clearAllMocks()
 })
 
-afterAll(() => server.close())
+afterAll(() => {
+  server.close()
+})
 
 test("if it can fetch the session, it should store it in `localStorage`", async () => {
   render(<SessionFlow />)
@@ -81,7 +83,7 @@ function SessionFlow() {
   useEffect(() => {
     async function fetchUserSession() {
       try {
-        const result = await getSession({})
+        const result = await getSession()
         setSession(result)
       } catch (e) {
         console.error(e)
@@ -90,8 +92,7 @@ function SessionFlow() {
     fetchUserSession()
   }, [])
 
-  if (session) {
-    return <pre>{JSON.stringify(session, null, 2)}</pre>
-  }
+  if (session) return <pre>{JSON.stringify(session, null, 2)}</pre>
+
   return <p>No session</p>
 }

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

@@ -7,7 +7,7 @@ import {
   mockCredentialsResponse,
   mockEmailResponse,
   mockGithubResponse,
-} from "./mocks"
+} from "./helpers/mocks"
 import { signIn } from ".."
 import { rest } from "msw"
 
@@ -36,7 +36,7 @@ beforeAll(() => {
 })
 
 beforeEach(() => {
-  jest.resetAllMocks()
+  jest.clearAllMocks()
   server.resetHandlers()
 })
 
@@ -284,7 +284,7 @@ function SignInFlow({
       <p data-testid="signin-result">
         {response ? JSON.stringify(response) : "no response"}
       </p>
-      <button onClick={() => handleSignIn()}>Sign in</button>
+      <button onClick={handleSignIn}>Sign in</button>
     </>
   )
 }

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

@@ -1,10 +1,10 @@
 import { useState } from "react"
 import userEvent from "@testing-library/user-event"
 import { render, screen, waitFor } from "@testing-library/react"
-import { server, mockSignOutResponse } from "./mocks"
+import { server, mockSignOutResponse } from "./helpers/mocks"
 import { signOut } from ".."
 import { rest } from "msw"
-import { getBroadcastEvents } from "./utils"
+import { getBroadcastEvents } from "./helpers/utils"
 
 const { location } = window
 
@@ -24,7 +24,7 @@ beforeEach(() => {
 })
 
 afterEach(() => {
-  jest.resetAllMocks()
+  jest.clearAllMocks()
   server.resetHandlers()
 })
 
@@ -113,7 +113,7 @@ test("will broadcast the signout event to other tabs", async () => {
 function SignOutFlow({ callbackUrl, redirect = true }) {
   const [response, setResponse] = useState(null)
 
-  async function setSignOutRes() {
+  async function handleSignOut() {
     const result = await signOut({ callbackUrl, redirect })
     setResponse(result)
   }
@@ -123,7 +123,7 @@ function SignOutFlow({ callbackUrl, redirect = true }) {
       <p data-testid="signout-result">
         {response ? JSON.stringify(response) : "no response"}
       </p>
-      <button onClick={() => setSignOutRes()}>Sign out</button>
+      <button onClick={handleSignOut}>Sign out</button>
     </>
   )
 }

src/providers/naver.js

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

src/server/pages/signin.js

@@ -1,12 +1,18 @@
-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
     }
@@ -15,70 +21,93 @@ export default function signin ({ csrfToken, providers, callbackUrl, email, erro
   })
 
   const errors = {
-    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.'
+    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.",
   }
 
   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>
   )
 }

types/index.d.ts

@@ -82,7 +82,7 @@ export interface NextAuthOptions {
    *     signOut: '/auth/signout',
    *     error: '/auth/error',
    *     verifyRequest: '/auth/verify-request',
-   *     newUser: null
+   *     newUser: '/auth/new-user'
    *   }
    * ```
    *

types/providers.d.ts

@@ -1,5 +1,6 @@
 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"
 
@@ -83,6 +84,7 @@ export type OAuthProviderType =
   | "Mailchimp"
   | "MailRu"
   | "Medium"
+  | "Naver"
   | "Netlify"
   | "Okta"
   | "Osso"
@@ -120,23 +122,12 @@ interface CredentialsConfig<C extends Record<string, CredentialInput> = {}>
   authorize(credentials: Record<keyof C, string>, req: NextApiRequest): Awaitable<User | null>
 }
 
-export type CredentialsProvider = (
-  options: Partial<CredentialsConfig>
-) => CredentialsConfig
+export type CredentialsProvider = <C extends Record<string, CredentialInput>>(
+  options: Partial<CredentialsConfig<C>>
+) => CredentialsConfig<C>
 
 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
@@ -148,7 +139,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 | EmailConfigServerOptions
+  server: string | SMTPConnectionOptions
   /** @default "NextAuth <no-reply@example.com>" */
   from?: string
   /**

types/tests/providers.test.ts

@@ -19,12 +19,12 @@ Providers.Email({
   from: "path/from",
 })
 
-// $ExpectType CredentialsConfig<{}>
+// $ExpectType CredentialsConfig<{ username: { label: string; type: string; }; password: { label: string; type: string; }; }>
 Providers.Credentials({
   id: "login",
   name: "account",
   credentials: {
-    user: {
+    username: {
       label: "Password",
       type: "password",
     },
@@ -33,7 +33,7 @@ Providers.Credentials({
       type: "password",
     },
   },
-  authorize: async (credentials) => {
+  authorize: async ({username, password}) => {
     const user = {
       /* fetched user */
     }

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@canary`
+1. Install `next-auth` and `@next-auth/dynamodb-adapter`
 
 ```js
-npm install next-auth @next-auth/dynamodb-adapter@canary
+npm install next-auth @next-auth/dynamodb-adapter
 ```
 
 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@canary`
+1. Install `next-auth` and `@next-auth/fauna-adapter`
 
 ```js
-npm install next-auth @next-auth/fauna-adapter@canary
+npm install next-auth @next-auth/fauna-adapter
 ```
 
 2. Add this adapter to your `pages/api/[...nextauth].js` next-auth configuration object.

www/docs/adapters/firebase.md

@@ -9,10 +9,10 @@ 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@canary`
+1. Install `next-auth` and `@next-auth/firebase-adapter`
 
 ```js
-npm install next-auth @next-auth/firebase-adapter@canary
+npm install next-auth @next-auth/firebase-adapter
 ```
 
 2. Add this adapter to your `pages/api/[...nextauth].js` next-auth configuration object.

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@canary`
+1. Install `next-auth` and `@next-auth/pouchdb-adapter`
 
 ```js
-npm install next-auth @next-auth/pouchdb-adapter@canary
+npm install next-auth @next-auth/pouchdb-adapter
 ```
 
 2. Add this adapter to your `pages/api/auth/[...nextauth].js` next-auth configuration object
@@ -28,10 +28,9 @@ import { PouchDBAdapter } from "@next-auth/pouchdb-adapter"
 import PouchDB from "pouchdb"
 
 // Setup your PouchDB instance and database
-PouchDB
-  .plugin(require("pouchdb-adapter-leveldb"))   // Any other adapter
-  .plugin(require("pouchdb-find"))              // Don't forget the `pouchdb-find` plugin
-  
+PouchDB.plugin(require("pouchdb-adapter-leveldb")) // Any other adapter
+  .plugin(require("pouchdb-find")) // Don't forget the `pouchdb-find` plugin
+
 const pouchdb = new PouchDB("auth_db", { adapter: "leveldb" })
 
 // For more information on each option (and a full list of options) go to
@@ -49,7 +48,7 @@ export default NextAuth({
 })
 ```
 
-## Advanced 
+## Advanced
 
 ### Memory-First Caching Strategy
 
@@ -60,4 +59,3 @@ Use an in-memory PouchDB as your main authentication database, and synchronize i
 This will most likely not increase performance much in a serverless environment due to various reasons such as concurrency, function startup time increases, etc.
 
 For more details, please see https://pouchdb.com/api.html#sync
-

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@canary` package:
+To use this Adapter, you need to install Prisma Client, Prisma CLI, and the separate `@next-auth/prisma-adapter` package:
 
 ```
-npm install @prisma/client @next-auth/prisma-adapter@canary
+npm install @prisma/client @next-auth/prisma-adapter
 npm install prisma --save-dev
 ```
 

www/docs/configuration/options.md

@@ -229,7 +229,7 @@ pages: {
   signOut: '/auth/signout',
   error: '/auth/error', // Error code passed in query string as ?error=
   verifyRequest: '/auth/verify-request', // (used for check email message)
-  newUser: null // If set, new users will be directed here on first sign in
+  newUser: '/auth/new-user' // New users will be directed here on first sign in (leave the property out if not of interest)
 }
 ```
 

www/docs/configuration/pages.md

@@ -16,7 +16,7 @@ To add a custom login page, you can use the `pages` option:
     signOut: '/auth/signout',
     error: '/auth/error', // Error code passed in query string as ?error=
     verifyRequest: '/auth/verify-request', // (used for check email message)
-    newUser: null // If set, new users will be directed here on first sign in
+    newUser: '/auth/new-user' // New users will be directed here on first sign in (leave the property out if not of interest)
   }
 ...
 ```
@@ -46,7 +46,7 @@ The following errors are passed as error query parameters to the default or over
 - **EmailSignin**: Sending the e-mail with the verification token failed
 - **CredentialsSignin**: The `authorize` callback returned `null` in the [Credentials provider](/providers/credentials). We don't recommend providing information about which part of the credentials were wrong, as it might be abused by malicious hackers.
 - **Default**: Catch all, will apply, if none of the above matched
-  
+
 Example: `/auth/error?error=Default`
 
 ## Theming
@@ -186,5 +186,5 @@ signIn('credentials', { username: 'jsmith', password: '1234' })
 ```
 
 :::tip
-Remember to put any custom pages in a folder outside **/pages/api** which is reserved for API code. As per the examples above, a location convention suggestion is `pages/auth/...`. 
+Remember to put any custom pages in a folder outside **/pages/api** which is reserved for API code. As per the examples above, a location convention suggestion is `pages/auth/...`.
 :::

www/docs/getting-started/client.md

@@ -29,8 +29,8 @@ You can use the [session callback](/configuration/callbacks#session-callback) to
 
 ## useSession()
 
-* Client Side: **Yes**
-* Server Side: No
+- Client Side: **Yes**
+- Server Side: No
 
 The `useSession()` React Hook in the NextAuth.js client is the easiest way to check if someone is signed in.
 
@@ -39,12 +39,12 @@ It works best when the [`<Provider>`](#provider) is added to `pages/_app.js`.
 #### Example
 
 ```jsx
-import { useSession } from 'next-auth/client'
+import { useSession } from "next-auth/client"
 
 export default function Component() {
-  const [ session, loading ] = useSession()
+  const [session, loading] = useSession()
 
-  if(session) {
+  if (session) {
     return <p>Signed in as {session.user.email}</p>
   }
 
@@ -56,8 +56,8 @@ export default function Component() {
 
 ## getSession()
 
-* Client Side: **Yes**
-* Server Side: **Yes**
+- Client Side: **Yes**
+- Server Side: **Yes**
 
 NextAuth.js provides a `getSession()` method which can be called client or server side to return a session.
 
@@ -75,7 +75,7 @@ async function myFunction() {
 #### Server Side Example
 
 ```js
-import { getSession } from 'next-auth/client'
+import { getSession } from "next-auth/client"
 
 export default async (req, res) => {
   const session = await getSession({ req })
@@ -94,8 +94,8 @@ The tutorial [securing pages and API routes](/tutorials/securing-pages-and-api-r
 
 ## getCsrfToken()
 
-* Client Side: **Yes**
-* Server Side: **Yes**
+- Client Side: **Yes**
+- Server Side: **Yes**
 
 The `getCsrfToken()` method returns the current Cross Site Request Forgery Token (CSRF Token) required to make POST requests (e.g. for signing in and signing out).
 
@@ -113,7 +113,7 @@ async function myFunction() {
 #### Server Side Example
 
 ```js
-import { getCsrfToken } from 'next-auth/client'
+import { getCsrfToken } from "next-auth/client"
 
 export default async (req, res) => {
   const csrfToken = await getCsrfToken({ req })
@@ -126,8 +126,8 @@ export default async (req, res) => {
 
 ## getProviders()
 
-* Client Side: **Yes**
-* Server Side: **Yes**
+- Client Side: **Yes**
+- Server Side: **Yes**
 
 The `getProviders()` method returns the list of providers currently configured for sign in.
 
@@ -140,11 +140,11 @@ It can be useful if you are creating a dynamic custom sign in page.
 #### API Route
 
 ```jsx title="pages/api/example.js"
-import { getProviders } from 'next-auth/client'
+import { getProviders } from "next-auth/client"
 
 export default async (req, res) => {
   const providers = await getProviders()
-  console.log('Providers', providers)
+  console.log("Providers", providers)
   res.end()
 }
 ```
@@ -157,8 +157,8 @@ Unlike `getSession()` and `getCsrfToken()`, when calling `getProviders()` server
 
 ## signIn()
 
-* Client Side: **Yes**
-* Server Side: No
+- Client Side: **Yes**
+- Server Side: No
 
 Using the `signIn()` method ensures the user ends back on the page they started on after completing a sign in flow. It will also handle CSRF Tokens for you automatically when signing in with email.
 
@@ -167,20 +167,18 @@ The `signIn()` method can be called from the client in different ways, as shown
 #### Redirects to sign in page when clicked
 
 ```js
-import { signIn } from 'next-auth/client'
+import { signIn } from "next-auth/client"
 
-export default () => (
-  <button onClick={() => signIn()}>Sign in</button>
-)
+export default () => <button onClick={() => signIn()}>Sign in</button>
 ```
 
 #### Starts Google OAuth sign-in flow when clicked
 
 ```js
-import { signIn } from 'next-auth/client'
+import { signIn } from "next-auth/client"
 
 export default () => (
-  <button onClick={() => signIn('google')}>Sign in with Google</button>
+  <button onClick={() => signIn("google")}>Sign in with Google</button>
 )
 ```
 
@@ -189,10 +187,10 @@ export default () => (
 When using it with the email flow, pass the target `email` as an option.
 
 ```js
-import { signIn } from 'next-auth/client'
+import { signIn } from "next-auth/client"
 
 export default ({ email }) => (
-  <button onClick={() => signIn('email', { email })}>Sign in with Email</button>
+  <button onClick={() => signIn("email", { email })}>Sign in with Email</button>
 )
 ```
 
@@ -204,9 +202,9 @@ You can specify a different `callbackUrl` by specifying it as the second argumen
 
 e.g.
 
-* `signIn(null, { callbackUrl: 'http://localhost:3000/foo' })`
-* `signIn('google', { callbackUrl: 'http://localhost:3000/foo' })`
-* `signIn('email', { email, callbackUrl: 'http://localhost:3000/foo' })`
+- `signIn(null, { callbackUrl: 'http://localhost:3000/foo' })`
+- `signIn('google', { callbackUrl: 'http://localhost:3000/foo' })`
+- `signIn('email', { email, callbackUrl: 'http://localhost:3000/foo' })`
 
 The URL must be considered valid by the [redirect callback handler](/configuration/callbacks#redirect-callback). By default it requires the URL to be an absolute URL at the same hostname, or else it will redirect to the homepage. You can define your own [redirect callback](/configuration/callbacks#redirect-callback) to allow other URLs, including supporting relative URLs.
 
@@ -234,8 +232,8 @@ e.g.
   error: string | undefined
   /**
    * HTTP status code,
-   * hints the kind of error that happened. 
-   */ 
+   * hints the kind of error that happened.
+   */
   status: number
   /**
    * `true` if the signin was successful
@@ -258,8 +256,8 @@ See the [Authorization Request OIDC spec](https://openid.net/specs/openid-connec
 
 e.g.
 
-* `signIn("identity-server4", null, { prompt: "login" })` *always ask the user to reauthenticate*
-* `signIn("auth0", null, { login_hint: "info@example.com" })` *hints the e-mail address to the provider*
+- `signIn("identity-server4", null, { prompt: "login" })` _always ask the user to reauthenticate_
+- `signIn("auth0", null, { login_hint: "info@example.com" })` _hints the e-mail address to the provider_
 
 :::note
 You can also set these parameters through [`provider.authorizationParams`](/configuration/providers#oauth-provider-options).
@@ -273,19 +271,17 @@ The following parameters are always overridden server-side: `redirect_uri`, `sta
 
 ## signOut()
 
-* Client Side: **Yes**
-* Server Side: No
+- Client Side: **Yes**
+- Server Side: No
 
 Using the `signOut()` method ensures the user ends back on the page they started on after completing the sign out flow. It also handles CSRF tokens for you automatically.
 
 It reloads the page in the browser when complete.
 
 ```js
-import { signOut } from 'next-auth/client'
+import { signOut } from "next-auth/client"
 
-export default () => (
-  <button onClick={() => signOut()}>Sign out</button>
-)
+export default () => <button onClick={() => signOut()}>Sign out</button>
 ```
 
 #### Specifying a callbackUrl
@@ -315,9 +311,9 @@ Using the supplied React `<Provider>` allows instances of `useSession()` to shar
 This improves performance, reduces network calls and avoids page flicker when rendering. It is highly recommended and can be easily added to all pages in Next.js apps by using `pages/_app.js`.
 
 ```jsx title="pages/_app.js"
-import { Provider } from 'next-auth/client'
+import { Provider } from "next-auth/client"
 
-export default function App ({ Component, pageProps }) {
+export default function App({ Component, pageProps }) {
   return (
     <Provider session={pageProps.session}>
       <Component {...pageProps} />
@@ -360,8 +356,8 @@ import { Provider } from 'next-auth/client'
 export default function App ({ Component, pageProps }) {
   return (
     <Provider session={pageProps.session}
-      options={{ 
-        clientMaxAge: 60     // Re-fetch session if cache is older than 60 seconds
+      options={{
+        clientMaxAge: 60,     // Re-fetch session if cache is older than 60 seconds
         keepAlive:    5 * 60 // Send keepAlive message every 5 minutes
       }}
       >
@@ -376,7 +372,7 @@ export default function App ({ Component, pageProps }) {
 
 Every tab/window maintains its own copy of the local session state; the session is not stored in shared storage like localStorage or sessionStorage. Any update in one tab/window triggers a message to other tabs/windows to update their own session state.
 
-Using low values for `clientMaxAge` or `keepAlive` will increase network traffic and load on  authenticated clients and may impact hosting costs and performance.
+Using low values for `clientMaxAge` or `keepAlive` will increase network traffic and load on authenticated clients and may impact hosting costs and performance.
 :::
 
 #### Client Max Age
@@ -402,7 +398,7 @@ If set to any value other than zero, it specifies in seconds how often the clien
 The value for `keepAlive` should always be lower than the value of the session `maxAge` option.
 
 :::note
-See [**the Next.js documentation**](https://nextjs.org/docs/advanced-features/custom-app) for more information on **_app.js** in Next.js applications.
+See [**the Next.js documentation**](https://nextjs.org/docs/advanced-features/custom-app) for more information on **\_app.js** in Next.js applications.
 :::
 
 ## Alternatives
@@ -412,8 +408,8 @@ See [**the Next.js documentation**](https://nextjs.org/docs/advanced-features/cu
 Due to the way Next.js handles `getServerSideProps` / `getInitialProps`, every protected page load has to make a server-side query to check if the session is valid and then generate the requested page. This alternative solution allows for showing a loading state on the initial check and every page transition afterward will be client-side, without having to check with the server and regenerate pages.
 
 ```js title="pages/admin.jsx"
-export default function AdminDashboard () {
-  const [session] = useSession() 
+export default function AdminDashboard() {
+  const [session] = useSession()
   // session is always non-null inside this page, all the way down the React tree.
   return "Some super secret dashboard"
 }
@@ -424,12 +420,15 @@ AdminDashboard.auth = true
 ```jsx title="pages/_app.jsx"
 export default function App({ Component, pageProps }) {
   return (
-    <SessionProvider session={pageProps.session}>
-      {Component.auth
-        ? <Auth><Component {...pageProps} /></Auth>
-        : <Component {...pageProps} />
-      }
-    </SessionProvider>
+    <Provider session={pageProps.session}>
+      {Component.auth ? (
+        <Auth>
+          <Component {...pageProps} />
+        </Auth>
+      ) : (
+        <Component {...pageProps} />
+      )}
+    </Provider>
   )
 }
 
@@ -444,7 +443,7 @@ function Auth({ children }) {
   if (isUser) {
     return children
   }
-  
+
   // Session is being fetched, or no user.
   // If no user, useEffect() will redirect.
   return <div>Loading...</div>
@@ -456,20 +455,19 @@ It can be easily be extended/modified to support something like an options objec
 ```jsx title="pages/admin.jsx"
 AdminDashboard.auth = {
   role: "admin",
-  loading: <AdminLoadingSkeleton/>,
-  unauthorized: "/login-with-different-user" // redirect to this url
+  loading: <AdminLoadingSkeleton />,
+  unauthorized: "/login-with-different-user", // redirect to this url
 }
 ```
 
-Because of how _app is done, it won't unnecessarily contact the /api/auth/session endpoint for pages that do not require auth.
+Because of how \_app is done, it won't unnecessarily contact the /api/auth/session endpoint for pages that do not require auth.
 
 More information can be found in the following [Github Issue](https://github.com/nextauthjs/next-auth/issues/1210).
 
 ### NextAuth.js + React-Query
 
-There is also an alternative client-side API library based upon [`react-query`](https://www.npmjs.com/package/react-query) available under [`nextauthjs/react-query`](https://github.com/nextauthjs/react-query). 
+There is also an alternative client-side API library based upon [`react-query`](https://www.npmjs.com/package/react-query) available under [`nextauthjs/react-query`](https://github.com/nextauthjs/react-query).
 
 If you use `react-query` in your project already, you can leverage it with NextAuth.js to handle the client-side session management for you as well. This replaces NextAuth.js's native `useSession` and `Provider` from `next-auth/client`.
 
 See repository [`README`](https://github.com/nextauthjs/react-query) for more details.
-

www/docs/providers/email.md

@@ -13,7 +13,7 @@ The Email provider can be used in conjunction with (or instead of) one or more O
 
 ### How it works
 
-On initial sign in, a **Verification Token** is sent to the email address provided. By default this token is valid for 24 hours. If the Verification Token is used with that time (i.e. by clicking on the link in the email) an account is created for the user and they are signed in.
+On initial sign in, a **Verification Token** is sent to the email address provided. By default this token is valid for 24 hours. If the Verification Token is used within that time (i.e. by clicking on the link in the email) an account is created for the user and they are signed in.
 
 If someone provides the email address of an _existing account_ when signing in, an email is sent and they are signed into the account associated with that email address when they follow the link in the email.
 

www/docs/providers/google.md

@@ -34,7 +34,7 @@ providers: [
 ```
 
 :::warning
-Google only provide the Refresh Token to an application the first time a user signs in.
+Google only provides Refresh Token to an application the first time a user signs in.
 
 To force Google to re-issue a Refresh Token, the user needs to remove the application from their account and sign in again:
 https://myaccount.google.com/permissions

www/docs/providers/naver.md

@@ -0,0 +1,34 @@
+---
+id: naver
+title: Naver
+---
+
+## Documentation
+
+https://developers.naver.com/docs/login/overview/overview.md
+
+## Configuration
+
+https://developers.naver.com/docs/login/api/api.md
+
+## Options
+
+The **Naver Provider** comes with a set of default options:
+
+- [Naver Provider options](https://github.com/nextauthjs/next-auth/blob/main/src/providers/naver.js)
+
+You can override any of the options to suit your own use case.
+
+## Example
+
+```js
+import Providers from `next-auth/providers`
+...
+providers: [
+  Providers.Naver({
+    clientId: process.env.NAVER_CLIENT_ID,
+    clientSecret: process.env.NAVER_CLIENT_SECRET
+  })
+]
+...
+```

www/docs/tutorials/typeorm-custom-models.md

@@ -48,7 +48,7 @@ export default {
 ```
 
 :::note
-[View source for built-in TypeORM models and schemas](https://github.com/nextauthjs/adapters/tree/canary/packages/typeorm-legacy/src/models)
+[View source for built-in TypeORM models and schemas](https://github.com/nextauthjs/adapters/tree/main/packages/typeorm-legacy/src/models)
 :::
 
 ## Using custom models

www/docusaurus.config.js

@@ -42,12 +42,12 @@ module.exports = {
           position: "left",
         },
         {
-          href: "https://www.npmjs.com/package/next-auth",
+          to: "https://www.npmjs.com/package/next-auth",
           label: "npm",
           position: "right",
         },
         {
-          href: "https://github.com/nextauthjs/next-auth",
+          to: "https://github.com/nextauthjs/next-auth",
           label: "GitHub",
           position: "right",
         },
@@ -73,8 +73,8 @@ module.exports = {
               to: "/contributors",
             },
             {
-              label: "Canary documentation",
-              to: "https://next-auth-git-canary.nextauthjs.vercel.app/",
+              label: "Next documentation",
+              to: "https://next-auth-git-next.nextauthjs.vercel.app",
             },
           ],
         },
@@ -118,6 +118,13 @@ module.exports = {
       ],
       copyright: "NextAuth.js © Iain Collins 2021",
     },
+    colorMode: {
+      respectPrefersColorScheme: true,
+      switchConfig: {
+        darkIcon: "🌑",
+        lightIcon: "💡",
+      },
+    },
   },
   presets: [
     [