feat(react): create client tailored to React (#1473)

**What**:

These changes ensure that we work more tightly with React that can also result in unforeseen performance boosts. In case we would decide on expanding to other libraries/frameworks, a new file per framework could be added.

**Why**:

Some performance issues (https://github.com/nextauthjs/next-auth/issues/844) could only be fixed by moving more of the client code into the `Provider`.

**How**:

Refactoring `next-auth/client`

Related: #1461, #1084, #1462

BREAKING CHANGE:
**1.** `next-auth/client` is renamed to `next-auth/react`.

**2.** In the past, we exposed most of the functions with different names for convenience. To simplify our source code, the new React specific client code exports only the following functions, listed with the necessary changes:

- `setOptions`: Not exposed anymore, use `SessionProvider` props
- `options`: Not exposed anymore, use `SessionProvider` props
- `session`: Rename to `getSession`
- `providers`: Rename to `getProviders`
- `csrfToken`: Rename to `getCsrfToken`
- `signin`: Rename to `signIn`
- `signout`: Rename to `signOut`
- `Provider`: Rename to `SessionProvider`

**3.** `Provider` changes.
- `Provider` is renamed to `SessionProvider`
- The `options` prop is now flattened as the props of `SessionProvider`.
- `clientMaxAge` has been renamed to `staleTime`.
- `keepAlive` has been renamed to `refetchInterval`.
An example of the changes:
```diff
- <Provider options={{clientMaxAge: 0, keepAlive: 0}}>{children}</Provider>
+ <SessionProvider staleTime={0} refetchInterval={0}>{children}</SessionProvider> 
```

**4.** It is now **required** to wrap the part of your application that uses `useSession` into a `SessionProvider`.

Usually, the best place for this is in your `pages/_app.jsx` file:

```jsx
import { SessionProvider } from "next-auth/react"

export default function App({
  Component,
  pageProps: { session, ...pageProps }
}) {
  return (
    // `session` comes from `getServerSideProps` or `getInitialProps`.
    // Avoids flickering/session loading on first load.
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}
```

.github/CODEOWNERS

@@ -0,0 +1 @@
+/types/ @balazsorban44 @lluia

.github/FUNDING.yml

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

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,32 +1,43 @@
 ---
 name: Bug report
-about: Report a defect with the software
+about: Report a defect with NextAuth.js
 labels: bug
-assignees: ''
+assignees: ""
 ---
 
-**Describe the bug**
-A clear and concise description of what the defect is.
+## Description 🐜
 
-**To Reproduce**
-Steps to reproduce the behavior.
+Please provide a clear and concise description of the bug in NextAuth.js.
 
-Include example code (or link to public repository) which can be used to reproduce the behaviour.
+🚧 – _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._
 
-**Expected behavior**
-A clear and concise description of what you expected to happen.
+## How to reproduce ☕️
 
-**Screenshots or error logs**
-If applicable, add screenshots or error logs to help explain the problem.
+We encourage you to use one of the templates set up on **CodeSandbox** to reproduce your issue:
 
-**Additional context**
-Add any other context about the problem here.
+- [`next-auth-example`](https://codesandbox.io/s/next-auth-example-1kktb)
+- [`next-auth-typescript-example`](https://codesandbox.io/s/next-auth-typescript-example-se32w)
 
-**Documentation feedback**
-*Documentation refers to searching through [online documentation](https://next-auth.js.org), code comments and issue history. The example project refers to [next-auth-example](https://github.com/iaincollins/next-auth-example).*
+🚧 – _If you don't provide any way to reproduce the bug, the issue is at risk of being closed._
 
-* [ ] Found the documentation helpful
-* [ ] Found documentation but was incomplete
-* [ ] Could not find relevant documentation
-* [ ] Found the example project helpful
-* [ ] Did not find the example project helpful
+## 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/config.yml

@@ -0,0 +1 @@
+blank_issues_enabled: false

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,28 +1,39 @@
 ---
 name: Feature request
-about: Suggest an idea for this project
+about: Suggest an idea for NextAuth.js
 labels: enhancement
-assignees: ''
+assignees: ""
 ---
 
-*Please stick to one distinct feature request per issue where possible and raise additional feature quests as separate issues. Try to avoid adding feature requests to existing issues in the comments of issues raised by other users.*
+## Summary 💭
 
-**Summary of proposed feature**
-A clear and concise description of the feature being proposed.
+A clear and concise summary of the feature being proposed.
 
-**Purpose of proposed feature**
-A clear and concise description description of why this feature is necessary and what problems it solves.
+## Description 📓
 
-**Detail about proposed feature**
-A detailed description of how the proposal might work (if you have one).
+Please provide a more in-depth description of the feature proposed.
 
-**Potential problems**
-Describe any potential problems or potential limitations or caveats that might apply to the proposed solution.
+Make sure you provide plenty of [links]() to external documentation and inline code examples like so:
 
-**Describe any alternatives you've considered**
-A clear and concise description of any alternative options you've considered.
+```js
+function myAwesomeNextAuthFeature() {
+  return 💚
+}
+```
 
-**Additional context**
-Any other context, screenshots, etc.
+Take time thinking about what you want to say and help us understand your proposal making sure that this description contains:
 
-*Please indicate if you are willing and able to help implement the proposed feature.*
+- **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/question.md

@@ -1,23 +1,32 @@
 ---
 name: Question
-about: Ask for information or support
+about: Ask a question about NextAuth.js or for help using it
 labels: question
-assignees: ''
+assignees: ""
 ---
 
-*Please refer to the [documentation](https://next-auth.js.org/getting-started/introduction), the [example project](https://github.com/iaincollins/next-auth-example) and existing issues before creating a new issue.*
+## Question 💬
 
-**Your question**
-A clear and concise question.
+Please provide an in-depth description of the question you have.
 
-**What are you trying to do**
-A description of what you are trying to do.
+Make sure you [link]() to external documentation if necessary and provide inline code examples like so:
 
-**Documentation feedback**
-*Documentation refers to searching through [online documentation](https://next-auth.js.org), code comments and issue history. The example project refers to [next-auth-example](https://github.com/iaincollins/next-auth-example).*
+```js
+function myAwesomeNextAuthFeature() {
+  return 💚
+}
+```
 
-* [ ] Found the documentation helpful
-* [ ] Found documentation but was incomplete
-* [ ] Could not find relevant documentation
-* [ ] Found the example project helpful
-* [ ] Did not find the example project helpful
+**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/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/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,48 @@
+<!--
+Thanks for your interest in the project. Bugs filed and PRs submitted are appreciated!
+
+Please make sure that you are familiar with and follow the Code of Conduct for
+this project (found in the CODE_OF_CONDUCT.md file).
+
+Also, please make sure you're familiar with and follow the instructions in the
+contributing guidelines (found in the CONTRIBUTING.md file).
+
+If you're new to contributing to open source projects, you might find this free
+video course helpful: https://kcd.im/pull-request
+
+Please fill out the information below to expedite the review and (hopefully)
+merge of your pull request!
+-->
+
+<!-- What changes are being made? (What feature/bug is being fixed here?) -->
+
+## Reasoning 💡
+
+<!-- What changes are being made? What feature/bug is being fixed here? -->
+
+## Checklist 🧢
+
+<!-- Feel free cross items ( like this `~[] item~` ) if they're irrelevant to your changes.
+
+To check an item, place an `x` in the box like so: `- [x] Documentation`. -->
+
+- [ ] Documentation
+- [ ] Tests
+- [ ] Ready to be merged
+
+<!-- In your opinion, is this ready to be merged as soon as it's reviewed? -->
+
+## Affected issues 🎟
+
+<!--
+Please [scout and link issues](https://github.com/nextauthjs/next-auth/issues) that might be solved by this PR.
+
+If you write `"Fixes"` or `"Closes"` before the issue link like so:
+
+```
+Fixes #359
+```
+
+the connected issue will be automatically closed once the PR is merged and hence help with maintenance of the library 😊
+
+-->

.github/labeler.yml

@@ -0,0 +1,39 @@
+test:
+  - test/**/*
+  - types/tests/**/*
+
+documentation:
+  - www/**/*
+  - ./**/*.md
+
+providers:
+  - src/providers/**/*
+  - www/docs/configuration/providers.md
+  - test/integration/**/*
+
+adapters:
+  - src/adapters/**/*
+  - www/docs/schemas/adapters.md
+
+databases:
+  - www/docs/schemas/*.md
+  - test/docker/databases/**/*
+  - www/docs/configuration/databases.md
+  - test/fixtures/**/*
+
+core:
+  - src/**/*
+
+style:
+  - src/css/**/*
+
+client:
+  - src/client/**/*
+  - www/docs/getting-started/client.md
+
+pages:
+  - src/server/pages/**/*
+  - www/docs/configuration/pages.md
+
+TypeScript:
+  - types/**/*

.github/stale.yml

@@ -0,0 +1,25 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 60
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 7
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - pinned
+  - security
+  - priority
+  - bug
+# Label to use when marking an issue as stale
+staleLabel: stale
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+  Hi there! It looks like this issue hasn't had any activity for a while.
+  It will be closed if no further activity occurs. If you think your issue
+  is still relevant, feel free to comment on it to keep it open. (Read more at #912)
+  Thanks!
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: >
+  Hi there! It looks like this issue hasn't had any activity for a while.
+  To keep things tidy, I am going to close this issue for now.
+  If you think your issue is still relevant, just leave a comment
+  and I will reopen it. (Read more at #912)
+  Thanks!

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,27 @@
+name: Code Analysis
+
+on:
+  push:
+    branches: [main, beta, next]
+  pull_request:
+    branches: [main]
+  schedule:
+    - cron: "43 17 * * 2"
+
+jobs:
+  analyze:
+    name: Verify
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        language: ["javascript"]
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v1
+        with:
+          languages: ${{ matrix.language }}
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v1

.github/workflows/labeler.yml

@@ -0,0 +1,13 @@
+name: PR Labeler
+
+on:
+  - pull_request_target
+
+jobs:
+  triage:
+    name: Triage
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/labeler@main
+        with:
+          repo-token: "${{ secrets.GITHUB_TOKEN }}"

.github/workflows/release.yml

@@ -0,0 +1,51 @@
+name: Release Flow
+
+on:
+  push:
+    branches:
+      - "main"
+      - "beta"
+      - "next"
+      - "3.x"
+  pull_request:
+
+jobs:
+  test:
+    name: Tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Init
+        uses: actions/checkout@v2
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: "16"
+      - name: Dependencies
+        uses: bahmutov/npm-install@v1
+      - name: Run tests
+        run: npm test -- --coverage --verbose
+      - name: Coverage
+        uses: codecov/codecov-action@v1
+        with:
+          directory: ./coverage
+          fail_ci_if_error: false
+      - name: Build
+        run: npm run build
+  release:
+    name: Release
+    needs: test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Init
+        uses: actions/checkout@v2
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: "16"
+      - name: Dependencies
+        uses: bahmutov/npm-install@v1
+      - name: Release
+        run: npx semantic-release@17
+        env:
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+          NPM_TOKEN: ${{secrets.NPM_TOKEN}}

.gitignore

@@ -1,20 +1,7 @@
-.next
-.env
-.vscode
-node_modules
-dist
-.DS_Store# Dependencies
-/node_modules
-
-# Production
-/build
-
-# Generated files
-.docusaurus
-.cache-loader
-
 # Misc
 .DS_Store
+
+.env
 .env.local
 .env.development.local
 .env.test.local
@@ -24,5 +11,56 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# Docusaurus
-www/build
+yarn.lock
+
+# Dependencies
+node_modules
+
+# Build dirs
+.next
+/build
+/dist
+/www/build
+
+# Generated files
+.docusaurus
+.cache-loader
+www/providers.json
+src/providers/index.js
+/internals
+/adapters.d.ts
+/adapters.js
+/client.d.ts
+/client.js
+/index.d.ts
+/index.js
+/jwt.d.ts
+/jwt.js
+/providers.d.ts
+/providers.js
+/errors.js
+/errors.d.ts
+/react.js
+/react.d.ts
+
+# Development app
+app/next-auth
+app/dist/css
+app/package-lock.json
+app/yarn.lock
+
+# VS
+/.vs/slnx.sqlite-journal
+/.vs/slnx.sqlite
+/.vs
+.vscode
+
+# GitHub Actions runner
+/actions-runner
+/_work
+
+# Prisma migrations
+/prisma/migrations
+
+# Tests
+/coverage

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

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

CHANGELOG.md

@@ -0,0 +1,5 @@
+# CHANGELOG
+
+The changelog is automatically updated using
+[semantic-release](https://github.com/semantic-release/semantic-release). You
+can see it on the [releases page](../../releases).

CONTRIBUTING.md

@@ -2,107 +2,134 @@
 
 Contributions and feedback on your experience of using this software are welcome.
 
-This includes bug reports, feature requests, ideas, pull requests and examples of how you have used this software.
+This includes bug reports, feature requests, ideas, pull requests, and examples of how you have used this software.
 
-Please see the [Code of Conduct](CODE_OF_CONDUCT.md) and follow any templates configured in GitHub when reporting bugs, requesting enhancements or contributing code.
+Please see the [Code of Conduct](CODE_OF_CONDUCT.md) and follow any templates configured in GitHub when reporting bugs, requesting enhancements, or contributing code.
 
 Please raise any significant new functionality or breaking change an issue for discussion before raising a Pull Request for it.
 
-## Pull Requests
+## For contributors
 
-* The latest changes are always in `main` 
-* Pull Requests should be raised for larger changes
-* Pull Requests do not need approval before merging for those with contributor access (it's just helpful to have them to track changes)
-* Rebasing in Pull Requests is prefered to keep a clean commit history (see below)
-* Running `npm run lint:fix` before committing can make resolving conflicts easier, but is not required
-* Merge commits (and pushing merge commits to `main`) are disabled in this repo; but commits in PR can be squashed so this is not a blocker
-* Pushing directly to main should ideally be reserved for minor updates (e.g. correcting typos) or small single-commit fixes
+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.
 
-## Rebasing
+### Pull Requests
 
-*If you don't rebase and end up with merge commits in a PR then it's not a blocker, we can alway squash the commits when merging!*
+- 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
 
-If you create a branch and there are conflicting updates in the `main` branch, you can resolve them by rebasing from a check out of your branch:
+### Setting up local environment
 
-    git fetch
-    git rebase origin/main
-
-If there are any conflicts, you can resolve them and stage the files, then run:
-
-    git rebase --continue
-
-*If there are a lot of changes you may be prompted to step more than once.*
-
-When the rebase is complete (i.e. there are no more conflicts) you should push your changes to your branch before doing anyhing else:
-
-   git push --force-with-lease
-
-You should see that any conflicts in your PR are now resolved. You can review changes to make sure it contains changes you intended to make.
-
-*If you accidentally sync before pushing, it will trigger a merge. Uou can use `git merge --abort` to undo the merge.*
-
-You can use `npm run lint:fix` to automatically apply Standard JS rules to resolve formatting differences (tabs vs spaces, line endings, etc).
-
-## Setting up local environment
-
-A quick and dirty 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:
 
 1. Clone the repo:
 
-       git clone git@github.com:iaincollins/next-auth.git
-       cd next-auth/
+```sh
+git clone git@github.com:nextauthjs/next-auth.git
+cd next-auth
+```
 
-2. Install packages and run the build command:
+2. Install packages:
 
-       npm i
-       npm run build
+```sh
+npm i && npm run dev:setup
+```
 
-3. Link React between the repo and the version installed in your project:
+3. Populate `.env.local`:
 
-       npm link ../your-application/node_modules/react
+   Copy `app/.env.local.example` to `app/.env.local`, and add your env variables for each provider you want to test.
 
-*This is an annoying step and not obvious, but is needed because of how React has been written (otherwise React crashes when you try to use the `useSession()` hook in your project).*
+> 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`.
 
-4. Finally link your project back to your local copy of next auth:
+1. Start the dev application/server:
 
-       cd ../your-application
-       npm link ../next-auth
+```sh
+npm run dev
+```
 
-That's it!
+Your dev application will be available on `http://localhost:3000`
 
-Notes: You may need to repeat both `npm link` steps if you install / update additional dependancies with `npm i`.
+That's it! 🎉
 
 If you need an example project to link to, you can use [next-auth-example](https://github.com/iaincollins/next-auth-example).
 
-### Hot reloading
+#### Hot reloading
 
-You might find it helpful to use the `npm run watch` command in the next-auth project, which will automatically (and silently) rebuild JS and CSS files as you edit them.
+When running `npm run dev`, you start a Next.js dev server on `http://localhost:3000`, which includes hot reloading out of the box. Make changes on any of the files in `src` and see the changes immediately.
 
-    cd next-auth/
-    npm run watch
+> NOTE: When working on CSS, you will have to manually refresh the page after changes. The reason for this is our pages using CSS are server-side rendered. (Improving this through a PR is very welcome!)
 
-If you are working on `next-auth/src/client/index.js` hot reloading will work as normal in your Next.js app.
+> NOTE: The setup is as follows: The development application lives inside the `app` folder, and whenever you make a change to the `src` folder in the root (where next-auth is), it gets copied into `app` every time (gitignored), so Next.js can pick them up and apply hot reloading. This is to avoid some annoying issues with how symlinks are working with different React builds, and also to provide a super-fast feedback loop while developing core features.
 
-However  if you are working on anything else (e.g. `next-auth/src/server/*` etc) then you will need to *stop and start* your app for changes to apply as **Next.js will not hot reload those changes**.
+#### Providers
 
-### Databases
+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:
 
-Included is a Docker Compose file that starts up MySQL, Postgres and MongoDB databases on localhost.
+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)
 
-It will use port 3306, 5432 and 27017 on localhost respectively; it will not work if are running existing databases on localhost.
+That's it! 🎉 Others will be able to discover this provider much more easily now!
+
+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 installed to be able to start / stop the databases.
+You will need Docker and Docker Compose installed to be able to start / stop the databases.
 
-When stop the databases, it will reset their contents.
+When stopping the databases, it will reset their contents.
 
-### Testing
+#### 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`).
+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.)
+
+### Recommended Scopes
+
+A typical conventional commit looks like this:
+
+```
+type(scope): title
+
+body
+```
+
+Scope is the part that will help grouping the different commit types in the release notes.
+
+Some recommended scopes are:
+
+- **provider** - Provider related changes. (eg.: "feat(provider): add X provider", "docs(provider): fix typo in X documentation"
+- **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.
+
+### Skipping a release
+
+Every commit that contains [skip release] or [release skip] in their message will be excluded from the commit analysis and won't participate in the release type determination. This is useful, if the PR being merged should not trigger a new `npm` release.

LICENSE

@@ -1,6 +1,6 @@
 ISC License
 
-Copyright (c) 2018-2020, Iain Collins
+Copyright (c) 2018-2021, Iain Collins
 
 Permission to use, copy, modify, and/or distribute this software for any
 purpose with or without fee is hereby granted, provided that the above

README.md

@@ -1,4 +1,30 @@
-# NextAuth.js
+<p align="center">
+   <br/>
+   <a href="https://next-auth.js.org" target="_blank"><img width="150px" src="https://next-auth.js.org/img/logo/logo-sm.png" /></a>
+   <h3 align="center">NextAuth.js</h3>
+   <p align="center">Authentication for Next.js</p>
+   <p align="center">
+   Open Source. Full Stack. Own Your Data.
+   </p>
+   <p align="center" style="align: center;">
+      <a href="https://github.com/nextauthjs/next-auth/actions/workflows/release.yml?query=workflow%3ARelease">
+        <img src="https://github.com/nextauthjs/next-auth/actions/workflows/release.yml/badge.svg" alt="Release" />
+      </a>
+      <a href="https://bundlephobia.com/result?p=next-auth">
+        <img src="https://img.shields.io/bundlephobia/minzip/next-auth" alt="Bundle Size"/>
+      </a>
+      <a href="https://www.npmtrends.com/next-auth">
+        <img src="https://img.shields.io/npm/dm/next-auth" alt="Downloads" />
+      </a>
+      <a href="https://github.com/nextauthjs/next-auth/stargazers">
+        <img src="https://img.shields.io/github/stars/nextauthjs/next-auth" alt="Github Stars" />
+      </a>
+      <a href="https://www.npmjs.com/package/next-auth">
+        <img src="https://img.shields.io/github/v/release/nextauthjs/next-auth?label=latest" alt="Github Stable Release" />
+      </a>
+      <img src="https://img.shields.io/github/v/release/nextauthjs/next-auth?include_prereleases&label=prerelease&sort=semver" alt="Github Prelease" />
+   </p>
+</p>
 
 ## Overview
 
@@ -6,103 +32,131 @@ NextAuth.js is a complete open source authentication solution for [Next.js](http
 
 It is designed from the ground up to support Next.js and Serverless.
 
-[Follow the examples](https://next-auth.js.org/getting-started/example) to see how easy it is to use NextAuth.js for authentication.
+## Getting Started
 
-Install: `npm i next-auth`
+```
+npm install --save next-auth
+```
+
+The easiest way to continue getting started, is to follow the [getting started](https://next-auth.js.org/getting-started/example) section in our docs.
+
+We also have a section of [tutorials](https://next-auth.js.org/tutorials) for those looking for more specific examples.
 
 See [next-auth.js.org](https://next-auth.js.org) for more information and documentation.
 
 ## Features
 
-### Authentication
+### Flexible and easy to use
 
-* Designed to work with any OAuth service, it supports OAuth 1.0, 1.0A and 2.0
-* Built-in support for [many popular OAuth sign-in services](https://next-auth.js.org/configuration/providers)
-* Supports email / passwordless authentication
-* Supports both JSON Web Tokens and database sessions
+- Designed to work with any OAuth service, it supports OAuth 1.0, 1.0A and 2.0
+- Built-in support for [many popular sign-in services](https://next-auth.js.org/configuration/providers)
+- Supports email / passwordless authentication
+- Supports stateless authentication with any backend (Active Directory, LDAP, etc)
+- Supports both JSON Web Tokens and database sessions
+- Designed for Serverless but runs anywhere (AWS Lambda, Docker, Heroku, etc…)
 
 ### Own your own data
 
-* An open source solution that allows you to keep control of your data
-* Supports Bring Your Own Database (BYOD) and can be used with any database
-* Built-in support for for [MySQL, MariaDB, Postgres, MongoDB and SQLite](https://next-auth.js.org/configuration/database)
-* Works great with databases from popular hosting providers
-* Can also be used without a database (e.g. OAuth + JWT)
+NextAuth.js can be used with or without a database.
+
+- An open source solution that allows you to keep control of your data
+- Supports Bring Your Own Database (BYOD) and can be used with any database
+- Built-in support for [MySQL, MariaDB, Postgres, Microsoft SQL Server, MongoDB and SQLite](https://next-auth.js.org/configuration/databases)
+- Works great with databases from popular hosting providers
+- Can also be used _without a database_ (e.g. OAuth + JWT)
 
 ### Secure by default
 
-* Designed to be secure by default and promote best practice for safeguarding user data
-* Attempts to implement the latest guidance published by [Open Web Application Security Project](https://owasp.org/)
+- Promotes the use of passwordless sign in mechanisms
+- Designed to be secure by default and encourage best practice for safeguarding user data
+- Uses Cross Site Request Forgery Tokens on POST routes (sign in, sign out)
+- Default cookie policy aims for the most restrictive policy appropriate for each cookie
+- When JSON Web Tokens are enabled, they are signed by default (JWS) with HS512
+- Use JWT encryption (JWE) by setting the option `encryption: true` (defaults to A256GCM)
+- Auto-generates symmetric signing and encryption keys for developer convenience
+- Features tab/window syncing and keepalive messages to support short lived sessions
+- Attempts to implement the latest guidance published by [Open Web Application Security Project](https://owasp.org/)
 
-Security focused features include CSRF protection, use of signed cookies, cookie prefixes, secure cookies, HTTP only, host only and secure only cookies and promoting passwordless sign-in.
+Advanced options allow you to define your own routines to handle controlling what accounts are allowed to sign in, for encoding and decoding JSON Web Tokens and to set custom cookie security policies and session properties, so you can control who is able to sign in and how often sessions have to be re-validated.
+
+### TypeScript
+
+NextAuth.js comes with built-in types. For more information and usage, check out the [TypeScript section](https://next-auth.js.org/getting-started/typescript) in the documentation.
+
+The package at `@types/next-auth` is now deprecated.
 
 ## Example
 
 ### Add API Route
 
 ```javascript
-import NextAuth from 'next-auth'
-import Providers from 'next-auth/providers'
+import NextAuth from "next-auth"
+import Providers from "next-auth/providers"
 
-const options = {
-  site: 'https://example.com'
+export default NextAuth({
   providers: [
     // OAuth authentication providers
     Providers.Apple({
       clientId: process.env.APPLE_ID,
-      clientSecret: process.env.APPLE_SECRET
+      clientSecret: process.env.APPLE_SECRET,
     }),
     Providers.Google({
       clientId: process.env.GOOGLE_ID,
-      clientSecret: process.env.GOOGLE_SECRET
+      clientSecret: process.env.GOOGLE_SECRET,
     }),
     // Sign in with passwordless email link
     Providers.Email({
       server: process.env.MAIL_SERVER,
-      from: '<no-reply@example.com>'
+      from: "<no-reply@example.com>",
     }),
   ],
-  // SQL or MongoDB database (or leave empty)
-  database: process.env.DATABASE_URL
-}
-
-export default (req, res) => NextAuth(req, res, options)
+})
 ```
 
 ### Add React Component
 
 ```javascript
-import React from 'react'
-import { 
-  useSession, 
-  signin, 
-  signout 
-} from 'next-auth/client'
+import { useSession, signIn, signOut } from "next-auth/react"
 
-export default () => {
-  const [ session, loading ] = useSession()
-
-  return <p>
-    {!session && <>
-      Not signed in <br/>
-      <button onClick={signin}>Sign in</button>
-    </>}
-    {session && <>
-      Signed in as {session.user.email} <br/>
-      <button onClick={signout}>Sign out</button>
-    </>}
-  </p>
+export default function Component() {
+  const [session, loading] = useSession()
+  if (session) {
+    return (
+      <>
+        Signed in as {session.user.email} <br />
+        <button onClick={() => signOut()}>Sign out</button>
+      </>
+    )
+  }
+  return (
+    <>
+      Not signed in <br />
+      <button onClick={() => signIn()}>Sign in</button>
+    </>
+  )
 }
 ```
 
-## Acknowledgement
+## Acknowledgements
 
-[NextAuth.js 2.0 is possible thanks to its contributors.](https://next-auth.js.org/contributors)
+[NextAuth.js is made possible thanks to all of its contributors.](https://next-auth.js.org/contributors)
 
-## Getting started
-
-[Follow the examples to get started.](https://next-auth.js.org/getting-started/example)
+<a href="https://github.com/nextauthjs/next-auth/graphs/contributors">
+  <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">
+<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>
 
 ## Contributing
 
-If you'd like to contribute to you can find useful information in our [Contributing Guide](https://github.com/iaincollins/next-auth/blob/main/CONTRIBUTING.md).
+We're open to all community contributions! If you'd like to contribute in any way, please first read our [Contributing Guide](https://github.com/nextauthjs/next-auth/blob/canary/CONTRIBUTING.md).
+
+## License
+
+ISC

SECURITY.md

@@ -0,0 +1,24 @@
+# Security Policy
+
+NextAuth.js practices responsible disclosure.
+
+## Supported Versions
+
+Security updates are only released for the current version.
+
+Old releases are not maintained and do not receive updates.
+
+## Reporting a Vulnerability
+
+We request that you contact us directly to report serious issues that might impact the security of sites using NextAuth.js.
+
+If you contact us regarding a serious issue:
+
+- We will endeavor to get back to you within 72 hours.
+- We will aim to publish a fix within 30 days.
+- 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 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.

adapters.js

@@ -1 +0,0 @@
-module.exports = require('./dist/adapters').default

app/.env.local.example

@@ -0,0 +1,33 @@
+# Rename file to .env.local (or .env) and populate values
+# to be able to run the dev app
+
+NEXTAUTH_URL=http://localhost:3000
+
+# You can use `openssl rand -hex 32` or 
+# https://generate-secret.vercel.app/32 to generate a secret.
+# Note: Changing a secret may invalidate existing sessions
+# and/or verificaion tokens.
+SECRET= 
+
+AUTH0_ID=
+AUTH0_DOMAIN=
+AUTH0_SECRET=
+
+GITHUB_ID=
+GITHUB_SECRET=
+
+TWITTER_ID=
+TWITTER_SECRET=
+
+# Example configuration for a Gmail account (will need SMTP enabled)
+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
+# MySQL:    DATABASE_URL=mysql://nextauth:password@127.0.0.1:3306/nextauth?synchronize=true
+# MongoDB:  DATABASE_URL=mongodb://nextauth:password@127.0.0.1:27017/nextauth?synchronize=true
+DATABASE_URL=

app/README.md

@@ -0,0 +1,6 @@
+# NextAuth.js Development App
+
+This folder contains a Next.js app using NextAuth.js for local development. See the following section on how to start:
+
+[Setting up local environment
+](https://github.com/nextauthjs/next-auth/blob/main/CONTRIBUTING.md#setting-up-local-environment)

app/components/access-denied.js

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

app/components/footer.js

@@ -0,0 +1,18 @@
+import Link from 'next/link'
+import styles from './footer.module.css'
+import { version } from 'package.json'
+
+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>
+      </ul>
+    </footer>
+  )
+}

app/components/footer.module.css

@@ -0,0 +1,14 @@
+.footer {
+  margin-top: 2rem;
+}
+
+.navItems {
+  margin-bottom: 1rem;
+  padding: 0;
+  list-style: none;
+}
+
+.navItem {
+  display: inline-block;
+  margin-right: 1rem;
+}

app/components/header.js

@@ -0,0 +1,112 @@
+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() {
+  const [session, loading] = useSession()
+
+  return (
+    <header>
+      <noscript>
+        <style>{".nojs-show { opacity: 1; top: 0; }"}</style>
+      </noscript>
+      <div className={styles.signedInStatus}>
+        <p
+          className={`nojs-show ${
+            !session && loading ? styles.loading : styles.loaded
+          }`}
+        >
+          {!session && (
+            <>
+              <span className={styles.notSignedInText}>
+                You are not signed in
+              </span>
+              <a
+                href="/api/auth/signin"
+                className={styles.buttonPrimary}
+                onClick={(e) => {
+                  e.preventDefault()
+                  signIn()
+                }}
+              >
+                Sign in
+              </a>
+            </>
+          )}
+          {session && (
+            <>
+              {session.user.image && (
+                <span
+                  style={{ backgroundImage: `url(${session.user.image})` }}
+                  className={styles.avatar}
+                />
+              )}
+              <span className={styles.signedInText}>
+                <small>Signed in as</small>
+                <br />
+                <strong>{session.user.email || session.user.name}</strong>
+              </span>
+              <a
+                href="/api/auth/signout"
+                className={styles.button}
+                onClick={(e) => {
+                  e.preventDefault()
+                  signOut()
+                }}
+              >
+                Sign out
+              </a>
+            </>
+          )}
+        </p>
+      </div>
+      <nav>
+        <ul className={styles.navItems}>
+          <li className={styles.navItem}>
+            <Link href="/">
+              <a>Home</a>
+            </Link>
+          </li>
+          <li className={styles.navItem}>
+            <Link href="/client">
+              <a>Client</a>
+            </Link>
+          </li>
+          <li className={styles.navItem}>
+            <Link href="/server">
+              <a>Server</a>
+            </Link>
+          </li>
+          <li className={styles.navItem}>
+            <Link href="/protected">
+              <a>Protected</a>
+            </Link>
+          </li>
+          <li className={styles.navItem}>
+            <Link href="/protected-ssr">
+              <a>Protected(SSR)</a>
+            </Link>
+          </li>
+          <li className={styles.navItem}>
+            <Link href="/api-example">
+              <a>API</a>
+            </Link>
+          </li>
+          <li className={styles.navItem}>
+            <Link href="/credentials">
+              <a>Credentials</a>
+            </Link>
+          </li>
+          <li className={styles.navItem}>
+            <Link href="/email">
+              <a>Email</a>
+            </Link>
+          </li>
+        </ul>
+      </nav>
+    </header>
+  )
+}

app/components/header.module.css

@@ -0,0 +1,92 @@
+/* Set min-height to avoid page reflow while session loading */
+.signedInStatus {
+  display: block;
+  min-height: 4rem;
+  width: 100%;
+}
+
+.loading,
+.loaded {
+  position: relative;
+  top: 0;
+  opacity: 1;
+  overflow: hidden;
+  border-radius: 0 0 .6rem .6rem;
+  padding: .6rem 1rem;
+  margin: 0;
+  background-color: rgba(0,0,0,.05);
+  transition: all 0.2s ease-in;
+}
+
+.loading {
+  top: -2rem;
+  opacity: 0;
+}
+
+.signedInText,
+.notSignedInText {
+  position: absolute;
+  padding-top: .8rem;
+  left: 1rem;
+  right: 6.5rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: inherit;  
+  z-index: 1;
+  line-height: 1.3rem;
+}
+
+.signedInText {
+  padding-top: 0rem;
+  left: 4.6rem;
+}
+
+.avatar {
+  border-radius: 2rem;
+  float: left;
+  height: 2.8rem;
+  width: 2.8rem;
+  background-color: white;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.button,
+.buttonPrimary {
+  float: right;
+  margin-right: -.4rem;
+  font-weight: 500;
+  border-radius: .3rem;
+  cursor: pointer;
+  font-size: 1rem;
+  line-height: 1.4rem;
+  padding: .7rem .8rem;
+  position: relative;
+  z-index: 10;
+  background-color: transparent;
+  color: #555;
+}
+
+.buttonPrimary {
+  background-color: #346df1;
+  border-color: #346df1;
+  color: #fff;
+  text-decoration: none;
+  padding: .7rem 1.4rem;
+}
+
+.buttonPrimary:hover {
+  box-shadow: inset 0 0 5rem rgba(0,0,0,0.2)
+}
+
+.navItems {
+  margin-bottom: 2rem;
+  padding: 0;
+  list-style: none;
+}
+
+.navItem {
+  display: inline-block;
+  margin-right: 1rem;
+}

app/components/layout.js

@@ -0,0 +1,14 @@
+import Header from 'components/header'
+import Footer from 'components/footer'
+
+export default function Layout ({ children }) {
+  return (
+    <>
+      <Header />
+      <main>
+        {children}
+      </main>
+      <Footer />
+    </>
+  )
+}

app/jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "baseUrl": "."
+  }
+}

app/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

app/next.config.js

@@ -0,0 +1,19 @@
+const path = require("path")
+
+module.exports = {
+  webpack(config) {
+    config.resolve = {
+      ...config.resolve,
+      alias: {
+        ...config.resolve.alias,
+        "next-auth$": path.join(process.cwd(), "next-auth/server"),
+        "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"),
+      },
+    }
+
+    return config
+  },
+}

app/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "next-auth-app",
+  "version": "1.0.0",
+  "description": "NextAuth.js Developer app",
+  "private": true,
+  "scripts": {
+    "dev": "npm-run-all --parallel copy:app dev:css dev:next",
+    "dev:next": "next dev",
+    "copy:app": "cpx \"../src/**/*\" next-auth --watch",
+    "copy:css": "cpx \"../dist/css/**/*\" dist/css --watch",
+    "watch:css": "cd .. && npm run watch:css",
+    "dev:css": "npm-run-all --parallel watch:css copy:css",
+    "start": "next start"
+  },
+  "license": "ISC",
+  "dependencies": {
+    "next": "^10.1.3",
+    "nodemailer": "^6.6.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "cpx": "^1.5.0",
+    "npm-run-all": "^4.1.5"
+  }
+}

app/pages/_app.js

@@ -0,0 +1,32 @@
+import { SessionProvider } from "next-auth/react"
+import "./styles.css"
+
+// 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: { session, ...pageProps },
+}) {
+  return (
+    <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.
+      // 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} />
+    </SessionProvider>
+  )
+}

app/pages/api-example.js

@@ -0,0 +1,17 @@
+import Layout from '../components/layout'
+
+export default function Page () {
+  return (
+    <Layout>
+      <h1>API Example</h1>
+      <p>The examples below show responses from the example API endpoints.</p>
+      <p><em>You must be signed in to see responses.</em></p>
+      <h2>Session</h2>
+      <p>/api/examples/session</p>
+      <iframe src='/api/examples/session' />
+      <h2>JSON Web Token</h2>
+      <p>/api/examples/jwt</p>
+      <iframe src='/api/examples/jwt' />
+    </Layout>
+  )
+}

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

@@ -0,0 +1,78 @@
+import NextAuth from "next-auth"
+import EmailProvider from "next-auth/providers/email"
+import GitHubProvider from "next-auth/providers/github"
+import Auth0Provider from "next-auth/providers/auth0"
+import TwitterProvider from "next-auth/providers/twitter"
+import CredentialsProvider from "next-auth/providers/credentials"
+
+export default NextAuth({
+  // Used to debug https://github.com/nextauthjs/next-auth/issues/1664
+  // cookies: {
+  //   csrfToken: {
+  //     name: 'next-auth.csrf-token',
+  //     options: {
+  //       httpOnly: true,
+  //       sameSite: 'none',
+  //       path: '/',
+  //       secure: true
+  //     }
+  //   },
+  //   pkceCodeVerifier: {
+  //     name: 'next-auth.pkce.code_verifier',
+  //     options: {
+  //       httpOnly: true,
+  //       sameSite: 'none',
+  //       path: '/',
+  //       secure: true
+  //     }
+  //   }
+  // },
+  providers: [
+    EmailProvider({
+      server: process.env.EMAIL_SERVER,
+      from: process.env.EMAIL_FROM,
+    }),
+    GitHubProvider({
+      clientId: process.env.GITHUB_ID,
+      clientSecret: process.env.GITHUB_SECRET,
+    }),
+    Auth0Provider({
+      clientId: process.env.AUTH0_ID,
+      clientSecret: process.env.AUTH0_SECRET,
+      domain: process.env.AUTH0_DOMAIN,
+      // Used to debug https://github.com/nextauthjs/next-auth/issues/1664
+      // protection: ["pkce", "state"],
+      // authorizationParams: {
+      //   response_mode: 'form_post'
+      // }
+      protection: "pkce",
+    }),
+    TwitterProvider({
+      clientId: process.env.TWITTER_ID,
+      clientSecret: process.env.TWITTER_SECRET,
+    }),
+    CredentialsProvider({
+      name: "Credentials",
+      credentials: {
+        password: { label: "Password", type: "password" },
+      },
+      async authorize(credentials, req) {
+        if (credentials.password === "password") {
+          return {
+            id: 1,
+            name: "Fill Murray",
+            email: "bill@fillmurray.com",
+            image: "https://www.fillmurray.com/64/64",
+          }
+        }
+        return null
+      },
+    }),
+  ],
+  jwt: {
+    encryption: true,
+    secret: process.env.SECRET,
+  },
+  debug: false,
+  theme: "auto",
+})

app/pages/api/examples/jwt.js

@@ -0,0 +1,9 @@
+// This is an example of how to read a JSON Web Token from an API route
+import jwt from "next-auth/jwt"
+
+const secret = process.env.SECRET
+
+export default async (req, res) => {
+  const token = await jwt.getToken({ req, secret, encryption: true })
+  res.send(JSON.stringify(token, null, 2))
+}

app/pages/api/examples/protected.js

@@ -0,0 +1,17 @@
+// This is an example of to protect an API route
+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.",
+    })
+  } else {
+    res.send({
+      error: "You must be sign in to view the protected content on this page.",
+    })
+  }
+}

app/pages/api/examples/session.js

@@ -0,0 +1,7 @@
+// This is an example of how to access a session from an API route
+import { getSession } from "next-auth/react"
+
+export default async (req, res) => {
+  const session = await getSession({ req })
+  res.send(JSON.stringify(session, null, 2))
+}

app/pages/client.js

@@ -0,0 +1,22 @@
+import Layout from '../components/layout'
+
+export default function Page () {
+  return (
+    <Layout>
+      <h1>Client Side Rendering</h1>
+      <p>
+        This page uses the <strong>useSession()</strong> React Hook in the <strong>&lt;/Header&gt;</strong> component.
+      </p>
+      <p>
+        The <strong>useSession()</strong> React Hook easy to use and allows pages to render very quickly.
+      </p>
+      <p>
+        The advantage of this approach is that session state is shared between pages by using the <strong>Provider</strong> in <strong>_app.js</strong> so
+        that navigation between pages using <strong>useSession()</strong> is very fast.
+      </p>
+      <p>
+        The disadvantage of <strong>useSession()</strong> is that it requires client side JavaScript.
+      </p>
+    </Layout>
+  )
+}

app/pages/credentials.js

@@ -0,0 +1,67 @@
+// eslint-disable-next-line no-use-before-define
+import * as React from "react"
+import { signIn, signOut, useSession } from "next-auth/react"
+import Layout from "components/layout"
+
+export default function Page() {
+  const [response, setResponse] = React.useState(null)
+  const handleLogin = (options) => async () => {
+    if (options.redirect) {
+      return signIn("credentials", options)
+    }
+    const response = await signIn("credentials", options)
+    setResponse(response)
+  }
+
+  const handleLogout = (options) => async () => {
+    if (options.redirect) {
+      return signOut(options)
+    }
+    const response = await signOut(options)
+    setResponse(response)
+  }
+
+  const [session] = useSession()
+
+  if (session) {
+    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 />
+        <p>Response:</p>
+        <pre style={{ background: "#eee", padding: 16 }}>
+          {JSON.stringify(response, null, 2)}
+        </pre>
+      </Layout>
+    )
+  }
+
+  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>
+      <p>Response:</p>
+      <pre style={{ background: "#eee", padding: 16 }}>
+        {JSON.stringify(response, null, 2)}
+      </pre>
+    </Layout>
+  )
+}

app/pages/email.js

@@ -0,0 +1,80 @@
+// eslint-disable-next-line no-use-before-define
+import * as React from "react"
+import { signIn, signOut, useSession } from "next-auth/react"
+import Layout from "components/layout"
+
+export default function Page() {
+  const [response, setResponse] = React.useState(null)
+  const [email, setEmail] = React.useState("")
+
+  const handleChange = (event) => {
+    setEmail(event.target.value)
+  }
+
+  const handleLogin = (options) => async (event) => {
+    event.preventDefault()
+
+    if (options.redirect) {
+      return signIn("email", options)
+    }
+    const response = await signIn("email", options)
+    setResponse(response)
+  }
+
+  const handleLogout = (options) => async (event) => {
+    if (options.redirect) {
+      return signOut(options)
+    }
+    const response = await signOut(options)
+    setResponse(response)
+  }
+
+  const [session] = useSession()
+
+  if (session) {
+    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 />
+        <p>Response:</p>
+        <pre style={{ background: "#eee", padding: 16 }}>
+          {JSON.stringify(response, null, 2)}
+        </pre>
+      </Layout>
+    )
+  }
+
+  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 />
+      <form onSubmit={handleLogin({ redirect: true, email })}>
+        <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>
+      </form>
+      <p>Response:</p>
+      <pre style={{ background: "#eee", padding: 16 }}>
+        {JSON.stringify(response, null, 2)}
+      </pre>
+    </Layout>
+  )
+}

app/pages/index.js

@@ -0,0 +1,12 @@
+import Layout from 'components/layout'
+
+export default function Page () {
+  return (
+    <Layout>
+      <h1>NextAuth.js Example</h1>
+      <p>
+        This is an example site to demonstrate how to use <a href='https://next-auth.js.org'>NextAuth.js</a> for authentication.
+      </p>
+    </Layout>
+  )
+}

app/pages/policy.js

@@ -0,0 +1,30 @@
+import Layout from '../components/layout'
+
+export default function Page () {
+  return (
+    <Layout>
+      <p>
+        This is an example site to demonstrate how to use <a href='https://next-auth.js.org'>NextAuth.js</a> for authentication.
+      </p>
+      <h2>Terms of Service</h2>
+      <p>
+        THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+        IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+        FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+        AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+        LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+        OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+        SOFTWARE.
+      </p>
+      <h2>Privacy Policy</h2>
+      <p>
+        This site uses JSON Web Tokens and an in-memory database which resets every ~2 hours.
+      </p>
+      <p>
+        Data provided to this site is exclusively used to support signing in
+        and is not passed to any third party services, other than via SMTP or OAuth for the
+        purposes of authentication.
+      </p>
+    </Layout>
+  )
+}

app/pages/protected-ssr.js

@@ -0,0 +1,47 @@
+// This is an example of how to protect content using server rendering
+import { getSession } from "next-auth/react"
+import Layout from "../components/layout"
+import AccessDenied from "../components/access-denied"
+
+export default function Page({ content, session }) {
+  // If no session exists, display access denied message
+  if (!session) {
+    return (
+      <Layout>
+        <AccessDenied />
+      </Layout>
+    )
+  }
+
+  // If session exists, display content
+  return (
+    <Layout>
+      <h1>Protected Page</h1>
+      <p>
+        <strong>{content}</strong>
+      </p>
+    </Layout>
+  )
+}
+
+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 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
+    }
+  }
+
+  return {
+    props: {
+      session,
+      content,
+    },
+  }
+}

app/pages/protected.js

@@ -0,0 +1,43 @@
+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() {
+  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 json = await res.json()
+      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 no session exists, display access denied message
+  if (!session) {
+    return (
+      <Layout>
+        <AccessDenied />
+      </Layout>
+    )
+  }
+
+  // If session exists, display content
+  return (
+    <Layout>
+      <h1>Protected Page</h1>
+      <p>
+        <strong>{content}</strong>
+      </p>
+    </Layout>
+  )
+}

app/pages/server.js

@@ -0,0 +1,41 @@
+import { getSession } from "next-auth/react"
+import Layout from "../components/layout"
+
+export default function Page() {
+  // As this page uses Server Side Rendering, the `session` will be already
+  // populated on render without needing to go through a loading stage.
+  // This is possible because of the shared context configured in `_app.js` that
+  // is used by `useSession()`.
+
+  return (
+    <Layout>
+      <h1>Server Side Rendering</h1>
+      <p>
+        This page uses the universal <strong>getSession()</strong> method in{" "}
+        <strong>getServerSideProps()</strong>.
+      </p>
+      <p>
+        Using <strong>getSession()</strong> in{" "}
+        <strong>getServerSideProps()</strong> is the recommended approach if you
+        need to support Server Side Rendering with authentication.
+      </p>
+      <p>
+        The advantage of Server Side Rendering is this page does not require
+        client side JavaScript.
+      </p>
+      <p>
+        The disadvantage of Server Side Rendering is that this page is slower to
+        render.
+      </p>
+    </Layout>
+  )
+}
+
+// Export the `session` prop to use sessions with Server Side Rendering
+export async function getServerSideProps(context) {
+  return {
+    props: {
+      session: await getSession(context),
+    },
+  }
+}

app/pages/styles.css

@@ -0,0 +1,30 @@
+body {
+  font-family: -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  padding: 0 1rem 1rem 1rem;
+  max-width: 680px;
+  margin: 0 auto;
+  background: #fff;
+  color: #333;
+}
+
+li,
+p {
+  line-height: 1.5rem;
+}
+
+a {
+  font-weight: 500;
+}
+
+hr {
+  border: 1px solid #ddd;
+}
+
+iframe {
+  background: #ccc;
+  border: 1px solid #ccc;
+  height: 10rem;
+  width: 100%;
+  border-radius: .5rem;
+  filter: invert(1);
+}

app/prisma/schema.prisma

@@ -0,0 +1,63 @@
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+model Account {
+  id                 Int       @default(autoincrement()) @id
+  compoundId         String    @unique @map(name: "compound_id")
+  userId             Int       @map(name: "user_id")
+  providerType       String    @map(name: "provider_type")
+  providerId         String    @map(name: "provider_id")
+  providerAccountId  String    @map(name: "provider_account_id")
+  refreshToken       String?   @map(name: "refresh_token")
+  accessToken        String?   @map(name: "access_token")
+  accessTokenExpires DateTime? @map(name: "access_token_expires")
+  createdAt          DateTime  @default(now()) @map(name: "created_at")
+  updatedAt          DateTime  @default(now()) @map(name: "updated_at")
+
+  @@index([providerAccountId], name: "providerAccountId")
+  @@index([providerId], name: "providerId")
+  @@index([userId], name: "userId")
+
+  @@map(name: "accounts")
+}
+
+model Session {
+  id           Int      @default(autoincrement()) @id
+  userId       Int      @map(name: "user_id")
+  expires      DateTime
+  sessionToken String   @unique @map(name: "session_token")
+  accessToken  String   @unique @map(name: "access_token")
+  createdAt    DateTime @default(now()) @map(name: "created_at")
+  updatedAt    DateTime @default(now()) @map(name: "updated_at")
+
+  @@map(name: "sessions")
+}
+
+model User {
+  id            Int       @default(autoincrement()) @id
+  name          String?
+  email         String?   @unique
+  emailVerified DateTime? @map(name: "email_verified")
+  image         String?
+  createdAt     DateTime  @default(now()) @map(name: "created_at")
+  updatedAt     DateTime  @default(now()) @map(name: "updated_at")
+
+  @@map(name: "users")
+}
+
+model VerificationRequest {
+  id         Int      @default(autoincrement()) @id
+  identifier String
+  token      String   @unique
+  expires    DateTime
+  createdAt  DateTime  @default(now()) @map(name: "created_at")
+  updatedAt  DateTime  @default(now()) @map(name: "updated_at")
+
+  @@map(name: "verification_requests")
+}

babel.config.json

@@ -1,12 +0,0 @@
-{
-  "presets": [
-    ["@babel/preset-env", { "targets": { "esmodules": true } } ]
-  ],
-  "comments": false,
-  "overrides": [
-    {
-      "test": [ "./src/server/pages/**" ],
-      "presets": [ "preact" ]
-    }
-  ]
-}

client.js

@@ -1 +0,0 @@
-module.exports = require('./dist/client').default

config/babel.config.js

@@ -0,0 +1,29 @@
+// We aim to have the same support as Next.js
+// https://nextjs.org/docs/getting-started#system-requirements
+// https://nextjs.org/docs/basic-features/supported-browsers-features
+
+module.exports = {
+  presets: [["@babel/preset-env", { targets: { node: "10.13" } }]],
+  plugins: [
+    "@babel/plugin-proposal-optional-catch-binding",
+    "@babel/plugin-transform-runtime",
+  ],
+  comments: false,
+  overrides: [
+    {
+      test: ["../src/client/**"],
+      presets: [
+        ["@babel/preset-env", { targets: { ie: "11" } }],
+        ["@babel/preset-react", { runtime: "automatic" }],
+      ],
+    },
+    {
+      test: ["../src/server/pages/**"],
+      presets: ["preact"],
+    },
+    {
+      test: ["../src/**/*.test.js"],
+      presets: [["@babel/preset-react", { runtime: "automatic" }]],
+    },
+  ],
+}

config/build.js

@@ -0,0 +1,98 @@
+const fs = require("fs-extra")
+const path = require("path")
+
+const MODULE_ENTRIES = {
+  SERVER: "index",
+  REACT: "react",
+  PROVIDERS: "providers",
+  ADAPTERS: "adapters",
+  JWT: "jwt",
+  ERRORS: "errors",
+}
+
+// Building submodule entries
+
+const BUILD_TARGETS = {
+  [`${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]) => {
+  fs.writeFile(path.join(process.cwd(), target), content, (err) => {
+    if (err) throw err
+    console.log(`[build] created "${target}" in root folder`)
+  })
+})
+
+// Building types
+
+const TYPES_TARGETS = [
+  `${MODULE_ENTRIES.SERVER}.d.ts`,
+  `${MODULE_ENTRIES.REACT}-client.d.ts`,
+  `${MODULE_ENTRIES.ADAPTERS}.d.ts`,
+  `${MODULE_ENTRIES.PROVIDERS}.d.ts`,
+  `${MODULE_ENTRIES.JWT}.d.ts`,
+  `${MODULE_ENTRIES.ERRORS}.d.ts`,
+  "internals",
+]
+
+TYPES_TARGETS.forEach((target) => {
+  fs.copy(
+    path.resolve("types", 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`)
+    }
+  )
+})
+
+// Building providers
+
+const providersDir = path.join(process.cwd(), "/src/providers")
+
+const files = fs
+  .readdirSync(providersDir, "utf8")
+  .filter((file) => file !== "index.js")
+
+let importLines = ""
+let exportLines = `export default {\n`
+files.forEach((file) => {
+  const provider = fs.readFileSync(path.join(providersDir, file), "utf8")
+  try {
+    // NOTE: If this fails, the default export probably wasn't a named function.
+    // Always use a named function as default export.
+    // Eg.: export default function YourProvider ...
+    const { functionName } = provider.match(
+      /export default function (?<functionName>.+)\s?\(/
+    ).groups
+
+    importLines += `import ${functionName} from "./${file}"\n`
+    exportLines += `  ${functionName},\n`
+  } catch (error) {
+    console.error(
+      [
+        `\nThe provider file '${file}' should have a single named default export`,
+        "Example: 'export default function YourProvider'\n\n",
+      ].join("\n")
+    )
+    process.exit(1)
+  }
+})
+exportLines += `}\n`
+
+fs.writeFile(
+  path.join(process.cwd(), "src/providers/index.js"),
+  [importLines, exportLines].join("\n")
+)

config/jest-setup.js

@@ -0,0 +1,2 @@
+import "@testing-library/jest-dom"
+import "whatwg-fetch"

config/jest.config.js

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

config/wrap-css.js

@@ -1,6 +1,6 @@
-// Serverless target in Next.js does work if you try to read in files at runtime
+// Serverless target in Next.js does not work if you try to read in files at runtime
 // that are not JavaScript or JSON (e.g. CSS files).
-// https://github.com/iaincollins/next-auth/issues/281
+// https://github.com/nextauthjs/next-auth/issues/281
 //
 // To work around this issue, this script is a manual step that wraps CSS in a
 // JavaScript file that has the compiled CSS embedded in it, and exports only
@@ -15,4 +15,4 @@ const css = fs.readFileSync(pathToCss, 'utf8')
 const cssWithEscapedQuotes = css.replace(/"/gm, '\\"')
 const js = `module.exports = function() { return "${cssWithEscapedQuotes}" }`
 
-fs.writeFileSync(pathToCssJs, js)
+fs.writeFileSync(pathToCssJs, js)

index.js

@@ -1 +0,0 @@
-module.exports = require('./dist/server')

jwt.js

@@ -1 +0,0 @@
-module.exports = require('./dist/lib/jwt').default

package.json

@@ -1,66 +1,206 @@
 {
   "name": "next-auth",
-  "version": "2.0.0",
-  "description": "An authentication library for Next.js",
-  "repository": "https://github.com/iaincollins/next-auth.git",
+  "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",
   "author": "Iain Collins <me@iaincollins.com>",
   "main": "index.js",
+  "types": "./index.d.ts",
+  "keywords": [
+    "react",
+    "nodejs",
+    "oauth",
+    "jwt",
+    "oauth2",
+    "authentication",
+    "nextjs",
+    "csrf",
+    "oidc",
+    "nextauth"
+  ],
+  "exports": {
+    ".": "./dist/server/index.js",
+    "./jwt": "./dist/lib/jwt.js",
+    "./react": "./dist/client/react.js",
+    "./providers": "./dist/providers/index.js",
+    "./providers/*": "./dist/providers/*.js",
+    "./errors": "./dist/lib/errors.js"
+  },
   "scripts": {
     "build": "npm run build:js && npm run build:css",
-    "build:js": "babel src --out-dir dist",
-    "build:css": "postcss src/**/*.css --base src --dir dist && node scripts/wrap-css.js",
+    "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": "cd app && npm run dev",
     "watch": "npm run watch:js | npm run watch:css",
-    "watch:js": "babel --watch src --out-dir dist",
-    "watch:css": "postcss --watch src/**/*.css --base src --dir dist",
-    "test": "npm run test:db",
-    "test:db": "npm run test:db:mysql && npm run test:db:postgres && npm run test:db:mongodb",
-    "test:db:mysql": "node test/mysql.js",
-    "test:db:postgres": "node test/postgres.js",
-    "test:db:mongodb": "node test/mongodb.js",
-    "db:start": "docker-compose -f test/docker/docker-compose.yml up -d",
-    "db:stop": "docker-compose -f test/docker/docker-compose.yml down",
+    "watch:js": "babel --config-file ./config/babel.config.js --watch src --out-dir dist",
+    "watch:css": "postcss --config config/postcss.config.js --watch src/**/*.css --base src --dir dist",
+    "test": "jest --config ./config/jest.config.js",
+    "test:ci": "npm run lint && npm run test:types && npm run test -- --ci",
+    "test:types": "dtslint types --onlyTestTsNext",
     "prepublishOnly": "npm run build",
-    "publish:beta": "npm publish --tag beta",
-    "publish:canary": "npm publish --tag canary",
-    "lint": "standard",
-    "lint:fix": "standard --fix"
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
   },
   "files": [
     "dist",
     "index.js",
+    "index.d.ts",
     "providers.js",
+    "providers.d.ts",
     "adapters.js",
+    "adapters.d.ts",
     "client.js",
-    "jwt.js"
+    "client.d.ts",
+    "errors.js",
+    "errors.d.ts",
+    "jwt.js",
+    "jwt.d.ts",
+    "internals"
   ],
   "license": "ISC",
   "dependencies": {
-    "crypto-js": "^4.0.0",
+    "@babel/runtime": "^7.14.0",
+    "futoin-hkdf": "^1.3.2",
+    "jose": "^1.27.2",
     "jsonwebtoken": "^8.5.1",
-    "jwt-decode": "^2.2.0",
-    "nodemailer": "^6.4.6",
     "oauth": "^0.9.15",
+    "pkce-challenge": "^2.1.0",
     "preact": "^10.4.1",
-    "preact-render-to-string": "^5.1.7",
-    "querystring": "^0.2.0",
-    "typeorm": "^0.2.24"
+    "preact-render-to-string": "^5.1.14"
   },
   "peerDependencies": {
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "nodemailer": "^6.4.16",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "peerOptionalDependencies": {
+    "nodemailer": "^6.4.16"
+  },
+  "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",
+    "@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/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",
     "babel-preset-preact": "^2.0.0",
+    "conventional-changelog-conventionalcommits": "4.4.0",
     "cssnano": "^4.1.10",
-    "mongodb": "^3.5.9",
-    "mysql": "^2.18.1",
-    "pg": "^8.2.1",
+    "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",
+    "eslint-plugin-jest": "^24.3.6",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.3.1",
+    "eslint-plugin-standard": "^5.0.0",
+    "husky": "^6.0.0",
+    "jest": "^26.6.3",
+    "msw": "^0.28.2",
+    "next": "^10.0.5",
     "postcss-cli": "^7.1.1",
     "postcss-nested": "^4.2.1",
-    "standard": "^14.3.3"
-  }
+    "prettier": "^2.2.1",
+    "pretty-quick": "^3.1.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "typescript": "^4.1.3",
+    "whatwg-fetch": "^3.6.2"
+  },
+  "prettier": {
+    "semi": false
+  },
+  "eslintConfig": {
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    },
+    "extends": [
+      "standard-with-typescript",
+      "prettier"
+    ],
+    "ignorePatterns": [
+      "node_modules",
+      "test",
+      "next-env.d.ts",
+      "types",
+      "www",
+      ".next",
+      "dist"
+    ],
+    "globals": {
+      "localStorage": "readonly",
+      "location": "readonly",
+      "fetch": "readonly"
+    },
+    "overrides": [
+      {
+        "files": [
+          "./**/*test.js"
+        ],
+        "env": {
+          "jest/globals": true
+        },
+        "extends": [
+          "plugin:jest/recommended"
+        ],
+        "plugins": [
+          "jest"
+        ]
+      }
+    ]
+  },
+  "release": {
+    "branches": [
+      "+([0-9])?(.{+([0-9]),x}).x",
+      "main",
+      {
+        "name": "beta",
+        "prerelease": true
+      },
+      {
+        "name": "next",
+        "prerelease": true
+      }
+    ],
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      "@semantic-release/npm",
+      [
+        "@semantic-release/github",
+        {
+          "releasedLabels": false,
+          "successComment": false
+        }
+      ]
+    ]
+  },
+  "funding": [
+    {
+      "type": "github",
+      "url": "https://github.com/sponsors/balazsorban44"
+    }
+  ]
 }

providers.js

@@ -1 +0,0 @@
-module.exports = require('./dist/providers').default

src/adapters/error-handler.js

@@ -0,0 +1,36 @@
+import { UnknownError } from "../lib/errors"
+
+/**
+ * Handles adapter induced errors.
+ * @param {import("types/adapters").AdapterInstance} adapter
+ * @param {import("types").LoggerInstance} logger
+ * @return {import("types/adapters").AdapterInstance}
+ */
+export default function adapterErrorHandler(adapter, logger) {
+  return Object.keys(adapter).reduce((acc, method) => {
+    const name = capitalize(method)
+    const code = upperSnake(name, adapter.displayName)
+
+    const adapterMethod = adapter[method]
+    acc[method] = async (...args) => {
+      try {
+        logger.debug(code, ...args)
+        return await adapterMethod(...args)
+      } catch (error) {
+        logger.error(`${code}_ERROR`, error)
+        const e = new UnknownError(error)
+        e.name = `${name}Error`
+        throw e
+      }
+    }
+    return acc
+  }, {})
+}
+
+function capitalize(s) {
+  return `${s[0].toUpperCase()}${s.slice(1)}`
+}
+
+function upperSnake(s, prefix = "ADAPTER") {
+  return `${prefix}_${s.replace(/([A-Z])/g, "_$1")}`.toUpperCase()
+}

src/adapters/example/index.js

@@ -1,111 +0,0 @@
-const Adapter = (config, options = {}) => {
-  async function getAdapter (appOptions) {
-    // Display debug output if debug option enabled
-    function _debug (...args) {
-      if (appOptions.debug) {
-        console.log('[next-auth][debug]', ...args)
-      }
-    }
-
-    async function createUser (profile) {
-      _debug('createUser', profile)
-      return null
-    }
-
-    async function getUser (id) {
-      _debug('getUser', id)
-      return null
-    }
-
-    async function getUserByEmail (email) {
-      _debug('getUserByEmail', email)
-      return null
-    }
-
-    async function getUserByProviderAccountId (providerId, providerAccountId) {
-      _debug('getUserByProviderAccountId', providerId, providerAccountId)
-      return null
-    }
-
-    async function updateUser (user) {
-      _debug('updateUser', user)
-      return null
-    }
-
-    async function deleteUser (userId) {
-      _debug('deleteUser', userId)
-      return null
-    }
-
-    async function linkAccount (userId, providerId, providerType, providerAccountId, refreshToken, accessToken, accessTokenExpires) {
-      _debug('linkAccount', userId, providerId, providerType, providerAccountId, refreshToken, accessToken, accessTokenExpires)
-      return null
-    }
-
-    async function unlinkAccount (userId, providerId, providerAccountId) {
-      _debug('unlinkAccount', userId, providerId, providerAccountId)
-      return null
-    }
-
-    async function createSession (user) {
-      _debug('createSession', user)
-      return null
-    }
-
-    async function getSession (sessionToken) {
-      _debug('getSession', sessionToken)
-      return null
-    }
-
-    async function updateSession (session, force) {
-      _debug('updateSession', session)
-      return null
-    }
-
-    async function deleteSession (sessionToken) {
-      _debug('deleteSession', sessionToken)
-      return null
-    }
-
-    async function createVerificationRequest (identifier, url, token, secret, provider) {
-      _debug('createVerificationRequest', identifier)
-      return null
-    }
-
-    async function getVerificationRequest (identifier, token, secret, provider) {
-      _debug('getVerificationRequest', identifier, token)
-      return null
-    }
-
-    async function deleteVerificationRequest (identifier, token, secret, provider) {
-      _debug('deleteVerification', identifier, token)
-      return null
-    }
-
-    return Promise.resolve({
-      createUser,
-      getUser,
-      getUserByEmail,
-      getUserByProviderAccountId,
-      updateUser,
-      deleteUser,
-      linkAccount,
-      unlinkAccount,
-      createSession,
-      getSession,
-      updateSession,
-      deleteSession,
-      createVerificationRequest,
-      getVerificationRequest,
-      deleteVerificationRequest
-    })
-  }
-
-  return {
-    getAdapter
-  }
-}
-
-export default {
-  Adapter
-}

src/adapters/index.js

@@ -1,6 +0,0 @@
-import TypeORM from './typeorm'
-
-export default {
-  Default: TypeORM.Adapter,
-  TypeORM
-}

src/adapters/typeorm/index.js

@@ -1,372 +0,0 @@
-import { createConnection, getConnection, getManager } from 'typeorm'
-import { createHash } from 'crypto'
-
-import { CreateUserError } from '../../lib/errors'
-import adapterConfig from './lib/config'
-import adapterTransform from './lib/transform'
-import Models from './models'
-import logger from '../../lib/logger'
-
-const Adapter = (typeOrmConfig, options = {}) => {
-  // Ensure typeOrmConfigObject is normalized to an object
-  const typeOrmConfigObject = (typeof typeOrmConfig === 'string')
-    ? adapterConfig.parseConnectionString(typeOrmConfig)
-    : typeOrmConfig
-
-  // Load any custom models passed as an option, default to built in models
-  const { models: customModels = {} } = options
-  const models = {
-    User: customModels.User ? customModels.User : Models.User,
-    Account: customModels.Account ? customModels.Account : Models.Account,
-    Session: customModels.Session ? customModels.Session : Models.Session,
-    VerificationRequest: customModels.VerificationRequest ? customModels.VerificationRequest : Models.VerificationRequest
-  }
-
-  // The models are designed for ANSI SQL databases first (as a baseline).
-  // For databases that use a different pragma, we transform the models at run
-  // time *unless* the models are user supplied (in which case we don't do
-  // anything to do them). This function updates arguments by reference.
-  adapterTransform(typeOrmConfigObject, models, options)
-
-  const config = adapterConfig.loadConfig(typeOrmConfigObject, { models, ...options })
-
-  // Create objects from models that can be consumed by functions in the adapter
-  const User = models.User.model
-  const Account = models.Account.model
-  const Session = models.Session.model
-  const VerificationRequest = models.VerificationRequest.model
-
-  let connection = null
-
-  async function getAdapter (appOptions) {
-    // Helper function to reuse / restablish connections
-    // (useful if they drop when after being idle)
-    async function _connect () {
-      // Get current connection by name
-      connection = getConnection(config.name)
-
-      // If connection is no longer established, reconnect
-      if (!connection.isConnected) { connection = await connection.connect() }
-    }
-
-    if (!connection) {
-      // If no connection, create new connection
-      try {
-        connection = await createConnection(config)
-      } catch (error) {
-        if (error.name === 'AlreadyHasActiveConnectionError') {
-          // If creating connection fails because it's already
-          // been re-established, check it's really up
-          await _connect()
-        } else {
-          logger.error('ADAPTER_CONNECTION_ERROR', error)
-        }
-      }
-    } else {
-      // If the connection object already exists, ensure it's valid
-      await _connect()
-    }
-
-    // Display debug output if debug option enabled
-    // @TODO Refactor logger so is passed in appOptions
-    function debugMessage (debugCode, ...args) {
-      if (appOptions && appOptions.debug) {
-        logger.debug(`TYPEORM_${debugCode}`, ...args)
-      }
-    }
-
-    // The models are primarily designed for ANSI SQL database, but some
-    // flexiblity is required in the adapter to support non-SQL databases such
-    // as MongoDB which have different pragmas.
-    //
-    // TypeORM does some abstraction, but doesn't handle everything (e.g. it
-    // handles translating `id` and `_id` in models, but not queries) so we
-    // need to handle somethings in the adapter to make it compatible.
-    let idKey = 'id'
-    let ObjectId
-    if (config.type === 'mongodb') {
-      idKey = '_id'
-      const mongodb = await import('mongodb')
-      ObjectId = mongodb.ObjectId
-    }
-
-    // These values are stored as seconds, but to use them with dates in
-    // JavaScript we convert them to milliseconds.
-    //
-    // Use a conditional to default to 30 day session age if not set - it should
-    // always be set but a meaningful fallback is helpful to facilitate testing.
-    if (appOptions && (!appOptions.session || !appOptions.session.maxAge)) {
-      debugMessage('GET_ADAPTER', 'Session expiry not configured (defaulting to 30 days')
-    }
-    const defaultSessionMaxAge = 30 * 24 * 60 * 60 * 1000
-    const sessionMaxAge = (appOptions && appOptions.session && appOptions.session.maxAge)
-      ? appOptions.session.maxAge * 1000
-      : defaultSessionMaxAge
-    const sessionUpdateAge = (appOptions && appOptions.session && appOptions.session.updateAge)
-      ? appOptions.session.updateAge * 1000
-      : 0
-
-    async function createUser (profile) {
-      debugMessage('CREATE_USER', profile)
-      try {
-        // Create user account
-        const user = new User(profile.name, profile.email, profile.image, profile.emailVerified)
-        return await getManager().save(user)
-      } catch (error) {
-        logger.error('CREATE_USER_ERROR', error)
-        return Promise.reject(new CreateUserError(error))
-      }
-    }
-
-    async function getUser (id) {
-      debugMessage('GET_USER', id)
-
-      // In the very specific case of both using JWT for storing session data
-      // and using MongoDB to store user data, the ID is a string rather than
-      // an ObjectId and we need to turn it into an ObjectId.
-      //
-      // In all other scenarios it is already an ObjectId, because it will have
-      // come from another MongoDB query.
-      if (ObjectId && !(id instanceof ObjectId)) {
-        id = ObjectId(id)
-      }
-
-      try {
-        return connection.getRepository(User).findOne({ [idKey]: id })
-      } catch (error) {
-        logger.error('GET_USER_BY_ID_ERROR', error)
-        return Promise.reject(new Error('GET_USER_BY_ID_ERROR', error))
-      }
-    }
-
-    async function getUserByEmail (email) {
-      debugMessage('GET_USER_BY_EMAIL', email)
-      try {
-        if (!email) { return Promise.resolve(null) }
-        return connection.getRepository(User).findOne({ email })
-      } catch (error) {
-        logger.error('GET_USER_BY_EMAIL_ERROR', error)
-        return Promise.reject(new Error('GET_USER_BY_EMAIL_ERROR', error))
-      }
-    }
-
-    async function getUserByProviderAccountId (providerId, providerAccountId) {
-      debugMessage('GET_USER_BY_PROVIDER_ACCOUNT_ID', providerId, providerAccountId)
-      try {
-        const account = await connection.getRepository(Account).findOne({ providerId, providerAccountId })
-        if (!account) { return null }
-        return connection.getRepository(User).findOne({ [idKey]: account.userId })
-      } catch (error) {
-        logger.error('GET_USER_BY_PROVIDER_ACCOUNT_ID_ERROR', error)
-        return Promise.reject(new Error('GET_USER_BY_PROVIDER_ACCOUNT_ID_ERROR', error))
-      }
-    }
-
-    async function updateUser (user) {
-      debugMessage('UPDATE_USER', user)
-      return getManager().save(user)
-    }
-
-    async function deleteUser (userId) {
-      debugMessage('DELETE_USER', userId)
-      // @TODO Delete user from DB
-      return false
-    }
-
-    async function linkAccount (userId, providerId, providerType, providerAccountId, refreshToken, accessToken, accessTokenExpires) {
-      debugMessage('LINK_ACCOUNT', userId, providerId, providerType, providerAccountId, refreshToken, accessToken, accessTokenExpires)
-      try {
-        // Create provider account linked to user
-        const account = new Account(userId, providerId, providerType, providerAccountId, refreshToken, accessToken, accessTokenExpires)
-        return getManager().save(account)
-      } catch (error) {
-        logger.error('LINK_ACCOUNT_ERROR', error)
-        return Promise.reject(new Error('LINK_ACCOUNT_ERROR', error))
-      }
-    }
-
-    async function unlinkAccount (userId, providerId, providerAccountId) {
-      debugMessage('UNLINK_ACCOUNT', userId, providerId, providerAccountId)
-      // @TODO Get current user from DB
-      // @TODO Delete [provider] object from user object
-      // @TODO Save changes to user object in DB
-      return false
-    }
-
-    async function createSession (user) {
-      debugMessage('CREATE_SESSION', user)
-      try {
-        let expires = null
-        if (sessionMaxAge) {
-          const dateExpires = new Date()
-          dateExpires.setTime(dateExpires.getTime() + sessionMaxAge)
-          expires = dateExpires
-        }
-
-        const session = new Session(user.id, expires)
-
-        return getManager().save(session)
-      } catch (error) {
-        logger.error('CREATE_SESSION_ERROR', error)
-        return Promise.reject(new Error('CREATE_SESSION_ERROR', error))
-      }
-    }
-
-    async function getSession (sessionToken) {
-      debugMessage('GET_SESSION', sessionToken)
-      try {
-        const session = await connection.getRepository(Session).findOne({ sessionToken })
-
-        // Check session has not expired (do not return it if it has)
-        if (session && session.expires && new Date() > new Date(session.expires)) {
-          // @TODO Delete old sessions from database
-          return null
-        }
-
-        return session
-      } catch (error) {
-        logger.error('GET_SESSION_ERROR', error)
-        return Promise.reject(new Error('GET_SESSION_ERROR', error))
-      }
-    }
-
-    async function updateSession (session, force) {
-      debugMessage('UPDATE_SESSION', session)
-      try {
-        if (sessionMaxAge && (sessionUpdateAge || sessionUpdateAge === 0) && session.expires) {
-          // Calculate last updated date, to throttle write updates to database
-          // Formula: ({expiry date} - sessionMaxAge) + sessionUpdateAge
-          //     e.g. ({expiry date} - 30 days) + 1 hour
-          //
-          // Default for sessionMaxAge is 30 days.
-          // Default for sessionUpdateAge is 1 hour.
-          const dateSessionIsDueToBeUpdated = new Date(session.expires)
-          dateSessionIsDueToBeUpdated.setTime(dateSessionIsDueToBeUpdated.getTime() - sessionMaxAge)
-          dateSessionIsDueToBeUpdated.setTime(dateSessionIsDueToBeUpdated.getTime() + sessionUpdateAge)
-
-          // Trigger update of session expiry date and write to database, only
-          // if the session was last updated more than {sessionUpdateAge} ago
-          if (new Date() > dateSessionIsDueToBeUpdated) {
-            const newExpiryDate = new Date()
-            newExpiryDate.setTime(newExpiryDate.getTime() + sessionMaxAge)
-            session.expires = newExpiryDate
-          } else if (!force) {
-            return null
-          }
-        } else {
-          // If session MaxAge, session UpdateAge or session.expires are
-          // missing then don't even try to save changes, unless force is set.
-          if (!force) { return null }
-        }
-
-        return getManager().save(session)
-      } catch (error) {
-        logger.error('UPDATE_SESSION_ERROR', error)
-        return Promise.reject(new Error('UPDATE_SESSION_ERROR', error))
-      }
-    }
-
-    async function deleteSession (sessionToken) {
-      debugMessage('DELETE_SESSION', sessionToken)
-      try {
-        return await connection.getRepository(Session).delete({ sessionToken })
-      } catch (error) {
-        logger.error('DELETE_SESSION_ERROR', error)
-        return Promise.reject(new Error('DELETE_SESSION_ERROR', error))
-      }
-    }
-
-    async function createVerificationRequest (identifier, url, token, secret, provider) {
-      debugMessage('CREATE_VERIFICATION_REQUEST', identifier)
-      try {
-        const { site } = appOptions
-        const { sendVerificationRequest, maxAge } = provider
-
-        // Store hashed token (using secret as salt) so that tokens cannot be exploited
-        // even if the contents of the database is compromised.
-        // @TODO Use bcrypt function here instead of simple salted hash
-        const hashedToken = createHash('sha256').update(`${token}${secret}`).digest('hex')
-
-        let expires = null
-        if (maxAge) {
-          const dateExpires = new Date()
-          dateExpires.setTime(dateExpires.getTime() + (maxAge * 1000))
-          expires = dateExpires
-        }
-
-        // Save to database
-        const newVerificationRequest = new VerificationRequest(identifier, hashedToken, expires)
-        const verificationRequest = await getManager().save(newVerificationRequest)
-
-        // With the verificationCallback on a provider, you can send an email, or queue
-        // an email to be sent, or perform some other action (e.g. send a text message)
-        await sendVerificationRequest({ identifier, url, token, site, provider })
-
-        return verificationRequest
-      } catch (error) {
-        logger.error('CREATE_VERIFICATION_REQUEST_ERROR', error)
-        return Promise.reject(new Error('CREATE_VERIFICATION_REQUEST_ERROR', error))
-      }
-    }
-
-    async function getVerificationRequest (identifier, token, secret, provider) {
-      debugMessage('GET_VERIFICATION_REQUEST', identifier, token)
-      try {
-        // Hash token provided with secret before trying to match it with database
-        // @TODO Use bcrypt instead of salted SHA-256 hash for token
-        const hashedToken = createHash('sha256').update(`${token}${secret}`).digest('hex')
-        const verificationRequest = await connection.getRepository(VerificationRequest).findOne({ identifier, token: hashedToken })
-
-        if (verificationRequest && verificationRequest.expires && new Date() > new Date(verificationRequest.expires)) {
-          // Delete verification entry so it cannot be used again
-          await connection.getRepository(VerificationRequest).delete({ token: hashedToken })
-          return null
-        }
-
-        return verificationRequest
-      } catch (error) {
-        logger.error('GET_VERIFICATION_REQUEST_ERROR', error)
-        return Promise.reject(new Error('GET_VERIFICATION_REQUEST_ERROR', error))
-      }
-    }
-
-    async function deleteVerificationRequest (identifier, token, secret, provider) {
-      debugMessage('DELETE_VERIFICATION', identifier, token)
-      try {
-        // Delete verification entry so it cannot be used again
-        const hashedToken = createHash('sha256').update(`${token}${secret}`).digest('hex')
-        await connection.getRepository(VerificationRequest).delete({ token: hashedToken })
-      } catch (error) {
-        logger.error('DELETE_VERIFICATION_REQUEST_ERROR', error)
-        return Promise.reject(new Error('DELETE_VERIFICATION_REQUEST_ERROR', error))
-      }
-    }
-
-    return Promise.resolve({
-      createUser,
-      getUser,
-      getUserByEmail,
-      getUserByProviderAccountId,
-      updateUser,
-      deleteUser,
-      linkAccount,
-      unlinkAccount,
-      createSession,
-      getSession,
-      updateSession,
-      deleteSession,
-      createVerificationRequest,
-      getVerificationRequest,
-      deleteVerificationRequest
-    })
-  }
-
-  return {
-    getAdapter
-  }
-}
-
-export default {
-  Adapter,
-  Models
-}

src/adapters/typeorm/lib/config.js

@@ -1,67 +0,0 @@
-import { EntitySchema } from 'typeorm'
-
-const parseConnectionString = (configString) => {
-  if (typeof configString !== 'string') { return configString }
-
-  // If the input is URL string, automatically convert the string to an object
-  // to make configuration easier (in most use cases).
-  //
-  // TypeORM accepts connection string as a 'url' option, but unfortunately
-  // not for all databases (e.g. SQLite) or options, so we handle parsing it
-  // in this function..
-  try {
-    const parsedUrl = new URL(configString)
-    const config = {}
-
-    // Remove : and convert strings like 'mongodb+srv' into 'mongodb'
-    config.type = parsedUrl.protocol.replace(/:$/, '').replace(/\+(.*)?$/, '')
-    config.host = parsedUrl.hostname
-    config.port = Number(parsedUrl.port)
-    config.username = parsedUrl.username
-    config.password = parsedUrl.password
-    config.database = parsedUrl.pathname.replace(/^\//, '')
-
-    if (parsedUrl.search) {
-      parsedUrl.search.replace(/^\?/, '').split('&').forEach(keyValuePair => {
-        let [key, value] = keyValuePair.split('=')
-        // Converts true/false strings to actual boolean values
-        if (value === 'true') { value = true }
-        if (value === 'false') { value = false }
-        config[key] = value
-      })
-    }
-
-    return config
-  } catch (error) {
-    // If URL parsing fails for any reason, try letting TypeORM handle it
-    return {
-      url: configString
-    }
-  }
-}
-
-const loadConfig = (config, { models, namingStrategy }) => {
-  const defaultConfig = {
-    name: 'default',
-    autoLoadEntities: true,
-    entities: [
-      new EntitySchema(models.User.schema),
-      new EntitySchema(models.Account.schema),
-      new EntitySchema(models.Session.schema),
-      new EntitySchema(models.VerificationRequest.schema)
-    ],
-    timezone: 'Z', // Required for timestamps to be treated as UTC in MySQL
-    logging: false,
-    namingStrategy
-  }
-
-  return {
-    ...defaultConfig,
-    ...config
-  }
-}
-
-export default {
-  parseConnectionString,
-  loadConfig
-}

src/adapters/typeorm/lib/naming-strategies.js

@@ -1,45 +0,0 @@
-// Inspired by https://github.com/tonivj5/typeorm-naming-strategies
-import { DefaultNamingStrategy } from 'typeorm'
-import { snakeCase, camelCase } from 'typeorm/util/StringUtils'
-
-export class SnakeCaseNamingStrategy extends DefaultNamingStrategy {
-  // Pluralise table names (set customName to override)
-  tableName (className, customName) {
-    return customName || snakeCase(`${className}s`)
-  }
-
-  columnName (propertyName, customName, embeddedPrefixes) {
-    return `${snakeCase(embeddedPrefixes.join('_'))}${customName || snakeCase(propertyName)}`
-  }
-
-  relationName (propertyName) {
-    return snakeCase(propertyName)
-  }
-
-  joinColumnName (relationName, referencedColumnName) {
-    return snakeCase(`${relationName}_${referencedColumnName}`)
-  }
-
-  joinTableName (firstTableName, secondTableName, firstPropertyName, secondPropertyName) {
-    return snakeCase(`${firstTableName}_${firstPropertyName.replace(/\./gi, '_')}_${secondTableName}`)
-  }
-
-  joinTableColumnName (tableName, propertyName, columnName) {
-    return snakeCase(`${tableName}_${(columnName || propertyName)}`)
-  }
-
-  classTableInheritanceParentColumnName (parentTableName, parentTableIdPropertyName) {
-    return snakeCase(`${parentTableName}_${parentTableIdPropertyName}`)
-  }
-
-  eagerJoinRelationAlias (alias, propertyPath) {
-    return `${alias}__${propertyPath.replace('.', '_')}`
-  }
-}
-
-export class CamelCaseNamingStrategy extends DefaultNamingStrategy {
-  // Pluralise collection names, uses (set customName to override)
-  tableName (className, customName) {
-    return customName || camelCase(`${className}s`)
-  }
-}

src/adapters/typeorm/lib/transform.js

@@ -1,175 +0,0 @@
-// Perform transforms on SQL models so they can be used with other databases
-import { SnakeCaseNamingStrategy, CamelCaseNamingStrategy } from './naming-strategies'
-
-const postgres = (models, options) => {
-  // Apply snake case naming strategy for Postgres databases
-  if (!options.namingStrategy) {
-    options.namingStrategy = new SnakeCaseNamingStrategy()
-  }
-
-  // Only transforms models that are not custom models
-  const { models: customModels = {} } = options
-
-  // For Postgres we need to use the `timestamp with time zone` type
-  // aka `timestamptz` to store timestamps correctly in UTC.
-  if (!customModels.User) {
-    for (const column in models.User.schema.columns) {
-      if (models.User.schema.columns[column].type === 'timestamp') {
-        models.User.schema.columns[column].type = 'timestamptz'
-      }
-    }
-  }
-
-  if (!customModels.Account) {
-    for (const column in models.Account.schema.columns) {
-      if (models.Account.schema.columns[column].type === 'timestamp') {
-        models.Account.schema.columns[column].type = 'timestamptz'
-      }
-    }
-  }
-
-  if (!customModels.Session) {
-    for (const column in models.Session.schema.columns) {
-      if (models.Session.schema.columns[column].type === 'timestamp') {
-        models.Session.schema.columns[column].type = 'timestamptz'
-      }
-    }
-  }
-
-  if (!customModels.VerificationRequest) {
-    for (const column in models.VerificationRequest.schema.columns) {
-      if (models.VerificationRequest.schema.columns[column].type === 'timestamp') {
-        models.VerificationRequest.schema.columns[column].type = 'timestamptz'
-      }
-    }
-  }
-}
-
-const mongodb = (models, options) => {
-  // A CamelCase naming strategy is used for all document databases
-  if (!options.namingStrategy) {
-    options.namingStrategy = new CamelCaseNamingStrategy()
-  }
-
-  // Important!
-  //
-  // 1. You must set 'objectId: true' on one property on a model in MongoDB.
-  //
-  //   'objectId' MUST be set on the primary ID field. This overrides other
-  //   values on that object in TypeORM (e.g. type: 'int' or 'primary').
-  //
-  // 2. Other properties that are Object IDs in the same model MUST be set to
-  //    type: 'objectId' (and should not be set to `objectId: true`).
-  //
-  //    If you set 'objectId: true' on multiple properties on a model you will
-  //    see the result of queries like find() is wrong. You will see the same
-  //    Object ID in every property of type Object ID in the result (but the
-  //    database will look fine); so use `type: 'objectId'` for them instead.
-
-  // Only transforms models that are not custom models
-  const { models: customModels = {} } = options
-
-  if (!customModels.User) {
-    delete models.User.schema.columns.id.type
-    models.User.schema.columns.id.objectId = true
-
-    // The options `unique: true` and `nullable: true` don't work the same
-    // with MongoDB as they do with SQL databases like MySQL and Postgres,
-    // we also to add sparce to the index. This still doesn't allow multiple
-    // *null* values, but does allow some records to omit the property.
-    delete models.User.schema.columns.email.unique
-    models.User.schema.indices = [
-      {
-        name: 'email',
-        unique: true,
-        sparse: true,
-        columns: ['email']
-      }
-    ]
-  }
-
-  if (!customModels.Account) {
-    delete models.Account.schema.columns.id.type
-    models.Account.schema.columns.id.objectId = true
-    models.Account.schema.columns.userId.type = 'objectId'
-  }
-
-  if (!customModels.Session) {
-    delete models.Session.schema.columns.id.type
-    models.Session.schema.columns.id.objectId = true
-    models.Session.schema.columns.userId.type = 'objectId'
-  }
-
-  if (!customModels.VerificationRequest) {
-    delete models.VerificationRequest.schema.columns.id.type
-    models.VerificationRequest.schema.columns.id.objectId = true
-  }
-}
-
-const sqlite = (models, options) => {
-  // Apply snake case naming strategy for SQLite databases
-  if (!options.namingStrategy) {
-    options.namingStrategy = new SnakeCaseNamingStrategy()
-  }
-
-  // Only transforms models that are not custom models
-  const { models: customModels = {} } = options
-
-  // SQLite does not support `timestamp` fields so we remap them to `datetime`
-  // in all models.
-  //
-  // `timestamp` is an ANSI SQL specification and widely supported by other
-  // databases so this transform is a specific workaround required for SQLite.
-  //
-  // NB: SQLite adds 'create' and 'update' fields to allow rows, but that is
-  // specific to SQLite and so we ignore that behaviour.
-  if (!customModels.User) {
-    for (const column in models.User.schema.columns) {
-      if (models.User.schema.columns[column].type === 'timestamp') {
-        models.User.schema.columns[column].type = 'datetime'
-      }
-    }
-  }
-
-  if (!customModels.Account) {
-    for (const column in models.Account.schema.columns) {
-      if (models.Account.schema.columns[column].type === 'timestamp') {
-        models.Account.schema.columns[column].type = 'datetime'
-      }
-    }
-  }
-
-  if (!customModels.Session) {
-    for (const column in models.Session.schema.columns) {
-      if (models.Session.schema.columns[column].type === 'timestamp') {
-        models.Session.schema.columns[column].type = 'datetime'
-      }
-    }
-  }
-
-  if (!customModels.VerificationRequest) {
-    for (const column in models.VerificationRequest.schema.columns) {
-      if (models.VerificationRequest.schema.columns[column].type === 'timestamp') {
-        models.VerificationRequest.schema.columns[column].type = 'datetime'
-      }
-    }
-  }
-}
-
-export default (config, models, options) => {
-  if ((config.type && config.type.startsWith('mongodb')) ||
-      (config.url && config.url.startsWith('mongodb'))) {
-    mongodb(models, options)
-  } else if ((config.type && config.type.startsWith('postgres')) ||
-             (config.url && config.url.startsWith('postgres'))) {
-    postgres(models, options)
-  } else if ((config.type && config.type.startsWith('sqlite')) ||
-             (config.url && config.url.startsWith('sqlite'))) {
-    sqlite(models, options)
-  } else {
-    // Apply snake case naming strategy by default for SQL databases
-    if (!options.namingStrategy) {
-      options.namingStrategy = new SnakeCaseNamingStrategy()
-    }
-  }
-}

src/adapters/typeorm/models/account.js

@@ -1,94 +0,0 @@
-import { createHash } from 'crypto'
-
-export class Account {
-  constructor (
-    userId,
-    providerId,
-    providerType,
-    providerAccountId,
-    refreshToken,
-    accessToken,
-    accessTokenExpires
-  ) {
-    // The compound ID ensures there is only one entry for a given provider and account
-    this.compoundId = createHash('sha256').update(`${providerId}:${providerAccountId}`).digest('hex')
-    this.userId = userId
-    this.providerType = providerType
-    this.providerId = providerId
-    this.providerAccountId = providerAccountId
-    this.refreshToken = refreshToken
-    this.accessToken = accessToken
-    this.accessTokenExpires = accessTokenExpires
-  }
-}
-
-export const AccountSchema = {
-  name: 'Account',
-  target: Account,
-  columns: {
-    id: {
-      // This property has `objectId: true` instead of `type: int` in MongoDB
-      primary: true,
-      type: 'int',
-      generated: true
-    },
-    compoundId: {
-      // The compound ID ensures that there there is only one instance of an
-      // OAuth account in a way that works across different databases.
-      // It is not used for anything else.
-      type: 'varchar',
-      unique: true
-    },
-    userId: {
-      // This property is set to `type: objectId` on MongoDB databases
-      type: 'int'
-    },
-    providerType: {
-      type: 'varchar'
-    },
-    providerId: {
-      type: 'varchar'
-    },
-    providerAccountId: {
-      type: 'varchar'
-    },
-    refreshToken: {
-      type: 'text',
-      nullable: true
-    },
-    accessToken: {
-      // AccessTokens are not (yet) automatically rotated by NextAuth.js
-      // You can update it using the refreshToken and the accessTokenUrl endpoint for the provider
-      type: 'text',
-      nullable: true
-    },
-    accessTokenExpires: {
-      // AccessTokens expiry times are not (yet) updated by NextAuth.js
-      // You can update it using the refreshToken and the accessTokenUrl endpoint for the provider
-      type: 'timestamp',
-      nullable: true
-    },
-    createdAt: {
-      type: 'timestamp',
-      createDate: true
-    },
-    updatedAt: {
-      type: 'timestamp',
-      updateDate: true
-    }
-  },
-  indices: [
-    {
-      name: 'userId',
-      columns: ['userId']
-    },
-    {
-      name: 'providerId',
-      columns: ['providerId']
-    },
-    {
-      name: 'providerAccountId',
-      columns: ['providerAccountId']
-    }
-  ]
-}

src/adapters/typeorm/models/index.js

@@ -1,23 +0,0 @@
-import { Account, AccountSchema } from './account'
-import { User, UserSchema } from './user'
-import { Session, SessionSchema } from './session'
-import { VerificationRequest, VerificationRequestSchema } from './verification-request'
-
-export default {
-  Account: {
-    model: Account,
-    schema: AccountSchema
-  },
-  User: {
-    model: User,
-    schema: UserSchema
-  },
-  Session: {
-    model: Session,
-    schema: SessionSchema
-  },
-  VerificationRequest: {
-    model: VerificationRequest,
-    schema: VerificationRequestSchema
-  }
-}

src/adapters/typeorm/models/session.js

@@ -1,50 +0,0 @@
-import { randomBytes } from 'crypto'
-
-export class Session {
-  constructor (userId, expires, sessionToken, accessToken) {
-    this.userId = userId
-    this.expires = expires
-    this.sessionToken = sessionToken || randomBytes(32).toString('hex')
-    this.accessToken = accessToken || randomBytes(32).toString('hex')
-  }
-}
-
-export const SessionSchema = {
-  name: 'Session',
-  target: Session,
-  columns: {
-    id: {
-      // This property has `objectId: true` instead of `type: int` in MongoDB
-      primary: true,
-      type: 'int',
-      generated: true
-    },
-    userId: {
-      // This property is set to `type: objectId` on MongoDB databases
-      type: 'int'
-    },
-    expires: {
-      // The date the session expires (is updated when a session is active)
-      type: 'timestamp'
-    },
-    sessionToken: {
-      // The sessionToken should never be exposed to client side JavaScript
-      type: 'varchar',
-      unique: true
-    },
-    accessToken: {
-      // The accessToken can be safely exposed to client side JavaScript to
-      // to identify the owner of a session without exposing the sessionToken
-      type: 'varchar',
-      unique: true
-    },
-    createdAt: {
-      type: 'timestamp',
-      createDate: true
-    },
-    updatedAt: {
-      type: 'timestamp',
-      updateDate: true
-    }
-  }
-}

src/adapters/typeorm/models/user.js

@@ -1,58 +0,0 @@
-export class User {
-  constructor (name, email, image, emailVerified) {
-    if (name) { this.name = name }
-    if (email) { this.email = email }
-    if (image) { this.image = image }
-    if (emailVerified) {
-      const currentDate = new Date()
-      this.emailVerified = currentDate
-    }
-  }
-}
-
-export const UserSchema = {
-  name: 'User',
-  target: User,
-  columns: {
-    id: {
-      // This property has `objectId: true` instead of `type: int` in MongoDB
-      primary: true,
-      type: 'int',
-      generated: true
-    },
-    name: {
-      type: 'varchar',
-      nullable: true
-    },
-    email: {
-      // This is inherited from the one in the OAuth provider profile on
-      // initial sign in, if one is specified in that profile.
-      type: 'varchar',
-      unique: true,
-      nullable: true
-    },
-    emailVerified: {
-      // Contains a timestamp of the last time an action was performed that
-      // confirmed this email address was active and used by the user (e.g.
-      // when an email sign in link is clicked on and verified). Is null
-      // if the email address specified has never been verified.
-      type: 'timestamp',
-      nullable: true
-    },
-    image: {
-      // A URL that points to an avatar to use for the user.
-      // This is inherited from the one in the OAuth provider profile on
-      // initial sign in, if one is specified in that profile.
-      type: 'varchar',
-      nullable: true
-    },
-    createdAt: {
-      type: 'timestamp',
-      createDate: true
-    },
-    updatedAt: {
-      type: 'timestamp',
-      updateDate: true
-    }
-  }
-}

src/adapters/typeorm/models/verification-request.js

@@ -1,44 +0,0 @@
-// This model is used for sign in emails, but is designed to support other
-// mechanisms in future (e.g. 2FA via text message or short codes)
-export class VerificationRequest {
-  constructor (identifier, token, expires) {
-    if (identifier) { this.identifier = identifier }
-    if (token) { this.token = token }
-    if (expires) { this.expires = expires }
-  }
-}
-
-export const VerificationRequestSchema = {
-  name: 'VerificationRequest',
-  target: VerificationRequest,
-  columns: {
-    id: {
-      // This property has `objectId: true` instead of `type: int` in MongoDB
-      primary: true,
-      type: 'int',
-      generated: true
-    },
-    identifier: {
-      // An email address, phone number, username or other unique identifier
-      // associated with the request (used to track who it was on behalf of)
-      type: 'varchar'
-    },
-    token: {
-      // The token used verify the request (maybe hashed or encrypted)
-      type: 'varchar',
-      unique: true
-    },
-    expires: {
-      // After this time, the request will no longer ve valid
-      type: 'timestamp'
-    },
-    createdAt: {
-      type: 'timestamp',
-      createDate: true
-    },
-    updatedAt: {
-      type: 'timestamp',
-      updateDate: true
-    }
-  }
-}

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

@@ -0,0 +1,62 @@
+import { rest } from "msw"
+import { render, screen, waitFor } from "@testing-library/react"
+import { server, mockSession } from "./helpers/mocks"
+import { SessionProvider, useSession } from "../react"
+
+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 (
+    <>
+      <SessionProvider {...options}>
+        <SessionConsumer />
+        <SessionConsumer testId="2" />
+      </SessionProvider>
+    </>
+  )
+}
+
+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 "../react"
+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

@@ -0,0 +1,90 @@
+import { setupServer } from "msw/node"
+import { rest } from "msw"
+import { randomBytes } from "crypto"
+
+export const mockSession = {
+  ok: true,
+  user: {
+    image: null,
+    name: "John",
+    email: "john@email.com",
+  },
+  expires: 123213139,
+}
+
+export const mockProviders = {
+  ok: true,
+  github: {
+    id: "github",
+    name: "Github",
+    type: "oauth",
+    signinUrl: "path/to/signin",
+    callbackUrl: "path/to/callback",
+  },
+  credentials: {
+    id: "credentials",
+    name: "Credentials",
+    type: "credentials",
+    authorize: null,
+    credentials: null,
+  },
+  email: {
+    id: "email",
+    type: "email",
+    name: "Email",
+  },
+}
+
+export const mockCSRFToken = {
+  ok: true,
+  csrfToken: randomBytes(32).toString("hex"),
+}
+
+export const mockGithubResponse = {
+  ok: true,
+  status: 200,
+  url: "https://path/to/github/url",
+}
+
+export const mockCredentialsResponse = {
+  ok: true,
+  status: 200,
+  url: "https://path/to/credentials/url",
+}
+
+export const mockEmailResponse = {
+  ok: true,
+  status: 200,
+  url: "https://path/to/email/url",
+}
+
+export const mockSignOutResponse = {
+  ok: true,
+  status: 200,
+  url: "https://path/to/signout/url",
+}
+
+export const server = setupServer(
+  rest.post("/api/auth/signout", (req, res, ctx) =>
+    res(ctx.status(200), ctx.json(mockSignOutResponse))
+  ),
+  rest.get("/api/auth/session", (req, res, ctx) =>
+    res(ctx.status(200), ctx.json(mockSession))
+  ),
+  rest.get("/api/auth/csrf", (req, res, ctx) =>
+    res(ctx.status(200), ctx.json(mockCSRFToken))
+  ),
+  rest.get("/api/auth/providers", (req, res, ctx) =>
+    res(ctx.status(200), ctx.json(mockProviders))
+  ),
+  rest.post("/api/auth/signin/github", (req, res, ctx) =>
+    res(ctx.status(200), ctx.json(mockGithubResponse))
+  ),
+  rest.post("/api/auth/callback/credentials", (req, res, ctx) =>
+    res(ctx.status(200), ctx.json(mockCredentialsResponse))
+  ),
+  rest.post("/api/auth/signin/email", (req, res, ctx) =>
+    res(ctx.status(200), ctx.json(mockEmailResponse))
+  ),
+  rest.post("/api/auth/_log", (req, res, ctx) => res(ctx.status(200)))
+)

src/client/__tests__/helpers/utils.js

@@ -0,0 +1,8 @@
+export function getBroadcastEvents() {
+  return window.localStorage.setItem.mock.calls
+    .filter((call) => call[0] === "nextauth.message")
+    .map(([eventName, value]) => {
+      const { timestamp, ...rest } = JSON.parse(value)
+      return { eventName, value: rest }
+    })
+}

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 "../react"
+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

@@ -0,0 +1,98 @@
+import { render, screen, waitFor } from "@testing-library/react"
+import { rest } from "msw"
+import { server, mockSession } from "./helpers/mocks"
+import logger from "../../lib/logger"
+import { useState, useEffect } from "react"
+import { getSession } from "../react"
+import { getBroadcastEvents } from "./helpers/utils"
+
+jest.mock("../../lib/logger", () => ({
+  __esModule: true,
+  default: {
+    warn: jest.fn(),
+    debug: jest.fn(),
+    error: jest.fn(),
+  },
+  proxyLogger(logger) {
+    return logger
+  },
+}))
+
+beforeAll(() => server.listen())
+
+beforeEach(() => {
+  // eslint-disable-next-line no-proto
+  jest.spyOn(window.localStorage.__proto__, "setItem")
+})
+
+afterEach(() => {
+  server.resetHandlers()
+  jest.clearAllMocks()
+})
+
+afterAll(() => {
+  server.close()
+})
+
+test("if it can fetch the session, it should store it in `localStorage`", async () => {
+  render(<SessionFlow />)
+
+  // In the start, there is no session
+  const noSession = await screen.findByText("No session")
+  expect(noSession).toBeInTheDocument()
+
+  // After we fetched the session, it should have been rendered by `<SessionFlow />`
+  const session = await screen.findByText(new RegExp(mockSession.user.name))
+  expect(session).toBeInTheDocument()
+
+  const broadcastCalls = getBroadcastEvents()
+  const [broadcastedEvent] = broadcastCalls
+
+  expect(broadcastCalls).toHaveLength(1)
+  expect(broadcastCalls).toHaveLength(1)
+  expect(broadcastedEvent.eventName).toBe("nextauth.message")
+  expect(broadcastedEvent.value).toStrictEqual({
+    data: {
+      trigger: "getSession",
+    },
+    event: "session",
+  })
+})
+
+test("if there's an error fetching the session, it should log it", async () => {
+  server.use(
+    rest.get("/api/auth/session", (req, res, ctx) => {
+      return res(ctx.status(500), ctx.body("Server error"))
+    })
+  )
+
+  render(<SessionFlow />)
+
+  await waitFor(() => {
+    expect(logger.error).toHaveBeenCalledTimes(1)
+    expect(logger.error).toBeCalledWith(
+      "CLIENT_FETCH_ERROR",
+      "session",
+      new SyntaxError("Unexpected token S in JSON at position 0")
+    )
+  })
+})
+
+function SessionFlow() {
+  const [session, setSession] = useState(null)
+  useEffect(() => {
+    async function fetchUserSession() {
+      try {
+        const result = await getSession()
+        setSession(result)
+      } catch (e) {
+        console.error(e)
+      }
+    }
+    fetchUserSession()
+  }, [])
+
+  if (session) return <pre>{JSON.stringify(session, null, 2)}</pre>
+
+  return <p>No session</p>
+}

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

@@ -0,0 +1,290 @@
+import { useState } from "react"
+import userEvent from "@testing-library/user-event"
+import { render, screen, waitFor } from "@testing-library/react"
+import logger from "../../lib/logger"
+import {
+  server,
+  mockCredentialsResponse,
+  mockEmailResponse,
+  mockGithubResponse,
+} from "./helpers/mocks"
+import { signIn } from "../react"
+import { rest } from "msw"
+
+const { location } = window
+
+jest.mock("../../lib/logger", () => ({
+  __esModule: true,
+  default: {
+    warn: jest.fn(),
+    debug: jest.fn(),
+    error: jest.fn(),
+  },
+  proxyLogger(logger) {
+    return logger
+  },
+}))
+
+beforeAll(() => {
+  server.listen()
+  delete window.location
+  window.location = {
+    ...location,
+    replace: jest.fn(),
+    reload: jest.fn(),
+  }
+})
+
+beforeEach(() => {
+  jest.clearAllMocks()
+  server.resetHandlers()
+})
+
+afterAll(() => {
+  window.location = location
+  server.close()
+})
+
+const callbackUrl = "https://redirects/to"
+
+test.each`
+  provider | type
+  ${""}    | ${"no"}
+  ${"foo"} | ${"unknown"}
+`(
+  "if $type provider, it redirects to the default sign-in page",
+  async ({ provider }) => {
+    render(<SignInFlow providerId={provider} callbackUrl={callbackUrl} />)
+
+    userEvent.click(screen.getByRole("button"))
+
+    await waitFor(() => {
+      expect(window.location.replace).toHaveBeenCalledTimes(1)
+      expect(window.location.replace).toHaveBeenCalledWith(
+        `/api/auth/signin?callbackUrl=${encodeURIComponent(callbackUrl)}`
+      )
+    })
+  }
+)
+
+test.each`
+  provider | type
+  ${""}    | ${"no"}
+  ${"foo"} | ${"unknown"}
+`(
+  "if $type provider supplied and no callback URL, redirects using the current location",
+  async ({ provider }) => {
+    render(<SignInFlow providerId={provider} />)
+
+    userEvent.click(screen.getByRole("button"))
+
+    await waitFor(() => {
+      expect(window.location.replace).toHaveBeenCalledTimes(1)
+      expect(window.location.replace).toHaveBeenCalledWith(
+        `/api/auth/signin?callbackUrl=${encodeURIComponent(
+          window.location.href
+        )}`
+      )
+    })
+  }
+)
+
+test.each`
+  provider         | mockUrl
+  ${`email`}       | ${mockEmailResponse.url}
+  ${`credentials`} | ${mockCredentialsResponse.url}
+`(
+  "$provider provider redirects if `redirect` is `true`",
+  async ({ provider, mockUrl }) => {
+    render(<SignInFlow providerId={provider} redirect={true} />)
+
+    userEvent.click(screen.getByRole("button"))
+
+    await waitFor(() => {
+      expect(window.location.replace).toHaveBeenCalledTimes(1)
+      expect(window.location.replace).toHaveBeenCalledWith(mockUrl)
+    })
+  }
+)
+
+test("redirection can't be stopped using an oauth provider", async () => {
+  render(
+    <SignInFlow
+      providerId="github"
+      callbackUrl={callbackUrl}
+      redirect={false}
+    />
+  )
+
+  userEvent.click(screen.getByRole("button"))
+
+  await waitFor(() => {
+    expect(window.location.replace).toHaveBeenCalledTimes(1)
+    expect(window.location.replace).toHaveBeenCalledWith(mockGithubResponse.url)
+  })
+})
+
+test("redirection can be stopped using the 'credentials' provider", async () => {
+  render(
+    <SignInFlow
+      providerId="credentials"
+      callbackUrl={callbackUrl}
+      redirect={false}
+    />
+  )
+
+  userEvent.click(screen.getByRole("button"))
+
+  await waitFor(() => {
+    expect(window.location.replace).not.toHaveBeenCalledWith(
+      mockCredentialsResponse.url
+    )
+
+    expect(screen.getByTestId("signin-result").textContent).not.toBe(
+      "no response"
+    )
+  })
+
+  // snapshot the expected return shape from `signIn`
+  expect(JSON.parse(screen.getByTestId("signin-result").textContent))
+    .toMatchInlineSnapshot(`
+    Object {
+      "error": null,
+      "ok": true,
+      "status": 200,
+      "url": "https://path/to/credentials/url",
+    }
+  `)
+})
+
+test("redirection can be stopped using the 'email' provider", async () => {
+  render(
+    <SignInFlow providerId="email" callbackUrl={callbackUrl} redirect={false} />
+  )
+
+  userEvent.click(screen.getByRole("button"))
+
+  await waitFor(() => {
+    expect(window.location.replace).not.toHaveBeenCalledWith(
+      mockEmailResponse.url
+    )
+
+    expect(screen.getByTestId("signin-result").textContent).not.toBe(
+      "no response"
+    )
+  })
+
+  // snapshot the expected return shape from `signIn` oauth
+  expect(JSON.parse(screen.getByTestId("signin-result").textContent))
+    .toMatchInlineSnapshot(`
+    Object {
+      "error": null,
+      "ok": true,
+      "status": 200,
+      "url": "https://path/to/email/url",
+    }
+  `)
+})
+
+test("if callback URL contains a hash we force a window reload when re-directing", async () => {
+  const mockUrlWithHash = "https://path/to/email/url#foo-bar-baz"
+
+  server.use(
+    rest.post("/api/auth/signin/email", (req, res, ctx) => {
+      return res(
+        ctx.status(200),
+        ctx.json({
+          ...mockEmailResponse,
+          url: mockUrlWithHash,
+        })
+      )
+    })
+  )
+
+  render(<SignInFlow providerId="email" callbackUrl={mockUrlWithHash} />)
+
+  userEvent.click(screen.getByRole("button"))
+
+  await waitFor(() => {
+    expect(window.location.replace).toHaveBeenCalledTimes(1)
+    expect(window.location.replace).toHaveBeenCalledWith(mockUrlWithHash)
+    // the browser will not refresh the page if the redirect URL contains a hash, hence we force it on the client, see #1289
+    expect(window.location.reload).toHaveBeenCalledTimes(1)
+  })
+})
+
+test("params are propagated to the signin URL when supplied", async () => {
+  let matchedParams = ""
+  const authParams = "foo=bar&bar=foo"
+
+  server.use(
+    rest.post("/api/auth/signin/github", (req, res, ctx) => {
+      matchedParams = req.url.search
+      return res(ctx.status(200), ctx.json(mockGithubResponse))
+    })
+  )
+
+  render(<SignInFlow providerId="github" authorizationParams={authParams} />)
+
+  userEvent.click(screen.getByRole("button"))
+
+  await waitFor(() => {
+    expect(matchedParams).toEqual(`?${authParams}`)
+  })
+})
+
+test("when it fails to fetch the providers, it redirected back to signin page", async () => {
+  const errorMsg = "Error when retrieving providers"
+
+  server.use(
+    rest.get("/api/auth/providers", (req, res, ctx) =>
+      res(ctx.status(500), ctx.json(errorMsg))
+    )
+  )
+
+  render(<SignInFlow providerId="github" />)
+
+  userEvent.click(screen.getByRole("button"))
+
+  await waitFor(() => {
+    expect(window.location.replace).toHaveBeenCalledWith(`/api/auth/error`)
+
+    expect(logger.error).toHaveBeenCalledTimes(1)
+    expect(logger.error).toBeCalledWith(
+      "CLIENT_FETCH_ERROR",
+      "providers",
+      errorMsg
+    )
+  })
+})
+
+function SignInFlow({
+  providerId,
+  callbackUrl,
+  redirect = true,
+  authorizationParams = {},
+}) {
+  const [response, setResponse] = useState(null)
+
+  async function handleSignIn() {
+    const result = await signIn(
+      providerId,
+      {
+        callbackUrl,
+        redirect,
+      },
+      authorizationParams
+    )
+
+    setResponse(result)
+  }
+
+  return (
+    <>
+      <p data-testid="signin-result">
+        {response ? JSON.stringify(response) : "no response"}
+      </p>
+      <button onClick={handleSignIn}>Sign in</button>
+    </>
+  )
+}

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

@@ -0,0 +1,129 @@
+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 "../react"
+import { rest } from "msw"
+import { getBroadcastEvents } from "./helpers/utils"
+
+const { location } = window
+
+beforeAll(() => {
+  server.listen()
+  delete window.location
+  window.location = {
+    ...location,
+    replace: jest.fn(),
+    reload: jest.fn(),
+  }
+})
+
+beforeEach(() => {
+  // eslint-disable-next-line no-proto
+  jest.spyOn(window.localStorage.__proto__, "setItem")
+})
+
+afterEach(() => {
+  jest.clearAllMocks()
+  server.resetHandlers()
+})
+
+afterAll(() => {
+  window.location = location
+  server.close()
+})
+
+const callbackUrl = "https://redirects/to"
+
+test("by default it redirects to the current URL if the server did not provide one", async () => {
+  server.use(
+    rest.post("/api/auth/signout", (req, res, ctx) =>
+      res(ctx.status(200), ctx.json({ ...mockSignOutResponse, url: undefined }))
+    )
+  )
+
+  render(<SignOutFlow />)
+
+  userEvent.click(screen.getByRole("button"))
+
+  await waitFor(() => {
+    expect(window.location.replace).toHaveBeenCalledTimes(1)
+    expect(window.location.replace).toHaveBeenCalledWith(window.location.href)
+  })
+})
+
+test("it redirects to the URL allowed by the server", async () => {
+  render(<SignOutFlow callbackUrl={callbackUrl} />)
+
+  userEvent.click(screen.getByRole("button"))
+
+  await waitFor(() => {
+    expect(window.location.replace).toHaveBeenCalledTimes(1)
+    expect(window.location.replace).toHaveBeenCalledWith(
+      mockSignOutResponse.url
+    )
+  })
+})
+
+test("if url contains a hash during redirection a page reload happens", async () => {
+  const mockUrlWithHash = "https://path/to/email/url#foo-bar-baz"
+
+  server.use(
+    rest.post("/api/auth/signout", (req, res, ctx) => {
+      return res(
+        ctx.status(200),
+        ctx.json({
+          ...mockSignOutResponse,
+          url: mockUrlWithHash,
+        })
+      )
+    })
+  )
+
+  render(<SignOutFlow />)
+
+  userEvent.click(screen.getByRole("button"))
+
+  await waitFor(() => {
+    expect(window.location.reload).toHaveBeenCalledTimes(1)
+    expect(window.location.replace).toHaveBeenCalledWith(mockUrlWithHash)
+  })
+})
+
+test("will broadcast the signout event to other tabs", async () => {
+  render(<SignOutFlow />)
+
+  userEvent.click(screen.getByRole("button"))
+
+  await waitFor(() => {
+    const broadcastCalls = getBroadcastEvents()
+    const [broadcastedEvent] = broadcastCalls
+
+    expect(broadcastCalls).toHaveLength(1)
+    expect(broadcastedEvent.eventName).toBe("nextauth.message")
+    expect(broadcastedEvent.value).toStrictEqual({
+      data: {
+        trigger: "signout",
+      },
+      event: "session",
+    })
+  })
+})
+
+function SignOutFlow({ callbackUrl, redirect = true }) {
+  const [response, setResponse] = useState(null)
+
+  async function handleSignOut() {
+    const result = await signOut({ callbackUrl, redirect })
+    setResponse(result)
+  }
+
+  return (
+    <>
+      <p data-testid="signout-result">
+        {response ? JSON.stringify(response) : "no response"}
+      </p>
+      <button onClick={handleSignOut}>Sign out</button>
+    </>
+  )
+}

src/client/index.js

@@ -1,250 +0,0 @@
-// fetch() is built in to Next.js 9.4 (you can use a polyfill if using an older version)
-/* global fetch:false */
-import { useState, useEffect, useContext, createContext, createElement } from 'react'
-import logger from '../lib/logger'
-
-// Note: In calls to fetch() from universal methods, all cookies are passed
-// through from the browser, when the server makes the HTTP request, so that
-// it can authenticate as the browser.
-
-// These can be overridden with NEXTAUTH_ env vars in next.config.js
-// e.g. process.env.NEXTAUTH_SITE
-const NEXTAUTH_DEFAULT_BASE_URL_COOKIE_NAME = 'next-auth.base-url'
-const NEXTAUTH_DEFAULT_SITE = ''
-const NEXTAUTH_DEFAULT_BASE_PATH = '/api/auth'
-const NEXTAUTH_DEFAULT_CLIENT_MAXAGE = 0 // e.g. 0 == disabled, 60 == 60 seconds
-
-let NEXTAUTH_EVENT_LISTENER_ADDED = false
-
-// Universal method (client + server)
-const getSession = async ({ req } = {}) => {
-  const baseUrl = _baseUrl({ req })
-  const options = req ? { headers: { cookie: req.headers.cookie } } : {}
-  const session = await _fetchData(`${baseUrl}/session`, options)
-  _sendMessage({ event: 'session', data: { triggeredBy: 'getSession' } })
-  return session
-}
-
-// Universal method (client + server)
-const getProviders = async ({ req } = {}) => {
-  const baseUrl = _baseUrl({ req })
-  const options = req ? { headers: { cookie: req.headers.cookie } } : {}
-  return _fetchData(`${baseUrl}/providers`, options)
-}
-
-// Universal method (client + server)
-const getCsrfToken = async ({ req } = {}) => {
-  const baseUrl = _baseUrl({ req })
-  const options = req ? { headers: { cookie: req.headers.cookie } } : {}
-  const data = await _fetchData(`${baseUrl}/csrf`, options)
-  return data.csrfToken
-}
-
-// Context to store session data globally
-const SessionContext = createContext()
-
-// Client side method
-// Hook to access the session data stored in the context
-const useSession = (session) => {
-  const value = useContext(SessionContext)
-  // If we have no Provider in the tree we call the actual hook for fetching the session
-  if (value === undefined) {
-    return useSessionData(session)
-  }
-
-  return value
-}
-
-// Internal hook for getting session from the api.
-const useSessionData = (session) => {
-  const clientMaxAge = (process.env.NEXTAUTH_CLIENT_MAXAGE || NEXTAUTH_DEFAULT_CLIENT_MAXAGE) * 1000
-
-  const [data, setData] = useState(session)
-  const [loading, setLoading] = useState(true)
-  const _getSession = async (sendEvent = true) => {
-    try {
-      setData(await getSession())
-      setLoading(false)
-
-      // Send event to trigger other tabs to update (unless sendEvent is false)
-      if (sendEvent) {
-        _sendMessage({ event: 'session', data: { triggeredBy: 'useSessionData' } })
-      }
-
-      if (typeof window !== 'undefined' && NEXTAUTH_EVENT_LISTENER_ADDED === false) {
-        NEXTAUTH_EVENT_LISTENER_ADDED = true
-        window.addEventListener('storage', async (event) => {
-          if (event.key === 'nextauth.message') {
-            const message = JSON.parse(event.newValue)
-            if (message.event && message.event === 'session' && message.data) {
-              // Fetch new session data but tell it not to fire an event to
-              // avoid an infinate loop.
-              //
-              // Note: We could pass session data through and do something like
-              // `setData(message.data)` but that causes problems depending on
-              // how the session object is being used and may expose session
-              // data to 3rd party scripts, it's safer to update the session
-              // this way.
-              await _getSession(false)
-            }
-          }
-        })
-      }
-
-      // If CLIENT_MAXAGE is greater than zero, trigger auto re-fetching session
-      if (clientMaxAge > 0) {
-        setTimeout(async (session) => {
-          await _getSession()
-        }, clientMaxAge)
-      }
-    } catch (error) {
-      logger.error('CLIENT_USE_SESSION_ERROR', error)
-    }
-  }
-  useEffect(() => { _getSession() }, [])
-  return [data, loading]
-}
-
-// Client side method
-const signin = async (provider, args) => {
-  const callbackUrl = (args && args.callbackUrl) ? args.callbackUrl : window.location
-
-  if (!provider) {
-    // Redirect to sign in page if no provider specified
-    const baseUrl = _baseUrl()
-    window.location = `${baseUrl}/signin?callbackUrl=${encodeURIComponent(callbackUrl)}`
-    return
-  }
-
-  const providers = await getProviders()
-  if (!providers[provider]) {
-    // If Provider not recognized, redirect to sign in page
-    const baseUrl = _baseUrl()
-    window.location = `${baseUrl}/signin?callbackUrl=${encodeURIComponent(callbackUrl)}`
-  } else if (providers[provider].type === 'oauth') {
-    // If is an OAuth provider, redirect to providers[provider].signinUrl
-    window.location = `${providers[provider].signinUrl}?callbackUrl=${encodeURIComponent(callbackUrl)}`
-  } else {
-    // If is any other provider type, POST to providers[provider].signinUrl (with CSRF Token)
-    const options = {
-      method: 'post',
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded'
-      },
-      body: _encodedForm({
-        csrfToken: await getCsrfToken(),
-        callbackUrl: callbackUrl,
-        ...args
-      })
-    }
-    const res = await fetch(providers[provider].signinUrl, options)
-    window.location = res.url ? res.url : callbackUrl
-  }
-}
-
-// Client side method
-const signout = async (args) => {
-  const callbackUrl = (args && args.callbackUrl) ? args.callbackUrl : window.location
-
-  const baseUrl = _baseUrl()
-  const options = {
-    method: 'post',
-    headers: {
-      'Content-Type': 'application/x-www-form-urlencoded'
-    },
-    body: _encodedForm({
-      csrfToken: await getCsrfToken(),
-      callbackUrl: callbackUrl
-    })
-  }
-  const res = await fetch(`${baseUrl}/signout`, options)
-
-  _sendMessage({ event: 'session', data: { triggeredBy: 'signout' } })
-
-  window.location = res.url ? res.url : callbackUrl
-}
-
-// Provider to wrap the app in to make session data available globally
-const Provider = ({ children, session }) => {
-  const value = useSession(session)
-  return createElement(SessionContext.Provider, { value }, children)
-}
-
-const _fetchData = async (url, options) => {
-  try {
-    const res = await fetch(url, options)
-    const data = await res.json()
-    return Promise.resolve(Object.keys(data).length > 0 ? data : null) // Return null if data empty
-  } catch (error) {
-    logger.error('CLIENT_FETCH_ERROR', url, error)
-    return Promise.resolve(null)
-  }
-}
-
-const _baseUrl = ({ req } = {}) => {
-  if (req) {
-    // Server Side
-    // If we have a 'req' object are running sever side, so we should grab the
-    // base URL from cookie that is set by the API route - which is how config
-    // is shared automatically between the API route and the client.
-    const cookies = req ? _parseCookies(req.headers.cookie) : null
-    const baseUrlCookieName = process.env.NEXTAUTH_BASE_URL_COOKIE_NAME || NEXTAUTH_DEFAULT_BASE_URL_COOKIE_NAME
-    const cookieValue = cookies[`__Secure-${baseUrlCookieName}`] || cookies[baseUrlCookieName]
-    const [baseUrl] = cookieValue ? cookieValue.split('|') : [null]
-    return baseUrl
-  } else {
-    // Client Side
-    // Note: 'site' is empty by default; URL is normally relative.
-    const site = process.env.NEXTAUTH_SITE || NEXTAUTH_DEFAULT_SITE
-    const basePath = process.env.NEXTAUTH_BASE_PATH || NEXTAUTH_DEFAULT_BASE_PATH
-    return `${site}${basePath}`
-  }
-}
-
-// Adapted from https://github.com/felixfong227/simple-cookie-parser/blob/master/index.js
-const _parseCookies = (string) => {
-  if (!string) { return {} }
-  try {
-    const object = {}
-    const a = string.split(';')
-    for (let i = 0; i < a.length; i++) {
-      const b = a[i].split('=')
-      if (b[0].length > 1 && b[1]) {
-        object[b[0].trim()] = decodeURIComponent(b[1])
-      }
-    }
-    return object
-  } catch (error) {
-    logger.error('CLIENT_COOKIE_PARSE_ERROR', error)
-    return {}
-  }
-}
-
-const _encodedForm = (formData) => {
-  return Object.keys(formData).map((key) => {
-    return encodeURIComponent(key) + '=' + encodeURIComponent(formData[key])
-  }).join('&')
-}
-
-const _sendMessage = (message) => {
-  if (typeof localStorage !== 'undefined') {
-    localStorage.setItem('nextauth.message', JSON.stringify(message)) // eslint-disable-line
-  }
-}
-
-export default {
-  // Some methods are exported with more than one name. This provides
-  // flexibility over how they can be invoked and compatibility with earlier
-  // releases (going back to v1 and earlier v2 beta releases).
-  // e.g. NextAuth.session() or const { getSession } from 'next-auth/client'
-  session: getSession,
-  providers: getProviders,
-  csrfToken: getCsrfToken,
-  getSession,
-  getProviders,
-  getCsrfToken,
-  useSession,
-  Provider,
-  signin,
-  signout
-}

src/client/react.js

@@ -0,0 +1,351 @@
+// 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) {
+      localStorage.setItem(
+        name,
+        JSON.stringify({ ...message, timestamp: _now() })
+      )
+    },
+  }
+}

src/css/index.css

@@ -1,14 +1,46 @@
 :root {
-  --color-primary: #444;
-  --color-control-border: #bbb;
-  --color-button-hover-background: #f9f9f9;
-  --color-button-active-background: #f5f5f5;
-  --color-button-active-border: #aaa;
   --border-width: 1px;
   --border-radius: .3rem;
+  --color-error: #c94b4b;
+  --color-info: #157efb;
+  --color-info-text: #fff;
+}
+
+.__next-auth-theme-auto,
+.__next-auth-theme-light {
+  --color-background: #fff;
+  --color-text: #000;
+  --color-primary: #444;
+  --color-control-border: #bbb;
+  --color-button-active-background: #f9f9f9;
+  --color-button-active-border: #aaa;
+  --color-seperator: #ccc;
+}
+
+.__next-auth-theme-dark {
+  --color-background: #000;
+  --color-text: #fff;
+  --color-primary: #ccc;
+  --color-control-border: #555;
+  --color-button-active-background: #060606;
+  --color-button-active-border: #666;
+  --color-seperator: #444;
+}
+
+@media (prefers-color-scheme: dark) {
+  .__next-auth-theme-auto {
+    --color-background: #000;
+    --color-text: #fff;
+    --color-primary: #ccc;
+    --color-control-border: #555;
+    --color-button-active-background: #060606;
+    --color-button-active-border: #666;
+    --color-seperator: #444;
+  }
 }
 
 body {
+  background-color: var(--color-background);
   margin: 0;
   padding: 0;
   font-family: -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
@@ -18,6 +50,11 @@ h1 {
   font-weight: 400;
   margin-bottom: 1.5rem;
   padding: 0 1rem;
+  color: var(--color-text);
+}
+
+p {
+  color: var(--color-text)
 }
 
 form {
@@ -39,10 +76,11 @@ input[type] {
   width: 100%;
   padding: .5rem 1rem;
   border: var(--border-width) solid var(--color-control-border);
-  background: #fff;
+  background: var(--color-background);
   font-size: 1rem;
   border-radius: var(--border-radius);
-  box-shadow: inset 0 .1rem .2rem rgba(0,0,0,.2);
+  box-shadow: inset 0 .1rem .2rem rgba(0, 0, 0, .2);
+  color: var(--color-text);
 
   &:focus {
     box-shadow: none;
@@ -59,9 +97,10 @@ p {
 a.button {
   text-decoration: none;
   line-height: 1rem;
+
   &:link,
   &:visited {
-    background-color: #fff;
+    background-color: var(--color-background);
     color: var(--color-primary);
   }
 }
@@ -72,21 +111,20 @@ a.button {
   padding: .75rem 1rem;
   border: var(--border-width) solid var(--color-control-border);
   color: var(--color-primary);
-  background-color: #fff;
+  background-color: var(--color-background);
   font-size: 1rem;
   border-radius: var(--border-radius);
-  transition: all .1s ease-in-out;  
-  box-shadow: 0 0.15rem 0.3rem rgba(0,0,0,.15), inset 0 .1rem .2rem #fff, inset 0 -.1rem .1rem rgba(0,0,0,.05);
+  transition: all .1s ease-in-out;
+  box-shadow: 0 0.15rem 0.3rem rgba(0, 0, 0, .15), inset 0 .1rem .2rem var(--color-background), inset 0 -.1rem .1rem rgba(0, 0, 0, .05);
   font-weight: 500;
   position: relative;
 
   &:hover {
-    background-color: var(--color-button-hover-background);
     cursor: pointer;
   }
-  
+
   &:active {
-    box-shadow: 0 0.15rem 0.3rem rgba(0,0,0,.15), inset 0 .1rem .2rem #fff, inset 0 -.1rem .1rem rgba(0,0,0,.1);
+    box-shadow: 0 0.15rem 0.3rem rgba(0, 0, 0, .15), inset 0 .1rem .2rem var(--color-background), inset 0 -.1rem .1rem rgba(0, 0, 0, .1);
     background-color: var(--color-button-active-background);
     border-color: var(--color-button-active-border);
     cursor: pointer;
@@ -98,20 +136,21 @@ a.site {
   text-decoration: none;
   font-size: 1rem;
   line-height: 2rem;
+
   &:hover {
     text-decoration: underline;
   }
 }
 
 .page {
-  position: absolute; 
-	width: 100%;
+  position: absolute;
+  width: 100%;
   height: 100%;
   display: table;
   margin: 0;
   padding: 0;
 
-  > div {
+  >div {
     display: table-cell;
     vertical-align: middle;
     text-align: center;
@@ -126,12 +165,14 @@ a.site {
     padding-right: 2rem;
     margin-top: .5rem;
   }
+
   .message {
     margin-bottom: 1.5rem;
   }
 }
 
 .signin {
+
   button,
   a.button,
   input[type="text"] {
@@ -143,29 +184,48 @@ a.site {
   hr {
     display: block;
     border: 0;
-    border-top: 1px solid #ccc;
+    border-top: 1px solid var(--color-seperator);
     margin: 1.5em auto 0 auto;
     overflow: visible;
 
     &::before {
       content: "or";
-      background: #fff;
+      background: var(--color-background);
       color: #888;
       padding: 0 .4rem;
       position: relative;
       top: -.6rem;
     }
   }
-  > div,
+
+  .error {
+    background: #f5f5f5;
+    font-weight: 500;
+    border-radius: 0.3rem;
+    background: var(--color-info);
+
+    p {
+      text-align: left;
+      padding: 0.5rem 1rem;
+      font-size: 0.9rem;
+      line-height: 1.2rem;
+      color: var(--color-info-text);
+    }
+  }
+
+  >div,
   form {
     display: block;
     margin: 0 auto 0.5rem auto;
+
     input[type] {
       margin-bottom: 0.5rem;
     }
+
     button {
       width: 100%;
     }
+
     max-width: 300px;
   }
 }

src/css/index.js

@@ -4,7 +4,8 @@
 import fs from 'fs'
 import path from 'path'
 
-const pathToCss = path.join(__dirname, '/index.css')
-const css = fs.readFileSync(pathToCss, 'utf8')
+const pathToCss = path.join(process.cwd(), '/dist/css/index.css')
 
-export default () => css
+export default function css () {
+  return fs.readFileSync(pathToCss, 'utf8')
+}

src/lib/errors.js

@@ -1,41 +1,98 @@
-class UnknownError extends Error {
-  constructor (message) {
-    super(message)
-    this.name = 'UnknownError'
-    this.message = message
+/**
+ * Same as the default `Error`, but it is JSON serializable.
+ * @source https://iaincollins.medium.com/error-handling-in-javascript-a6172ccdf9af
+ */
+export class UnknownError extends Error {
+  constructor(error) {
+    // Support passing error or string
+    super(error?.message ?? error)
+    this.name = "UnknownError"
+    if (error instanceof Error) {
+      this.stack = error.stack
+    }
   }
 
-  toJSON () {
+  toJSON() {
     return {
-      error: {
-        name: this.name,
-        message: this.message
-        // stack: this.stack
-      }
+      name: this.name,
+      message: this.message,
+      stack: this.stack,
     }
   }
 }
 
-class CreateUserError extends UnknownError {
-  constructor (message) {
-    super(message)
-    this.name = 'CreateUserError'
-    this.message = message
-  }
+export class OAuthCallbackError extends UnknownError {
+  name = "OAuthCallbackError"
 }
 
-// Thrown when an Email address is already associated with an account
-// but the user is trying an oAuth account that is not linked to it.
-class AccountNotLinkedError extends UnknownError {
-  constructor (message) {
-    super(message)
-    this.name = 'AccountNotLinkedError'
-    this.message = message
-  }
+/**
+ * Thrown when an Email address is already associated with an account
+ * but the user is trying an OAuth account that is not linked to it.
+ */
+export class AccountNotLinkedError extends UnknownError {
+  name = "AccountNotLinkedError"
 }
 
-module.exports = {
-  UnknownError,
-  CreateUserError,
-  AccountNotLinkedError
+export class CreateUserError extends UnknownError {
+  name = "CreateUserError"
+}
+
+export class GetUserError extends UnknownError {
+  name = "GetUserError"
+}
+
+export class GetUserByEmailError extends UnknownError {
+  name = "GetUserByEmailError"
+}
+
+export class GetUserByIdError extends UnknownError {
+  name = "GetUserByIdError"
+}
+
+export class GetUserByProviderAccountIdError extends UnknownError {
+  name = "GetUserByProviderAccountIdError"
+}
+
+export class UpdateUserError extends UnknownError {
+  name = "UpdateUserError"
+}
+
+export class DeleteUserError extends UnknownError {
+  name = "DeleteUserError"
+}
+
+export class LinkAccountError extends UnknownError {
+  name = "LinkAccountError"
+}
+
+export class UnlinkAccountError extends UnknownError {
+  name = "UnlinkAccountError"
+}
+
+export class CreateSessionError extends UnknownError {
+  name = "CreateSessionError"
+}
+
+export class GetSessionError extends UnknownError {
+  name = "GetSessionError"
+}
+
+export class UpdateSessionError extends UnknownError {
+  name = "UpdateSessionError"
+}
+
+export class DeleteSessionError extends UnknownError {
+  name = "DeleteSessionError"
+}
+
+export class CreateVerificationRequestError extends UnknownError {
+  name = "CreateVerificationRequestError"
+}
+
+export class GetVerificationRequestError extends UnknownError {
+  name = "GetVerificationRequestError"
+}
+
+export class DeleteVerificationRequestError extends UnknownError {
+  name = "DeleteVerificationRequestError"
 }

src/lib/jwt.js

@@ -1,44 +1,208 @@
-import jwt from 'jsonwebtoken'
-import CryptoJS from 'crypto-js'
+import crypto from "crypto"
+import jose from "jose"
+import logger from "./logger"
 
-const encode = async ({ secret, key = secret, token = {}, maxAge }) => {
-  // If maxAge is set remove any existing created/expiry dates and replace them
-  if (maxAge) {
-    if (token.iat) { delete token.iat }
-    if (token.exp) { delete token.exp }
+// Set default algorithm to use for auto-generated signing key
+const DEFAULT_SIGNATURE_ALGORITHM = "HS512"
+
+// Set default algorithm for auto-generated symmetric encryption key
+const DEFAULT_ENCRYPTION_ALGORITHM = "A256GCM"
+
+// Use encryption or not by default
+const DEFAULT_ENCRYPTION_ENABLED = false
+
+const DEFAULT_MAX_AGE = 30 * 24 * 60 * 60 // 30 days
+
+export async function encode({
+  token = {},
+  maxAge = DEFAULT_MAX_AGE,
+  secret,
+  signingKey,
+  signingOptions = {
+    expiresIn: `${maxAge}s`,
+  },
+  encryptionKey,
+  encryptionOptions = {
+    alg: "dir",
+    enc: DEFAULT_ENCRYPTION_ALGORITHM,
+    zip: "DEF",
+  },
+  encryption = DEFAULT_ENCRYPTION_ENABLED,
+} = {}) {
+  // Signing Key
+  const _signingKey = signingKey
+    ? jose.JWK.asKey(JSON.parse(signingKey))
+    : getDerivedSigningKey(secret)
+
+  // Sign token
+  const signedToken = jose.JWT.sign(token, _signingKey, signingOptions)
+
+  if (encryption) {
+    // Encryption Key
+    const _encryptionKey = encryptionKey
+      ? jose.JWK.asKey(JSON.parse(encryptionKey))
+      : getDerivedEncryptionKey(secret)
+
+    // Encrypt token
+    return jose.JWE.encrypt(signedToken, _encryptionKey, encryptionOptions)
   }
-  const signedToken = jwt.sign(token, secret, { expiresIn: maxAge })
-  const encryptedToken = CryptoJS.AES.encrypt(signedToken, key).toString()
-  return encryptedToken
+  return signedToken
 }
 
-const decode = async ({ secret, key = secret, token, maxAge }) => {
+export async function decode({
+  secret,
+  token,
+  maxAge = DEFAULT_MAX_AGE,
+  signingKey,
+  verificationKey = signingKey, // Optional (defaults to encryptionKey)
+  verificationOptions = {
+    maxTokenAge: `${maxAge}s`,
+    algorithms: [DEFAULT_SIGNATURE_ALGORITHM],
+  },
+  encryptionKey,
+  decryptionKey = encryptionKey, // Optional (defaults to encryptionKey)
+  decryptionOptions = {
+    algorithms: [DEFAULT_ENCRYPTION_ALGORITHM],
+  },
+  encryption = DEFAULT_ENCRYPTION_ENABLED,
+} = {}) {
   if (!token) return null
-  const decryptedBytes = CryptoJS.AES.decrypt(token, key)
-  const decryptedToken = decryptedBytes.toString(CryptoJS.enc.Utf8)
-  const verifiedToken = jwt.verify(decryptedToken, secret, { maxAge })
-  return verifiedToken
+
+  let tokenToVerify = token
+
+  if (encryption) {
+    // Encryption Key
+    const _encryptionKey = decryptionKey
+      ? jose.JWK.asKey(JSON.parse(decryptionKey))
+      : getDerivedEncryptionKey(secret)
+
+    // Decrypt token
+    const decryptedToken = jose.JWE.decrypt(
+      token,
+      _encryptionKey,
+      decryptionOptions
+    )
+    tokenToVerify = decryptedToken.toString("utf8")
+  }
+
+  // Signing Key
+  const _signingKey = verificationKey
+    ? jose.JWK.asKey(JSON.parse(verificationKey))
+    : getDerivedSigningKey(secret)
+
+  // Verify token
+  return jose.JWT.verify(tokenToVerify, _signingKey, verificationOptions)
 }
 
-// This is a simple helper method to make it easier to use JWT from an API route
-const getJwt = async ({ req, secret, cookieName }) => {
-  if (!req || !secret) throw new Error('Must pass { req, secret } to getJWT()')
+/**
+ * Server-side method to retrieve the JWT from `req`.
+ * @param {{
+ * req: NextApiRequest
+ * secureCookie?: boolean
+ * cookieName?: string
+ * raw?: boolean
+ * }} params
+ */
+export async function getToken(params) {
+  const {
+    req,
+    // Use secure prefix for cookie name, unless URL is NEXTAUTH_URL is http://
+    // or not set (e.g. development or test instance) case use unprefixed name
+    secureCookie = !(
+      !process.env.NEXTAUTH_URL ||
+      process.env.NEXTAUTH_URL.startsWith("http://")
+    ),
+    cookieName = secureCookie
+      ? "__Secure-next-auth.session-token"
+      : "next-auth.session-token",
+    raw = false,
+    decode: _decode = decode,
+  } = params
+  if (!req) throw new Error("Must pass `req` to JWT getToken()")
 
-  const secureCookieName = '__Secure-next-auth.session-token'
-  const insecureCookieName = 'next-auth.session-token'
-  const cookieValue = cookieName ? req.cookies[cookieName] : req.cookies[secureCookieName] || req.cookies[insecureCookieName]
+  // Try to get token from cookie
+  let token = req.cookies[cookieName]
 
-  if (!cookieValue) { return null }
+  // If cookie not found in cookie look for bearer token in authorization header.
+  // This allows clients that pass through tokens in headers rather than as
+  // cookies to use this helper function.
+  if (!token && req.headers.authorization?.split(" ")[0] === "Bearer") {
+    const urlEncodedToken = req.headers.authorization.split(" ")[1]
+    token = decodeURIComponent(urlEncodedToken)
+  }
+
+  if (raw) {
+    return token
+  }
 
   try {
-    return await decode({ secret, token: cookieValue })
-  } catch (error) {
+    return _decode({ token, ...params })
+  } catch {
     return null
   }
 }
 
+// Generate warning (but only once at startup) when auto-generated keys are used
+let DERIVED_SIGNING_KEY_WARNING = false
+let DERIVED_ENCRYPTION_KEY_WARNING = false
+
+// Do the better hkdf of Node.js one added in `v15.0.0` and Third Party one
+function hkdf(secret, { byteLength, encryptionInfo, digest = "sha256" }) {
+  if (crypto.hkdfSync) {
+    return Buffer.from(
+      crypto.hkdfSync(
+        digest,
+        secret,
+        Buffer.alloc(0),
+        encryptionInfo,
+        byteLength
+      )
+    )
+  }
+  return require("futoin-hkdf")(secret, byteLength, {
+    info: encryptionInfo,
+    hash: digest,
+  })
+}
+
+function getDerivedSigningKey(secret) {
+  if (!DERIVED_SIGNING_KEY_WARNING) {
+    logger.warn("JWT_AUTO_GENERATED_SIGNING_KEY")
+    DERIVED_SIGNING_KEY_WARNING = true
+  }
+
+  const buffer = hkdf(secret, {
+    byteLength: 64,
+    encryptionInfo: "NextAuth.js Generated Signing Key",
+  })
+  const key = jose.JWK.asKey(buffer, {
+    alg: DEFAULT_SIGNATURE_ALGORITHM,
+    use: "sig",
+    kid: "nextauth-auto-generated-signing-key",
+  })
+  return key
+}
+
+function getDerivedEncryptionKey(secret) {
+  if (!DERIVED_ENCRYPTION_KEY_WARNING) {
+    logger.warn("JWT_AUTO_GENERATED_ENCRYPTION_KEY")
+    DERIVED_ENCRYPTION_KEY_WARNING = true
+  }
+
+  const buffer = hkdf(secret, {
+    byteLength: 32,
+    encryptionInfo: "NextAuth.js Generated Encryption Key",
+  })
+  const key = jose.JWK.asKey(buffer, {
+    alg: DEFAULT_ENCRYPTION_ALGORITHM,
+    use: "enc",
+    kid: "nextauth-auto-generated-encryption-key",
+  })
+  return key
+}
+
 export default {
   encode,
   decode,
-  getJwt
+  getToken,
 }

src/lib/logger.js

@@ -1,23 +1,81 @@
-const logger = {
-  error: (errorCode, ...text) => {
-    if (console) {
-      !text
-        ? console.error(errorCode)
-        : console.error(
-            `[next-auth][error][${errorCode}]`,
-            text,
-            `\nhttps://next-auth.js.org/errors#${errorCode.toLowerCase()}`
-        )
-    }
+/** @type {import("types").LoggerInstance} */
+const _logger = {
+  error(code, ...message) {
+    console.error(
+      `[next-auth][error][${code.toLowerCase()}]`,
+      `\nhttps://next-auth.js.org/errors#${code.toLowerCase()}`,
+      ...message
+    )
+  },
+  warn(code, ...message) {
+    console.warn(
+      `[next-auth][warn][${code.toLowerCase()}]`,
+      `\nhttps://next-auth.js.org/warnings#${code.toLowerCase()}`,
+      ...message
+    )
+  },
+  debug(code, ...message) {
+    if (!process?.env?._NEXTAUTH_DEBUG) return
+    console.log(`[next-auth][debug][${code.toLowerCase()}]`, ...message)
   },
-  debug: (debugCode, ...text) => {
-    if (process && process.env && process.env._NEXT_AUTH_DEBUG) {
-      console.log(
-        `[next-auth][debug][${debugCode}]`,
-        text
-      )
-    }
-  }
 }
 
-export default logger
+/**
+ * Override the built-in logger.
+ * Any `undefined` level will use the default logger.
+ * @param {Partial<import("types").LoggerInstance>} newLogger
+ */
+export function setLogger(newLogger = {}) {
+  if (newLogger.error) _logger.error = newLogger.error
+  if (newLogger.warn) _logger.warn = newLogger.warn
+  if (newLogger.debug) _logger.debug = newLogger.debug
+}
+
+export default _logger
+
+/**
+ * Serializes client-side log messages and sends them to the server
+ * @param {import("types").LoggerInstance} logger
+ * @param {string} basePath
+ * @return {import("types").LoggerInstance}
+ */
+export function proxyLogger(logger = _logger, basePath) {
+  try {
+    if (typeof window === "undefined") {
+      return logger
+    }
+
+    const clientLogger = {}
+    for (const level in logger) {
+      clientLogger[level] = (code, ...message) => {
+        _logger[level](code, ...message) // Log on client as usual
+
+        const url = `${basePath}/_log`
+        const body = new URLSearchParams({
+          level,
+          code,
+          message: JSON.stringify(
+            message.map((m) => {
+              if (m instanceof Error) {
+                // Serializing errors: https://iaincollins.medium.com/error-handling-in-javascript-a6172ccdf9af
+                return { name: m.name, message: m.message, stack: m.stack }
+              }
+              return m
+            })
+          ),
+        })
+        if (navigator.sendBeacon) {
+          return navigator.sendBeacon(url, body)
+        }
+        return fetch(url, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body,
+        })
+      }
+    }
+    return clientLogger
+  } catch {
+    return _logger
+  }
+}

src/lib/parse-url.js

@@ -0,0 +1,27 @@
+/**
+ * Simple universal (client/server) function to split host and path
+ * We use this rather than a library because we need to use the same logic both
+ * client and server side and we only need to parse out the host and path, while
+ * supporting a default value, so a simple split is sufficent.
+ * @param {string} url
+ */
+export default function parseUrl (url) {
+  // Default values
+  const defaultHost = 'http://localhost:3000'
+  const defaultPath = '/api/auth'
+
+  if (!url) { url = `${defaultHost}${defaultPath}` }
+
+  // Default to HTTPS if no protocol explictly specified
+  const protocol = url.startsWith('http:') ? 'http' : 'https'
+
+  // Normalize URLs by stripping protocol and no trailing slash
+  url = url.replace(/^https?:\/\//, '').replace(/\/$/, '')
+
+  // Simple split based on first /
+  const [_host, ..._path] = url.split('/')
+  const baseUrl = _host ? `${protocol}://${_host}` : defaultHost
+  const basePath = _path.length > 0 ? `/${_path.join('/')}` : defaultPath
+
+  return { baseUrl, basePath }
+}

src/providers/42.js

@@ -0,0 +1,20 @@
+export default function FortyTwo(options) {
+  return {
+    id: '42-school',
+    name: '42 School',
+    type: 'oauth',
+    version: '2.0',
+    params: { grant_type: 'authorization_code' },
+    accessTokenUrl: 'https://api.intra.42.fr/oauth/token',
+    authorizationUrl:
+      'https://api.intra.42.fr/oauth/authorize?response_type=code',
+    profileUrl: 'https://api.intra.42.fr/v2/me',
+    profile: (profile) => ({
+      id: profile.id,
+      email: profile.email,
+      image: profile.image_url,
+      name: profile.usual_full_name,
+    }),
+    ...options,
+  }
+}

src/providers/apple.js

@@ -1,48 +1,34 @@
-import jwt from 'jsonwebtoken'
-
-export default (options) => {
+export default function Apple(options) {
   return {
-    id: 'apple',
-    name: 'Apple',
-    type: 'oauth',
-    version: '2.0',
-    scope: 'name email',
-    params: { grant_type: 'authorization_code' },
-    accessTokenUrl: 'https://appleid.apple.com/auth/token',
-    authorizationUrl: 'https://appleid.apple.com/auth/authorize?response_type=code&id_token&response_mode=form_post',
+    id: "apple",
+    name: "Apple",
+    type: "oauth",
+    version: "2.0",
+    scope: "name email",
+    params: { grant_type: "authorization_code" },
+    accessTokenUrl: "https://appleid.apple.com/auth/token",
+    authorizationUrl:
+      "https://appleid.apple.com/auth/authorize?response_type=code&id_token&response_mode=form_post",
     profileUrl: null,
     idToken: true,
-    profile: (profile) => {
+    profile(profile) {
+      // The name of the user will only return on first login
       return {
         id: profile.sub,
-        name: profile.name == null ? profile.sub : profile.name,
-        email: profile.email
+        name:
+          profile.user != null
+            ? profile.user.name.firstName + " " + profile.user.name.lastName
+            : null,
+        email: profile.email,
       }
     },
     clientId: null,
     clientSecret: {
-      appleId: null,
       teamId: null,
       privateKey: null,
-      keyId: null
+      keyId: null,
     },
-    clientSecretCallback: async ({ appleId, keyId, teamId, privateKey }) => {
-      const response = jwt.sign(
-        {
-          iss: teamId,
-          iat: Math.floor(Date.now() / 1000),
-          exp: Math.floor(Date.now() / 1000) + (86400 * 180), // 6 months
-          aud: 'https://appleid.apple.com',
-          sub: appleId
-        },
-        privateKey,
-        {
-          algorithm: 'ES256',
-          keyid: keyId
-        }
-      )
-      return Promise.resolve(response)
-    },
-    ...options
+    protection: "none", // REVIEW: Apple does not support state, as far as I know. Can we use "pkce" then?
+    ...options,
   }
 }

src/providers/atlassian.js

@@ -0,0 +1,24 @@
+export default function Atlassian(options) {
+  return {
+    id: "atlassian",
+    name: "Atlassian",
+    type: "oauth",
+    version: "2.0",
+    params: {
+      grant_type: "authorization_code",
+    },
+    accessTokenUrl: "https://auth.atlassian.com/oauth/token",
+    authorizationUrl:
+      "https://auth.atlassian.com/authorize?audience=api.atlassian.com&response_type=code&prompt=consent",
+    profileUrl: "https://api.atlassian.com/me",
+    profile(profile) {
+      return {
+        id: profile.account_id,
+        name: profile.name,
+        email: profile.email,
+        image: profile.picture,
+      }
+    },
+    ...options,
+  }
+}

src/providers/auth0.js

@@ -1,22 +1,22 @@
-export default (options) => {
+export default function Auth0(options) {
   return {
-    id: 'auth0',
-    name: 'Auth0',
-    type: 'oauth',
-    version: '2.0',
-    params: { grant_type: 'authorization_code', response_type: 'code' },
-    scope: 'openid email profile',
-    accessTokenUrl: `https://${options.subdomain}.auth0/oauth/token`,
-    authorizationUrl: `https://${options.subdomain}.auth0.com/authorize?`,
-    profileUrl: `http://${options.subdomain}.auth0.com/userinfo`,
-    profile: (profile) => {
+    id: "auth0",
+    name: "Auth0",
+    type: "oauth",
+    version: "2.0",
+    params: { grant_type: "authorization_code" },
+    scope: "openid email profile",
+    accessTokenUrl: `https://${options.domain}/oauth/token`,
+    authorizationUrl: `https://${options.domain}/authorize?response_type=code`,
+    profileUrl: `https://${options.domain}/userinfo`,
+    profile(profile) {
       return {
         id: profile.sub,
         name: profile.nickname,
         email: profile.email,
-        image: profile.picture
+        image: profile.picture,
       }
     },
-    ...options
+    ...options,
   }
 }

src/providers/azure-ad-b2c.js

@@ -0,0 +1,41 @@
+export default function AzureADB2C(options) {
+  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",
+    name: "Azure Active Directory B2C",
+    type: "oauth",
+    version: "2.0",
+    params: {
+      grant_type: "authorization_code",
+    },
+    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 {
+        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/basecamp.js

@@ -0,0 +1,22 @@
+export default function Basecamp(options) {
+  return {
+    id: "basecamp",
+    name: "Basecamp",
+    type: "oauth",
+    version: "2.0",
+    accessTokenUrl:
+      "https://launchpad.37signals.com/authorization/token?type=web_server",
+    authorizationUrl:
+      "https://launchpad.37signals.com/authorization/new?type=web_server",
+    profileUrl: "https://launchpad.37signals.com/authorization.json",
+    profile(profile) {
+      return {
+        id: profile.identity.id,
+        name: `${profile.identity.first_name} ${profile.identity.last_name}`,
+        email: profile.identity.email_address,
+        image: null,
+      }
+    },
+    ...options,
+  }
+}

src/providers/battlenet.js

@@ -0,0 +1,29 @@
+export default function BattleNet(options) {
+  const { region } = options
+  return {
+    id: "battlenet",
+    name: "Battle.net",
+    type: "oauth",
+    version: "2.0",
+    scope: "openid",
+    params: { grant_type: "authorization_code" },
+    accessTokenUrl:
+      region === "CN"
+        ? "https://www.battlenet.com.cn/oauth/token"
+        : `https://${region}.battle.net/oauth/token`,
+    authorizationUrl:
+      region === "CN"
+        ? "https://www.battlenet.com.cn/oauth/authorize?response_type=code"
+        : `https://${region}.battle.net/oauth/authorize?response_type=code`,
+    profileUrl: "https://us.battle.net/oauth/userinfo",
+    profile(profile) {
+      return {
+        id: profile.id,
+        name: profile.battletag,
+        email: null,
+        image: null,
+      }
+    },
+    ...options,
+  }
+}

src/providers/box.js

@@ -1,22 +1,23 @@
-export default (options) => {
+export default function Box(options) {
   return {
-    id: 'box',
-    name: 'Box',
-    type: 'oauth',
-    version: '2.0',
-    scope: '',
-    params: { grant_type: 'authorization_code' },
-    accessTokenUrl: 'https://api.box.com/oauth2/token',
-    authorizationUrl: 'https://account.box.com/api/oauth2/authorize?response_type=code',
-    profileUrl: 'https://api.box.com/2.0/users/me',
-    profile: (profile) => {
+    id: "box",
+    name: "Box",
+    type: "oauth",
+    version: "2.0",
+    scope: "",
+    params: { grant_type: "authorization_code" },
+    accessTokenUrl: "https://api.box.com/oauth2/token",
+    authorizationUrl:
+      "https://account.box.com/api/oauth2/authorize?response_type=code",
+    profileUrl: "https://api.box.com/2.0/users/me",
+    profile(profile) {
       return {
         id: profile.id,
         name: profile.name,
         email: profile.login,
-        image: profile.avatar_url
+        image: profile.avatar_url,
       }
     },
-    ...options
+    ...options,
   }
 }