Compare commits

...

93 Commits

Author SHA1 Message Date
GitHub Actions
bcf909b69e chore(release): bump package version(s) [skip ci] 2022-12-24 16:39:23 +00:00
Balázs Orbán
4dcdd21242 fix(providers): add state check to Twitter by default
Fixes #6135
2022-12-24 17:16:22 +01:00
Balázs Orbán
137d993a13 chore(dev): upgrade next 2022-12-24 17:15:35 +01:00
Balázs Orbán
8dda662cd6 chore: fix issue validator path 2022-12-24 16:43:51 +01:00
Balázs Orbán
8a438bab32 Merge branch 'main' of github.com:nextauthjs/next-auth 2022-12-24 16:36:33 +01:00
Balázs Orbán
4aaad03e9c chore: fix issue validator 2022-12-24 16:36:30 +01:00
Fatih Aygün
4fa0d1fa2a fix(core): correctly normalize endpoint configuration (#6173) 2022-12-24 15:31:47 +00:00
Balázs Orbán
c081773667 chore: use classic PAT for example sync 2022-12-24 15:25:57 +00:00
Balázs Orbán
1ab0a2aed4 fix(adapters): correct peer dependency for Supabase Adapter
Fixes #6172
2022-12-24 15:23:29 +00:00
Balázs Orbán
cac9816d32 chore: update sync examples PAT 2022-12-24 15:19:27 +00:00
Balázs Orbán
65defc709e chore(examples): change to named import 2022-12-24 15:14:06 +00:00
Balázs Orbán
1601626d31 chore: prettier ignore generated file 2022-12-24 04:34:47 +01:00
Balázs Orbán
8c4f439279 fix: add package keywords 2022-12-24 04:32:10 +01:00
GitHub Actions
a3cc9cb5f8 chore(release): bump package version(s) [skip ci] 2022-12-24 03:15:11 +00:00
Balázs Orbán
0ad4be2809 fix(core): add header to README 2022-12-24 04:04:56 +01:00
Balázs Orbán
aea4aaf25f fix(sveltekit): add header to README 2022-12-24 04:04:49 +01:00
Balázs Orbán
9bd7bc8a47 chore: fix docs building 2022-12-24 03:43:32 +01:00
Balázs Orbán
bf8fc9ca94 chore: fix docs scripts 2022-12-24 03:39:57 +01:00
Balázs Orbán
7116248e87 chore: mark @auth/* as prereleases 2022-12-24 03:30:53 +01:00
Balázs Orbán
ef8f353d94 Merge branch 'main' of github.com:nextauthjs/next-auth 2022-12-24 03:26:10 +01:00
Balázs Orbán
01620f9b7c chore: drop older node.js versions, update pnpm 2022-12-24 03:26:07 +01:00
Balázs Orbán
87d41aff94 chore: re-add LICENSE as it seems to not be picked up 2022-12-24 02:22:29 +00:00
Balázs Orbán
2d21f5ea5e chore: remove LICENSE file in favor of .github
See: https://github.com/nextauthjs/.github
2022-12-24 02:21:52 +00:00
Balázs Orbán
adf7cae7a0 chore: gitignore eslintcache 2022-12-24 03:17:50 +01:00
Balázs Orbán
f9b75e0a39 chore: remove extra tsconfigs 2022-12-24 03:16:50 +01:00
Balázs Orbán
9d6f54539d chore: simplify eslint linting 2022-12-24 03:10:03 +01:00
Balázs Orbán
0e51c66e11 chore: remove package-level lint and format 2022-12-24 01:49:31 +01:00
Balázs Orbán
e47c3c81f1 chore: format 2022-12-24 01:47:46 +01:00
Balázs Orbán
d69edb8501 chore: tweak prettierignore 2022-12-24 01:46:17 +01:00
Balázs Orbán
e5c0e3513b chore: upgrade monorepo-release package 2022-12-24 01:33:50 +01:00
Balázs Orbán
ca208ce732 chore: remove husky 2022-12-24 01:33:20 +01:00
Balázs Orbán
dcb601987b Merge branch 'main' of github.com:nextauthjs/next-auth 2022-12-23 15:00:20 +01:00
Balázs Orbán
7fd799a9ac chore: only lint with prettier 2022-12-23 15:00:13 +01:00
Balázs Orbán
fdd5e2390d chore: format 2022-12-23 14:42:37 +01:00
Balázs Orbán
fdecbb59c4 chore: move all lint/format to top 2022-12-23 14:41:53 +01:00
Nico Domino
677d8a346f chore(docs): fix aloglia docusaurus.config.js settings (#6159)
* chore: fix docusaurus algolia config

* chore: add empty 03-core dir
2022-12-23 12:41:43 +01:00
GitHub Actions
aad0b8db0e chore(release): bump package version(s) [skip ci] 2022-12-23 06:16:36 +00:00
Balázs Orbán
137bbb8d84 fix(core): improve AuthConfig docs 2022-12-23 07:02:50 +01:00
Balázs Orbán
d7fbd05eba chore: update monorepo-release package 2022-12-23 06:52:57 +01:00
Balázs Orbán
532aa24495 chore: use classic PAT for now 2022-12-23 05:10:27 +01:00
github-actions
f5da5a5f33 chore(release): bump package version(s) [skip ci] 2022-12-23 04:31:30 +01:00
Balázs Orbán
3b85f46c21 Update release.yml 2022-12-23 04:11:44 +01:00
Balázs Orbán
6aa1af2ffb Update release.yml 2022-12-23 04:11:00 +01:00
Balázs Orbán
9364625681 Update release.yml 2022-12-23 04:09:30 +01:00
Balázs Orbán
1bf2e1d468 Merge branch 'main' of github.com:nextauthjs/next-auth 2022-12-23 03:58:39 +01:00
Balázs Orbán
ac304f17da docs: fix link to sveltekit 2022-12-23 03:58:35 +01:00
Balázs Orbán
3a685b28f8 Update release.yml 2022-12-23 02:56:15 +00:00
Balázs Orbán
5b34b95c58 Update release.yml 2022-12-23 02:42:21 +00:00
Balázs Orbán
a706105205 chore: skip dynamodb as it times out 2022-12-23 03:28:07 +01:00
Balázs Orbán
39c78f27b5 fix(sveltekit): update to latest @auth/core, autogenerate API reference (#6153)
* docs(sveltekit): autogenerate API reference

* feat(sveltekit): update to use latest `@auth/core`

* chore: format

* chore: add auth packages as docs dependency

* chore: format

* chore: more formatting

* chore: don't run build before tests
2022-12-23 02:17:24 +00:00
Balázs Orbán
b179f15cf3 chore: tweak release config 2022-12-23 01:49:04 +01:00
Jordan Calhoun
54561a1231 docs: Typo correction (#6151)
PROT -> PORT
2022-12-22 22:42:56 +00:00
Nico Domino
0ea9ada3a9 chore(docs): remaining authjs.dev and repo clean up (#6097) 2022-12-22 18:04:52 +01:00
Nico Domino
209c368a73 chore(docs): add adapters and providers subdomain redirect in vercel.json (#6146) 2022-12-22 17:40:22 +01:00
Nico Domino
52c5b7cad3 chore(docs): update auth.js og-image (#6145) 2022-12-22 17:36:28 +01:00
Balázs Orbán
b8d83f52b3 chore(examples): attempt to fix gatsby deployment 2022-12-22 05:42:26 +01:00
Balázs Orbán
7dacfbabf0 chore(examples): attempt to fix gatsby deployment 2022-12-22 04:41:20 +01:00
Balázs Orbán
bb372cc5cc docs: main page improvements 2022-12-22 04:05:22 +01:00
Unieveth
c6ca01a99e docs: fix closing tag on oauth-tutorial (#6134)
Fixed wrong closing tag on oauth-tutorial

Changed closing tag on pages/overview.tsx from `</img>` to `</>
2022-12-22 02:37:36 +00:00
Balázs Orbán
6c45abf383 feat(core): improved logging / renames / new exports (#6085)
- Cleans up logging. Logs are now color-coded, added more debug logs, and errors can include some simple metadata (like provider id) to know which provider caused an issue.
- All errors are exposed via `@auth/core/errors`. Each error has a URL like: https://errors.authjs.dev#errorcode in the terminal, which points to the documentation explaining the problem in detail, suggesting a fix.
- Added a bunch of documentation that autogenerates the pages under https://authjs.dev/reference/core/modules/main
- Renames `AuthHandler`  to `Auth` and `AuthOptions` to `AuthConfig`
- Throwing an error in `signIn` callback will now be caught as a general error and will redirect to `/error?error=Configuration`. If the callback returns `false`, it will redirect to `/error?error=AccessDenied`.
2022-12-22 02:36:54 +00:00
Balázs Orbán
2ba5314e35 docs(core): update jwtand types description 2022-12-21 02:05:55 +01:00
Balázs Orbán
582a3c339a refactor(core): move types moduile to top-level 2022-12-21 01:54:49 +01:00
Balázs Orbán
ea23a93442 refactor(core): move jwt to a single file 2022-12-21 01:39:35 +01:00
ndom91
1d67ad41cc chore(docs): add cleanUrls: true 2022-12-19 20:29:08 +01:00
Yahav
7c50b3da98 chore(docs): fix typo in 02-oauth-tutorial.mdx (#6093) 2022-12-19 20:24:55 +01:00
Balázs Orbán
1b2c373fa1 docs: capitalize 2022-12-19 13:39:23 +00:00
Balázs Orbán
f7275c7527 chore: type updates
fix import

chore: more docs update
2022-12-19 04:03:03 +01:00
Balázs Orbán
e699ff14b8 docs: /reference sidebar improvements (#6115)
* wip

* 🤖 lazy commit

* 🤖 lazy commit

* revert some changes, remove prettier jsdoc plugin for now

* sidebar tweaks

* add adapter module docs

* remove provider docs

* embed all reflections under modules

Based on: https://github.com/TypeStrong/typedoc/issues/2006

Related: https://github.com/tgreyuk/typedoc-plugin-markdown/issues/338

* no trailing slash, update theme

* updates

* update snapshot

* update sidebar and overview
2022-12-19 01:00:06 +00:00
ndom91
6eab7ac25f chore(actions): revert var dump 2022-12-19 01:31:11 +01:00
ndom91
9b05dbc540 chore(actions): add path 2022-12-19 01:28:33 +01:00
ndom91
132a76d951 chore(actions): test github context 2022-12-19 01:26:54 +01:00
ndom91
66cbb522d9 Merge branch 'main' of ssh://github.com/nextauthjs/next-auth 2022-12-19 01:12:47 +01:00
ndom91
553924d902 chore(actions): fix validator path 2022-12-19 01:12:38 +01:00
Balázs Orbán
cba81f0b8c chore: add snippets 2022-12-18 14:12:56 +01:00
Balázs Orbán
b7171ab790 chore: tweak jsdoc formatting/linting 2022-12-18 14:06:00 +01:00
ndom91
43c8f663c6 Revert "fix: pnpm-lock.yaml"
This reverts commit b16b048991.
2022-12-18 04:06:37 +01:00
ndom91
b16b048991 fix: pnpm-lock.yaml 2022-12-18 04:05:16 +01:00
ndom91
62a5d70f9b Merge branch 'main' of ssh://github.com/nextauthjs/next-auth 2022-12-18 04:04:46 +01:00
Balázs Orbán
1b671ae83d docs: format landing page 2022-12-18 02:19:07 +00:00
Andrew Manzanero
cc4b9fc2fc fix(core): check for oidc account types in callback-handler.ts (#6108)
* check oidc account types

* Apply suggestions from code review

Co-authored-by: Balázs Orbán <info@balazsorban.com>
2022-12-18 01:46:33 +00:00
Nico Domino
4935166372 chore(docs): add provider-issue and github-discussions redirects (#6110) 2022-12-18 01:44:37 +00:00
Balázs Orbán
695f937dbd chore: change sync action comment 2022-12-18 01:18:08 +00:00
ndom91
ad9eec3676 chore(docs): add provider-issue and github-discussions redirects 2022-12-18 00:07:41 +01:00
Balázs Orbán
2e924edcdf chore: stop sync next-auth-example from main branch 2022-12-17 19:40:20 +00:00
Balázs Orbán
c7627778eb chore: no prettier check yet 2022-12-17 14:33:52 +01:00
Balázs Orbán
8b5644453b docs: set up API reference generation 2022-12-17 14:26:14 +01:00
Balázs Orbán
84291d3e81 chore: fix formatting and linting 2022-12-16 15:57:55 +01:00
Nico Domino
67e5c236f6 chore(docs): wildcard path matching (#6092) 2022-12-16 14:22:51 +01:00
Nico Domino
8972defa4b chore(vercel): add errors and warnings subdomain redirects (#6091) 2022-12-16 14:10:39 +01:00
Aleš Vaupotič
85667dd681 docs(sveltekit): add note about deploying to providers other than vercel (#6075)
* Directions to deploy outside Vercel

An additional ENV variable is needed when deploying with another service.

* Updated as suggested, AUTH_TRUST_HOST is a boolean

Add AUTH_TRUST_HOST for deploy outside Vercel
2022-12-16 05:06:26 +01:00
Lluis Agusti
d9532745eb docs: update names to Auth.js (#6077) 2022-12-16 05:03:31 +01:00
Robert Soriano
1e6daa8304 chore(examples): use @auth/core in Nuxt playground (#6081)
* nuxt: rewrite server handler to use @auth/core

* nuxt: fix main tsconfig

* nuxt: remove unused module

* nuxt: update client and server ports

* nuxt: remove iframe style

* nuxt: update readme
2022-12-16 02:47:44 +00:00
meesvandongen
70a3e3f662 chore(docs): Fix nextjs.md code block (#6037)
chore: fix quotes
2022-12-16 01:00:22 +01:00
311 changed files with 8285 additions and 13657 deletions

70
.eslintignore Normal file
View File

@@ -0,0 +1,70 @@
.eslintrc.js
.cache-loader
.DS_Store
.pnpm-debug.log
.turbo
.vscode/generated*
/_work
/actions-runner
node_modules
patches
pnpm-lock.yaml
.github/actions/issue-validator/index.mjs
*.cjs
*.js
*.d.ts
*.d.ts.map
.svelte-kit
.next
.nuxt
# --------------- Docs ---------------
.docusaurus
build
docs/docs/reference/03-core
docs/docs/reference/04-sveltekit
static
# --------------- Packages ---------------
coverage
dist
# @auth/core
packages/core/src/providers/oauth-types.ts
packages/core/src/lib/pages/styles.ts
# @auth/sveltekit
packages/frameworks-sveltekit/package
packages/frameworks-sveltekit/vite.config.{js,ts}.timestamp-*
# next-auth
packages/next-auth/src/providers/oauth-types.ts
packages/next-auth/css/index.css
# Adapters
.branches
db.sqlite
dev.db
dynamodblocal-bin
firebase-debug.log
firestore-debug.log
migrations
test.schema.gql
# --------------- Apps ---------------
# Examples should have their own Prettier config since they are templates too
apps/example-sveltekit
# Development app
apps
# --------------- Tests ---------------
# TODO: these should be linted
packages/**/*test*

View File

@@ -1,41 +1,75 @@
const path = require("path")
// @ts-check
/** @type {import("eslint").ESLint.ConfigData} */
module.exports = {
root: true,
parser: "@typescript-eslint/parser",
env: { browser: true, es2022: true, node: true },
extends: ["eslint:recommended", "prettier"],
overrides: [
{
files: ["*.ts", "*.tsx"],
extends: ["standard-with-typescript", "prettier"],
rules: {
camelcase: "off",
"@typescript-eslint/naming-convention": "off",
"@typescript-eslint/strict-boolean-expressions": "off",
"@typescript-eslint/explicit-function-return-type": "off",
"@typescript-eslint/restrict-template-expressions": "off",
},
parser: "@typescript-eslint/parser",
parserOptions: {
project: [
path.resolve(__dirname, "./packages/**/tsconfig.eslint.json"),
path.resolve(__dirname, "./packages/frameworks/**/tsconfig.json"),
path.resolve(__dirname, "./apps/**/tsconfig.json"),
],
project: ["./packages/**/tsconfig.json", "./apps/**/tsconfig.json"],
},
settings: { react: { version: "18" } },
extends: [
"plugin:react/recommended",
"plugin:react/jsx-runtime",
"standard-with-typescript",
"prettier",
],
rules: {
"@typescript-eslint/explicit-function-return-type": "off",
"@typescript-eslint/method-signature-style": "off",
"@typescript-eslint/naming-convention": "off",
"@typescript-eslint/no-non-null-assertion": "off",
"@typescript-eslint/restrict-template-expressions": "off",
"@typescript-eslint/strict-boolean-expressions": "off",
"react/prop-types": "off",
"react/no-unescaped-entities": "off",
},
},
{
files: ["*.test.ts", "*.test.js"],
extends: ["plugin:jest/recommended"],
env: { jest: true },
},
{
files: ["docs/**"],
plugins: ["@docusaurus"],
extends: ["plugin:@docusaurus/recommended"],
},
{
// TODO: Expand to all packages
files: ["packages/{core,sveltekit}/*.ts"],
plugins: ["jsdoc"],
extends: ["plugin:jsdoc/recommended"],
rules: {
"jsdoc/require-param": "off",
"jsdoc/require-returns": "off",
"jsdoc/require-jsdoc": [
"warn",
{ publicOnly: true, enableFixer: false },
],
"jsdoc/no-multi-asterisks": ["warn", { allowWhitespace: true }],
"jsdoc/tag-lines": "off",
},
},
{
files: ["packages/frameworks-sveltekit"],
plugins: ["svelte3"],
overrides: [{ files: ["*.svelte"], processor: "svelte3/svelte3" }],
settings: {
"svelte3/typescript": () => require("typescript"),
},
parserOptions: { sourceType: "module", ecmaVersion: 2020 },
env: { browser: true, es2017: true, node: true },
},
],
extends: ["prettier"],
globals: {
localStorage: "readonly",
location: "readonly",
fetch: "readonly",
parserOptions: {
sourceType: "module",
ecmaVersion: "latest",
ecmaFeatures: { jsx: true },
},
rules: {
camelcase: "off",
},
plugins: ["jest"],
env: {
"jest/globals": true,
},
ignorePatterns: [".eslintrc.js"],
root: true,
}

View File

@@ -1 +1 @@
blank_issues_enabled: false
blank_issues_enabled: false

File diff suppressed because one or more lines are too long

View File

@@ -526,7 +526,7 @@ IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
root
ISC License
Copyright (c) 2018-2021, Iain Collins
Copyright (c) 2022-2023, Balázs Orbán
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above
@@ -540,6 +540,7 @@ WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
tr46
MIT

View File

@@ -35,4 +35,3 @@ Upvoting issues to show your interest will help us prioritize and address them a
- [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve)
- [Reporting a NextAuth.js bug](https://github.com/nextauthjs/next-auth/blob/main/.github/ISSUE_TEMPLATE/1_bug_framework.yml)
- [How to Contribute to Open Source (Next.js)](https://www.youtube.com/watch?v=cuoNzXFLitc)

View File

@@ -4,6 +4,7 @@ import * as github from "@actions/github"
// @ts-expect-error
import * as core from "@actions/core"
import { readFileSync } from "node:fs"
import { join } from "node:path"
const addReproductionLabel = "incomplete"
@@ -40,7 +41,13 @@ async function run() {
label: { name: newLabel },
} = payload
if (pull_request || !issue?.body || !process.env.GITHUB_TOKEN) return
if (
pull_request ||
!issue?.body ||
!process.env.GITHUB_TOKEN ||
!process.env.GITHUB_ACTION_PATH
)
return
const labels = issue.labels.map((l) => l.name)
// const isBugReport =
@@ -70,7 +77,10 @@ async function run() {
}),
client.issues.createComment({
...issueCommon,
body: readFileSync("repro.md", "utf8"),
body: readFileSync(
join(process.env.GITHUB_ACTION_PATH, "repro.md"),
"utf8"
),
}),
])
return core.info(

7
.github/sync.yml vendored
View File

@@ -1,9 +1,4 @@
nextauthjs/next-auth-example:
- source: apps/example-nextjs
dest: .
deleteOrphaned: true
- .github/FUNDING.yml
- LICENSE
# Note that nextauthjs/next-auth-example syncs from the v4 branch
nextauthjs/sveltekit-auth-example:
- source: apps/example-sveltekit

View File

@@ -11,7 +11,7 @@ jobs:
- uses: actions/setup-node@v3
with:
node-version: 18
- name: 'Run issue validator'
run: node ./.github/actions/issue-validator/index.mjs
- name: "Run issue validator"
run: node /home/runner/work/next-auth/next-auth/.github/actions/issue-validator/index.mjs
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

View File

@@ -20,8 +20,6 @@ jobs:
fetch-depth: 2
- name: Install pnpm
uses: pnpm/action-setup@v2.2.4
with:
version: 7.5.1
- name: Setup Node
uses: actions/setup-node@v3
with:
@@ -29,8 +27,6 @@ jobs:
cache: "pnpm"
- name: Install dependencies
run: pnpm install
- name: Build
run: pnpm build
- name: Run tests
run: pnpm test
env:
@@ -52,10 +48,9 @@ jobs:
uses: actions/checkout@v3
with:
fetch-depth: 0
token: ${{ secrets.GH_PAT_CLASSIC }}
- name: Install pnpm
uses: pnpm/action-setup@v2.2.4
with:
version: 7.5.1
- name: Setup Node
uses: actions/setup-node@v3
with:
@@ -64,15 +59,12 @@ jobs:
- name: Install dependencies
run: pnpm install
- name: Publish to npm and GitHub
run: |
git config --global user.email "balazsorban44@users.noreply.github.com"
git config --global user.name "Balázs Orbán"
pnpm release
run: pnpm release
env:
RELEASE_TOKEN: ${{ secrets.RELEASE_TOKEN }}
GITHUB_TOKEN: ${{ secrets.RELEASE_TOKEN }}
NPM_TOKEN_PKG: ${{ secrets.NPM_TOKEN_PKG }}
NPM_TOKEN_ORG: ${{ secrets.NPM_TOKEN_ORG }}
# Use GH_PAT when this is fixed:
# https://github.com/github/roadmap/issues/622
GITHUB_TOKEN: ${{ secrets.GH_PAT_CLASSIC }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
release-pr:
name: Publish PR
runs-on: ubuntu-latest
@@ -84,8 +76,6 @@ jobs:
uses: actions/checkout@v3
- name: Install pnpm
uses: pnpm/action-setup@v2.2.4
with:
version: 7.5.1
- name: Setup Node
uses: actions/setup-node@v3
with:
@@ -100,19 +90,19 @@ jobs:
PR_NUMBER: ${{ github.event.number }}
- name: Publish to npm
run: |
cd packages/next-auth
cd packages/core
echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> .npmrc
pnpm publish --no-git-checks --access public --tag experimental
env:
NPM_TOKEN: ${{ secrets.NPM_TOKEN_PKG }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
- name: Comment version on PR
uses: NejcZdovc/comment-pr@v2
with:
message:
"🎉 Experimental release [published 📦️ on npm](https://npmjs.com/package/next-auth/v/${{ env.VERSION }})!\n \
```sh\npnpm add next-auth@${{ env.VERSION }}\n```\n \
```sh\nyarn add next-auth@${{ env.VERSION }}\n```\n \
```sh\nnpm i next-auth@${{ env.VERSION }}\n```"
"🎉 Experimental release [published 📦️ on npm](https://npmjs.com/package/@auth/core/v/${{ env.VERSION }})!\n \
```sh\npnpm add @auth/core@${{ env.VERSION }}\n```\n \
```sh\nyarn add @auth/core@${{ env.VERSION }}\n```\n \
```sh\nnpm i @auth/core@${{ env.VERSION }}\n```"
env:
VERSION: ${{ steps.determine-version.outputs.version }}
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
GITHUB_TOKEN: ${{ secrets.GH_PAT }}

View File

@@ -14,5 +14,6 @@ jobs:
# Can update to v1 when https://github.com/BetaHuhn/repo-file-sync-action/issues/168 is resolved
uses: BetaHuhn/repo-file-sync-action@v1.16.5
with:
GH_PAT: ${{ secrets.SYNC_EXAMPLE_PAT }}
GH_PAT: ${{ secrets.GH_PAT_CLASSIC }}
SKIP_PR: true
ORIGINAL_MESSAGE: true

12
.gitignore vendored
View File

@@ -1,7 +1,7 @@
# Misc
.DS_Store
.npmrc
.eslintcache
.env
.env.local
.env.development.local
@@ -51,7 +51,7 @@ apps/dev/typeorm
/.vs/slnx.sqlite-journal
/.vs/slnx.sqlite
/.vs
.vscode
.vscode/generated*
# Jetbrains
.idea
@@ -81,11 +81,13 @@ docs/.docusaurus
docs/providers.json
# Core
packages/core/adapters.*
packages/core/index.*
packages/core/jwt
packages/core/*.js
packages/core/*.d.ts
packages/core/*.d.ts.map
packages/core/lib
packages/core/providers
docs/docs/reference/03-core
docs/docs/reference/04-sveltekit
# SvelteKit

1
.husky/.gitignore vendored
View File

@@ -1 +0,0 @@
_

View File

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

67
.prettierignore Normal file
View File

@@ -0,0 +1,67 @@
.cache-loader
.DS_Store
.pnpm-debug.log
.turbo
.vscode/generated*
/_work
/actions-runner
node_modules
patches
pnpm-lock.yaml
.github/actions/issue-validator/index.mjs
*.d.ts
*.d.ts.map
.svelte-kit
.next
.nuxt
# --------------- Docs ---------------
.docusaurus
build
docs/docs/reference/03-core
docs/docs/reference/04-sveltekit
static
docs/providers.json
# --------------- Packages ---------------
coverage
dist
packages/**/*.cjs
packages/**/*.js
# @auth/core
packages/core/src/providers/oauth-types.ts
packages/core/src/lib/pages/styles.ts
# @auth/sveltekit
packages/frameworks-sveltekit/package
packages/frameworks-sveltekit/vite.config.{js,ts}.timestamp-*
# next-auth
packages/next-auth/src/providers/oauth-types.ts
packages/next-auth/css/index.css
# Adapters
.branches
db.sqlite
dev.db
dynamodblocal-bin
firebase-debug.log
firestore-debug.log
migrations
test.schema.gql
# --------------- Apps ---------------
# Examples should have their own Prettier config since they are templates too
apps/example-sveltekit
# Development app
apps/dev/prisma
apps/dev/migrations
apps/dev/typeorm

22
.prettierrc.js Normal file
View File

@@ -0,0 +1,22 @@
// @ts-check
/** @type {import("prettier").Config} */
module.exports = {
semi: false,
singleQuote: false,
overrides: [
{
files: [
"apps/dev/pages/api/auth/[...nextauth].ts",
"docs/{sidebars,docusaurus.config}.js",
],
options: { printWidth: 150 },
},
{
files: ["**/*package.json"],
options: {
trailingComma: "none",
},
},
],
}

8
.vscode/settings.json vendored Normal file
View File

@@ -0,0 +1,8 @@
{
"files.exclude": {
"packages/core/{lib,providers,*.js,*.d.ts,*.d.ts.map}": true,
"packages/next-auth/{client,core,css,jwt,next,providers,react,utils,*.js,*.d.ts}": true
},
"typescript.tsdk": "node_modules/typescript/lib",
"openInGitHub.remote.branch": "main"
}

14
.vscode/snippets.code-snippets vendored Normal file
View File

@@ -0,0 +1,14 @@
{
"oauth2-spec": {
"description": "Markdown link to OAuth 2 specification",
"scope": "typescript",
"prefix": "oauth2",
"body": ["[OAuth 2](https://datatracker.ietf.org/doc/html/rfc6749)"]
},
"oidc-spec": {
"description": "Markdown link to OpenID Connect specification",
"scope": "typescript",
"prefix": "oidc",
"body": ["[OIDC](https://openid.net/specs/openid-connect-core-1_0.html)"]
}
}

View File

@@ -1,6 +1,6 @@
ISC License
Copyright (c) 2018-2021, Iain Collins
Copyright (c) 2022-2023, Balázs Orbán
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above
@@ -12,4 +12,4 @@ MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

4
apps/dev/.vscode/settings.json vendored Normal file
View File

@@ -0,0 +1,4 @@
{
"typescript.tsdk": "../../node_modules/.pnpm/typescript@4.9.4/node_modules/typescript/lib",
"typescript.enablePromptUseWorkspaceTsdk": true
}

View File

@@ -3,4 +3,4 @@
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)
](https://github.com/nextauthjs/next-auth/blob/main/CONTRIBUTING.md#setting-up-local-environment)

View File

@@ -8,10 +8,10 @@ export default function Footer() {
<hr />
<ul className={styles.navItems}>
<li className={styles.navItem}>
<a href="https://next-auth.js.org">Documentation</a>
<a href="https://authjs.dev">Documentation</a>
</li>
<li className={styles.navItem}>
<a href="https://www.npmjs.com/package/next-auth">NPM</a>
<a href="https://www.npmjs.com/package/@auth/core">NPM</a>
</li>
<li className={styles.navItem}>
<a href="https://github.com/nextauthjs/next-auth-example">GitHub</a>

View File

@@ -11,4 +11,4 @@
.navItem {
display: inline-block;
margin-right: 1rem;
}
}

View File

@@ -11,10 +11,10 @@
top: 0;
opacity: 1;
overflow: hidden;
border-radius: 0 0 .6rem .6rem;
padding: .6rem 1rem;
border-radius: 0 0 0.6rem 0.6rem;
padding: 0.6rem 1rem;
margin: 0;
background-color: rgba(0,0,0,.05);
background-color: rgba(0, 0, 0, 0.05);
transition: all 0.2s ease-in;
}
@@ -26,13 +26,13 @@
.signedInText,
.notSignedInText {
position: absolute;
padding-top: .8rem;
padding-top: 0.8rem;
left: 1rem;
right: 6.5rem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inherit;
display: inherit;
z-index: 1;
line-height: 1.3rem;
}
@@ -55,13 +55,13 @@
.button,
.buttonPrimary {
float: right;
margin-right: -.4rem;
margin-right: -0.4rem;
font-weight: 500;
border-radius: .3rem;
border-radius: 0.3rem;
cursor: pointer;
font-size: 1rem;
line-height: 1.4rem;
padding: .7rem .8rem;
padding: 0.7rem 0.8rem;
position: relative;
z-index: 10;
background-color: transparent;
@@ -73,11 +73,11 @@
border-color: #346df1;
color: #fff;
text-decoration: none;
padding: .7rem 1.4rem;
padding: 0.7rem 1.4rem;
}
.buttonPrimary:hover {
box-shadow: inset 0 0 5rem rgba(0,0,0,0.2)
box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.2);
}
.navItems {
@@ -89,4 +89,4 @@
.navItem {
display: inline-block;
margin-right: 1rem;
}
}

View File

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

View File

@@ -6,7 +6,6 @@
"scripts": {
"clean": "rm -rf .next",
"dev": "next dev",
"lint": "next lint",
"build": "next build",
"start": "next start",
"email": "fake-smtp-server",
@@ -21,7 +20,7 @@
"@prisma/client": "^3",
"@supabase/supabase-js": "^2.0.5",
"faunadb": "^4",
"next": "13.0.6",
"next": "13.1.1",
"next-auth": "workspace:*",
"@auth/core": "workspace:*",
"nodemailer": "^6",

View File

@@ -1,17 +1,19 @@
import Layout from '../components/layout'
import Layout from "../components/layout"
export default function Page () {
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>
<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' />
<iframe src="/api/examples/session" />
<h2>JSON Web Token</h2>
<p>/api/examples/jwt</p>
<iframe src='/api/examples/jwt' />
<iframe src="/api/examples/jwt" />
</Layout>
)
}

View File

@@ -1,4 +1,4 @@
import { AuthHandler, type AuthOptions } from "@auth/core"
import { Auth, type AuthConfig } from "@auth/core"
// Providers
import Apple from "@auth/core/providers/apple"
@@ -66,7 +66,7 @@ import WorkOS from "@auth/core/providers/workos"
// secret: process.env.SUPABASE_SERVICE_ROLE_KEY,
// })
export const authOptions: AuthOptions = {
export const authConfig: AuthConfig = {
// adapter,
// debug: process.env.NODE_ENV !== "production",
theme: {
@@ -118,9 +118,10 @@ export const authOptions: AuthOptions = {
Wikimedia({ clientId: process.env.WIKIMEDIA_ID, clientSecret: process.env.WIKIMEDIA_SECRET }),
WorkOS({ clientId: process.env.WORKOS_ID, clientSecret: process.env.WORKOS_SECRET }),
],
// debug: process.env.NODE_ENV !== "production",
}
if (authOptions.adapter) {
if (authConfig.adapter) {
// TODO:
// authOptions.providers.unshift(
// // NOTE: You can start a fake e-mail server with `pnpm email`
@@ -130,25 +131,21 @@ if (authOptions.adapter) {
}
// TODO: move to next-auth/edge
function Auth(...args: any[]) {
function AuthHandler(...args: any[]) {
const envSecret = process.env.AUTH_SECRET ?? process.env.NEXTAUTH_SECRET
const envTrustHost = !!(process.env.NEXTAUTH_URL ?? process.env.AUTH_TRUST_HOST ?? process.env.VERCEL ?? process.env.NODE_ENV !== "production")
if (args.length === 1) {
return async (req: Request) => {
args[0].secret ??= envSecret
args[0].trustHost ??= envTrustHost
return await AuthHandler(req, args[0])
return Auth(req, args[0])
}
}
args[1].secret ??= envSecret
args[1].trustHost ??= envTrustHost
return AuthHandler(args[0], args[1])
return Auth(args[0], args[1])
}
// export default Auth(authOptions)
export default function handle(request: Request) {
return Auth(request, authOptions)
}
export default AuthHandler(authConfig)
export const config = { runtime: "experimental-edge" }

View File

@@ -1,21 +1,26 @@
import Layout from '../components/layout'
import Layout from "../components/layout"
export default function Page () {
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.
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.
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.
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.
The disadvantage of <strong>useSession()</strong> is that it requires
client side JavaScript.
</p>
</Layout>
)

View File

@@ -1,11 +1,12 @@
import Layout from 'components/layout'
import Layout from "components/layout"
export default function Page () {
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.
This is an example site to demonstrate how to use{" "}
<a href="https://authjs.dev">NextAuth.js</a> for authentication.
</p>
</Layout>
)

View File

@@ -1,29 +1,31 @@
import Layout from '../components/layout'
import Layout from "../components/layout"
export default function Page () {
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.
This is an example site to demonstrate how to use{" "}
<a href="https://authjs.dev">Auth.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.
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.
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.
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>
)

View File

@@ -1,6 +1,6 @@
import { unstable_getServerSession } from "next-auth/next"
import Layout from "../components/layout"
import { authOptions } from './api/auth/[...nextauth]';
import { authOptions } from "./api/auth/[...nextauth]"
export default function Page() {
// As this page uses Server Side Rendering, the `session` will be already

View File

@@ -27,6 +27,6 @@ iframe {
border: 1px solid #ccc;
height: 10rem;
width: 100%;
border-radius: .5rem;
border-radius: 0.5rem;
filter: invert(1);
}
}

View File

@@ -1,11 +1,7 @@
{
"compilerOptions": {
"target": "esnext",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
@@ -25,14 +21,6 @@
}
]
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts"
],
"exclude": [
"node_modules",
"jest.config.js"
]
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules", "jest.config.js"]
}

View File

@@ -37,7 +37,7 @@ NextAuth.js is an easy to implement, full-stack (client/server) open source auth
Go to [next-auth.js.org](https://next-auth.js.org) for more information and documentation.
> *NextAuth.js is not officially associated with Vercel or Next.js.*
> _NextAuth.js is not officially associated with Vercel or Next.js._
## Getting Started
@@ -67,7 +67,7 @@ You **can** skip configuring a database and come back to it later if you want.
For more information about setting up a database, please check out the following links:
* Docs: [next-auth.js.org/adapters/overview](https://next-auth.js.org/adapters/overview)
- Docs: [next-auth.js.org/adapters/overview](https://next-auth.js.org/adapters/overview)
### 3. Configure Authentication Providers
@@ -75,9 +75,9 @@ For more information about setting up a database, please check out the following
2. When setting up OAuth, in the developer admin page for each of your OAuth services, you should configure the callback URL to use a callback path of `{server}/api/auth/callback/{provider}`.
e.g. For Google OAuth you would use: `http://localhost:3000/api/auth/callback/google`
e.g. For Google OAuth you would use: `http://localhost:3000/api/auth/callback/google`
A list of configured providers and their callback URLs is available from the endpoint `/api/auth/providers`. You can find more information at https://next-auth.js.org/configuration/providers/oauth
A list of configured providers and their callback URLs is available from the endpoint `/api/auth/providers`. You can find more information at https://next-auth.js.org/configuration/providers/oauth
3. You can also choose to specify an SMTP server for passwordless sign in via email.
@@ -110,4 +110,3 @@ Follow the [Deployment documentation](https://next-auth.js.org/deployment)
## License
ISC

View File

@@ -18,7 +18,6 @@ export default function ProtectedPage() {
}
fetchData()
}, [session])
// If no session exists, display access denied message
if (!session) {

View File

@@ -1,11 +1,7 @@
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
@@ -19,6 +15,12 @@
"jsx": "preserve",
"incremental": true
},
"include": ["process.d.ts", "next-env.d.ts", "next-auth.d.ts", "**/*.ts", "**/*.tsx"],
"include": [
"process.d.ts",
"next-env.d.ts",
"next-auth.d.ts",
"**/*.ts",
"**/*.tsx"
],
"exclude": ["node_modules"]
}
}

View File

@@ -2,7 +2,7 @@
<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>
<a href="https://authjs.dev" target="_blank"><img width="150px" src="https://authjs.dev/img/logo/logo-sm.png" /></a>
<h3 align="center">Auth.js Example App with <a href="https://kit.svelte.dev">SvelteKit</a></h3>
<p align="center">
Open Source. Full Stack. Own Your Data.
@@ -25,4 +25,4 @@
# Documentation
- [sveltekit.authjs.dev](https://sveltekit.authjs.dev)
- [sveltekit.authjs.dev](https://sveltekit.authjs.dev)

View File

@@ -1,4 +1,4 @@
import SvelteKitAuth from "@auth/sveltekit"
import { SvelteKitAuth } from "@auth/sveltekit"
import GitHub from "@auth/core/providers/github"
import { GITHUB_ID, GITHUB_SECRET } from "$env/static/private"

View File

@@ -1,40 +1,40 @@
> The example repository is maintained from a [monorepo](https://github.com/nextauthjs/next-auth/tree/main/apps/example-gatsby). Pull Requests should be opened against [`nextauthjs/next-auth`](https://github.com/nextauthjs/next-auth).
> The example repository is maintained from a [monorepo](https://github.com/nextauthjs/next-auth/tree/main/apps/playground-gatsby). Pull Requests should be opened against [`nextauthjs/next-auth`](https://github.com/nextauthjs/next-auth).
<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 Example App</h3>
<a href="https://authjs.dev" target="_blank"><img width="150px" src="https://authjs.dev/img/logo/logo-sm.png" /></a>
<h3 align="center">Auth.js Example App</h3>
<p align="center">
Open Source. Full Stack. Own Your Data.
</p>
<p align="center" style="align: center;">
<a href="https://npm.im/next-auth">
<img alt="npm" src="https://img.shields.io/npm/v/next-auth?color=green&label=next-auth&style=flat-square">
<img alt="npm" src="https://img.shields.io/npm/v/@auth/core?color=green&label=@auth/core&style=flat-square">
</a>
<a href="https://bundlephobia.com/result?p=next-auth-example">
<img src="https://img.shields.io/bundlephobia/minzip/next-auth?label=bundle&style=flat-square" alt="Bundle Size"/>
<a href="https://bundlephobia.com/result?p=@auth/core">
<img src="https://img.shields.io/bundlephobia/minzip/@auth/core?label=bundle&style=flat-square" alt="Bundle Size"/>
</a>
<a href="https://www.npmtrends.com/next-auth">
<img src="https://img.shields.io/npm/dm/next-auth?label=20downloads&style=flat-square" alt="Downloads" />
<a href="https://www.npmtrends.com/@auth/core">
<img src="https://img.shields.io/npm/dm/@auth/core?label=downloads&style=flat-square" alt="Downloads" />
</a>
</p>
</p>
## Overview
NextAuth.js is a complete open source authentication solution.
Auth.js is a complete open source authentication solution.
This is an example application that shows how `next-auth` is applied to a basic Gatsby app. We are showing how to configure the backend both as a [Vercel Function](https://vercel.com/docs/concepts/functions/introduction) for deployment to Vercel, and also for [Gatsby Functions](https://www.gatsbyjs.com/docs/reference/functions) for other platforms.
This is an example application that shows how `@auth/core` is applied to a basic Gatsby app. We are showing how to configure the backend both as a [Vercel Function](https://vercel.com/docs/concepts/functions/introduction) for deployment to Vercel, and also for [Gatsby Functions](https://www.gatsbyjs.com/docs/reference/functions) for other platforms.
The deployed version can be found at [`next-auth-gatsby-example.vercel.app`](https://next-auth-gatsby-example.vercel.app)
### About NextAuth.js
### About Auth.js
NextAuth.js is an easy to implement, full-stack (client/server) open source authentication library originally designed for [Next.js](https://nextjs.org) and [Serverless](https://vercel.com), but this example shows how to use it in a Gatsby project. Our goal is to [support even more frameworks](https://github.com/nextauthjs/next-auth/issues/2294) in the future.
Auth.js is an easy to implement, full-stack (client/server) open source authentication library originally designed for [Next.js](https://nextjs.org) and [Serverless](https://vercel.com), but this example shows how to use it in a Gatsby project. Our goal is to [support even more frameworks](https://github.com/nextauthjs/next-auth/issues/2294) in the future.
Go to [next-auth.js.org](https://next-auth.js.org) for more information and documentation.
Go to [authjs.dev](https://authjs.dev) for more information and documentation.
> *NextAuth.js is not officially associated with Vercel or Next.js.*
> Auth.js is not officially associated with Vercel or Next.js.\_
## Getting Started
@@ -58,13 +58,13 @@ Add details for one or more providers (e.g. Google, Twitter, GitHub, Email, etc)
#### Database
A database is needed to persist user accounts and to support email sign in. However, you can still use NextAuth.js for authentication without a database by using OAuth for authentication. If you do not specify a database, [JSON Web Tokens](https://jwt.io/introduction) will be enabled by default.
A database is needed to persist user accounts and to support email sign in. However, you can still use Auth.js for authentication without a database by using OAuth for authentication. If you do not specify a database, [JSON Web Tokens](https://jwt.io/introduction) will be enabled by default.
You **can** skip configuring a database and come back to it later if you want.
For more information about setting up a database, please check out the following links:
* Docs: [next-auth.js.org/adapters/overview](https://next-auth.js.org/adapters/overview)
- Docs: [authjs.dev/reference/adapters/overview](https://authjs.dev/reference/adapters/overview)
### 3. Configure Authentication Providers
@@ -72,9 +72,9 @@ For more information about setting up a database, please check out the following
2. When setting up OAuth, in the developer admin page for each of your OAuth services, you should configure the callback URL to use a callback path of `{server}/api/auth/callback/{provider}`.
e.g. For Google OAuth you would use: `http://localhost:3000/api/auth/callback/google`
e.g. For Google OAuth you would use: `http://localhost:3000/api/auth/callback/google`
A list of configured providers and their callback URLs is available from the endpoint `/api/auth/providers`. You can find more information at https://next-auth.js.org/configuration/providers/oauth
A list of configured providers and their callback URLs is available from the endpoint `/api/auth/providers`. You can find more information at [authjs.dev/reference/providers/oauth-builtin](https://authjs.dev/reference/providers/oauth-builtin).
3. You can also choose to specify an SMTP server for passwordless sign in via email.
@@ -95,16 +95,15 @@ npm run start
### 5. Preparing for Production
Follow the [Deployment documentation](https://next-auth.js.org/deployment)
Follow the [Deployment documentation](https://authjs.dev/guides/basics/deployment)
## Acknowledgements
<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 href="https://vercel.com?utm_source=authjs&utm_campaign=oss">
<img width="170px" src="https://powered-by-vercel.api.soraharu.com/powered-by-vercel.svg" alt="Powered By Vercel" />
</a>
<p align="left">Thanks to Vercel sponsoring this project by allowing it to be deployed for free for the entire NextAuth.js Team</p>
<p align="left">Thanks to Vercel sponsoring this project by allowing it to be deployed for free for the entire Auth.js Team</p>
## License
ISC

View File

@@ -1,5 +1,5 @@
// Gatsby Functions are not yet supported on Vercel, so you'll need to use the root `api` folder.
import NextAuth from "next-auth/next"
import NextAuth from "next-auth"
import { authConfig } from "../../nextauth.config"
export default async function handler(req, res) {

View File

@@ -1,6 +1,6 @@
// If your deployment environment supports Gatsby Functions, you won't need the root `api` folder, only this.
import NextAuth from "next-auth/next"
import NextAuth from "next-auth"
import { authConfig } from "../../nextauth.config"
export default async function handler(req, res) {

View File

@@ -11,8 +11,7 @@ export default function Home() {
<h1>NextAuth.js Example</h1>
<p>
An example site to demonstrate how to use{" "}
<a href="https://next-auth.js.org">NextAuth.js</a> for authentication in
Gatsby.
<a href="https://authjs.dev">Auth.js</a> for authentication in Gatsby.
</p>
{
{

View File

@@ -1,12 +0,0 @@
root = true
[*]
indent_size = 2
indent_style = space
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false

View File

@@ -1,4 +0,0 @@
dist
node_modules
tsconfig.json
package.json

View File

@@ -1,10 +0,0 @@
{
"extends": [
"@nuxtjs/eslint-config-typescript"
],
"rules": {
"@typescript-eslint/no-unused-vars": [
"off"
]
}
}

View File

@@ -0,0 +1,7 @@
module.exports = {
root: true,
extends: ["@nuxt/eslint-config"],
rules: {
"vue/multi-word-component-names": "off",
},
}

View File

@@ -1,52 +1,4 @@
# Dependencies
node_modules
# Logs
*.log*
# Temp directories
.temp
.tmp
.cache
# Yarn
**/.yarn/cache
**/.yarn/*state*
# Generated dirs
dist
# Nuxt
.nuxt
.output
.vercel_build_output
.build-*
.env
.netlify
# Env
.env
# Testing
reports
coverage
*.lcov
.nyc_output
# VSCode
.vscode
# Intellij idea
*.iml
.idea
# OSX
.DS_Store
.AppleDouble
.LSOverride
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk
.vercel
dist
output

View File

@@ -1 +0,0 @@
imports.autoImport=false

View File

@@ -1,21 +1,13 @@
# NextAuth + Nuxt 3 Playground
> The example repository is maintained from a [monorepo](https://github.com/nextauthjs/next-auth/tree/main/apps/playground-nuxt). Pull Requests should be opened against [`nextauthjs/next-auth`](https://github.com/nextauthjs/next-auth).
NextAuth.js is committed to bringing easy authentication to other frameworks. [#2294](https://github.com/nextauthjs/next-auth/issues/2294)
Nuxt 3 support with NextAuth.js is currently experimental. This directory contains a minimal, proof-of-concept application. Parts of this is expected to be abstracted away into a package like` @next-auth/nuxt.`
This package uses Nuxt's [module starter](https://github.com/nuxt/starter/tree/module).
Demo: https://next-auth-nuxt-demo.vercel.app
Nuxt 3 support with Auth.js is currently experimental. This directory contains a minimal, proof-of-concept application. Parts of this is expected to be abstracted away into a package like `@auth/nuxt`.
## Getting Started
### Add the module to the modules section of `nuxt.config.ts`:
1. Setup your environment variables in `nuxt.config.ts`:
```ts
export default defineNuxtConfig({
// temporary module name.
modules: ['next-auth-nuxt'],
// https://v3.nuxtjs.org/migration/runtime-config#runtime-config
runtimeConfig: {
secret: process.env.NEXTAUTH_SECRET
@@ -23,86 +15,36 @@ export default defineNuxtConfig({
clientId: process.env.GITHUB_CLIENT_ID,
clientSecret: process.env.GITHUB_CLIENT_SECRET
}
},
// https://v3.nuxtjs.org/guide/concepts/esm#aliasing-libraries
// Fix for GithubProvider (or whichever provider you choose) is not a function error in Vite
alias: {
'next-auth/providers/github': 'node_modules/next-auth/providers/github.js'
}
})
```
### Add API route
2. Set up Auth.js options
To add `NextAuth.js` to a project create a file called `[...].ts` in `server/api/auth`. This contains the dynamic route handler for NextAuth.js which will also contain all of your global NextAuth.js configurations.
Go to the API handler file (`server/api/auth/[...].ts`) and setup your providers. This file contains the dynamic route handler for Auth.js which will also contain all of your global Auth.js configurations.
Here's an example of what it looks like:
```ts
// ~/server/api/auth/[...].ts
import { NextAuthNuxtHandler } from 'next-auth-nuxt/handler'
import GithubProvider from 'next-auth/providers/github'
// server/api/auth/[...].ts
import { NuxtAuthHandler } from "@/lib/auth/server"
import GithubProvider from "@auth/core/providers/github"
import type { AuthOptions } from "@auth/core"
const runtimeConfig = useRuntimeConfig()
export const authOptions = {
export const authOptions: AuthOptions = {
secret: runtimeConfig.secret,
providers: [
GithubProvider({
clientId: runtimeConfig.github.clientId,
clientSecret: runtimeConfig.github.clientSecret
clientSecret: runtimeConfig.github.clientSecret,
}),
],
}
export default NextAuthNuxtHandler(authOptions)
export default NuxtAuthHandler(authOptions)
```
All requests to `/api/auth/*` (`signIn`, `callback`, `signOut`, etc.) will automatically be handled by NextAuth.js.
### Frontend - Add Vue Composable
The `useSession()` Vue Composable is the easiest way to check if someone is signed in.
```html
<script setup lang="ts">
const { data: session } = useSession()
</script>
<template>
<div v-if="session">
Signed in as {{ session.user.email }} <br />
<button @click="signOut">Sign out</button>
</div>
<div v-else>
Not signed in <br />
<button @click="signIn">Sign in</button>
</div>
</template>
```
### Backend - API Route
To protect an API Route, you can use the `getServerSession()` method.
```ts
import { getServerSession } from 'next-auth-nuxt/handler'
import { authOptions } from '~/server/api/auth/[...]'
export default defineEventHandler(async (event) => {
const session = await getServerSession(event, authOptions)
if (session) {
return {
content: 'This is protected content. You can access this content because you are signed in.'
}
}
return {
error: 'You must be signed in to view the protected content on this page.'
}
})
```
## Development
- Run `pnpm dev:generate` to generate type stubs.
- Use `pnpm dev` to start `playground` in development mode.
All requests to `/api/auth/*` (`signIn`, `callback`, `signOut`, etc.) will automatically be handled by Auth.js.

View File

@@ -0,0 +1,32 @@
<template>
<div>
<Header />
<NuxtPage />
</div>
</template>
<style>
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;
}
</style>

View File

@@ -1 +0,0 @@
export * from './dist/runtime/client'

View File

@@ -0,0 +1,146 @@
<script setup lang="ts">
import { signIn, signOut } from "@/lib/auth/client"
const session = useSession()
</script>
<template>
<header>
<div class="signedInStatus">
<p :class="['nojs-show', 'loaded']">
<template v-if="session">
<span
v-if="session.user?.image"
:style="{ backgroundImage: `url(${session.user.image})` }"
class="avatar"
/>
<span class="signedInText">
<small>Signed in as</small><br />
<strong>{{ session.user?.email || session.user?.name }}</strong>
</span>
<a href="/api/auth/signout" class="button" @click.prevent="signOut"
>Sign out</a
>
</template>
<template v-else>
<span class="notSignedInText">You are not signed in</span>
<a
href="/api/auth/signin"
class="buttonPrimary"
@click.prevent="signIn"
>Sign in</a
>
</template>
</p>
</div>
<nav>
<ul class="navItems">
<li class="navItem">
<NuxtLink to="/"> Home </NuxtLink>
</li>
<li class="navItem">
<NuxtLink to="/protected"> Protected </NuxtLink>
</li>
</ul>
</nav>
</header>
</template>
<style>
.nojs-show {
opacity: 1;
top: 0;
}
.signedInStatus {
display: block;
min-height: 4rem;
width: 100%;
}
.loading,
.loaded {
position: relative;
top: 0;
opacity: 1;
overflow: hidden;
border-radius: 0 0 0.6rem 0.6rem;
padding: 0.6rem 1rem;
margin: 0;
background-color: rgba(0, 0, 0, 0.05);
transition: all 0.2s ease-in;
}
.loading {
top: -2rem;
opacity: 0;
}
.signedInText,
.notSignedInText {
position: absolute;
padding-top: 0.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: -0.4rem;
font-weight: 500;
border-radius: 0.3rem;
cursor: pointer;
font-size: 1rem;
line-height: 1.4rem;
padding: 0.7rem 0.8rem;
position: relative;
z-index: 10;
background-color: transparent;
color: #555;
}
.buttonPrimary {
background-color: #346df1;
border-color: #346df1;
color: #fff;
text-decoration: none;
padding: 0.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;
}
</style>

View File

@@ -0,0 +1,5 @@
import { Session } from "@auth/core"
export default function useSession() {
return useState<Session | null>("session", () => null)
}

View File

@@ -1 +0,0 @@
export * from './dist/runtime/server/handler'

View File

@@ -0,0 +1,107 @@
import type {
LiteralUnion,
SignInOptions,
SignInAuthorizationParams,
SignOutParams,
} from "./types"
import type {
BuiltInProviderType,
RedirectableProviderType,
} from "@auth/core/providers"
/**
* Client-side method to initiate a signin flow
* or send the user to the signin page listing all possible providers.
* Automatically adds the CSRF token to the request.
*
* [Documentation](https://next-auth.js.org/getting-started/client#signin)
*/
export async function signIn<
P extends RedirectableProviderType | undefined = undefined
>(
providerId?: LiteralUnion<
P extends RedirectableProviderType
? P | BuiltInProviderType
: BuiltInProviderType
>,
options?: SignInOptions,
authorizationParams?: SignInAuthorizationParams
) {
const { callbackUrl = window.location.href, redirect = true } = options ?? {}
// TODO: Support custom providers
const isCredentials = providerId === "credentials"
const isEmail = providerId === "email"
const isSupportingReturn = isCredentials || isEmail
// TODO: Handle custom base path
const signInUrl = `/api/auth/${
isCredentials ? "callback" : "signin"
}/${providerId}`
const _signInUrl = `${signInUrl}?${new URLSearchParams(authorizationParams)}`
// TODO: Handle custom base path
// TODO: Remove this since Sveltekit offers the CSRF protection via origin check
const { csrfToken } = await $fetch("/api/auth/csrf")
console.log(_signInUrl)
const res = await fetch(_signInUrl, {
method: "post",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
"X-Auth-Return-Redirect": "1",
},
// @ts-expect-error -- ignore
body: new URLSearchParams({
...options,
csrfToken,
callbackUrl,
}),
})
const data = await res.clone().json()
const error = new URL(data.url).searchParams.get("error")
if (redirect || !isSupportingReturn || !error) {
// TODO: Do not redirect for Credentials and Email providers by default in next major
window.location.href = data.url ?? callbackUrl
// If url contains a hash, the browser does not reload the page. We reload manually
if (data.url.includes("#")) window.location.reload()
return
}
return res
}
/**
* Signs the user out, by removing the session cookie.
* Automatically adds the CSRF token to the request.
*
* [Documentation](https://next-auth.js.org/getting-started/client#signout)
*/
export async function signOut(options?: SignOutParams) {
const { callbackUrl = window.location.href } = options ?? {}
// TODO: Custom base path
// TODO: Remove this since Sveltekit offers the CSRF protection via origin check
const csrfTokenResponse = await fetch("/api/auth/csrf")
const { csrfToken } = await csrfTokenResponse.json()
const res = await fetch(`/api/auth/signout`, {
method: "post",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
"X-Auth-Return-Redirect": "1",
},
body: new URLSearchParams({
csrfToken,
callbackUrl,
}),
})
const data = await res.json()
const url = data.url ?? callbackUrl
window.location.href = url
// If url contains a hash, the browser does not reload the page. We reload manually
if (url.includes("#")) window.location.reload()
}

View File

@@ -0,0 +1,45 @@
import { AuthHandler, AuthOptions, Session } from "@auth/core"
import { fromNodeMiddleware, H3Event } from "h3"
import getURL from "requrl"
import { createMiddleware } from "@hattip/adapter-node"
export function NuxtAuthHandler(options: AuthOptions) {
async function handler(ctx: { request: Request }) {
options.trustHost ??= true
return AuthHandler(ctx.request, options)
}
const middleware = createMiddleware(handler)
return fromNodeMiddleware(middleware)
}
export async function getSession(
event: H3Event,
options: AuthOptions
): Promise<Session | null> {
options.trustHost ??= true
const headers = getRequestHeaders(event)
const nodeHeaders = new Headers()
const url = new URL("/api/auth/session", getURL(event.node.req))
Object.keys(headers).forEach((key) => {
nodeHeaders.append(key, headers[key] as any)
})
const response = await AuthHandler(
new Request(url, { headers: nodeHeaders }),
options
)
const { status = 200 } = response
const data = await response.json()
if (!data || !Object.keys(data).length) return null
if (status === 200) return data
throw new Error(data.message)
}

View File

@@ -0,0 +1,48 @@
// Taken from next-auth/react
import type { BuiltInProviderType, ProviderType } from "@auth/core/providers"
/**
* Util type that matches some strings literally, but allows any other string as well.
* @source https://github.com/microsoft/TypeScript/issues/29729#issuecomment-832522611
*/
export declare type LiteralUnion<T extends U, U = string> =
| T
| (U & Record<never, never>)
export interface ClientSafeProvider {
id: LiteralUnion<BuiltInProviderType>
name: string
type: ProviderType
signinUrl: string
callbackUrl: string
}
export interface SignInOptions extends Record<string, unknown> {
/**
* Specify to which URL the user will be redirected after signing in. Defaults to the page URL the sign-in is initiated from.
*
* [Documentation](https://next-auth.js.org/getting-started/client#specifying-a-callbackurl)
*/
callbackUrl?: string
/** [Documentation](https://next-auth.js.org/getting-started/client#using-the-redirect-false-option) */
redirect?: boolean
}
export interface SignInResponse {
error: string | undefined
status: number
ok: boolean
url: string | null
}
/** Match `inputType` of `new URLSearchParams(inputType)` */
export declare type SignInAuthorizationParams =
| string
| string[][]
| Record<string, string>
| URLSearchParams
/** [Documentation](https://next-auth.js.org/getting-started/client#using-the-redirect-false-option-1) */
export interface SignOutResponse {
url: string
}
export interface SignOutParams<R extends boolean = true> {
/** [Documentation](https://next-auth.js.org/getting-started/client#specifying-a-callbackurl-1) */
callbackUrl?: string
/** [Documentation](https://next-auth.js.org/getting-started/client#using-the-redirect-false-option-1 */
redirect?: R
}

View File

@@ -0,0 +1,19 @@
export default defineNuxtConfig({
// https://v3.nuxtjs.org/migration/runtime-config#runtime-config
runtimeConfig: {
secret: process.env.NEXTAUTH_SECRET,
github: {
clientId: process.env.GITHUB_CLIENT_ID,
clientSecret: process.env.GITHUB_CLIENT_SECRET,
},
},
vite: {
define: {
"process.env.NEXTAUTH_URL": JSON.stringify(process.env.NEXTAUTH_URL),
"process.env.AUTH_TRUST_HOST": JSON.stringify(
process.env.AUTH_TRUST_HOST
),
"process.env.VERCEL_URL": JSON.stringify(process.env.VERCEL_URL),
},
},
})

View File

@@ -1,49 +1,22 @@
{
"name": "next-auth-nuxt",
"type": "module",
"version": "0.0.0",
"packageManager": "pnpm@7.1.1",
"license": "MIT",
"main": "./dist/module.cjs",
"types": "./dist/types.d.ts",
"exports": {
".": {
"import": "./dist/module.mjs",
"require": "./dist/module.cjs"
},
"./handler": {
"import": "./dist/runtime/server/handler.mjs",
"types": "./dist/runtime/server/handler.d.ts"
},
"./client": {
"import": "./dist/runtime/client/index.mjs",
"types": "./dist/runtime/client/index.d.ts"
}
},
"files": [
"dist",
"handler.d.ts",
"client.d.ts"
],
"name": "playground-nuxt",
"private": true,
"scripts": {
"prepack": "nuxt-module-build",
"dev": "pnpm prepack && nuxi dev playground",
"dev:build": "nuxi build playground",
"dev:build:vercel": "NITRO_PRESET=vercel nuxi build playground",
"dev:prepare": "nuxt-module-build --stub && nuxi prepare playground"
},
"dependencies": {
"@nuxt/kit": "^3.0.0-rc.13",
"h3": "^0.8.6",
"next-auth": "^4.16.2",
"pathe": "^0.3.9"
"build": "nuxt build",
"dev": "export NODE_OPTIONS='--no-experimental-fetch' && nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"devDependencies": {
"@nuxt/module-builder": "^0.2.0",
"@nuxt/schema": "^3.0.0-rc.12",
"@nuxtjs/eslint-config-typescript": "^11.0.0",
"eslint": "^8.26.0",
"nuxt": "^3.0.0-rc.13",
"next-auth-nuxt": "workspace:*"
"@nuxt/eslint-config": "^0.1.1",
"eslint": "^8.29.0",
"h3": "1.0.2",
"nuxt": "3.0.0"
},
"dependencies": {
"@auth/core": "workspace:*",
"@hattip/adapter-node": "^0.0.22",
"requrl": "^3.0.2"
}
}

View File

@@ -0,0 +1,10 @@
<template>
<div>
<h1>Nuxt Auth Example</h1>
<p>
This is an example site to demonstrate how to use
<a href="https://v3.nuxtjs.org/">Nuxt 3</a> with
<a href="https://authjs.dev/">Auth.js</a> for authentication.
</p>
</div>
</template>

View File

@@ -0,0 +1,18 @@
<script setup lang="ts">
const session = useSession()
definePageMeta({
middleware: "auth",
})
</script>
<template>
<div>
<h1>Protected Page</h1>
<p>
This is a protected content. You can access this content because you are
signed in.
</p>
<p>Session expiry: {{ session?.expires }}</p>
</div>
</template>

View File

@@ -1,40 +0,0 @@
<template>
<div>
<Header />
<NuxtPage />
<Footer />
</div>
</template>
<style>
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);
}
</style>

View File

@@ -1,8 +0,0 @@
<template>
<div>
<h1>Access Denied</h1>
<p>
<a href="/api/auth/signin">You must be signed in to view this page</a>
</p>
</div>
</template>

View File

@@ -1,30 +0,0 @@
<template>
<footer class="fotter">
<hr>
<ul class="navItems">
<li class="navItem">
<a href="https://github.com/nextauthjs/next-auth/tree/main/apps/playground-nuxt">Demo GitHub</a>
</li>
<li class="navItem">
<a href="https://next-auth.js.org">Next.js Documentation</a>
</li>
</ul>
</footer>
</template>
<style>
.footer {
margin-top: 2rem;
}
.navItems {
margin-bottom: 1rem;
padding: 0;
list-style: none;
}
.navItem {
display: inline-block;
margin-right: 1rem;
}
</style>

View File

@@ -1,155 +0,0 @@
<script setup lang="ts">
import { useSession, signIn, signOut, computed } from '#imports'
const { data: session, status } = useSession()
const loading = computed(() => status.value === 'loading')
</script>
<template>
<header>
<div class="signedInStatus">
<p :class="['nojs-show', !session && loading ? 'loading' : 'loaded']">
<template v-if="session">
<span v-if="session.user?.image" :style="{ backgroundImage: `url(${session.user.image})` }" class="avatar" />
<span class="signedInText">
<small>Signed in as</small><br>
<strong>{{ session.user?.email || session.user?.name }}</strong>
</span>
<a href="/api/auth/signout" class="button" @click.prevent="signOut">Sign out</a>
</template>
<template v-else>
<span class="notSignedInText">You are not signed in</span>
<a href="/api/auth/signin" class="buttonPrimary" @click.prevent="signIn">Sign in</a>
</template>
</p>
</div>
<nav>
<ul class="navItems">
<li class="navItem">
<NuxtLink to="/">
Home
</NuxtLink>
</li>
<li class="navItem">
<NuxtLink to="/client">
Client
</NuxtLink>
</li>
<li class="navItem">
<NuxtLink to="/server">
Server
</NuxtLink>
</li>
<li class="navItem">
<NuxtLink to="/protected">
Protected
</NuxtLink>
</li>
<li class="navItem">
<NuxtLink to="/api-example">
API
</NuxtLink>
</li>
</ul>
</nav>
</header>
</template>
<style>
.nojs-show {
opacity: 1;
top: 0;
}
.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;
}
</style>

View File

@@ -1,20 +0,0 @@
import MyModule from '../src/module'
export default defineNuxtConfig({
modules: [
MyModule
],
// https://v3.nuxtjs.org/migration/runtime-config#runtime-config
runtimeConfig: {
secret: process.env.NEXTAUTH_SECRET,
github: {
clientId: process.env.GITHUB_CLIENT_ID,
clientSecret: process.env.GITHUB_CLIENT_SECRET
}
},
// https://v3.nuxtjs.org/guide/concepts/esm#aliasing-libraries
// Fix for GithubProvider is not a function error in Vite
alias: {
'next-auth/providers/github': 'node_modules/next-auth/providers/github.js'
}
})

View File

@@ -1,4 +0,0 @@
{
"name": "playground",
"private": true
}

View File

@@ -1,15 +0,0 @@
<template>
<div>
<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" />
</div>
</template>

View File

@@ -1,18 +0,0 @@
<template>
<div>
<h1>Client Side Rendering</h1>
<p>
This page uses the <strong>useSession()</strong> Vue Composable in the <strong>&lt;Header/&gt;</strong> component.
</p>
<p>
The <strong>useSession()</strong> Vue Composable is 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 a provided session via <strong>Vue Plugin</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>
</div>
</template>

View File

@@ -1,8 +0,0 @@
<template>
<div>
<h1>Nuxt 3 + NextAuth.js Example</h1>
<p>
This is an example site to demonstrate how to use <a href="https://v3.nuxtjs.org/">Nuxt 3</a> with <a href="https://next-auth.js.org">NextAuth.js</a> for authentication.
</p>
</div>
</template>

View File

@@ -1,19 +0,0 @@
<script setup lang="ts">
import { useSession, useFetch, useLazyFetch } from '#imports'
import AccessDenied from '~/components/AccessDenied.vue'
const { data: session } = useSession()
const { data } = await useLazyFetch('/api/examples/protected', {
server: false
})
</script>
<template>
<div>
<AccessDenied v-if="!session" />
<template v-else>
<h1>Protected Page</h1>
<p><strong>{{ data?.content || "\u00a0" }}</strong></p>
</template>
</div>
</template>

View File

@@ -1,24 +0,0 @@
<script setup lang="ts">
import { useFetch } from '#imports'
await useFetch('/api/examples/session')
</script>
<template>
<div>
<h1>Server Side Rendering</h1>
<p>
This page uses the <strong>getServerSession()</strong> method inside an api route and is fetched using the <strong>useFetch()</strong> composable.
</p>
<p>
Using <strong>getServerSession()</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>
</div>
</template>

View File

@@ -1,17 +0,0 @@
import { NextAuthNuxtHandler } from 'next-auth-nuxt/handler'
import GithubProvider from 'next-auth/providers/github'
import type { NextAuthOptions } from 'next-auth'
const runtimeConfig = useRuntimeConfig()
export const authOptions: NextAuthOptions = {
secret: runtimeConfig.secret,
providers: [
GithubProvider({
clientId: runtimeConfig.github.clientId,
clientSecret: runtimeConfig.github.clientSecret
})
]
}
export default NextAuthNuxtHandler(authOptions)

View File

@@ -1,10 +0,0 @@
import { getToken } from 'next-auth/jwt'
export default defineEventHandler(async (event) => {
// @ts-expect-error: cookies property is not present in h3
event.req.cookies = parseCookies(event)
const token = await getToken({
req: event.req
})
return token
})

View File

@@ -1,16 +0,0 @@
import { getServerSession } from 'next-auth-nuxt/handler'
import { authOptions } from '../auth/[...]'
export default defineEventHandler(async (event) => {
const session = await getServerSession(event, authOptions)
if (session) {
return {
content: 'This is protected content. You can access this content because you are signed in.'
}
}
return {
error: 'You must be signed in to view the protected content on this page.'
}
})

View File

@@ -1,7 +0,0 @@
import { getServerSession } from 'next-auth-nuxt/handler'
import { authOptions } from '../auth/[...]'
export default defineEventHandler(async (event) => {
const session = await getServerSession(event, authOptions)
return session
})

View File

@@ -0,0 +1,19 @@
import { Session } from "@auth/core"
export default defineNuxtPlugin(async () => {
const session = useSession()
addRouteMiddleware("auth", () => {
if (!session.value) return navigateTo("/")
})
if (process.server) {
const data = await $fetch<Session>("/api/auth/session", {
headers: useRequestHeaders() as any,
})
const hasSession = data && Object.keys(data).length
session.value = hasSession ? data : null
}
})

File diff suppressed because it is too large Load Diff

View File

@@ -1,2 +0,0 @@
packages:
- playground

View File

@@ -0,0 +1,17 @@
import { NuxtAuthHandler } from "@/lib/auth/server"
import GithubProvider from "@auth/core/providers/github"
import type { AuthOptions } from "@auth/core"
const runtimeConfig = useRuntimeConfig()
export const authOptions: AuthOptions = {
secret: runtimeConfig.secret,
providers: [
GithubProvider({
clientId: runtimeConfig.github.clientId,
clientSecret: runtimeConfig.github.clientSecret,
}),
],
}
export default NuxtAuthHandler(authOptions)

View File

@@ -1,40 +0,0 @@
import { fileURLToPath } from 'url'
import { addImports, addPlugin, defineNuxtModule, extendViteConfig } from '@nuxt/kit'
import { resolve } from 'pathe'
export interface ModuleOptions {
}
export default defineNuxtModule<ModuleOptions>({
meta: {
name: 'next-auth-nuxt',
configKey: 'auth'
},
defaults: {
},
async setup (_options, nuxt) {
const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
nuxt.options.build.transpile.push(runtimeDir)
addPlugin(resolve(runtimeDir, 'plugin.client'))
// Composables are auto-imported in client.
const client = resolve(runtimeDir, 'client')
await addImports([
{ name: 'getSession', from: client },
{ name: 'getCsrfToken', from: client },
{ name: 'getProviders', from: client },
{ name: 'signIn', from: client },
{ name: 'signOut', from: client },
{ name: 'useSession', from: client }
])
// We can safely expose this to client.
extendViteConfig((config) => {
config.define = config.define || {}
config.define['process.env.NEXTAUTH_URL'] = JSON.stringify(process.env.NEXTAUTH_URL)
config.define['process.env.NEXTAUTH_URL_INTERNAL'] = JSON.stringify(process.env.NEXTAUTH_URL_INTERNAL)
config.define['process.env.VERCEL_URL'] = JSON.stringify(process.env.VERCEL_URL)
})
}
})

View File

@@ -1,369 +0,0 @@
import type { NextAuthClientConfig } from 'next-auth/client/_utils'
import type { Plugin, Ref } from 'vue'
import { ref, reactive, computed, inject, toRefs } from 'vue'
import { BroadcastChannel, apiBaseUrl, fetchData, now } from 'next-auth/client/_utils'
import type { Session } from 'next-auth'
import type {
BuiltInProviderType,
RedirectableProviderType
} from 'next-auth/providers'
import type { H3EventContext } from 'h3'
import parseUrl from '../lib/parse-url'
import _logger, { proxyLogger } from '../lib/logger'
import type {
ClientSafeProvider,
LiteralUnion,
SessionProviderProps,
SignInAuthorizationParams,
SignInOptions,
SignInResponse,
SignOutParams,
SignOutResponse
} from '../types'
// 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'.
const __NEXTAUTH: NextAuthClientConfig = {
baseUrl: parseUrl(process.env.NEXTAUTH_URL ?? process.env.VERCEL_URL).origin,
basePath: parseUrl(process.env.NEXTAUTH_URL).path,
baseUrlServer: parseUrl(
process.env.NEXTAUTH_URL_INTERNAL ??
process.env.NEXTAUTH_URL ??
process.env.VERCEL_URL
).origin,
basePathServer: parseUrl(
process.env.NEXTAUTH_URL_INTERNAL ?? process.env.NEXTAUTH_URL
).path,
_lastSync: 0,
_session: undefined,
_getSession: () => {}
}
export interface CtxOrReq {
req?: H3EventContext['req']
event?: { req: H3EventContext['req'] }
}
export type GetSessionParams = CtxOrReq & {
event?: 'storage' | 'timer' | 'hidden' | string
triggerEvent?: boolean
broadcast?: boolean
}
const logger = proxyLogger(_logger, __NEXTAUTH.basePath)
const broadcast = BroadcastChannel()
function isServer () {
return (process as any).server
}
export async function getSession (params?: GetSessionParams) {
const session = await fetchData<Session>(
'session',
__NEXTAUTH,
logger,
params
)
if (params?.broadcast ?? true) { broadcast.post({ event: 'session', data: { trigger: 'getSession' } }) }
return session
}
/**
* Returns the current Cross Site Request Forgery Token (CSRF Token)
* required to make POST requests (e.g. for signing in and signing out).
* You likely only need to use this if you are not using the built-in
* `signIn()` and `signOut()` methods.
*
* [Documentation](https://next-auth.js.org/getting-started/client#getcsrftoken)
*/
export async function getCsrfToken (params?: CtxOrReq) {
const response = await fetchData<{ csrfToken: string }>(
'csrf',
__NEXTAUTH,
logger,
params
)
return response?.csrfToken
}
/**
* It calls `/api/auth/providers` and returns
* a list of the currently configured authentication providers.
* It can be useful if you are creating a dynamic custom sign in page.
*
* [Documentation](https://next-auth.js.org/getting-started/client#getproviders)
*/
export async function getProviders () {
return await fetchData<
Record<LiteralUnion<BuiltInProviderType>, ClientSafeProvider>
>('providers', __NEXTAUTH, logger)
}
/**
* Client-side method to initiate a signin flow
* or send the user to the signin page listing all possible providers.
* Automatically adds the CSRF token to the request.
*
* [Documentation](https://next-auth.js.org/getting-started/client#signin)
*/
export async function signIn<
P extends RedirectableProviderType | undefined = undefined,
> (
provider?: LiteralUnion<BuiltInProviderType>,
options?: SignInOptions,
authorizationParams?: SignInAuthorizationParams
): Promise<
P extends RedirectableProviderType ? SignInResponse | undefined : undefined
> {
const { callbackUrl = window.location.href, redirect = true } = options ?? {}
const baseUrl = apiBaseUrl(__NEXTAUTH)
const providers = await getProviders()
if (!providers) {
window.location.href = `${baseUrl}/error`
return
}
if (!provider || !(provider in providers)) {
window.location.href = `${baseUrl}/signin?${new URLSearchParams({
callbackUrl
})}`
return
}
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'
},
// @ts-expect-error: Internal
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.href = 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
} as any
}
/**
* Signs the user out, by removing the session cookie.
* Automatically adds the CSRF token to the request.
*
* [Documentation](https://next-auth.js.org/getting-started/client#signout)
*/
export async function signOut<R extends boolean = true> (
options?: SignOutParams<R>
): Promise<R extends true ? undefined : SignOutResponse> {
const { callbackUrl = window.location.href } = options ?? {}
const baseUrl = apiBaseUrl(__NEXTAUTH)
const fetchOptions = {
method: 'post',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
// @ts-expect-error: Internal
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 (options?.redirect ?? true) {
const url = data.url ?? callbackUrl
window.location.href = url
// If url contains a hash, the browser does not reload the page. We reload manually
if (url.includes('#')) { window.location.reload() }
// @ts-expect-error: Internal
return
}
await __NEXTAUTH._getSession({ event: 'storage' })
return data
}
export function SessionProviderPlugin (options: SessionProviderProps): Plugin {
return {
install (app) {
const { basePath } = options
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 = options.session !== undefined
/** If session was passed, initialize as already synced */
__NEXTAUTH._lastSync = hasInitialSession ? now() : 0
if (hasInitialSession) { __NEXTAUTH._session = options.session }
const session = ref(options.session)
/** If session was passed, initialize as not loading */
const loading = ref(!hasInitialSession)
__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
})
session.value = __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
!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)
__NEXTAUTH._session === null ||
// Bail out early if the client session is not stale yet
now() < __NEXTAUTH._lastSync
) { return }
// An event or session staleness occurred, update the client session.
__NEXTAUTH._lastSync = now()
__NEXTAUTH._session = await getSession()
session.value = __NEXTAUTH._session
} catch (error) {
logger.error('CLIENT_SESSION_ERROR', error as Error)
} finally {
loading.value = false
}
}
__NEXTAUTH._getSession()
const { refetchOnWindowFocus = true } = options
// Listen for when the page is visible, if the user switches tabs
// and makes our tab visible again, re-fetch the session, but only if
// this feature is not disabled.
const visibilityHandler = () => {
if (refetchOnWindowFocus && document.visibilityState === 'visible') { __NEXTAUTH._getSession({ event: 'visibilitychange' }) }
}
document.addEventListener('visibilitychange', visibilityHandler, false)
const unsubscribeFromBroadcast = broadcast.receive(() =>
__NEXTAUTH._getSession({ event: 'storage' })
)
const { refetchInterval } = options
let refetchIntervalTimer: NodeJS.Timer
if (refetchInterval) {
refetchIntervalTimer = setInterval(() => {
if (__NEXTAUTH._session) { __NEXTAUTH._getSession({ event: 'poll' }) }
}, refetchInterval * 1000)
}
const originalUnmount = app.unmount
app.unmount = function nextAuthUnmount () {
document.removeEventListener('visibilitychange', visibilityHandler, false)
unsubscribeFromBroadcast?.()
clearInterval(refetchIntervalTimer)
__NEXTAUTH._lastSync = 0
__NEXTAUTH._session = undefined
__NEXTAUTH._getSession = () => {}
originalUnmount()
}
const status = computed(() => loading.value ? 'loading' : session.value ? 'authenticated' : 'unauthenticated')
const value = reactive({
data: session,
status
})
app.provide('SessionKey', value)
}
}
}
/**
* Vue Composable that gives you access
* to the logged in user's session data.
*
* [Documentation](https://next-auth.js.org/getting-started/client#usesession)
*/
export function useSession (): {
data: Ref<SessionProviderProps['session']>;
status: Ref<string>;
} {
if (typeof window === 'undefined') {
return {
data: ref(null),
status: ref('loading')
}
}
const value = inject<{
data: SessionProviderProps['session']
status: string
}>('SessionKey')
if (!value) {
throw new Error('Could not resolve provided session value')
}
const { data, status } = toRefs(value)
return {
data,
status
}
}

View File

@@ -1,115 +0,0 @@
import type { Adapter } from 'next-auth/adapters'
import type { EventCallbacks, LoggerInstance } from 'next-auth'
/**
* 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 {
code: string
constructor (error: Error | string) {
super((error as Error)?.message ?? error)
this.name = 'UnknownError'
this.code = (error as any).code
if (error instanceof Error) { this.stack = error.stack }
}
toJSON () {
return {
name: this.name,
message: this.message,
stack: this.stack
}
}
}
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.
*/
export class AccountNotLinkedError extends UnknownError {
name = 'AccountNotLinkedError'
}
export class MissingAPIRoute extends UnknownError {
name = 'MissingAPIRouteError'
code = 'MISSING_NEXTAUTH_API_ROUTE_ERROR'
}
export class MissingSecret extends UnknownError {
name = 'MissingSecretError'
code = 'NO_SECRET'
}
export class MissingAuthorize extends UnknownError {
name = 'MissingAuthorizeError'
code = 'CALLBACK_CREDENTIALS_HANDLER_ERROR'
}
export class MissingAdapter extends UnknownError {
name = 'MissingAdapterError'
code = 'EMAIL_REQUIRES_ADAPTER_ERROR'
}
export class UnsupportedStrategy extends UnknownError {
name = 'UnsupportedStrategyError'
code = 'CALLBACK_CREDENTIALS_JWT_ERROR'
}
type Method = (...args: any[]) => Promise<any>
export function upperSnake (s: string) {
return s.replace(/([A-Z])/g, '_$1').toUpperCase()
}
export function capitalize (s: string) {
return `${s[0].toUpperCase()}${s.slice(1)}`
}
/**
* Wraps an object of methods and adds error handling.
*/
export function eventsErrorHandler (
methods: Partial<EventCallbacks>,
logger: LoggerInstance
): Partial<EventCallbacks> {
return Object.keys(methods).reduce<any>((acc, name) => {
acc[name] = async (...args: any[]) => {
try {
const method: Method = methods[name as keyof Method]
return await method(...args)
} catch (e) {
logger.error(`${upperSnake(name)}_EVENT_ERROR`, e as Error)
}
}
return acc
}, {})
}
/** Handles adapter induced errors. */
export function adapterErrorHandler (
adapter: Adapter | undefined,
logger: LoggerInstance
): Adapter | undefined {
if (!adapter) { return }
return Object.keys(adapter).reduce<any>((acc, name) => {
acc[name] = async (...args: any[]) => {
try {
logger.debug(`adapter_${name}`, { args })
const method: Method = adapter[name as keyof Method]
return await method(...args)
} catch (error) {
logger.error(`adapter_error_${name}`, error as Error)
const e = new UnknownError(error as Error)
e.name = `${capitalize(name)}Error`
throw e
}
}
return acc
}, {})
}

View File

@@ -1,113 +0,0 @@
import { UnknownError } from './errors'
// TODO: better typing
/** Makes sure that error is always serializable */
function formatError (o: unknown): unknown {
if (o instanceof Error && !(o instanceof UnknownError)) { return { message: o.message, stack: o.stack, name: o.name } }
if (hasErrorProperty(o)) {
o.error = formatError(o.error) as Error
o.message = o.message ?? o.error.message
}
return o
}
function hasErrorProperty (
x: unknown
): x is { error: Error; [key: string]: unknown } {
return !!(x as any)?.error
}
export type WarningCode =
| 'NEXTAUTH_URL'
| 'NO_SECRET'
| 'TWITTER_OAUTH_2_BETA'
| 'DEBUG_ENABLED'
/**
* Override any of the methods, and the rest will use the default logger.
*
* [Documentation](https://next-auth.js.org/configuration/options#logger)
*/
export interface LoggerInstance extends Record<string, Function> {
warn: (code: WarningCode) => void
error: (
code: string,
/**
* Either an instance of (JSON serializable) Error
* or an object that contains some debug information.
* (Error is still available through `metadata.error`)
*/
metadata: Error | { error: Error; [key: string]: unknown }
) => void
debug: (code: string, metadata: unknown) => void
}
const _logger: LoggerInstance = {
error (code, metadata) {
metadata = formatError(metadata) as Error
console.error(
`[next-auth][error][${code}]`,
`\nhttps://next-auth.js.org/errors#${code.toLowerCase()}`,
metadata.message,
metadata
)
},
warn (code) {
console.warn(
`[next-auth][warn][${code}]`,
`\nhttps://next-auth.js.org/warnings#${code.toLowerCase()}`
)
},
debug (code, metadata) {
// eslint-disable-next-line no-console
console.log(`[next-auth][debug][${code}]`, metadata)
}
}
/**
* Override the built-in logger with user's implementation.
* Any `undefined` level will use the default logger.
*/
export function setLogger (
newLogger: Partial<LoggerInstance> = {},
debug?: boolean
) {
// Turn off debug logging if `debug` isn't set to `true`
if (!debug) { _logger.debug = () => {} }
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 */
export function proxyLogger (
logger: LoggerInstance = _logger,
basePath?: string
): LoggerInstance {
try {
if (typeof window === 'undefined') { return logger }
const clientLogger: Record<string, unknown> = {}
for (const level in logger) {
clientLogger[level] = (code: string, metadata: Error) => {
_logger[level](code, metadata) // Logs to console
if (level === 'error') {
metadata = formatError(metadata) as Error
}(metadata as any).client = true
const url = `${basePath}/_log`
const body = new URLSearchParams({ level, code, ...(metadata as any) })
if (navigator.sendBeacon) { return navigator.sendBeacon(url, body) }
return fetch(url, { method: 'POST', body, keepalive: true })
}
}
return clientLogger as unknown as LoggerInstance
} catch {
return _logger
}
}

View File

@@ -1,34 +0,0 @@
export interface InternalUrl {
/** @default "http://localhost:3000" */
origin: string
/** @default "localhost:3000" */
host: string
/** @default "/api/auth" */
path: string
/** @default "http://localhost:3000/api/auth" */
base: string
/** @default "http://localhost:3000/api/auth" */
toString: () => string
}
/** Returns an `URL` like object to make requests/redirects from server-side */
export default function parseUrl (url?: string): InternalUrl {
const defaultUrl = new URL('http://localhost:3000/api/auth')
if (url && !url.startsWith('http')) { url = `https://${url}` }
const _url = new URL(url ?? defaultUrl)
const path = (_url.pathname === '/' ? defaultUrl.pathname : _url.pathname)
// Remove trailing slash
.replace(/\/$/, '')
const base = `${_url.origin}${path}`
return {
origin: _url.origin,
host: _url.host,
path,
base,
toString: () => base
}
}

View File

@@ -1,7 +0,0 @@
// @ts-expect-error: Nuxt auto-import
import { defineNuxtPlugin } from '#app'
import { SessionProviderPlugin } from './client'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(SessionProviderPlugin({}))
})

View File

@@ -1,93 +0,0 @@
import type { NextAuthAction, NextAuthOptions, Session } from 'next-auth'
import type { RequestInternal } from 'next-auth/core'
import { NextAuthHandler } from 'next-auth/core'
import {
appendHeader,
defineEventHandler,
isMethod,
sendRedirect,
setCookie,
readBody,
parseCookies,
getQuery
} from 'h3'
import type { H3Event } from 'h3'
export function NextAuthNuxtHandler (options: NextAuthOptions) {
return defineEventHandler(async (event) => {
// Catch-all route params in Nuxt goes to the underscore property
const nextauth = event.context.params._.split('/')
const req: RequestInternal | Request = {
host: process.env.NEXTAUTH_URL,
body: undefined,
query: getQuery(event),
headers: event.req.headers,
method: event.req.method,
cookies: parseCookies(event),
action: nextauth[0] as NextAuthAction,
providerId: nextauth[1],
error: nextauth[1]
}
if (isMethod(event, 'POST')) {
req.body = await readBody(event)
}
const response = await NextAuthHandler({
req,
options
})
const { headers, cookies, body, redirect, status = 200 } = response
event.res.statusCode = status
headers?.forEach((header) => {
appendHeader(event, header.key, header.value)
})
cookies?.forEach((cookie) => {
setCookie(event, cookie.name, cookie.value, cookie.options)
})
if (redirect) {
if (isMethod(event, 'POST')) {
const body = await readBody(event)
if (body?.json !== 'true') { await sendRedirect(event, redirect, 302) }
return {
url: redirect
}
} else {
await sendRedirect(event, redirect, 302)
}
}
return body
})
}
export async function getServerSession (
event: H3Event,
options: NextAuthOptions
): Promise<Session | null> {
options.secret = process.env.NEXTAUTH_SECRET
const session = await NextAuthHandler<Session>({
req: {
host: process.env.NEXTAUTH_URL,
action: 'session',
method: 'GET',
cookies: parseCookies(event),
headers: event.req.headers
},
options
})
const { body } = session
if (body && Object.keys(body).length) {
return body
}
return null
}

View File

@@ -1,78 +0,0 @@
import type { Session } from 'next-auth'
import type { BuiltInProviderType, ProviderType } from 'next-auth/providers'
export interface UseSessionOptions<R extends boolean> {
required: R
/** Defaults to `signIn` */
onUnauthenticated?: () => void
}
/**
* Util type that matches some strings literally, but allows any other string as well.
* @source https://github.com/microsoft/TypeScript/issues/29729#issuecomment-832522611
*/
export type LiteralUnion<T extends U, U = string> =
| T
| (U & Record<never, never>)
export interface ClientSafeProvider {
id: LiteralUnion<BuiltInProviderType>
name: string
type: ProviderType
signinUrl: string
callbackUrl: string
}
export interface SignInOptions extends Record<string, unknown> {
/**
* Defaults to the current URL.
* @docs https://next-auth.js.org/getting-started/client#specifying-a-callbackurl
*/
callbackUrl?: string
/** @docs https://next-auth.js.org/getting-started/client#using-the-redirect-false-option */
redirect?: boolean
}
export interface SignInResponse {
error: string | undefined
status: number
ok: boolean
url: string | null
}
/** Match `inputType` of `new URLSearchParams(inputType)` */
export type SignInAuthorizationParams =
| string
| string[][]
| Record<string, string>
| URLSearchParams
/** @docs https://next-auth.js.org/getting-started/client#using-the-redirect-false-option-1 */
export interface SignOutResponse {
url: string
}
export interface SignOutParams<R extends boolean = true> {
/** @docs https://next-auth.js.org/getting-started/client#specifying-a-callbackurl-1 */
callbackUrl?: string
/** @docs https://next-auth.js.org/getting-started/client#using-the-redirect-false-option-1 */
redirect?: R
}
/** @docs: https://next-auth.js.org/getting-started/client#options */
export interface SessionProviderProps {
// children: React.ReactNode
session?: Session | null
baseUrl?: string
basePath?: string
/**
* A time interval (in seconds) after which the session will be re-fetched.
* If set to `0` (default), the session is not polled.
*/
refetchInterval?: number
/**
* `SessionProvider` automatically refetches the session when the user switches between windows.
* This option activates this behaviour if set to `true` (default).
*/
refetchOnWindowFocus?: boolean
}

View File

@@ -1,4 +1,4 @@
{
// https://v3.nuxtjs.org/concepts/typescript
"extends": "./playground/.nuxt/tsconfig.json"
"extends": "./.nuxt/tsconfig.json"
}

1
docs/.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
.vercel

View File

@@ -1,4 +0,0 @@
versioned_sidebars
versioned_docs
node_modules
.docusaurus

View File

@@ -1,7 +1,7 @@
<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>
<a href="https://authjs.dev" target="_blank"><img width="150px" src="https://authjs.dev/img/logo/logo-sm.png" /></a>
<h3 align="center">Auth.js</h3>
<p align="center">Authentication for Next.js</p>
<p align="center">
Open Source. Full Stack. Own Your Data.
@@ -10,16 +10,16 @@
<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://packagephobia.com/result?p=next-auth">
<img src="https://packagephobia.com/badge?p=next-auth" alt="Bundle Size"/>
<a href="https://packagephobia.com/result?p=@auth/core">
<img src="https://packagephobia.com/badge?p=@auth/core" 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 href="https://www.npmtrends.com/@auth/core">
<img src="https://img.shields.io/npm/dm/@auth/core" 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">
<a href="https://www.npmjs.com/package/@auth/core">
<img src="https://img.shields.io/github/v/release/nextauthjs/next-auth?label=latest" alt="Github Stable Release" />
</a>
</p>
@@ -27,7 +27,7 @@
## Overview
This is the repository for the documentation page for NextAuth.js!
This is the repository for the documentation page for Auth.js!
NextAuth.js is a complete open source authentication solution for [Next.js](http://nextjs.org/) applications.

View File

@@ -0,0 +1,5 @@
{
"label": "Concepts",
"collapsible": true,
"collapsed": true
}

View File

@@ -3,11 +3,11 @@ id: faq
title: Frequently Asked Questions
---
## About NextAuth.js
## About Auth.js
### Is NextAuth.js commercial software?
### Is Auth.js commercial software?
NextAuth.js is an open source project built by individual contributors.
Auth.js is an open source project built by individual contributors.
It is not commercial software and is not associated with a commercial organization.
@@ -17,29 +17,28 @@ It is not commercial software and is not associated with a commercial organizati
<details>
<summary>
<h3 style={{display:"inline-block"}}>What databases does NextAuth.js support?</h3>
<h3 style={{display:"inline-block"}}>What databases does Auth.js support?</h3>
</summary>
<p>
You can use NextAuth.js with MySQL, MariaDB, Postgres, MongoDB and SQLite or without a database. (See our [using a database adapter guide](/guides/adapters/using-a-database-adapter)).
You can use Auth.js with MySQL, MariaDB, Postgres, MongoDB and SQLite or without a database. (See our [using a database adapter guide](/guides/adapters/using-a-database-adapter)).
You can use also NextAuth.js with any database using a custom database adapter, or by using a custom credentials authentication provider - e.g. to support signing in with a username and password stored in an existing database.
You can use also Auth.js with any database using a custom database adapter, or by using a custom credentials authentication provider - e.g. to support signing in with a username and password stored in an existing database.
</p>
</details>
<details>
<summary>
<h3 style={{display:"inline-block"}}>What authentication services does NextAuth.js support?</h3>
<h3 style={{display:"inline-block"}}>What authentication services does Auth.js support?</h3>
</summary>
<p>
<p>NextAuth.js includes built-in support for signing in with&nbsp;
--------- DISPLAY PROVIDERS HERE ----------
<p>Auth.js includes built-in support for signing in with&nbsp;
(See also: <a href="/reference/providers/oauth-builtin">Providers</a>)
</p>
NextAuth.js also supports email for passwordless sign in, which is useful for account recovery or for people who are not able to use an account with the configured OAuth services (e.g. due to service outage, account suspension or otherwise becoming locked out of an account).
Auth.js also supports email for passwordless sign in, which is useful for account recovery or for people who are not able to use an account with the configured OAuth services (e.g. due to service outage, account suspension or otherwise becoming locked out of an account).
You can also use a custom based provider to support signing in with a username and password stored in an external database and/or using two factor authentication.
@@ -48,43 +47,43 @@ You can also use a custom based provider to support signing in with a username a
<details>
<summary>
<h3 style={{display:"inline-block"}}>Does NextAuth.js support signing in with a username and password?</h3>
<h3 style={{display:"inline-block"}}>Does Auth.js support signing in with a username and password?</h3>
</summary>
<p>
NextAuth.js is designed to avoid the need to store passwords for user accounts.
Auth.js is designed to avoid the need to store passwords for user accounts.
If you have an existing database of usernames and passwords, you can use a custom credentials provider to allow signing in with a username and password stored in an existing database.
_If you use a custom credentials provider user accounts will not be persisted in a database by NextAuth.js (even if one is configured). The option to use JSON Web Tokens for session tokens (which allow sign in without using a session database) must be enabled to use a custom credentials provider._
_If you use a custom credentials provider user accounts will not be persisted in a database by Auth.js (even if one is configured). The option to use JSON Web Tokens for session tokens (which allow sign in without using a session database) must be enabled to use a custom credentials provider._
</p>
</details>
<details>
<summary>
<h3 style={{display:"inline-block"}}>Can I use NextAuth.js with a website that does not use Next.js?</h3>
<h3 style={{display:"inline-block"}}>Can I use Auth.js with a website that does not use Next.js?</h3>
</summary>
<p>
NextAuth.js is designed for use with Next.js and Serverless.
Auth.js is designed for use with Next.js and Serverless.
If you are using a different framework for your website, you can create a website that handles sign in with Next.js and then access those sessions on a website that does not use Next.js as long as the websites are on the same domain.
If you use NextAuth.js on a website with a different subdomain then the rest of your website (e.g. `auth.example.com` vs `www.example.com`) you will need to set a custom cookie domain policy for the Session Token cookie. (See also: [Cookies](/reference/configuration/auth-config#cookies))
If you use Auth.js on a website with a different subdomain then the rest of your website (e.g. `auth.example.com` vs `www.example.com`) you will need to set a custom cookie domain policy for the Session Token cookie. (See also: [Cookies](/reference/configuration/auth-config#cookies))
NextAuth.js does not currently support automatically signing into sites on different top level domains (e.g. `www.example.com` vs `www.example.org`) using a single session.
Auth.js does not currently support automatically signing into sites on different top level domains (e.g. `www.example.com` vs `www.example.org`) using a single session.
</p>
</details>
<details>
<summary>
<h3 style={{display:"inline-block"}}>Can I use NextAuth.js with React Native?</h3>
<h3 style={{display:"inline-block"}}>Can I use Auth.js with React Native?</h3>
</summary>
<p>
NextAuth.js is designed as a secure, confidential client and implements a server side authentication flow.
Auth.js is designed as a secure, confidential client and implements a server side authentication flow.
It is not intended to be used in native applications on desktop or mobile applications, which typically implement public clients (e.g. with client / secrets embedded in the application).
@@ -93,7 +92,7 @@ It is not intended to be used in native applications on desktop or mobile applic
<details>
<summary>
<h3 style={{display:"inline-block"}}>Is NextAuth.js supporting TypeScript?</h3>
<h3 style={{display:"inline-block"}}>Is Auth.js supporting TypeScript?</h3>
</summary>
<p>
@@ -104,7 +103,7 @@ Yes! Check out the [TypeScript docs](/getting-started/typescript)
<details>
<summary>
<h3 style={{display:"inline-block"}}>Is NextAuth.js compatible with Next.js 12 Middleware?</h3>
<h3 style={{display:"inline-block"}}>Is Auth.js compatible with Next.js 12 Middleware?</h3>
</summary>
<p>
@@ -119,11 +118,11 @@ Yes! Check out the [TypeScript docs](/getting-started/typescript)
<details>
<summary>
<h3 style={{display:"inline-block"}}>What databases are supported by NextAuth.js?</h3>
<h3 style={{display:"inline-block"}}>What databases are supported by Auth.js?</h3>
</summary>
<p>
NextAuth.js can be used with MySQL, Postgres, MongoDB, SQLite and compatible databases (e.g. MariaDB, Amazon Aurora, Amazon DocumentDB…) or with no database.
Auth.js can be used with MySQL, Postgres, MongoDB, SQLite and compatible databases (e.g. MariaDB, Amazon Aurora, Amazon DocumentDB…) or with no database.
It also provides an Adapter API which allows you to connect it to any database.
@@ -132,15 +131,15 @@ It also provides an Adapter API which allows you to connect it to any database.
<details>
<summary>
<h3 style={{display:"inline-block"}}>What does NextAuth.js use databases for?</h3>
<h3 style={{display:"inline-block"}}>What does Auth.js use databases for?</h3>
</summary>
<p>
Databases in NextAuth.js are used for persisting users, OAuth accounts, email sign in tokens and sessions.
Databases in Auth.js are used for persisting users, OAuth accounts, email sign in tokens and sessions.
Specifying a database is optional if you don't need to persist user data or support email sign in. If you don't specify a database then JSON Web Tokens will be enabled for session storage and used to store session data.
If you are using a database with NextAuth.js, you can still explicitly enable JSON Web Tokens for sessions (instead of using database sessions).
If you are using a database with Auth.js, you can still explicitly enable JSON Web Tokens for sessions (instead of using database sessions).
</p>
</details>
@@ -151,9 +150,9 @@ If you are using a database with NextAuth.js, you can still explicitly enable JS
</summary>
<p>
- Using NextAuth.js without a database works well for internal tools - where you need to control who is able to sign in, but when you do not need to create user accounts for them in your application.
- Using Auth.js without a database works well for internal tools - where you need to control who is able to sign in, but when you do not need to create user accounts for them in your application.
- Using NextAuth.js with a database is usually a better approach for a consumer facing application where you need to persist accounts (e.g. for billing, to contact customers, etc).
- Using Auth.js with a database is usually a better approach for a consumer facing application where you need to persist accounts (e.g. for billing, to contact customers, etc).
</p>
</details>
@@ -183,18 +182,18 @@ Parts of this section has been moved to its [own page](/getting-started/security
</summary>
<p>
NextAuth.js provides a solution for authentication, session management and user account creation.
Auth.js provides a solution for authentication, session management and user account creation.
NextAuth.js records Refresh Tokens and Access Tokens on sign in (if supplied by the provider) and it will pass them, along with the User ID, Provider and Provider Account ID, to either:
Auth.js records Refresh Tokens and Access Tokens on sign in (if supplied by the provider) and it will pass them, along with the User ID, Provider and Provider Account ID, to either:
1. A database - if a database connection string is provided
2. The JSON Web Token callback - if JWT sessions are enabled (e.g. if no database specified)
You can then look them up from the database or persist them to the JSON Web Token.
Note: NextAuth.js does not currently handle Access Token rotation for OAuth providers for you, however you can check out [this tutorial](/guides/basics/refresh-token-rotation) if you want to implement it.
Note: Auth.js does not currently handle Access Token rotation for OAuth providers for you, however you can check out [this tutorial](/guides/basics/refresh-token-rotation) if you want to implement it.
We also have an [example repository](https://github.com/nextauthjs/next-auth-refresh-token-example) / project based upon NextAuth.js v4 where we demonstrate how to use a refresh token to refresh the provided access token.
We also have an [example repository](https://github.com/nextauthjs/next-auth-refresh-token-example) / project based upon Auth.js v4 where we demonstrate how to use a refresh token to refresh the provided access token.
</p>
</details>
@@ -211,13 +210,13 @@ When an email address is associated with an OAuth account it does not necessaril
With automatic account linking on sign in, this can be exploited by bad actors to hijack accounts by creating an OAuth account associated with the email address of another user.
For this reason it is not secure to automatically link accounts between arbitrary providers on sign in, which is why this feature is generally not provided by authentication service and is not provided by NextAuth.js.
For this reason it is not secure to automatically link accounts between arbitrary providers on sign in, which is why this feature is generally not provided by authentication service and is not provided by Auth.js.
Automatic account linking is seen on some sites, sometimes insecurely. It can be technically possible to do automatic account linking securely if you trust all the providers involved to ensure they have securely verified the email address associated with the account, but requires placing trust (and transferring the risk) to those providers to handle the process securely.
Examples of scenarios where this is secure include with an OAuth provider you control (e.g. that only authorizes users internal to your organization) or with a provider you explicitly trust to have verified the users email address.
Automatic account linking is not a planned feature of NextAuth.js, however there is scope to improve the user experience of account linking and of handling this flow, in a secure way. Typically this involves providing a fallback option to sign in via email, which is already possible (and recommended), but the current implementation of this flow could be improved on.
Automatic account linking is not a planned feature of Auth.js, however there is scope to improve the user experience of account linking and of handling this flow, in a secure way. Typically this involves providing a fallback option to sign in via email, which is already possible (and recommended), but the current implementation of this flow could be improved on.
Providing support for secure account linking and unlinking of additional providers - which can only be done if a user is already signed in already - was originally a feature in v1.x but has not been present since v2.0, is planned to return in a future release.
@@ -230,13 +229,13 @@ Providing support for secure account linking and unlinking of additional provide
<details>
<summary>
<h3 style={{display:"inline-block"}}>Why doesn't NextAuth.js support [a particular feature]?</h3>
<h3 style={{display:"inline-block"}}>Why doesn't Auth.js support [a particular feature]?</h3>
</summary>
<p>
NextAuth.js is an open source project built by individual contributors who are volunteers writing code and providing support in their spare time.
Auth.js is an open source project built by individual contributors who are volunteers writing code and providing support in their spare time.
If you would like NextAuth.js to support a particular feature, the best way to help make it happen is to raise a feature request describing the feature and offer to work with other contributors to develop and test it.
If you would like Auth.js to support a particular feature, the best way to help make it happen is to raise a feature request describing the feature and offer to work with other contributors to develop and test it.
If you are not able to develop a feature yourself, you can offer to sponsor someone to work on it.
@@ -249,7 +248,7 @@ If you are not able to develop a feature yourself, you can offer to sponsor some
</summary>
<p>
Product design decisions on NextAuth.js are made by core team members.
Product design decisions on Auth.js are made by core team members.
You can raise suggestions as feature requests / requests for enhancement.
@@ -266,11 +265,11 @@ Ultimately if your request is not accepted or is not actively in development, yo
<details>
<summary>
<h3>Does NextAuth.js use JSON Web Tokens?</h3>
<h3>Does Auth.js use JSON Web Tokens?</h3>
</summary>
<p>
NextAuth.js by default uses JSON Web Tokens for saving the user's session. However, if you use a [database adapter](/guides/adapters/using-a-database-adapter), the database will be used to persist the user's session. You can force the usage of JWT when using a database [through the configuration options](/reference/configuration/auth-config#session). Since v4 all our JWT tokens are now encrypted by default with A256GCM.
Auth.js by default uses JSON Web Tokens for saving the user's session. However, if you use a [database adapter](/guides/adapters/using-a-database-adapter), the database will be used to persist the user's session. You can force the usage of JWT when using a database [through the configuration options](/reference/configuration/auth-config#session). Since v4 all our JWT tokens are now encrypted by default with A256GCM.
</p>
</details>
@@ -285,7 +284,7 @@ JSON Web Tokens can be used for session tokens, but are also used for lots of ot
- Advantages of using a JWT as a session token include that they do not require a database to store sessions, this can be faster and cheaper to run and easier to scale.
- JSON Web Tokens in NextAuth.js are secured using cryptographic encryption (JWE) to store the included information directly in a JWT session token. You may then use the token to pass information between services and APIs on the same domain without having to contact a database to verify the included information.
- JSON Web Tokens in Auth.js are secured using cryptographic encryption (JWE) to store the included information directly in a JWT session token. You may then use the token to pass information between services and APIs on the same domain without having to contact a database to verify the included information.
- You can use JWT to securely store information you do not mind the client knowing even without encryption, as the JWT is stored in a server-readable-only cookie so data in the JWT is not accessible to third party JavaScript running on your site.
@@ -302,7 +301,7 @@ JSON Web Tokens can be used for session tokens, but are also used for lots of ot
Shorter session expiry times are used when using JSON Web Tokens as session tokens to allow sessions to be invalidated sooner and simplify this problem.
NextAuth.js client includes advanced features to mitigate the downsides of using shorter session expiry times on the user experience, including automatic session token rotation, optionally sending keep alive messages to prevent short lived sessions from expiring if there is an window or tab open, background re-validation, and automatic tab/window syncing that keeps sessions in sync across windows any time session state changes or a window or tab gains or loses focus.
Auth.js client includes advanced features to mitigate the downsides of using shorter session expiry times on the user experience, including automatic session token rotation, optionally sending keep alive messages to prevent short lived sessions from expiring if there is an window or tab open, background re-validation, and automatic tab/window syncing that keeps sessions in sync across windows any time session state changes or a window or tab gains or loses focus.
- As with database session tokens, JSON Web Tokens are limited in the amount of data you can store in them. There is typically a limit of around 4096 bytes per cookie, though the exact limit varies between browsers, proxies and hosting services. If you want to support most browsers, then do not exceed 4096 bytes per cookie. If you want to save more data, you will need to persist your sessions in a database (Source: [browsercookielimits.iain.guru](http://browsercookielimits.iain.guru/))
@@ -314,7 +313,7 @@ JSON Web Tokens can be used for session tokens, but are also used for lots of ot
Avoid storing any data in a token that might be problematic if it were to be decrypted in the future.
- If you do not explicitly specify a secret for for NextAuth.js, existing sessions will be invalidated any time your NextAuth.js configuration changes, as NextAuth.js will default to an auto-generated secret. Since v4 this only impacts development and generating a secret is required in production.
- If you do not explicitly specify a secret for for Auth.js, existing sessions will be invalidated any time your Auth.js configuration changes, as Auth.js will default to an auto-generated secret. Since v4 this only impacts development and generating a secret is required in production.
</p>
</details>
@@ -329,7 +328,7 @@ By default tokens are not signed (JWS) but are encrypted (JWE). Since v4 we have
You can specify other valid algorithms - [as specified in RFC 7518](https://tools.ietf.org/html/rfc7517) - with either a secret (for symmetric encryption) or a public/private key pair (for asymmetric encryption).
NextAuth.js will generate keys for you, but this will generate a warning at start up.
Auth.js will generate keys for you, but this will generate a warning at start up.
Using explicit public/private keys for signing is strongly recommended.
@@ -338,11 +337,11 @@ Using explicit public/private keys for signing is strongly recommended.
<details>
<summary>
<h3>What signing and encryption standards does NextAuth.js support?</h3>
<h3>What signing and encryption standards does Auth.js support?</h3>
</summary>
<p>
NextAuth.js includes a largely complete implementation of JSON Object Signing and Encryption (JOSE):
Auth.js includes a largely complete implementation of JSON Object Signing and Encryption (JOSE):
- [RFC 7515 - JSON Web Signature (JWS)](https://tools.ietf.org/html/rfc7515)
- [RFC 7516 - JSON Web Encryption (JWE)](https://tools.ietf.org/html/rfc7516)

View File

@@ -2,13 +2,13 @@
title: How OAuth works
---
Authentication Providers in **NextAuth.js** are OAuth definitions that allow your users to sign in with their favorite preexisting logins. You can use any of our many predefined providers, or write your own custom OAuth configuration.
Authentication Providers in **Auth.js** are OAuth definitions that allow your users to sign in with their favorite preexisting logins. You can use any of our many predefined providers, or write your own custom OAuth configuration.
- [Using a built-in OAuth Provider](#built-in-providers) (e.g Github, Twitter, Google, etc...)
- [Using a custom OAuth Provider](#using-a-custom-provider)
:::note
NextAuth.js is designed to work with any OAuth service, it supports **OAuth 1.0**, **1.0A**, **2.0** and **OpenID Connect** and has built-in support for most popular sign-in services.
Auth.js is designed to work with any OAuth service, it supports **OAuth 1.0**, **1.0A**, **2.0** and **OpenID Connect** and has built-in support for most popular sign-in services.
:::
Without going into too much detail, the OAuth flow generally has 6 parts:

View File

@@ -1,5 +1,6 @@
---
title: Contributors
displayed_sidebar: null
---
## Core team
@@ -22,20 +23,20 @@ Special thanks to Lori Karikari for creating most of the original provider confi
## Other contributors
NextAuth.js as it exists today has been possible thanks to the work of many individual contributors.
Auth.js as it exists today has been possible thanks to the work of many individual contributors.
Thank you to the [dozens of individual contributors](https://github.com/nextauthjs/next-auth/graphs/contributors) who have help shaped NextAuth.js.
Thank you to the [dozens of individual contributors](https://github.com/nextauthjs/next-auth/graphs/contributors) who have help shaped Auth.js.
## Open Collective
You can find NextAuth.js on Open Collective. We are very thankful for all of our existing contributors and would be delighted if you or your company would decide to join them.
You can find Auth.js on Open Collective. We are very thankful for all of our existing contributors and would be delighted if you or your company would decide to join them.
More information can be found at: https://opencollective.com/nextauth
## History
- NextAuth.js was originally developed by <a href="https://github.com/iaincollins">Iain Collins</a> in 2016 for Next.js.
- Auth.js was originally developed by <a href="https://github.com/iaincollins">Iain Collins</a> in 2016 for Next.js.
- In 2020, NextAuth.js was rebuilt from the ground up to support Serverless, with support for MySQL, Postgres and MongoDB, JSON Web Tokens and built in support for over a dozen authentication providers.
- In 2020, Auth.js was rebuilt from the ground up to support Serverless, with support for MySQL, Postgres and MongoDB, JSON Web Tokens and built in support for over a dozen authentication providers.
- In 2021, efforts have started to move NextAuth.js to other frameworks and to support as many databases and providers as possible.
- In 2021, efforts have started to move Auth.js to other frameworks and to support as many databases and providers as possible.

View File

@@ -1,10 +1,11 @@
---
title: Introduction
sidebar_position: 0
---
## About NextAuth.js
## About Auth.js
NextAuth.js is a complete open-source authentication solution for [Next.js](http://nextjs.org/) applications.
Auth.js is a complete open-source authentication solution for [Next.js](http://nextjs.org/) applications.
It is designed from the ground up to support Next.js and Serverless.
@@ -25,7 +26,7 @@ Check our tutorials to see how easy it is to use Auth.js for authentication:
### Own your own data
NextAuth.js can be used with or without a database.
Auth.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
@@ -50,6 +51,6 @@ Advanced options allow you to define your own routines to handle controlling wha
## Credits
NextAuth.js is an open-source project that is only possible [thanks to contributors](/contributors).
Auth.js is an open-source project that is only possible [thanks to contributors](/contributors).
If you would like to financially support the development of NextAuth.js, you can find more information on our [OpenCollective](https://opencollective.com/nextauth) page.
If you would like to financially support the development of Auth.js, you can find more information on our [OpenCollective](https://opencollective.com/nextauth) page.

View File

@@ -9,25 +9,25 @@ import startAppAndSignInImg from "./img/getting-started-app-start.png"
import githubAuthCredentials from "./img/getting-started-github-auth.png"
import nextAuthUserLoggedIn from "./img/getting-started-nextauth-success.png"
We know, authentication is hard. Is a rabbit hole and it's easy to get lost on it. The goal of making NextAuth.js is that you can add authentication easily to your project with just a few lines of code.
We know, authentication is hard. Is a rabbit hole and it's easy to get lost on it. The goal of making Auth.js is that you can add authentication easily to your project with just a few lines of code.
The easiest way is to setup NextAuth.js with an [OAuth](https://en.wikipedia.org/wiki/OAuth) provider. In this tutorial we'll be setting NextAuth.js in a **Next.js app** to be able to login with **Github**.
The easiest way is to setup Auth.js with an [OAuth](https://en.wikipedia.org/wiki/OAuth) provider. In this tutorial we'll be setting Auth.js in a **Next.js app** to be able to login with **Github**.
:::info
NextAuth.js comes with a long list of [built-in providers](/reference/providers/oauth-builtin) (Google, Facebook, Twitter, etc...) you can also integrate it with your own OAuth service easily by [building a custom provider](/guides/providers/custom-provider). NextAuth.js can integrate as well with other frameworks like SvelteKit and Gatsby.
Auth.js comes with a long list of [built-in providers](/reference/providers/oauth-builtin) (Google, Facebook, Twitter, etc...) you can also integrate it with your own OAuth service easily by [building a custom provider](/guides/providers/custom-provider). Auth.js can integrate as well with other frameworks like SvelteKit and Gatsby.
:::
## 1. Configuring NextAuth.js
## 1. Configuring Auth.js
### Creating the server config
To add NextAuth.js to a [**Next.js**](https://nextjs.org/) project, create the following [API route](https://nextjs.org/docs/api-routes/introduction):
To add Auth.js to a [**Next.js**](https://nextjs.org/) project, create the following [API route](https://nextjs.org/docs/api-routes/introduction):
```
pages/api/auth/[...nextauth].ts
```
This route will contain the **dynamic route handler** for NextAuth.js which describes your global auth configuration:
This route will contain the **dynamic route handler** for Auth.js which describes your global auth configuration:
```ts title="pages/api/auth/[...nextauth].js"
import NextAuth from "next-auth"
@@ -47,10 +47,10 @@ Behind the scenes this creates all the relevant OAuth API routes within `/api/au
- `/api/auth/callback`
- `/api/auth/signIn`
- `/api/auth/singOut`
- `/api/auth/signOut`
- etc...
can be handled by NextAuth.js. In this way, NextAuth.js stays in charge of handling the whole authentication request/response flow of your application for you.
can be handled by Auth.js. In this way, Auth.js stays in charge of handling the whole authentication request/response flow of your application for you.
You may notice there are some environment variables in the code example above. `GITHUB_ID` and `GITHUB_SECRET` are provided by the OAuth provider (in this case **Github**) see ["Configuring OAuth Provider"](/getting-started/oauth-tutorial#2-configuring-oauth-provider) section on how to get those.
@@ -63,7 +63,7 @@ $ openssl rand -base64 32
or https://generate-secret.vercel.app/32 to generate a random value for it.
:::info
NextAuth.js is extremely customizable, [our guides section](/guides/overview) will teach you how you can set it up to handle auth in different ways. All the possible configuration options are [listed here](/reference/configuration/auth-config).
Auth.js is extremely customizable, [our guides section](/guides/overview) will teach you how you can set it up to handle auth in different ways. All the possible configuration options are [listed here](/reference/configuration/auth-config).
:::
### Exposing the session via provider
@@ -93,7 +93,7 @@ Check our [client docs](/reference/react/) to learn all the available options fo
### Consuming the session via hooks
NextAuth.js exposes a [`useSession()`](/reference/react/#usesession) React Hook so that you can easily check if someone is signed in:
Auth.js exposes a [`useSession()`](/reference/react/#usesession) React Hook so that you can easily check if someone is signed in:
```ts title="pages/overview.tsx"
import { useSession, signIn, signOut } from "next-auth/react"
@@ -112,7 +112,7 @@ export default function CamperVanPage() {
<p>Signed in as {userEmail}</p>
<button onClick={() => signOut()}>Sign out</button>
<img src="https://cdn.pixabay.com/photo/2017/08/11/19/36/vw-2632486_1280.png" />
</img>
</>
)
}
@@ -160,7 +160,7 @@ Ok, we have our Next.js app setup with NextAuth, however, if you run the app rig
When using OAuth you're asking for a third-party service (in this case Github, although it could be Google, Twitter, etc...) to handle user authentication for your app.
:::
We need to register our new Next.js app in Github, so that when NextAuth.js forwards the authorization requests to it, Github can recognize your application and prompt the user to sign in.
We need to register our new Next.js app in Github, so that when Auth.js forwards the authorization requests to it, Github can recognize your application and prompt the user to sign in.
<img src={creatingOauthAppImg} />
@@ -183,7 +183,7 @@ http://localhost:3000/api/auth/callback/github
```
:::info
NextAuth.js will already magically create this API endpoint for you when we start the application later. Note that because we're using Next.js, locally it starts our server on the port `3000`, hence the origin is `http://localhost:3000`.
Auth.js will already magically create this API endpoint for you when we start the application later. Note that because we're using Next.js, locally it starts our server on the port `3000`, hence the origin is `http://localhost:3000`.
:::
Next you'll be presented with the following screen which presents all the configuration for your new OAuth app. For now, let's we need two things from it: the **Client ID** and **Client Secret** for our new OAuth app:
@@ -206,7 +206,7 @@ GITHUB_SECRET=67890
Cool! We have finished the configuring our OAuth provider, now let's wire all together so we can finally see authentication working in our app!
:::info
As noted previously, NextAuth.js has built-in support for multiple OAuth providers, <a href="">here the full list</a>. You can also easily build your own in case the provider you need is not on the list.
As noted previously, Auth.js has built-in support for multiple OAuth providers, <a href="">here the full list</a>. You can also easily build your own in case the provider you need is not on the list.
Note that, for each provider, the configuration process will be similar to what we just did:
@@ -218,7 +218,7 @@ Note that, for each provider, the configuration process will be similar to what
## 3. Wiring all together
Finally, we just need to reference our **Client ID** and **Client Secret** we just generated in the previous in our NextAuth.js config. In this way the library will be able to use them when forwarding users to Github, and Github will be able to recognize the request as generated from our application:
Finally, we just need to reference our **Client ID** and **Client Secret** we just generated in the previous in our Auth.js config. In this way the library will be able to use them when forwarding users to Github, and Github will be able to recognize the request as generated from our application:
```ts title="pages/api/auth/[...nextauth].js"
import NextAuth from "next-auth"
@@ -244,18 +244,18 @@ You should see the following page:
<img src={startAppAndSignInImg} />
Click on "Sign in" and then on "Sign in with Github": NextAuth.js will redirect you to Github, and Github will recognize our app [that we just registered](#2-configuring-oauth-provider) and ask the user (in this case you) to enter its credentials to proceed:
Click on "Sign in" and then on "Sign in with Github": Auth.js will redirect you to Github, and Github will recognize our app [that we just registered](#2-configuring-oauth-provider) and ask the user (in this case you) to enter its credentials to proceed:
<img src={githubAuthCredentials} />
Once inserted and correct, Github will redirect the user to our app and NextAuth.js will take care of any further calls with Github to get access to the user profile and start a user sessions safely in the background:
Once inserted and correct, Github will redirect the user to our app and Auth.js will take care of any further calls with Github to get access to the user profile and start a user sessions safely in the background:
<img src={nextAuthUserLoggedIn} />
Great! We have completed the whole E2E authentication flow setup so that users can login in our application through Github!
:::info
You can create your own Sign In page instead of using the default one from NextAuth.js. You can learn how to do so in our dedicated guide for it.
You can create your own Sign In page instead of using the default one from Auth.js. You can learn how to do so in our dedicated guide for it.
:::
## 4. Deploying to production

Some files were not shown because too many files have changed in this diff Show More