Compare commits

..

1 Commits

Author SHA1 Message Date
Balázs Orbán
430aa48557 chore(release): bump version 2022-04-14 09:07:07 +00:00
262 changed files with 21309 additions and 25711 deletions

View File

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

View File

@@ -16,23 +16,26 @@ jobs:
steps:
- name: Init
uses: actions/checkout@v2
with:
fetch-depth: 2
- name: Install pnpm
uses: pnpm/action-setup@v2.2.1
with:
version: 7.5.1
- name: Setup Node
uses: actions/setup-node@v3
uses: actions/setup-node@v2
with:
node-version: 16
cache: "pnpm"
cache: "yarn"
- name: Cache Node Modules
id: cache-node
uses: actions/cache@v2
with:
path: "**/node_modules"
key: cache-node_modules-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}-${{ github.run_id }}
restore-keys: |
cache-node_modules-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}-${{ github.run_id }}
cache-node_modules-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}-
- name: Install dependencies
run: pnpm install
run: yarn --prefer-offline --frozen-lockfile
- name: Build
run: pnpm build
run: yarn build
- name: Run tests
run: pnpm test
run: yarn test
env:
UPSTASH_REDIS_URL: ${{ secrets.UPSTASH_REDIS_URL }}
UPSTASH_REDIS_KEY: ${{ secrets.UPSTASH_REDIS_KEY }}
@@ -52,25 +55,29 @@ jobs:
uses: actions/checkout@v2
with:
fetch-depth: 0
- name: Install pnpm
uses: pnpm/action-setup@v2.2.1
with:
version: 7.5.1
- name: Setup Node
uses: actions/setup-node@v3
uses: actions/setup-node@v2
with:
node-version: 16
cache: "pnpm"
cache: "yarn"
- name: Cache Node Modules
id: cache-node
uses: actions/cache@v2
with:
path: "**/node_modules"
key: cache-node_modules-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}-${{ github.run_id }}
restore-keys: |
cache-node_modules-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}-${{ github.run_id }}
cache-node_modules-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}-
- name: Install dependencies
run: pnpm install
run: yarn --prefer-offline --frozen-lockfile
- 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
yarn release
env:
RELEASE_TOKEN: ${{ secrets.RELEASE_TOKEN }}
GITHUB_TOKEN: ${{ secrets.RELEASE_TOKEN }}
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NPM_TOKEN_PKG: ${{ secrets.NPM_TOKEN_PKG }}
NPM_TOKEN_ORG: ${{ secrets.NPM_TOKEN_ORG }}
release-pr:
@@ -82,17 +89,22 @@ jobs:
steps:
- name: Init
uses: actions/checkout@v2
- name: Install pnpm
uses: pnpm/action-setup@v2.2.1
with:
version: 7.5.1
- name: Setup Node
uses: actions/setup-node@v3
uses: actions/setup-node@v2
with:
node-version: 16
cache: "pnpm"
cache: "yarn"
- name: Cache Node Modules
id: cache-node
uses: actions/cache@v2
with:
path: "**/node_modules"
key: cache-node_modules-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}-${{ github.run_id }}
restore-keys: |
cache-node_modules-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}-${{ github.run_id }}
cache-node_modules-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}-
- name: Install dependencies
run: pnpm install
run: yarn --prefer-offline --frozen-lockfile
- name: Determine version
uses: ./.github/version-pr
id: determine-version
@@ -102,9 +114,9 @@ jobs:
run: |
cd packages/next-auth
echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> .npmrc
pnpm publish --no-git-checks --access public --tag experimental
npm publish --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@v1
with:

4
.gitignore vendored
View File

@@ -12,7 +12,6 @@ npm-debug.log*
yarn-debug.log*
yarn-error.log*
firebase-debug.log
.pnpm-debug.log
# Dependencies
@@ -30,7 +29,7 @@ packages/next-auth/providers
packages/next-auth/src/providers/oauth-types.ts
packages/next-auth/client
packages/next-auth/css
packages/next-auth/utils
packages/next-auth/lib
packages/next-auth/core
packages/next-auth/jwt
packages/next-auth/react
@@ -44,7 +43,6 @@ packages/next-auth/middleware.js
# Development app
apps/dev/src/css
apps/dev/prisma/migrations
apps/dev/typeorm
# VS
/.vs/slnx.sqlite-journal

View File

@@ -17,7 +17,7 @@ Anyone can be a contributor. Either you found a typo, or you have an awesome fea
- The latest changes are always in `main`, so please make your Pull Request against that branch.
- Pull Requests should be raised for any change
- Pull Requests need approval of a [core contributor](https://next-auth.js.org/contributors#core-team) before merging
- We use ESLint/Prettier for linting/formatting, so please run `pnpm lint:fix` before committing to make resolving conflicts easier (VSCode users, check out [this ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and [this Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) to fix lint and formatting issues in development)
- We use ESLint/Prettier for linting/formatting, so please run `yarn lint:fix` before committing to make resolving conflicts easier (VSCode users, check out [this ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and [this Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) to fix lint and formatting issues in development)
- We encourage you to test your changes, and if you have the opportunity, please make those tests part of the Pull Request
- If you add new functionality, please provide the corresponding documentation as well and make it part of the Pull Request
@@ -37,7 +37,7 @@ cd next-auth
1. Install packages. Developing requires Node.js v16:
```sh
pnpm install
yarn
```
3. Populate `.env.local`:
@@ -55,7 +55,7 @@ cp .env.local.example .env.local
4. Start the developer application/server:
```sh
pnpm dev
yarn dev:app
```
Your developer application will be available on `http://localhost:3000`
@@ -65,7 +65,7 @@ If you need an example project to link to, you can use [next-auth-example](https
#### Hot reloading
When running `pnpm dev`, you start a Next.js developer server on `http://localhost:3000`, which includes hot reloading out-of-the-box. Make changes on any of the files in `src` and see the changes immediately.
When running `yarn dev:app`, you start a Next.js developer server on `http://localhost:3000`, which includes hot reloading out of the box. Make changes on any of the files in `src` and see the changes immediately.
> NOTE: When working on CSS, you will have to manually refresh the page after changes. The reason for this is our pages using CSS are server-side rendered (using API routes). (Improving this through a PR is very welcome!)
@@ -75,7 +75,7 @@ When running `pnpm dev`, you start a Next.js developer server on `http://localho
If you think your custom provider might be useful to others, we encourage you to open a PR and add it to the built-in list so others can discover it much more easily! You only need to add two changes:
1. Add your config: [`src/providers/{provider}.js`](https://github.com/nextauthjs/next-auth/tree/main/packages/next-auth/src/providers) (Make sure you use a named default export, like `export default function YourProvider`!)
1. Add your config: [`src/providers/{provider}.js`](https://github.com/nextauthjs/next-auth/tree/main/src/providers) (Make sure you use a named default export, like `export default function YourProvider`!)
2. Add provider documentation: [`www/docs/providers/{provider}.md`](https://github.com/nextauthjs/next-auth/tree/main/www/docs/providers)
That's it! 🎉 Others will be able to discover this provider much more easily now!
@@ -88,13 +88,13 @@ If you would like to contribute to an existing database adapter or help create a
#### Testing
Tests can be run with `pnpm test`.
Tests can be run with `yarn test`.
Automated tests are currently crude and limited in functionality, but improvements are in development.
## For maintainers
We use [a custom script](https://github.com/nextauthjs/next-auth/blob/main/scripts/release/index.ts) together with [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0) to automate releases. This makes the maintenance process easier and less error-prone. Please study the "Conventional Commits" site to understand how to write a good commit message.
We use [a custom script](https://github.com/nextauthjs/next-auth/tree/main/scripts/index.ts) together with [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0) to automate releases. This makes the maintenance process easier and less error-prone. Please study the "Conventional Commits" site to understand how to write a good commit message.
When accepting Pull Requests, make sure the following:
@@ -103,9 +103,9 @@ When accepting Pull Requests, make sure the following:
- Rewrite the commit message to conform to the `Conventional Commits` style.
- Using `fix` releases a patch (x.x.1)
- Using `feat` releases a minor (x.1.x)
- Using `feat` when `BREAKING CHANGE` is present in the commit message releases a major (1.x.x)
- Using `feat` when `BREAKING CHANGE` is present in the commit messgae releases a major (1.x.x)
- Optionally link issues the PR will resolve (You can add "close" in front of the issue numbers to close the issues automatically, when the PR is merged. `semantic-release` will also comment back to connected issues and PRs, notifying the users that a feature is added/bug fixed, etc.)
### Skipping a release
If a commit contains `[skip release]` in their message, it will be excluded from the commit analysis and won't participate in the release type determination. This is useful, if the PR being merged should not trigger a new `npm` release.
If a commit contains `[skip release]` in their message will be excluded from the commit analysis and won't participate in the release type determination. This is useful, if the PR being merged should not trigger a new `npm` release.

View File

@@ -50,6 +50,3 @@ DATABASE_URL=
BOXYHQSAML_ISSUER="https://jackson-demo.boxyhq.com"
BOXYHQSAML_ID="tenant=boxyhq.com&product=saml-demo.boxyhq.com"
BOXYHQSAML_SECRET="dummy"
WIKIMEDIA_ID=
WIKIMEDIA_SECRET=

View File

@@ -6,35 +6,29 @@
"scripts": {
"clean": "rm -rf .next",
"copy:css": "cpx \"../../packages/next-auth/css/**/*\" src/css --watch",
"watch:css": "cd ../../packages/next-auth && pnpm watch:css",
"dev": "concurrently \"pnpm dev:next\" \"pnpm watch:css\" \"pnpm copy:css\"",
"dev:next": "next dev",
"build": "next build",
"watch:css": "cd ../../packages/next-auth && npm run watch:css",
"dev": "npm-run-all --parallel dev:next watch:css copy:css",
"dev:next": "npx next dev",
"build": "npx next build",
"start": "next start",
"email": "fake-smtp-server",
"start:email": "pnpm email"
"email": "npx fake-smtp-server",
"start:email": "npm run email"
},
"license": "ISC",
"dependencies": {
"@next-auth/fauna-adapter": "workspace:*",
"@next-auth/prisma-adapter": "workspace:*",
"@next-auth/typeorm-legacy-adapter": "workspace:*",
"@prisma/client": "^3",
"faunadb": "^4",
"next": "12.2.0",
"nodemailer": "^6",
"react": "^18",
"react-dom": "^18"
"@next-auth/fauna-adapter": "^1.0.1",
"@next-auth/prisma-adapter": "^1.0.1",
"@prisma/client": "^3.10.0",
"fake-smtp-server": "^0.8.0",
"faunadb": "^4.4.1",
"next": "^12.1.0",
"nodemailer": "^6.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"@types/react": "^18.0.15",
"@types/react-dom": "^18.0.6",
"concurrently": "^7",
"cpx": "^1.5.0",
"fake-smtp-server": "^0.8.0",
"pg": "^8.7.3",
"prisma": "^3",
"sqlite3": "^5.0.8",
"typeorm": "0.3.7"
"@types/react": "^17.0.37",
"@types/react-dom": "^17.0.11",
"prisma": "^3.10.0"
}
}
}

View File

@@ -4,11 +4,10 @@ import GitHubProvider from "next-auth/providers/github"
import Auth0Provider from "next-auth/providers/auth0"
import KeycloakProvider from "next-auth/providers/keycloak"
import TwitterProvider, {
// TwitterLegacy as TwitterLegacyProvider,
TwitterLegacy as TwitterLegacyProvider,
} from "next-auth/providers/twitter"
import CredentialsProvider from "next-auth/providers/credentials"
import IDS4Provider from "next-auth/providers/identity-server4"
import DuendeIDS6Provider from "next-auth/providers/duende-identity-server6"
import Twitch from "next-auth/providers/twitch"
import GoogleProvider from "next-auth/providers/google"
import FacebookProvider from "next-auth/providers/facebook"
@@ -32,39 +31,20 @@ import PatreonProvider from "next-auth/providers/patreon"
import TraktProvider from "next-auth/providers/trakt"
import WorkOSProvider from "next-auth/providers/workos"
import BoxyHQSAMLProvider from "next-auth/providers/boxyhq-saml"
import WikimediaProvider from "next-auth/providers/wikimedia"
import VkProvider from "next-auth/providers/vk"
// TypeORM
// import { TypeORMLegacyAdapter } from "@next-auth/typeorm-legacy-adapter"
// const adapter = TypeORMLegacyAdapter({
// type: "sqlite",
// name: "next-auth-test-memory",
// database: "./typeorm/dev.db",
// synchronize: true,
// })
// // Prisma
// import { PrismaAdapter } from "@next-auth/prisma-adapter"
// import { PrismaClient } from "@prisma/client"
// const prisma = new PrismaClient()
// const adapter = PrismaAdapter(prisma)
// // Fauna
// import { Client as FaunaClient } from "faunadb"
// import { FaunaAdapter } from "@next-auth/fauna-adapter"
// const client = new FaunaClient({
// secret: process.env.FAUNA_SECRET,
// domain: process.env.FAUNA_DOMAIN,
// })
// const adapter = FaunaAdapter(client)
// // Dummy
// const adapter: any = {
// getUserByEmail: (email) => ({ id: "1", email, emailVerified: null }),
// createVerificationToken: (token) => token,
// }
export const authOptions: NextAuthOptions = {
// adapter,
providers: [
@@ -167,11 +147,6 @@ export const authOptions: NextAuthOptions = {
clientSecret: process.env.IDS4_SECRET,
issuer: process.env.IDS4_ISSUER,
}),
DuendeIDS6Provider({
clientId: "interactive.confidential",
clientSecret: "secret",
issuer: "https://demo.duendesoftware.com",
}),
DiscordProvider({
clientId: process.env.DISCORD_ID,
clientSecret: process.env.DISCORD_SECRET,
@@ -227,18 +202,10 @@ export const authOptions: NextAuthOptions = {
clientSecret: process.env.WORKOS_SECRET,
}),
BoxyHQSAMLProvider({
issuer: process.env.BOXYHQSAML_ISSUER ?? "https://example.com",
issuer: process.env.BOXYHQSAML_ISSUER,
clientId: process.env.BOXYHQSAML_ID,
clientSecret: process.env.BOXYHQSAML_SECRET,
}),
WikimediaProvider({
clientId: process.env.WIKIMEDIA_ID,
clientSecret: process.env.WIKIMEDIA_SECRET,
}),
VkProvider({
clientId: process.env.VK_ID,
clientSecret: process.env.VK_SECRET
}),
],
debug: true,
theme: {

View File

@@ -1,8 +1,8 @@
// This is an example of to protect an API route
import { unstable_getServerSession } from "next-auth/next"
import { getSession } from "next-auth/react"
export default async (req, res) => {
const session = await unstable_getServerSession(req, res, options)
const session = await getSession({ req })
if (session) {
res.send({

View File

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

View File

@@ -1,7 +1,5 @@
export { default } from "next-auth/middleware"
export const config = { matcher: ["/middleware-protected"] }
// Other ways to use this middleware
// import withAuth from "next-auth/middleware"

View File

@@ -1,5 +1,5 @@
// This is an example of how to protect content using server rendering
import { unstable_getServerSession } from "next-auth/next"
import { getServerSession } from "next-auth/next"
import { authOptions } from "./api/auth/[...nextauth]"
import Layout from "../components/layout"
import AccessDenied from "../components/access-denied"
@@ -26,11 +26,7 @@ export default function Page({ content, session }) {
}
export async function getServerSideProps(context) {
const session = await unstable_getServerSession(
context.req,
context.res,
authOptions
)
const session = await getServerSession(context, authOptions)
let content = null
if (session) {

View File

@@ -1,4 +1,4 @@
import { unstable_getServerSession } from "next-auth/next"
import { getSession } from "next-auth/react"
import Layout from "../components/layout"
export default function Page() {
@@ -11,17 +11,13 @@ export default function Page() {
<Layout>
<h1>Server Side Rendering</h1>
<p>
This page uses the <strong>unstable_getServerSession()</strong> method
in <strong>getServerSideProps()</strong>.
This page uses the universal <strong>getSession()</strong> method in{" "}
<strong>getServerSideProps()</strong>.
</p>
<p>
Using <strong>unstable_getServerSession()</strong> in{" "}
<strong>getServerSideProps()</strong> is currently the recommended
approach, although the API may still change, if you need to support
Server Side Rendering with authentication.
</p>
<p>
Using <strong>getSession()</strong> is still recommended on the client.
Using <strong>getSession()</strong> in{" "}
<strong>getServerSideProps()</strong> is the recommended approach if you
need to support Server Side Rendering with authentication.
</p>
<p>
The advantage of Server Side Rendering is this page does not require
@@ -39,11 +35,7 @@ export default function Page() {
export async function getServerSideProps(context) {
return {
props: {
session: await unstable_getServerSession(
contex.req,
contex.res,
authOptions
),
session: await getSession(context),
},
}
}

View File

@@ -65,6 +65,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)
* Adapters Repo: [nextauthjs/adapters](https://github.com/nextauthjs/adapters)
### 3. Configure Authentication Providers

View File

@@ -12,9 +12,9 @@
"dependencies": {
"dotenv": "^16.0.0",
"gatsby": "next",
"next-auth": "latest",
"react": "^18",
"react-dom": "^18"
"next-auth": "^4.2.1",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"vercel": "^23.1.2"

View File

@@ -68,6 +68,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)
* Adapters Repo: [nextauthjs/adapters](https://github.com/nextauthjs/adapters)
### 3. Configure Authentication Providers

View File

@@ -1,12 +0,0 @@
import { withAuth } from "next-auth/middleware"
// More on how NextAuth.js middleware works: https://next-auth.js.org/configuration/nextjs#middleware
export default withAuth({
callbacks: {
authorized: ({ req, token }) =>
// /admin requires admin role, but /me only requires the user to be logged in.
req.nextUrl.pathname !== "/admin" || token?.userRole === "admin",
},
})
export const config = { matcher: ["/admin", "/me"] }

View File

@@ -1,15 +1,19 @@
{
"name": "next-auth-example",
"version": "0.0.0",
"private": true,
"description": "An example project for NextAuth.js with Next.js",
"description": "An example project for NextAuth.js",
"repository": "https://github.com/nextauthjs/next-auth-example.git",
"bugs": {
"url": "https://github.com/nextauthjs/next-auth/issues"
},
"homepage": "https://next-auth-example.vercel.app",
"main": "",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
"start": "next start",
"types": "tsc --noEmit"
},
"author": "Iain Collins <me@iaincollins.com>",
"contributors": [
@@ -17,16 +21,20 @@
"Nico Domino <yo@ndo.dev>",
"Lluis Agusti <hi@llu.lu>"
],
"license": "ISC",
"dependencies": {
"next": "latest",
"next": "^12.0.11-canary.4",
"next-auth": "latest",
"nodemailer": "^6",
"react": "^18.2.0",
"react-dom": "^18.2.0"
"nodemailer": "^6.6.3",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"@types/node": "^17",
"@types/react": "^18.0.15",
"typescript": "^4"
"@types/node": "^17.0.14",
"@types/react": "^17.0.39",
"typescript": "^4.5.5"
},
"prettier": {
"semi": false
}
}

View File

@@ -1,7 +1,6 @@
import { SessionProvider } from "next-auth/react"
import "./styles.css"
import type { AppProps } from "next/app"
import "./styles.css"
// Use of the <SessionProvider> is mandatory to allow components that call
// `useSession()` anywhere in your application to access the `session` object.

View File

@@ -0,0 +1,8 @@
import { withAuth } from "next-auth/middleware"
// More on how NextAuth.js middleware works: https://next-auth.js.org/configuration/nextjs#middleware
export default withAuth({
callbacks: {
authorized: ({ token }) => token?.userRole === "admin",
},
})

View File

@@ -1,4 +1,4 @@
import Layout from "../components/layout"
import Layout from "../../components/layout"
export default function Page() {
return (

View File

@@ -1,4 +1,4 @@
import NextAuth, { NextAuthOptions } from "next-auth"
import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"
import FacebookProvider from "next-auth/providers/facebook"
import GithubProvider from "next-auth/providers/github"
@@ -9,7 +9,7 @@ import Auth0Provider from "next-auth/providers/auth0"
// For more information on each option (and a full list of options) go to
// https://next-auth.js.org/configuration/options
export const authOptions: NextAuthOptions = {
export default NextAuth({
// https://next-auth.js.org/configuration/providers/oauth
providers: [
/* EmailProvider({
@@ -18,7 +18,7 @@ export const authOptions: NextAuthOptions = {
}),
// Temporarily removing the Apple provider from the demo site as the
// callback URL for it needs updating due to Vercel changing domains
Providers.Apple({
clientId: process.env.APPLE_ID,
clientSecret: {
@@ -60,6 +60,4 @@ export const authOptions: NextAuthOptions = {
return token
},
},
}
export default NextAuth(authOptions)
})

View File

@@ -1,14 +1,10 @@
// This is an example of how to read a JSON Web Token from an API route
import { getToken } from "next-auth/jwt"
import type { NextApiRequest, NextApiResponse } from "next"
const secret = process.env.NEXTAUTH_SECRET
export default async function handler(
req: NextApiRequest,
res: NextApiResponse
) {
export default async (req: NextApiRequest, res: NextApiResponse) => {
const token = await getToken({ req, secret })
res.send(JSON.stringify(token, null, 2))
}

View File

@@ -1,23 +1,18 @@
// This is an example of to protect an API route
import { unstable_getServerSession } from "next-auth/next"
import { authOptions } from "../auth/[...nextauth]"
import { getSession } from "next-auth/react"
import type { NextApiRequest, NextApiResponse } from "next"
export default async function handler(
req: NextApiRequest,
res: NextApiResponse
) {
const session = await unstable_getServerSession(req, res, authOptions)
export default async (req: NextApiRequest, res: NextApiResponse) => {
const session = await getSession({ req })
if (session) {
return res.send({
res.send({
content:
"This is protected content. You can access this content because you are signed in.",
})
} else {
res.send({
error: "You must be signed in to view the protected content on this page.",
})
}
res.send({
error: "You must be signed in to view the protected content on this page.",
})
}

View File

@@ -1,13 +1,8 @@
// This is an example of how to access a session from an API route
import { unstable_getServerSession } from "next-auth"
import { authOptions } from "../auth/[...nextauth]"
import { getSession } from "next-auth/react"
import type { NextApiRequest, NextApiResponse } from "next"
export default async function handler(
req: NextApiRequest,
res: NextApiResponse
) {
const session = await unstable_getServerSession(req, res, authOptions)
export default async (req: NextApiRequest, res: NextApiResponse) => {
const session = await getSession({ req })
res.send(JSON.stringify(session, null, 2))
}

View File

@@ -0,0 +1,2 @@
// More on how NextAuth.js middleware works: https://next-auth.js.org/configuration/nextjs#middleware
export { default } from "next-auth/middleware"

View File

@@ -1,5 +1,5 @@
import { useSession } from "next-auth/react"
import Layout from "../components/layout"
import Layout from "../../components/layout"
export default function MePage() {
const { data } = useSession()

View File

@@ -1,25 +1,26 @@
import { unstable_getServerSession } from "next-auth/next"
import { authOptions } from "./api/auth/[...nextauth]"
import { useSession, getSession } from "next-auth/react"
import Layout from "../components/layout"
import type { NextPageContext } from "next"
import type { GetServerSidePropsContext } from "next"
import type { Session } from "next-auth"
export default function ServerSidePage({ session }: { session: Session }) {
export default function ServerSidePage() {
// As this page uses Server Side Rendering, the `session` will be already
// populated on render without needing to go through a loading stage.
// This is possible because of the shared context configured in `_app.js` that
// is used by `useSession()`.
const { data: session, status } = useSession()
const loading = status === "loading"
return (
<Layout>
<h1>Server Side Rendering</h1>
<p>
This page uses the <strong>unstable_getServerSession()</strong> method
in <strong>unstable_getServerSideProps()</strong>.
This page uses the universal <strong>getSession()</strong> method in{" "}
<strong>getServerSideProps()</strong>.
</p>
<p>
Using <strong>unstable_getServerSession()</strong> in{" "}
<strong>unstable_getServerSideProps()</strong> is the recommended
approach if you need to support Server Side Rendering with
authentication.
Using <strong>getSession()</strong> in{" "}
<strong>getServerSideProps()</strong> is the recommended approach if you
need to support Server Side Rendering with authentication.
</p>
<p>
The advantage of Server Side Rendering is this page does not require
@@ -29,20 +30,15 @@ export default function ServerSidePage({ session }: { session: Session }) {
The disadvantage of Server Side Rendering is that this page is slower to
render.
</p>
<pre>{JSON.stringify(session, null, 2)}</pre>
</Layout>
)
}
// Export the `session` prop to use sessions with Server Side Rendering
export async function getServerSideProps(context: GetServerSidePropsContext) {
export async function getServerSideProps(context: NextPageContext) {
return {
props: {
session: await unstable_getServerSession(
context.req,
context.res,
authOptions
),
session: await getSession(context),
},
}
}

View File

@@ -30,7 +30,7 @@
"type": "module",
"dependencies": {
"cookie": "0.4.1",
"next-auth": "workspace:*"
"next-auth": "^4.2.1"
},
"prettier": {
"semi": false,

View File

@@ -65,7 +65,7 @@ async function SKNextAuthHandler(
query: Object.fromEntries(url.searchParams),
headers: request.headers,
method: request.method,
cookies: cookie.parse(request.headers.get("cookie") ?? ""),
cookies: cookie.parse(request.headers.get("cookie")),
action: nextauth[0] as NextAuthAction,
providerId: nextauth[1],
error: nextauth[1],
@@ -91,7 +91,7 @@ export async function getServerSession(
host: import.meta.env.VITE_NEXTAUTH_URL,
action: "session",
method: "GET",
cookies: cookie.parse(request.headers.get("cookie") ?? ""),
cookies: cookie.parse(request.headers.get("cookie")),
headers: request.headers,
},
options,

View File

@@ -1232,10 +1232,10 @@ natural-compare@^1.4.0:
resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
"next-auth@workspace:*":
version "4.9.0"
resolved "https://registry.yarnpkg.com/next-auth/-/next-auth-4.9.0.tgz#0d8cabcb22a976744131a2e68d5f08756f322593"
integrity sha512-/4S5dFeyNg2nXlD7g/Sh5A4WZWnUMDpEf8x/x+gzmAf5cAY2SjDM6sLk9u4XRmsndsxQpIMWDw03sUTAD+Yzog==
next-auth@^4.2.1:
version "4.2.1"
resolved "https://registry.yarnpkg.com/next-auth/-/next-auth-4.2.1.tgz#042e4858d9f67b4f702d3a55bae0d2f04db3cac3"
integrity sha512-XDtt7nqevkNf4EJ2zKAKkI+MFsURf11kx11vPwxrBYA1MHeqWwaWbGOUOI2ekNTvfAg4nTEJJUH3LV2cLrH3Tg==
dependencies:
"@babel/runtime" "^7.16.3"
"@panva/hkdf" "^1.0.1"

View File

@@ -11,7 +11,7 @@ This is the Dgraph Adapter for [`next-auth`](https://next-auth.js.org).
1. Install the necessary packages
```bash npm2yarn2pnpm
```bash npm2yarn
npm install next-auth @next-auth/dgraph-adapter
```
@@ -226,22 +226,22 @@ database you must customize next-auth `encode` and `decode` functions, as the de
further customize the jwt with roles if you want to implement [`RBAC logic`](https://dgraph.io/docs/graphql/authorization/directive/#role-based-access-control).
```js
import * as jwt from "jsonwebtoken"
import * as jwt from "jsonwebtoken";
export default NextAuth({
session: {
strategy: "jwt",
strategy: "jwt"
},
jwt: {
secret: process.env.SECRET,
encode: async ({ secret, token }) => {
return jwt.sign({ ...token, userId: token.id }, secret, {
return jwt.sign({...token, userId: token.id}, secret, {
algorithm: "HS256",
expiresIn: 30 * 24 * 60 * 60, // 30 days
})
expiresIn: 30 * 24 * 60 * 60; // 30 days
});
},
decode: async ({ secret, token }) => {
return jwt.verify(token, secret, { algorithms: ["HS256"] })
},
return jwt.verify(token, secret, { algorithms: ["HS256"] });
}
},
})
```

View File

@@ -15,7 +15,7 @@ You can find the full schema in the table structure section below.
1. Install `next-auth` and `@next-auth/dynamodb-adapter`
```bash npm2yarn2pnpm
```bash npm2yarn
npm install next-auth @next-auth/dynamodb-adapter
```

View File

@@ -13,7 +13,7 @@ You can find the Fauna schema and seed information in the docs at [next-auth.js.
1. Install the necessary packages
```bash npm2yarn2pnpm
```bash npm2yarn
npm install next-auth @next-auth/fauna-adapter faunadb
```

View File

@@ -5,14 +5,18 @@ title: Firebase
# Firebase
This is the Firebase (Firestore) Adapter for [`next-auth`](https://next-auth.js.org). This package can only be used in conjunction with the primary `next-auth` package. It is not a standalone package.
:::warning
This adapter is still experimental and does not work with NextAuth.js 4 or newer. If you would like to help out upgrading it, please visit [this PR](https://github.com/nextauthjs/next-auth/pull/3873)
:::
This is the Firebase Adapter for [`next-auth`](https://next-auth.js.org). This package can only be used in conjunction with the primary `next-auth` package. It is not a standalone package.
## Getting Started
1. Install the necessary packages
```bash npm2yarn2pnpm
npm install next-auth @next-auth/firebase-adapter
```bash npm2yarn
npm install next-auth @next-auth/firebase-adapter@experimental
```
2. Add this adapter to your `pages/api/auth/[...nextauth].js` next-auth configuration object.
@@ -20,7 +24,14 @@ npm install next-auth @next-auth/firebase-adapter
```javascript title="pages/api/auth/[...nextauth].js"
import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"
import { FirestoreAdapter } from "@next-auth/firebase-adapter"
import { FirebaseAdapter } from "@next-auth/firebase-adapter"
import firebase from "firebase/app"
import "firebase/firestore"
const firestore = (
firebase.apps[0] ?? firebase.initializeApp(/* your config */)
).firestore()
// For more information on each option (and a full list of options) go to
// https://next-auth.js.org/configuration/options
@@ -32,19 +43,9 @@ export default NextAuth({
clientSecret: process.env.GOOGLE_SECRET,
}),
],
adapter: FirestoreAdapter({
apiKey: process.env.FIREBASE_API_KEY,
appId: process.env.FIREBASE_APP_ID,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.FIREBASE_DATABASE_URL,
projectId: process.env.FIREBASE_PROJECT_ID,
storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
// Optional emulator config (see below for options)
emulator: {},
}),
// ...
});
adapter: FirebaseAdapter(firestore),
...
})
```
## Options
@@ -68,21 +69,6 @@ const firebaseConfig = {
See [firebase.google.com/docs/web/setup](https://firebase.google.com/docs/web/setup) for more details.
You can optionally pass in emulator options to automatically connect to your local Firebase emulator.
```js
FirestoreAdapter({
// ...
// Passing in an enable object will enable the emulator
emulator: {
// Optional host, defaults to `localhost`
host: 'localhost',
// Optional port, defaults to `3001`
port: 3001,
},
}),
```
:::tip **From Firebase**
**Caution**: We do not recommend manually modifying an app's Firebase config file or object. If you initialize an app with invalid or missing values for any of these required "Firebase options", then your end users may experience serious issues.

View File

@@ -5,7 +5,7 @@ title: MikroORM
To use this Adapter, you need to install Mikro ORM, the driver that suits your database, and the separate `@next-auth/mikro-orm-adapter` package:
```bash npm2yarn2pnpm
```bash npm2yarn
npm install next-auth @next-auth/mikro-orm-adapter @mikro-orm/core @mikro-orm/[YOUR DRIVER]
```

View File

@@ -11,7 +11,7 @@ The MongoDB adapter does not handle connections automatically, so you will have
1. Install the necessary packages
```bash npm2yarn2pnpm
```bash npm2yarn
npm install next-auth @next-auth/mongodb-adapter mongodb
```

View File

@@ -11,7 +11,7 @@ This is the Neo4j Adapter for [`next-auth`](https://next-auth.js.org). This pack
1. Install the necessary packages
```bash npm2yarn2pnpm
```bash npm2yarn
npm install next-auth @next-auth/neo4j-adapter neo4j-driver
```

View File

@@ -19,7 +19,7 @@ Depending on your architecture you can use PouchDB's http adapter to reach any d
1. Install `next-auth` and `@next-auth/pouchdb-adapter`
```bash npm2yarn2pnpm
```bash npm2yarn
npm install next-auth @next-auth/pouchdb-adapter
```

View File

@@ -7,7 +7,7 @@ title: Prisma
To use this Adapter, you need to install Prisma Client, Prisma CLI, and the separate `@next-auth/prisma-adapter` package:
```bash npm2yarn2pnpm
```bash npm2yarn
npm install next-auth @prisma/client @next-auth/prisma-adapter
npm install prisma --save-dev
```

View File

@@ -11,7 +11,7 @@ This is the Sequelize Adapter for [`next-auth`](https://next-auth.js.org).
1. Install the necessary packages
```bash npm2yarn2pnpm
```bash npm2yarn
npm install next-auth @next-auth/sequelize-adapter sequelize
```

View File

@@ -5,25 +5,21 @@ title: TypeORM
# TypeORM
This Adapter is used to support SQL-flavored databases (like SQLite, MySQL, MSSQL, MariaDB, CockroachDB, etc.) through [TypeORM](https://typeorm.io).
This Adapter is used to support SQL-flavored databases (like SQLite, MySQL, MSSQL, MariaDB, CockroachDB, etc.) through [TypeORM](https://typeorm.io), and mostly kept around for legacy reasons. (See the warning below.)
:::note
If you previously used this Adapter with MongoDB, check out the [MongoDB Adapter](/adapters/mongodb) instead.
:::
:::note
:::warning
In the future, we might split up this adapter to support single flavors of SQL for easier maintenance and reduced bundle size.
:::
## Usage
:::warning
[`typeorm`](https://github.com/typeorm/typeorm) is still in active development and has not yet published a stable release. Because of this, you can expect breaking changes in minor versions. This adapter expects `typeorm@0.3.7` and is not validated against previous or future releases.
:::
To use this Adapter, you need to install the following packages:
```bash npm2yarn2pnpm
```bash npm2yarn
npm install next-auth @next-auth/typeorm-legacy-adapter typeorm
```
@@ -40,7 +36,7 @@ export default NextAuth({
})
```
`TypeORMLegacyAdapter` takes either a connection string, or a [`DataSourceOptions`](https://github.com/typeorm/typeorm/blob/master/docs/data-source-options.md) object as its first parameter.
`TypeORMLegacyAdapter` takes either a connection string, or a [`ConnectionOptions`](https://github.com/typeorm/typeorm/blob/master/docs/connection-options.md) object as its first parameter.
## Custom models
@@ -221,9 +217,9 @@ For example, you can add the naming convention option to the connection object i
import NextAuth from "next-auth"
import { TypeORMLegacyAdapter } from "@next-auth/typeorm-legacy-adapter"
import { SnakeNamingStrategy } from 'typeorm-naming-strategies'
import { ConnectionOptions } from "typeorm"
export default NextAuth({
adapter: TypeORMLegacyAdapter({
const connection: ConnectionOptions = {
type: "mysql",
host: "localhost",
port: 3306,
@@ -231,7 +227,10 @@ export default NextAuth({
password: "test",
database: "test",
namingStrategy: new SnakeNamingStrategy()
}),
}
export default NextAuth({
adapter: TypeORMLegacyAdapter(connection),
...
})
```

View File

@@ -7,7 +7,7 @@ title: Upstash Redis
To use this Adapter, you need to install `@upstash/redis` and `@next-auth/upstash-redis-adapter` package:
```bash npm2yarn2pnpm
```bash npm2yarn
npm install @upstash/redis @next-auth/upstash-redis-adapter
```

View File

@@ -89,7 +89,7 @@ The default redirect callback looks like this:
callbacks: {
async redirect({ url, baseUrl }) {
// Allows relative callback URLs
if (url.startsWith("/")) return `${baseUrl}${url}`
if (url.startsWith("/")) return new URL(url, baseUrl).toString()
// Allows callback URLs on the same origin
else if (new URL(url).origin === baseUrl) return url
return baseUrl
@@ -107,7 +107,7 @@ The redirect callback may be invoked more than once in the same flow.
This callback is called whenever a JSON Web Token is created (i.e. at sign
in) or updated (i.e whenever a session is accessed in the client). The returned value will be [encrypted](/configuration/options#jwt), and it is stored in a cookie.
Requests to `/api/auth/signin`, `/api/auth/session` and calls to `getSession()`, `unstable_getServerSession()`, `useSession()` will invoke this function, but only if you are using a [JWT session](/configuration/options#session). This method is not invoked when you persist sessions in a database.
Requests to `/api/auth/signin`, `/api/auth/session` and calls to `getSession()`, `useSession()` will invoke this function, but only if you are using a [JWT session](/configuration/options#session). This method is not invoked when you persist sessions in a database.
- As with database persisted session expiry times, token expiry time is extended whenever a session is active.
- The arguments _user_, _account_, _profile_ and _isNewUser_ are only passed the first time this callback is called on a new session, after the user signs in. In subsequent calls, only `token` will be available.

View File

@@ -53,7 +53,6 @@ The message object will contain:
- `user`: The user object from your adapter.
- `account`: The object returned from the provider.
- `profile`: The object returned from the `profile` callback of the OAuth provider.
### session

View File

@@ -1,73 +1,5 @@
# Next.js
## `unstable_getServerSession`
:::warning
This feature is experimental and may be removed or changed in the future.
:::
When calling from server-side i.e. in API routes or in `getServerSideProps`, we recommend using this function instead of `getSession` to retrieve the `session` object. This method is especially useful when you are using NextAuth.js with a database. This method can _drastically_ reduce response time when used over `getSession` server-side, due to avoiding an extra `fetch` to an API Route (this is generally [not recommended in Next.js](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props#getserversideprops-or-api-routes)). In addition, `unstable_getServerSession` will correctly update the cookie expiry time and update the session content if `callbacks.jwt` or `callbacks.session` changed something.
Otherwise, if you only want to get the session token, see [`getToken`](/tutorials/securing-pages-and-api-routes#using-gettoken).
`unstable_getServerSession` requires passing the same object you would pass to `NextAuth` when initializing NextAuth.js. To do so, you can export your NextAuth.js options in the following way:
In `[...nextauth.js]`:
```ts
import { NextAuth } from 'next-auth'
import type { NextAuthOptions } from 'next-auth'
export const authOptions: NextAuthOptions = {
// your configs
}
export default NextAuth(authOptions);
```
In `getServerSideProps`:
```js
import { authOptions } from 'pages/api/[...nextauth]'
import { unstable_getServerSession } from "next-auth/next"
export async function getServerSideProps(context) {
const session = await unstable_getServerSession(context.req, context.res, authOptions)
if (!session) {
return {
redirect: {
destination: '/',
permanent: false,
},
}
}
return {
props: {
session,
},
}
}
```
In API routes:
```js
import { authOptions } from 'pages/api/[...nextauth]'
import { unstable_getServerSession } from "next-auth/next"
export async function handler(req, res) {
const session = await unstable_getServerSession(req, res, authOptions)
if (!session) {
res.status(401).json({ message: "You must be logged in." });
return;
}
return res.json({
message: 'Success',
})
}
```
## Middleware
You can use a Next.js Middleware with NextAuth.js to protect your site.
@@ -80,35 +12,20 @@ You can get the `withAuth` middleware function from `next-auth/middleware` eithe
### Prerequisites
You must set the same secret in the middleware that you use in NextAuth. The easiest way is to set the [`NEXTAUTH_SECRET`](/configuration/options#nextauth_secret) environment variable. It will be picked up by both the [NextAuth config](/configuration/options#options), as well as the middleware config.
You must set the [`NEXTAUTH_SECRET`](/configuration/options#nextauth_secret) environment variable when using this middleware. If you are using the [`secret` option](/configuration/options#secret) this value must match.
Alternatively, you can provide the secret using the [`secret`](#secret) option in the middleware config.
**We strongly recommend** replacing the `secret` value completely with this `NEXTAUTH_SECRET` environment variable.
### Basic usage
The most simple usage is when you want to require authentication for your entire site. You can add a `middleware.js` file with the following:
```js
export { default } from "next-auth/middleware"
```
That's it! Your application is now secured. 🎉
If you only want to secure certain pages, export a `config` object with a `matcher`:
```js
export { default } from "next-auth/middleware"
export const config = { matcher: ["/dashboard"] }
```
Now you will still be able to visit every page, but only `/dashboard` will require authentication.
If a user is not logged in, the default behavior is to redirect them to the sign-in page.
**We strongly recommend** replacing the `secret` value completely with this `NEXTAUTH_SECRET` environment variable. This environment variable will be picked up by both the [NextAuth config](/configuration/options#options), as well as the middleware config.
---
```js
import withAuth from "next-auth/middleware"
// or
import { withAuth } from "next-auth/middleware"
```
---
### `callbacks`
- **Required:** No
@@ -150,40 +67,46 @@ See the documentation for the [pages option](/configuration/pages) for more info
---
### `secret`
### Examples
- **Required**: _No_
#### Description
The same `secret` used in the [NextAuth config](/configuration/options#options).
#### Example (default value)
```js
secret: process.env.NEXTAUTH_SECRET
```
---
### Advanced usage
NextAuth.js Middleware is very flexible, there are multiple ways to use it.
`withAuth` is very flexible, there are multiple ways to use it.
:::note
If you do not define the options, NextAuth.js will use the default values for the omitted options.
:::
#### default re-export
```js title="pages/_middleware.js"
export { default } from "next-auth/middleware"
```
With this one line, when someone tries to load any of your pages, they will have to be logged-in first. Otherwise, they are redirected to the login page. It will assume that you are using the `NEXTAUTH_SECRET` environment variable.
#### default `withAuth` export
```js title="pages/admin/_middleware.js"
import { withAuth } from "next-auth/middleware"
export default withAuth({
callbacks: {
authorized: ({ token }) => token?.role === "admin",
},
})
```
With the above code, you just made sure that only user's with the `admin` role can access any of the pages under the `/admin` route. (Including nested routes as well, like `/admin/settings` etc.).
#### wrap middleware
```ts title="middleware.ts"
```ts title="pages/admin/_middleware.ts"
import type { NextRequest } from "next/server"
import type { JWT } from "next-auth/jwt"
import { withAuth } from "next-auth/middleware"
export default withAuth(
// `withAuth` can augment your Request with the user's token.
function middleware(req: NextRequest & { nextauth: { token: JWT | null } }) {
function middleware(req: NextRequest & { nextauth: { token: JWT } }) {
console.log(req.nextauth.token)
},
{
@@ -192,53 +115,12 @@ export default withAuth(
},
}
)
export const config = { matcher: ["/admin"] }
```
The `middleware` function will only be invoked if the `authorized` callback returns `true`.
---
#### Custom JWT decode method
If you have a custom jwt decode method set in `[...nextauth].ts`, you must also pass the same `decode` method to `withAuth` in order to read the custom-signed JWT correctly. You may want to extract the encode/decode logic to a separate function for consistency.
``
```ts title="/api/auth/[...nextauth].ts"
import type { NextAuthOptions } from "next-auth"
import NextAuth from "next-auth"
import jwt from "jsonwebtoken"
export const authOptions: NextAuthOptions = {
providers: [...],
jwt: {
async encode({ secret, token }) {
return jwt.sign(token, secret)
},
async decode({ secret, token }) {
return jwt.verify(token, secret)
},
},
}
export default NextAuth(authOptions)
```
And:
```ts title="middleware.ts"
import withAuth from "next-auth/middleware"
import { authOptions } from "pages/api/auth/[...nextauth]";
export default withAuth({
jwt: { decode: authOptions.jwt },
callbacks: {
authorized: ({ token }) => !!token,
},
})
```
### Caveats
- Currently only supports session verification, as parts of the sign-in code need to run in a Node.js environment. In the future, we would like to make sure that NextAuth.js can fully run at the [Edge](https://nextjs.org/docs/api-reference/edge-runtime)

View File

@@ -13,22 +13,19 @@ When deploying to production, set the `NEXTAUTH_URL` environment variable to the
NEXTAUTH_URL=https://example.com
```
If your Next.js application uses a custom base path, specify the route to the API endpoint in full. More informations about the usage of custom base path [here](/getting-started/client#custom-base-path).
If your Next.js application uses a custom base path, specify the route to the API endpoint in full.
_e.g. `NEXTAUTH_URL=https://example.com/custom-route/api/auth`_
:::tip
When you're using a custom base path, you will need to pass the `basePath` page prop to the `<SessionProvider>`. More informations [here](/getting-started/client#custom-base-path).
:::
:::note
Using [System Environment Variables](https://vercel.com/docs/concepts/projects/environment-variables#system-environment-variables) we automatically detect when you deploy to [Vercel](https://vercel.com) so you don't have to define this variable. Make sure **Automatically expose System Environment Variables** is checked in your Project Settings.
:::
### NEXTAUTH_SECRET
Used to encrypt the NextAuth.js JWT, and to hash [email verification tokens](/adapters/models#verification-token). This is the default value for the `secret` option in [NextAuth](/configuration/options#secret) and [Middleware](/configuration/nextjs#secret).
Used to encrypt the NextAuth.js JWT, and to hash [email verification tokens](/adapters/models#verification-token). This is the default value for the [`secret`](/configuration/options#secret) option. The `secret` option might be removed in the future in favor of this.
If you are using [Middleware](/configuration/nextjs#prerequisites) this environment variables must be set.
### NEXTAUTH_URL_INTERNAL
@@ -229,10 +226,6 @@ pages: {
}
```
:::note
When using this configuration, ensure that these pages actually exist. For example `error: '/auth/error'` refers to a page file at `pages/auth/error.js`.
:::
See the documentation for the [pages option](/configuration/pages) for more information.
---
@@ -292,6 +285,7 @@ events: {
async updateUser(message) { /* user updated - e.g. their email was verified */ },
async linkAccount(message) { /* account (e.g. Twitter) linked to a user */ },
async session(message) { /* session is active */ },
async error(message) { /* error in authentication flow */ }
}
```
@@ -369,14 +363,11 @@ Changes the color scheme theme of [pages](/configuration/pages) as well as allow
In addition, you can define a logo URL in `theme.logo` which will be rendered above the main card in the default signin/signout/error/verify-request pages, as well as a `theme.brandColor` which will affect the accent color of these pages.
The sign-in button's background color will match the `brandColor` and defaults to `"#346df1"`. The text color is `#fff` by default, but if your brand color gives a weak contrast, correct it with the `buttonText` color option.
```js
theme: {
colorScheme: "auto", // "auto" | "dark" | "light"
brandColor: "", // Hex color code
logo: "", // Absolute URL to image
buttonText: "" // Hex color code
logo: "" // Absolute URL to image
}
```
@@ -491,8 +482,6 @@ Using a custom cookie policy may introduce security flaws into your application
NextAuth.js uses encrypted JSON Web Tokens ([JWE](https://datatracker.ietf.org/doc/html/rfc7516)) by default. Unless you have a good reason, we recommend keeping this behaviour. Although you can override this using the `encode` and `decode` methods. Both methods must be defined at the same time.
**IMPORTANT: If you use middleware to protect routes, make sure the same method is also set in the [`_middleware.ts` options](/configuration/nextjs#custom-jwt-decode-method)**
```js
jwt: {
async encode(params: {

View File

@@ -21,10 +21,6 @@ To add a custom login page, you can use the `pages` option:
...
```
:::note
When using this configuration, ensure that these pages actually exist. For example `error: '/auth/error'` refers to a page file at `pages/auth/error.js`.
:::
## Error codes
We purposefully restrict the returned error codes for increased security.
@@ -55,7 +51,7 @@ The following errors are passed as error query parameters to the default or over
- **SessionRequired**: The content of this page requires you to be signed in at all times. See [useSession](/getting-started/client#require-session) for configuration.
- **Default**: Catch all, will apply, if none of the above matched
Example: `/auth/signin?error=Default`
Example: `/auth/error?error=Default`
## Theming
@@ -94,15 +90,23 @@ export default function SignIn({ providers }) {
)
}
// This is the recommended way for Next.js 9.3 or newer
export async function getServerSideProps(context) {
const providers = await getProviders()
return {
props: { providers },
}
}
```
There is another, more fully styled example signin page available [here](https://github.com/ndom91/next-auth-example-sign-in-page).
/*
// If older than Next.js 9.3
SignIn.getInitialProps = async () => {
return {
providers: await getProviders()
}
}
*/
```
### Email Sign in
@@ -124,12 +128,22 @@ export default function SignIn({ csrfToken }) {
)
}
// This is the recommended way for Next.js 9.3 or newer
export async function getServerSideProps(context) {
const csrfToken = await getCsrfToken(context)
return {
props: { csrfToken },
}
}
/*
// If older than Next.js 9.3
SignIn.getInitialProps = async (context) => {
return {
csrfToken: await getCsrfToken(context)
}
}
*/
```
You can also use the `signIn()` function which will handle obtaining the CSRF token for you:
@@ -162,6 +176,7 @@ export default function SignIn({ csrfToken }) {
)
}
// This is the recommended way for Next.js 9.3 or newer
export async function getServerSideProps(context) {
return {
props: {
@@ -169,6 +184,15 @@ export async function getServerSideProps(context) {
},
}
}
/*
// If older than Next.js 9.3
SignIn.getInitialProps = async (context) => {
return {
csrfToken: await getCsrfToken(context)
}
}
*/
```
You can also use the `signIn()` function which will handle obtaining the CSRF token for you:

View File

@@ -350,7 +350,7 @@ providers: [
## Built-in providers
NextAuth.js comes with a set of built-in providers. You can find them [here](https://github.com/nextauthjs/next-auth/tree/main/packages/next-auth/src/providers). Each built-in provider has its own documentation page:
NextAuth.js comes with a set of built-in providers. You can find them [here](https://github.com/nextauthjs/next-auth/tree/main/src/providers). Each built-in provider has its own documentation page:
<div className="provider-name-list">
{Object.entries(require("../../../providers.json"))

View File

@@ -85,8 +85,6 @@ Preview deployments at Vercel are often available via multiple URLs. For example
Netlify is very similar to Vercel in that you can deploy a Next.js project without almost any extra work.
In order to setup NextAuth.js correctly here, you will want to make sure you add your `NEXTAUTH_SECRET` environment variable in the project settings. If you are using the [Essential Next.js Build Plugin](https://github.com/netlify/netlify-plugin-nextjs) within your project, you **do not** need to set the `NEXTAUTH_URL` environment variable as it is set automatically as part of the build process.
Netlify also exposes some [system environment variables](https://docs.netlify.com/configure-builds/environment-variables/) from which you can check which `NODE_ENV` you are currently in and much more.
In order to setup NextAuth.js correctly here, you will want to make sure you add your `NEXTAUTH_SECRET` and `NEXTAUTH_URL` environment variables in the project settings. Netlify also exposes some [system environment variables](https://docs.netlify.com/configure-builds/environment-variables/) from which you can check which `NODE_ENV` you are currently in and much more.
After this, just make sure you either have your OAuth provider setup correctly with `clientId` / `clientSecret`'s and callback URLs.

View File

@@ -99,7 +99,7 @@ This is required to store the verification token. Please see the [email provider
The Credentials Provider can only be used if JSON Web Tokens are used for sessions.
JSON Web Tokens are used for Sessions by default if you have not specified a database. However, if you are using a database, then Database Sessions are enabled by default and you need to [explicitly enable JWT Sessions](/configuration/options#session) to use the Credentials Provider.
JSON Web Tokens are used for Sessions by default if you have not specified a database. However, if you are using a database, then Database Sessions are enabled by default and you need to [explicitly enable JWT Sessions](https://next-auth.js.org/configuration/options#session) to use the Credentials Provider.
If you are using a Credentials Provider, NextAuth.js will not persist users or sessions in a database - user accounts used with the Credentials Provider must be created and managed outside of NextAuth.js.
@@ -111,17 +111,9 @@ This error occurs when there was no `authorize()` handler defined on the credent
#### PKCE_ERROR
The provider you tried to use failed when setting [PKCE or Proof Key for Code Exchange](https://tools.ietf.org/html/rfc7636#section-4).
The provider you tried to use failed when setting [PKCE or Proof Key for Code Exchange](https://tools.ietf.org/html/rfc7636#section-4.2).
The `code_verifier` is saved in a cookie called (by default) `__Secure-next-auth.pkce.code_verifier` which expires after 15 minutes.
Check if `cookies.pkceCodeVerifier` is configured correctly.
The default `code_challenge_method` is `"S256"`. This is currently not configurable to `"plain"`, [as per RFC7636](https://datatracker.ietf.org/doc/html/rfc7636#section-4.2):
> If the client is capable of using "S256", it MUST use "S256", as
S256" is Mandatory To Implement (MTI) on the server.
#### INVALID_CALLBACK_URL_ERROR
The `callbackUrl` provided was either invalid or not defined. See [specifying a `callbackUrl`](/getting-started/client#specifying-a-callbackurl) for more information.
Check if `cookies.pkceCodeVerifier` is configured correctly. The default `code_challenge_method` is `"S256"`. This is currently not configurable to `"plain"`, as it is not recommended, and in most cases, it is only supported for backward compatibility.
---
@@ -129,7 +121,7 @@ The `callbackUrl` provided was either invalid or not defined. See [specifying a
#### JWT_SESSION_ERROR
JWKKeySupport: the key does not support HS512 verify algorithm
https://next-auth.js.org/errors#jwt_session_error JWKKeySupport: the key does not support HS512 verify algorithm
The algorithm used for generating your key isn't listed as supported. You can generate a HS512 key using
@@ -165,7 +157,7 @@ Make sure the file is there and the filename is written correctly.
#### NO_SECRET
In production, we expect you to define a `secret` property in your configuration. In development, this is shown as a warning for convenience. [Read more](/configuration/options#secret)
In production, we expect you to define a `secret` property in your configuration. In development, this is shown as a warning for convenience. [Read more](https://next-auth.js.org/configuration/options#secret)
#### oauth_callback_error expected 200 OK with body but no body was returned

View File

@@ -126,15 +126,15 @@ function Auth({ children }) {
// if `{ required: true }` is supplied, `status` can only be "loading" or "authenticated"
const { status } = useSession({ required: true })
if (status === "loading") {
if (status === 'loading') {
return <div>Loading...</div>
}
return children
}
```
It can be easily extended/modified to support something like an options object for role based authentication on pages. An example:
It can be easily be extended/modified to support something like an options object for role based authentication on pages. An example:
```jsx title="pages/admin.jsx"
AdminDashboard.auth = {
@@ -161,19 +161,13 @@ See repository [`README`](https://github.com/nextauthjs/react-query) for more de
## getSession()
- Client Side: **Yes**
- Server Side: **No** (See: [`unstable_getServerSession()`](/configuration/nextjs#unstable_getserversession)
- Server Side: **Yes**
NextAuth.js provides a `getSession()` helper which should be called **client side only** to return the current active session.
NextAuth.js provides a `getSession()` method which can be called client or server side to return a session.
On the server side, **this is still available to use**, however, we recommend using `unstable_getServerSession` going forward. The idea behind this is to avoid an additional unnecessary `fetch` call on the server side. For more information, please check out [this issue](https://github.com/nextauthjs/next-auth/issues/1535).
It calls `/api/auth/session` and returns a promise with a session object, or null if no session exists.
:::note
The `unstable_getServerSession` only has the prefix `unstable_` at the moment, because the API may change in the future. There are no known bugs at the moment and it is safe to use. If you discover any issues, please do report them as a [GitHub Issue](https://github.com/nextauthjs/next-auth/issues) and we will patch them as soon as possible.
:::
This helper is helpful in case you want to read the session outside of the context of React.
When called, `getSession()` will send a request to `/api/auth/session` and returns a promise with a [session object](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/core/types.ts#L407-L425), or `null` if no session exists.
#### Client Side Example
```js
async function myFunction() {
@@ -182,7 +176,23 @@ async function myFunction() {
}
```
Read the tutorial [securing pages and API routes](/tutorials/securing-pages-and-api-routes) to know how to fetch the session in server side calls using `unstable_getServerSession()`.
#### Server Side Example
```js
import { getSession } from "next-auth/react"
export default async (req, res) => {
const session = await getSession({ req })
/* ... */
res.end()
}
```
:::note
When calling `getSession()` server side, you need to pass `{req}` or `context` object.
:::
The tutorial [securing pages and API routes](/tutorials/securing-pages-and-api-routes) shows how to use `getSession()` in server side calls.
---
@@ -244,7 +254,7 @@ export default async (req, res) => {
```
:::note
Unlike and `getCsrfToken()`, when calling `getProviders()` server side, you don't need to pass anything, just as calling it client side.
Unlike `getSession()` and `getCsrfToken()`, when calling `getProviders()` server side, you don't need to pass anything, just as calling it client side.
:::
---
@@ -426,15 +436,14 @@ If you pass the `session` page prop to the `<SessionProvider>` as in the exa
This only works on pages where you provide the correct `pageProps`, however. This is normally done in `getInitialProps` or `getServerSideProps` on an individual page basis like so:
```js title="pages/index.js"
import { unstable_getServerSession } from "next-auth/next"
import { authOptions } from './api/auth/[...nextauth]'
import { getSession } from "next-auth/react"
...
export async function getServerSideProps({ req, res }) {
export async function getServerSideProps(ctx) {
return {
props: {
session: await unstable_getServerSession(req, res, authOptions)
session: await getSession(ctx)
}
}
}
@@ -446,7 +455,7 @@ If every one of your pages needs to be protected, you can do this in `getInitial
The session state is automatically synchronized across all open tabs/windows and they are all updated whenever they gain or lose focus or the state changes (e.g. a user signs in or out) when `refetchOnWindowFocus` is `true`.
If you have session expiry times of 30 days (the default) or more then you probably don't need to change any of the default options in the Provider. If you need to, you can trigger an update of the session object across all tabs/windows by calling [`getSession()`](/getting-started/client#getsession) from a client side function.
If you have session expiry times of 30 days (the default) or more then you probably don't need to change any of the default options in the Provider. If you need to, you can trigger an update of the session object across all tabs/windows by calling `getSession()` from a client side function.
However, if you need to customize the session behavior and/or are using short session expiry times, you can pass options to the provider to customize the behavior of the `useSession()` hook.
@@ -506,29 +515,3 @@ However, if it was set to `false`, it stops re-fetching the session and the comp
:::note
See [**the Next.js documentation**](https://nextjs.org/docs/advanced-features/custom-app) for more information on **\_app.js** in Next.js applications.
:::
### Custom base path
When your Next.js application uses a custom base path, set the `NEXTAUTH_URL` environment variable to the route to the API endpoint in full - as in the example below and as explained [here](/configuration/options#nextauth_url).
Also, make sure to pass the `basePath` page prop to the `<SessionProvider>` as in the example below so your custom base path is fully configured and used by NextAuth.js.
#### Example
In this example, the custom base path used is `/custom-route`.
```
NEXTAUTH_URL=https://example.com/custom-route/api/auth
```
```jsx title="pages/_app.js"
import { SessionProvider } from "next-auth/react"
export default function App({
Component,
pageProps: { session, ...pageProps },
}) {
return (
<SessionProvider session={session} basePath="/custom-route/api/auth">
<Component {...pageProps} />
</SessionProvider>
)
}
```

View File

@@ -15,7 +15,7 @@ The easiest way to get started is to clone the [example app](https://github.com/
To add NextAuth.js to a project create a file called `[...nextauth].js` in `pages/api/auth`. This contains the dynamic route handler for NextAuth.js which will also contain all of your global NextAuth.js configurations.
```javascript title="pages/api/auth/[...nextauth].js" showLineNumbers
```javascript title="pages/api/auth/[...nextauth].js"
import NextAuth from "next-auth"
import GithubProvider from "next-auth/providers/github"
@@ -42,7 +42,8 @@ All requests to `/api/auth/*` (`signIn`, `callback`, `signOut`, etc.) will autom
To be able to use `useSession` first you'll need to expose the session context, [`<SessionProvider />`](/getting-started/client#sessionprovider), at the top level of your application:
```jsx title="pages/_app.jsx" showLineNumbers
```javascript
// pages/_app.js
import { SessionProvider } from "next-auth/react"
export default function App({
@@ -67,7 +68,7 @@ Check out the [client documentation](/getting-started/client) to see how you can
The [`useSession()`](/getting-started/client#usesession) React Hook in the NextAuth.js client is the easiest way to check if someone is signed in.
```jsx title="components/login-btn.jsx" showLineNumbers
```javascript
import { useSession, signIn, signOut } from "next-auth/react"
export default function Component() {
@@ -93,14 +94,13 @@ You can use the `useSession` hook from anywhere in your application (e.g. in a h
### Backend - API Route
To protect an API Route, you can use the [`unstable_getServerSession()`](/configuration/nextjs#unstable_getserversession) method.
To protect an API Route, you can use the [`getSession()`](/getting-started/client#getsession) method in the NextAuth.js client.
```javascript title="pages/api/restricted.js" showLineNumbers
import { unstable_getServerSession } from "next-auth/next"
import { authOptions } from "./api/auth/[...nextauth]"
```javascript
import { getSession } from "next-auth/react"
export default async (req, res) => {
const session = await unstable_getServerSession(req, res, authOptions)
const session = await getSession({ req })
if (session) {
res.send({
@@ -123,20 +123,18 @@ NextAuth.js allows you to hook into various parts of the authentication flow via
For example, to pass a value from the sign-in to the frontend, client-side, you can use a combination of the [`session`](/configuration/callbacks#session-callback) and [`jwt`](/configuration/callbacks#jwt-callback) callback like so:
```javascript title="pages/api/auth/[...nextauth].js"
```javascript
...
callbacks: {
async jwt({ token, account }) {
// Persist the OAuth access_token to the token right after signin
if (account) {
// highlight-next-line
token.accessToken = account.access_token
}
return token
},
async session({ session, token, user }) {
// Send properties to the client, like an access_token from a provider.
// highlight-next-line
session.accessToken = token.accessToken
return session
}
@@ -144,13 +142,12 @@ callbacks: {
...
```
Now whenever you call [`getSession`](/getting-started/client#getsession) or [`useSession`](/getting-started/client#usesession), the data object which is returned will include the `accessToken` value.
Now whenever you call `getSession` or `useSession`, the data object which is returned will include the `accessToken` value.
```jsx title="components/accessToken.jsx" showLineNumbers
```js
import { useSession, signIn, signOut } from "next-auth/react"
export default function Component() {
// highlight-next-line
const { data } = useSession()
const { accessToken } = data
@@ -161,7 +158,7 @@ export default function Component() {
## Configuring callback URL (OAuth only)
If you are using an OAuth provider either through one of our [built-in providers](/configuration/providers/oauth)
or through a [custom provider](/configuration/providers/oauth#using-a-custom-provider), you'll need to configure
or through a [custom provider](/configuration/providers/oauth#using-a-custom-provider), you'll need to configure
a callback URL in your provider's settings. Each provider has a "Configuration" section that should give you pointers on how to do that.
Follow [these steps](/configuration/providers/oauth#how-to) to learn how to integrate with an OAuth provider.

View File

@@ -13,7 +13,7 @@ We encourage users to try it out and report any and all issues they come across.
You can upgrade to the new version by running:
```bash npm2yarn2pnpm
```bash npm2yarn
npm install next-auth
```

View File

@@ -28,7 +28,3 @@ title: Fullstack
### [Creating a database adapter](/tutorials/creating-a-database-adapter)
- How to create a custom adapter, to use any database to fetch and store user / account data.
### [Adding role based login to database session strategy](/tutorials/role-based-login-strategy)
- Implement a role based login system by adding a custom session callback.

View File

@@ -1,17 +0,0 @@
---
id: guides
title: Guides
---
# Guides
We have internal guides in three levels of difficulty.
```mdx-code-block
import DocCardList from '@theme/DocCardList';
import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
<DocCardList items={useCurrentSidebarCategory().items}/>
```
If you can't find what you're looking for here, maybe take a look at our third-party [tutorials](/tutorials) page.

View File

@@ -31,5 +31,5 @@ providers: [
```
:::note
`issuer` should include the slug without a trailing slash  e.g., `https://my-authentik-domain.com/application/o/My_Slug`
`issuer` should include the slug  e.g. `https://my-authentik-domain.com/application/o/My_Slug/`
:::

View File

@@ -23,7 +23,7 @@ The **Credentials Provider** comes with a set of default options:
You can override any of the options to suit your own use case.
## Example - Username / Password
## Example
The Credentials provider is specified like other providers, except that you need to define a handler for `authorize()` that accepts credentials submitted via HTTP POST as input and returns either:
@@ -73,19 +73,9 @@ providers: [
See the [callbacks documentation](/configuration/callbacks) for more information on how to interact with the token.
## Example - Web3 / Signin With Ethereum
The credentials provider can also be used to integrate with a service like [Sign-in With Ethereum](https://login.xyz).
For more information, check out the links below:
- [Tutorial](https://docs.login.xyz/integrations/nextauth.js)
- [Example App Repo](https://github.com/spruceid/siwe-next-auth-example).
- [Example App Demo](https://siwe-next-auth-example2.vercel.app/).
## Multiple providers
### Example
### Example code
You can specify more than one credentials provider by specifying a unique `id` for each one.

View File

@@ -15,7 +15,7 @@ https://discord.com/developers/applications
The **Discord Provider** comes with a set of default options:
- [Discord Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/discord.ts)
- [Discord Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/discord.js)
You can override any of the options to suit your own use case.

View File

@@ -124,74 +124,67 @@ providers: [
The following code shows the complete source for the built-in `sendVerificationRequest()` method:
```js
import { createTransport } from "nodemailer"
import nodemailer from "nodemailer"
async function sendVerificationRequest(params) {
const { identifier, url, provider, theme } = params
async function sendVerificationRequest({
identifier: email,
url,
provider: { server, from },
}) {
const { host } = new URL(url)
// NOTE: You are not required to use `nodemailer`, use whatever you want.
const transport = createTransport(provider.server)
const result = await transport.sendMail({
to: identifier,
from: provider.from,
const transport = nodemailer.createTransport(server)
await transport.sendMail({
to: email,
from,
subject: `Sign in to ${host}`,
text: text({ url, host }),
html: html({ url, host, theme }),
html: html({ url, host, email }),
})
const failed = result.rejected.concat(result.pending).filter(Boolean)
if (failed.length) {
throw new Error(`Email(s) (${failed.join(", ")}) could not be sent`)
}
}
/**
* Email HTML body
* Insert invisible space into domains from being turned into a hyperlink by email
* clients like Outlook and Apple mail, as this is confusing because it seems
* like they are supposed to click on it to sign in.
*
* @note We don't add the email address to avoid needing to escape it, if you do, remember to sanitize it!
*/
function html(params: { url: string; host: string; theme: Theme }) {
const { url, host, theme } = params
// Email HTML body
function html({ url, host, email }: Record<"url" | "host" | "email", string>) {
// Insert invisible space into domains and email address to prevent both the
// email address and the domain from being turned into a hyperlink by email
// clients like Outlook and Apple mail, as this is confusing because it seems
// like they are supposed to click on their email address to sign in.
const escapedEmail = `${email.replace(/\./g, "&#8203;.")}`
const escapedHost = `${host.replace(/\./g, "&#8203;.")}`
const escapedHost = host.replace(/\./g, "&#8203;.")
const brandColor = theme.brandColor || "#346df1"
const color = {
background: "#f9f9f9",
text: "#444",
mainBackground: "#fff",
buttonBackground: brandColor,
buttonBorder: brandColor,
buttonText: theme.buttonText || "#fff",
}
// Some simple styling options
const backgroundColor = "#f9f9f9"
const textColor = "#444444"
const mainBackgroundColor = "#ffffff"
const buttonBackgroundColor = "#346df1"
const buttonBorderColor = "#346df1"
const buttonTextColor = "#ffffff"
return `
<body style="background: ${color.background};">
<table width="100%" border="0" cellspacing="20" cellpadding="0"
style="background: ${color.mainBackground}; max-width: 600px; margin: auto; border-radius: 10px;">
<body style="background: ${backgroundColor};">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"
style="padding: 10px 0px; font-size: 22px; font-family: Helvetica, Arial, sans-serif; color: ${color.text};">
Sign in to <strong>${escapedHost}</strong>
<td align="center" style="padding: 10px 0px 20px 0px; font-size: 22px; font-family: Helvetica, Arial, sans-serif; color: ${textColor};">
<strong>${escapedHost}</strong>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="20" cellpadding="0" style="background: ${mainBackgroundColor}; max-width: 600px; margin: auto; border-radius: 10px;">
<tr>
<td align="center" style="padding: 10px 0px 0px 0px; font-size: 18px; font-family: Helvetica, Arial, sans-serif; color: ${textColor};">
Sign in as <strong>${escapedEmail}</strong>
</td>
</tr>
<tr>
<td align="center" style="padding: 20px 0;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="border-radius: 5px;" bgcolor="${color.buttonBackground}"><a href="${url}"
target="_blank"
style="font-size: 18px; font-family: Helvetica, Arial, sans-serif; color: ${color.buttonText}; text-decoration: none; border-radius: 5px; padding: 10px 20px; border: 1px solid ${color.buttonBorder}; display: inline-block; font-weight: bold;">Sign
in</a></td>
<td align="center" style="border-radius: 5px;" bgcolor="${buttonBackgroundColor}"><a href="${url}" target="_blank" style="font-size: 18px; font-family: Helvetica, Arial, sans-serif; color: ${buttonTextColor}; text-decoration: none; border-radius: 5px; padding: 10px 20px; border: 1px solid ${buttonBorderColor}; display: inline-block; font-weight: bold;">Sign in</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center"
style="padding: 0px 0px 10px 0px; font-size: 16px; line-height: 22px; font-family: Helvetica, Arial, sans-serif; color: ${color.text};">
<td align="center" style="padding: 0px 0px 10px 0px; font-size: 16px; line-height: 22px; font-family: Helvetica, Arial, sans-serif; color: ${textColor};">
If you did not request this email you can safely ignore it.
</td>
</tr>
@@ -200,8 +193,8 @@ function html(params: { url: string; host: string; theme: Theme }) {
`
}
/** Email Text body (fallback for email clients that don't render HTML, e.g. feature phones) */
function text({ url, host }: { url: string; host: string }) {
// Email Text body (fallback for email clients that don't render HTML, e.g. feature phones)
function text({ url, host }: Record<"url" | "host", string>) {
return `Sign in to ${host}\n${url}\n\n`
}
```

View File

@@ -19,7 +19,7 @@ https://github.com/settings/apps
The **GitHub Provider** comes with a set of default options:
- [GitHub Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/github.ts)
- [GitHub Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/github.js)
You can override any of the options to suit your own use case.
@@ -30,8 +30,8 @@ import GitHubProvider from "next-auth/providers/github";
...
providers: [
GitHubProvider({
clientId: process.env.GITHUB_ID,
clientSecret: process.env.GITHUB_SECRET
clientId: process.env.GITHUB_CLIENT_ID,
clientSecret: process.env.GITHUB_CLIENT_SECRET
})
]
...

View File

@@ -5,7 +5,7 @@ title: Overview
Authentication Providers in **NextAuth.js** are services that can be used to sign in a user.
There are four ways a user can be signed in:
There's four ways a user can be signed in:
- [Using a built-in OAuth Provider](/configuration/providers/oauth) (e.g Github, Twitter, Google, etc...)
- [Using a custom OAuth Provider](/configuration/providers/oauth#using-a-custom-provider)

View File

@@ -37,5 +37,5 @@ providers: [
```
:::note
`issuer` should include the realm  e.g. `https://my-keycloak-domain.com/realms/My_Realm`
`issuer` should include the realm  e.g. `https://my-keycloak-domain.com/auth/realms/My_Realm`
:::

View File

@@ -13,7 +13,7 @@ https://api.slack.com/docs/sign-in-with-slack
https://api.slack.com/apps
:::warning
Slack requires that the redirect URL of your app uses `https`, even for local development. An easy workaround for this is using a service like [`ngrok`](https://ngrok.com) that creates a secure tunnel to your app, using `https`. Remember to set the url as `NEXTAUTH_URL` as well.
Slack requires you that the redirect URL of your app uses `https`, even for local development. An easy workaround for this is using a service like [`ngrok`](https://ngrok.com) that creates a secure tunnel to your app, using `https`. Remember to set the url as `NEXTAUTH_URL` as well.
:::
![](https://i.imgur.com/ydYKTLD.png)

View File

@@ -41,9 +41,9 @@ providers: [
You must enable the _"Request email address from users"_ option in your app permissions if you want to obtain the users email address.
:::
![twitter](https://user-images.githubusercontent.com/55143799/168702338-a95912a7-b689-4680-aa2c-6306fe3c2ec7.jpeg)
![twitter](https://user-images.githubusercontent.com/7902980/83944068-1640ca80-a801-11ea-959c-0e744e2144f7.PNG)
## OAuth 2.0
## OAuth 2
Twitter supports OAuth 2, which is currently opt-in. To enable it, simply add `version: "2.0"` to your Provider configuration:
@@ -56,7 +56,3 @@ TwitterProvider({
```
Keep in mind that although this change is easy, it changes how and with which of [Twitter APIs](https://developer.twitter.com/en/docs/api-reference-index) you can interact with. Read the official [Twitter OAuth 2 documentation](https://developer.twitter.com/en/docs/authentication/oauth-2-0) for more details.
:::note
Email is currently not supported by Twitter OAuth 2.0.
:::

View File

@@ -1,43 +0,0 @@
---
id: united-effects
title: United Effects
---
## Documentation
https://docs.unitedeffects.com/integrations/nextauthjs
## Configuration
https://core.unitedeffects.com
## Options
The **United Effects Provider** comes with a set of default options:
- [United Effects Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/united-effects.ts)
You can override any of the options to suit your own use case.
## Example
```js
import UnitedEffectsProvider from "next-auth/providers/united-effects";
...
providers: [
UnitedEffectsProvider({
clientId: process.env.UNITED_EFFECTS_CLIENT_ID,
clientSecret: process.env.UNITED_EFFECTS_CLIENT_SECRET,
issuer: process.env.UNITED_EFFECTS_ISSUER
})
]
...
```
:::note
`issuer` should be the fully qualified URL including your Auth Group ID  e.g. `https://auth.unitedeffects.com/YQpbQV5dbW-224dCovz-3`
:::
:::warning
The United Effects API does not return the user name or image by design, so this provider will return null for both. United Effects prioritizes user personal information security above all and has built a secured profile access request system separate from the provider API.
:::

View File

@@ -1,50 +0,0 @@
---
id: wikimedia
title: Wikimedia
---
## Documentation
https://www.mediawiki.org/wiki/Extension:OAuth
This provider also supports all Wikimedia projects:
- Wikipedia
- Wikidata
- Wikibooks
- Wiktionary
- etc..
Please be aware that Wikimedia accounts do not have to have an associated email address. So you may want to add check if the user has an email address before allowing them to login.
## Configuration
1. Go to and accept the Consumer Registration doc: https://meta.wikimedia.org/wiki/Special:OAuthConsumerRegistration
2. Request a new OAuth 2.0 consumer to get the `clientId` and `clientSecret`: https://meta.wikimedia.org/wiki/Special:OAuthConsumerRegistration/propose/oauth2
2a. Add the following redirect URL into the console `http://<your-next-app-url>/api/auth/callback/wikimedia`
2b. Do not check the box next to `This consumer is only for [your username]`
2c. Unless you explicitly need a larger scope, feel free to select the radio button labelled `User identity verification only - no ability to read pages or act on the users behalf.`
After registration, you can initally test your application only with your own Wikimedia account. You may have to wait several days for the application to be approved for it to be used by everyone.
## Options
The **Wikimedia Provider** comes with a set of default options:
- [Wikimedia Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/wikimedia.ts)
You can override any of the options to suit your own use case.
## Example
```js
import WikimediaProvider from "next-auth/providers/wikimedia";
...
providers: [
WikimediaProvider({
clientId: process.env.WIKIMEDIA_CLIENT_ID,
clientSecret: process.env.WIKIMEDIA_CLIENT_SECRET
})
]
...
```

View File

@@ -15,7 +15,7 @@ https://dashboard.workos.com
The **WorkOS Provider** comes with a set of default options:
- [WorkOS Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/workos.ts)
- [WorkOS Provider options](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/workos.js)
You can override any of the options to suit your own use case.
@@ -94,10 +94,20 @@ export default function SignIn({ providers }) {
)
}
// This is the recommended way for Next.js 9.3 or newer
export async function getServerSideProps(context) {
const providers = await getProviders()
return {
props: { providers },
}
}
/*
// If older than Next.js 9.3
SignIn.getInitialProps = async () => {
return {
providers: await getProviders()
}
}
*/
```

3
docs/docs/sandpack.md Normal file
View File

@@ -0,0 +1,3 @@
import { CustomSandpack } from "../src/components/Sandpack"
<CustomSandpack />

View File

@@ -13,7 +13,7 @@ title: Tutorials and Explainers
- This is an introductory video to NextAuth.js for beginners. In this video, it is explained how to set up authentication in a few easy steps and add different configurations to make it more robust and secure.
#### [Authentication patterns for Next.js](https://nextjs.org/docs/authentication) <svg xmlns="http://www.w3.org/2000/svg" style={{ marginLeft: '5px', marginBottom:'-6px'}} height="20" width="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><title>External</title><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /> </svg>
#### [Authentication patterns for Next.js](https://leerob.io/blog/nextjs-authentication) <svg xmlns="http://www.w3.org/2000/svg" style={{ marginLeft: '5px', marginBottom:'-6px'}} height="20" width="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><title>External</title><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /> </svg>
- Next.js supports multiple patterns for authentication, each designed for different use cases. This guide will allow you to choose your adventure based on your constraints. By Lee Robinson.
@@ -44,20 +44,19 @@ title: Tutorials and Explainers
#### [How to authenticate Next.js Apps with Sign-In With Ethereum (SIWE) & NextAuth.js](https://docs.login.xyz/integrations/nextauth.js) <svg xmlns="http://www.w3.org/2000/svg" style={{ marginLeft: '5px', marginBottom:'-6px'}} height="20" width="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><title>External</title> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /> </svg>
- Learn how to use Sign-In With Ethereum to authenticate your users with their existing Ethereum wallets - identifiers they personally control.
- Example application: [spruceid/siwe-next-auth-example](https://github.com/spruceid/siwe-next-auth-example)
## Fullstack
#### [Build a FullStack App with Next.js, NextAuth.js, Supabase & Prisma](https://themodern.dev/courses/build-a-fullstack-app-with-nextjs-supabase-and-prisma-322389284337222224) <svg xmlns="http://www.w3.org/2000/svg" style={{ marginLeft: '5px', marginBottom:'-6px'}} height="20" width="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><title>External</title> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /> </svg>
In this [free course](https://themodern.dev/courses/build-a-fullstack-app-with-nextjs-supabase-and-prisma-322389284337222224), you'll learn how to build a full-stack app using the following technologies:
In this [free course](https://themodern.dev/courses/build-a-fullstack-app-with-nextjs-supabase-and-prisma-322389284337222224), you'll learn how to build a full-stack app using the following technologies:
- **Next.js** - The React framework for building the UI of the app and the REST API
- **NextAuth.js** - For implementing passwordless and OAuth authentication
- **Next.js** - The React framework for building the UI of the app and the REST API
- **NextAuth.js** - For implementing passwordless and OAuth authentication
- **Supabase** - For persisting the app data into a PostgreSQL database and storing media files
- **Prisma** - For making it easy to read and write data from our app from and to the database
The app that we'll work on in this course is called **_SupaVacation_**. It is an online marketplace for vacation rentals where users can browse through all the properties for rent, bookmark their favorite ones, and even rent their own properties.
The app that we'll work on in this course is called ***SupaVacation***. It is an online marketplace for vacation rentals where users can browse through all the properties for rent, bookmark their favorite ones, and even rent their own properties.
> Here's [a live demo](https://supa-vacation.vercel.app/) of the app's final version. It is what your app should look likes after completing this course. Feel free to play with it to get an overview of all the features you'll be working on.

View File

@@ -7,7 +7,7 @@ NextAuth.js provides the ability to setup a [custom Credential provider](/config
You will need an additional dependency, `ldapjs`, which you can install by running
```bash npm2yarn2pnpm
```bash npm2yarn
npm install ldapjs
```

View File

@@ -61,7 +61,7 @@ async function refreshAccessToken(token) {
return {
...token,
accessToken: refreshedTokens.access_token,
accessTokenExpires: Date.now() + refreshedTokens.expires_at * 1000,
accessTokenExpires: Date.now() + refreshedTokens.expires_in * 1000,
refreshToken: refreshedTokens.refresh_token ?? token.refreshToken, // Fall back to old refresh token
}
} catch (error) {
@@ -88,7 +88,7 @@ export default NextAuth({
if (account && user) {
return {
accessToken: account.access_token,
accessTokenExpires: Date.now() + account.expires_at * 1000,
accessTokenExpires: Date.now() + account.expires_in * 1000,
refreshToken: account.refresh_token,
user,
}

View File

@@ -1,60 +0,0 @@
To add role based authentication to your application, you must do three things.
1. Update your database schema
2. Add the `role` to the session object
3. Check for `role` in your pages/components
First modify the `user` table and add a `role` column with the type of `String?`.
Below is an example Prisma schema file.
```javascript title="/prisma/schema.prisma"
model User {
id String @id @default(cuid())
name String?
email String? @unique
emailVerified DateTime?
image String?
role String? // New Column
accounts Account[]
sessions Session[]
}
```
Next, implement a custom session callback in the `[...nextauth].js` file, as shown below.
```javascript title="/pages/api/auth/[...nextauth].js"
callbacks: {
async session({ session, token, user }) {
session.user.role = user.role; // Add role value to user object so it is passed along with session
return session;
},
```
Going forward, when using the `getSession` hook, check that `session.user.role` matches the required role. The example below assumes the role `'admin'` is required.
```javascript title="/pages/admin.js"
import { getSession } from "next-auth/react"
export default function Page() {
const session = await getSession({ req })
if (session && session.user.role === "admin") {
return (
<div>
<h1>Admin</h1>
<p>Welcome to the Admin Portal!</p>
</div>
)
} else {
return (
<div>
<h1>You are not authorized to view this page!</h1>
</div>
)
}
}
```
Then it is up to you how you manage your roles, either through direct database access or building your own role update API.

View File

@@ -40,29 +40,12 @@ export default function Page() {
}
```
### Next.js (Middleware)
With NextAuth.js 4.2.0 and Next.js 12, you can now protect your pages via the middleware pattern more easily. If you would like to protect all pages, you can create a `_middleware.js` file in your root `pages` directory which looks like this.
```js title="/middleware.js"
export { default } from "next-auth/middleware"
```
Otherwise, if you only want to protect a subset of pages, you could put it in a subdirectory as well, for example in `/pages/admin/_middleware.js` would protect all pages under `/admin`.
For the time being, the `withAuth` middleware only supports `"jwt"` as [session strategy](https://next-auth.js.org/configuration/options#session).
More details can be found [here](https://next-auth.js.org/configuration/nextjs#middleware).
### Server Side
You can protect server side rendered pages using the `unstable_getServerSession` method. This is different from the old `getSession()` method, in that it does not do an extra fetch out over the internet to confirm data from itself, increasing performance significantly.
You need to add this to every server rendered page you want to protect. Be aware, `unstable_getServerSession` takes slightly different arguments than the method it is replacing, `getSession`.
You can protect server side rendered pages using the `getSession()` method.
```js title="pages/server-side-example.js"
import { useSession, unstable_getServerSession } from "next-auth/next"
import { authOptions } from "./api/auth/[...nextauth]"
import { useSession, getSession } from "next-auth/react"
export default function Page() {
const { data: session } = useSession()
@@ -83,11 +66,7 @@ export default function Page() {
export async function getServerSideProps(context) {
return {
props: {
session: await unstable_getServerSession(
context.req,
context.res,
authOptions
),
session: await getSession(context),
},
}
}
@@ -115,16 +94,15 @@ export default function App({
## Securing API Routes
### Using unstable_getServerSession()
### Using getSession()
You can protect API routes using the `unstable_getServerSession()` method.
You can protect API routes using the `getSession()` method.
```js title="pages/api/get-session-example.js"
import { unstable_getServerSession } from "next-auth/next"
import { authOptions } from "./api/auth/[...nextauth]"
import { getSession } from "next-auth/react"
export default async (req, res) => {
const session = await unstable_getServerSession(req, res, authOptions)
const session = await getSession({ req })
if (session) {
// Signed in
console.log("Session", JSON.stringify(session, null, 2))

View File

@@ -9,7 +9,7 @@ To test an implementation of NextAuth.js, we encourage you to use [Cypress](http
To get started, install the dependencies:
```bash npm2yarn2pnpm
```bash npm2yarn
npm install --save-dev cypress cypress-social-logins @testing-library/cypress
```

View File

@@ -33,10 +33,6 @@ In development, we generate a `secret` based on your configuration for convenien
Twitter OAuth 2.0 is currently in beta as certain changes might still be necessary. This is not covered by semver. See the docs https://next-auth.js.org/providers/twitter#oauth-2
#### EXPERIMENTAL_API
Some APIs are still experimental; they may be changed or removed in the future. Use at your own risk.
## Adapter
### ADAPTER_TYPEORM_UPDATING_ENTITIES

View File

@@ -9,13 +9,6 @@ module.exports = {
themeConfig: {
prism: {
theme: require("prism-react-renderer/themes/vsDark"),
magicComments: [
{
className: "theme-code-block-highlighted-line",
line: "highlight-next-line",
block: { start: "highlight-start", end: "highlight-end" },
},
],
},
algolia: {
appId: "OUEDA16KPG",
@@ -155,9 +148,9 @@ module.exports = {
showLastUpdateAuthor: true,
showLastUpdateTime: true,
remarkPlugins: [
require("@sapphire/docusaurus-plugin-npm2yarn2pnpm").npm2yarn2pnpm,
require("remark-github"),
require("mdx-mermaid"),
[require("@docusaurus/remark-plugin-npm2yarn"), { sync: true }],
],
versions: {
current: {

View File

@@ -6,7 +6,7 @@
"url": "git://github.com/nextauthjs/docs.git"
},
"scripts": {
"start": "npm run generate-providers && docusaurus start --no-open --port 8000",
"start": "npm run generate-providers && docusaurus start --port 8000",
"dev": "npm run start",
"build": "npm run generate-providers && docusaurus build",
"docusaurus": "docusaurus",
@@ -19,31 +19,25 @@
"generate-providers": "node ./scripts/generate-providers.js"
},
"dependencies": {
"@docusaurus/core": "^2.0.0-beta.21",
"@docusaurus/preset-classic": "^2.0.0-beta.21",
"@docusaurus/theme-common": "2.0.0-beta.21",
"@mdx-js/react": "1.6.22",
"@sapphire/docusaurus-plugin-npm2yarn2pnpm": "1.1.3",
"@codesandbox/sandpack-react": "^0.13.12",
"@docusaurus/core": "^2.0.0-beta.17",
"@docusaurus/preset-classic": "^2.0.0-beta.17",
"@docusaurus/remark-plugin-npm2yarn": "^2.0.0-beta.17",
"classnames": "^2.3.1",
"mdx-mermaid": "^1.2.2",
"mermaid": "^9.0.1",
"prism-react-renderer": "1.3.1",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"lodash.times": "^4.3.2",
"mdx-mermaid": "^1.2.1",
"mermaid": "^8.13.10",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-marquee-slider": "^1.1.5",
"remark-github": "^10.1.0",
"styled-components": "5.3.3"
"styled-components": "^5.3.3"
},
"devDependencies": {
"@docusaurus/module-type-aliases": "2.0.0-beta.20",
"prettier": "^2.6.2"
"prettier": "^2.5.0"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"production": [">0.2%", "not dead", "not op_mini all"],
"development": [
"last 1 chrome version",
"last 1 firefox version",

View File

@@ -40,9 +40,10 @@ module.exports = {
{
type: "category",
label: "Providers",
link: { type: "doc", id: "providers/overview" },
collapsed: true,
items: [
"providers/overview",
// TODO: Overview included twice due to autogeneration
{
type: "autogenerated",
dirName: "providers",
@@ -52,9 +53,9 @@ module.exports = {
{
type: "category",
label: "Adapters",
link: { type: "doc", id: "adapters/overview" },
collapsed: true,
items: [
"adapters/overview",
"adapters/models",
"adapters/prisma",
"adapters/fauna",
@@ -76,15 +77,17 @@ module.exports = {
{
type: "category",
label: "Guides",
link: { type: "doc", id: "guides/guides" },
collapsed: true,
items: ["guides/basics", "guides/fullstack", "guides/testing"],
items: [
"guides/basics",
"guides/fullstack",
"guides/testing",
],
},
{
type: "html",
value:
'<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEAI6K3N&placement=next-authjsorg" id="_carbonads_js"></script>',
defaultStyle: true,
value: '<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEAI6K3N&placement=next-authjsorg" id="_carbonads_js"></script>',
defaultStyle: true
},
],
}

View File

@@ -1,6 +1,7 @@
import React from "react"
import Marquee, { Motion, randomIntFromInterval } from "react-marquee-slider"
import styles from "./ProviderMarqueeStyle.module.css"
import * as S from "./ProviderMarqueeStyle"
import times from "lodash.times"
const icons = [
"/img/providers/apple-black.svg",
@@ -19,7 +20,7 @@ const icons = [
"/img/providers/twitter.svg",
]
const ProviderMarquee = React.memo(() => {
const ProviderMarquee = React.memo(({ size }) => {
let scale = 0.4
if (typeof window !== "undefined") {
@@ -38,8 +39,8 @@ const ProviderMarquee = React.memo(() => {
}
return (
<div className={styles.fullWidth}>
<div className={styles.height}>
<S.FullWidth>
<S.Height height={500}>
<Marquee
key="1"
velocity={5}
@@ -47,33 +48,24 @@ const ProviderMarquee = React.memo(() => {
minScale={0.5}
resetAfterTries={200}
>
{icons.map((icon) => (
{times(icons.length, Number).map((id) => (
<Motion
key={`marquee-example-company-${icon}`}
key={`marquee-example-company-${id}`}
initDeg={randomIntFromInterval(0, 360)}
direction={Math.random() > 0.5 ? "clockwise" : "counterclockwise"}
velocity={10}
radius={scale * 70}
>
<div
className={styles.company}
style={{ height: `${scale * 75}px`, width: `${scale * 75}px` }}
>
<div
className={styles.circle}
style={{
height: `${scale * 150}px`,
width: `${scale * 150}px`,
}}
>
<img className={styles.logo} src={icon} alt="" />
</div>
</div>
<S.Company scale={scale}>
<S.Circle scale={scale}>
<S.Logo src={icons[id]} alt="" />
</S.Circle>
</S.Company>
</Motion>
))}
</Marquee>
</div>
</div>
</S.Height>
</S.FullWidth>
)
})

View File

@@ -1,7 +1,11 @@
.circle {
import styled from "styled-components"
export const Circle = styled.div`
position: absolute;
object-position: center center;
will-change: transform, opacity;
width: ${(props) => props.scale * 150}px;
height: ${(props) => props.scale * 150}px;
top: -50%;
left: -50%;
border-radius: 50%;
@@ -9,31 +13,33 @@
justify-content: center;
align-items: center;
margin-top: 1rem;
}
`
.logo {
export const Logo = styled.img`
display: block;
width: 65%;
height: 65%;
filter: grayscale(100%);
opacity: 0.1;
}
`
.fullWidth {
export const FullWidth = styled.div`
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
`
.height {
export const Height = styled.div`
position: relative;
width: 100%;
height: 500px;
}
height: ${(props) => (props.height ? props.height + "px" : "auto")};
`
.company {
export const Company = styled.div`
position: relative;
}
width: ${(props) => props.scale * 75}px;
height: ${(props) => props.scale * 75}px;
`

View File

@@ -0,0 +1,16 @@
import React from "react"
import {
SandpackProvider,
SandpackLayout,
SandpackCodeEditor,
SandpackPreview,
} from "@codesandbox/sandpack-react"
export const CustomSandpack = () => (
<SandpackProvider template="react">
<SandpackLayout>
<SandpackCodeEditor />
<SandpackPreview />
</SandpackLayout>
</SandpackProvider>
)

View File

@@ -7,6 +7,11 @@
/* @TODO Move as many styles for the homepage as possible into styles.module.css */
/**
* Sandpack integration
*/
@import "@codesandbox/sandpack-react/dist/index.css";
/* You can override the default Infima variables here. */
:root {
--ifm-color-link: #289ef9;
@@ -57,6 +62,12 @@ html[data-theme="dark"] svg[id^="mermaid-svg"] text[id*="-attr"] {
@import "navbar.css";
@import "search.css";
@media screen and (max-width: 360px) {
html {
font-size: 0.8rem;
}
}
a {
font-weight: 600;
}

View File

@@ -1,23 +1,4 @@
{
"headers": [
{
"source": "/(.*)",
"headers": [
{
"key": "X-Content-Type-Options",
"value": "nosniff"
},
{
"key": "X-Frame-Options",
"value": "DENY"
},
{
"key": "X-XSS-Protection",
"value": "1; mode=block"
}
]
}
],
"redirects": [
{
"source": "/schemas/models",

View File

@@ -181,7 +181,7 @@ If you think your custom provider might be useful to others, we encourage you to
You only need to add two changes:
1. Add your config: [`src/providers/{provider}.js`](https://github.com/nextauthjs/next-auth/tree/main/packages/next-auth/src/providers)<br />
1. Add your config: [`src/providers/{provider}.js`](https://github.com/nextauthjs/next-auth/tree/main/src/providers)<br />
• make sure you use a named default export, like this: `export default function YourProvider`
2. Add provider documentation: [`www/docs/providers/{provider}.md`](https://github.com/nextauthjs/next-auth/tree/ead715219a5d7a6e882a6ba27fa56b03954d062d/www/docs/providers)
3. Add it to our [provider types](https://github.com/nextauthjs/next-auth/blob/ead715219a5d7a6e882a6ba27fa56b03954d062d/types/providers.d.ts) (for TS projects)<br />

View File

@@ -1,53 +0,0 @@
---
id: duende-identityserver6
title: DuendeIdentityServer6
---
## Documentation
https://docs.duendesoftware.com/identityserver/v6
## Options
The **DuendeIdentityServer6 Provider** comes with a set of default options:
- [DuendeIdentityServer6 Provider options](https://github.com/nextauthjs/next-auth/tree/main/packages/next-auth/src/providers/duende-identity-server6.ts)
You can override any of the options to suit your own use case.
## Example
```js
import DuendeIDS6Provider from "next-auth/providers/duende-identity-server6"
...
providers: [
DuendeIDS6Provider({
clientId: process.env.DUENDE_IDS6_ID,
clientSecret: process.env.DUENDE_IDS6_SECRET,
issuer: process.env.DUENDE_IDS6_ISSUER,
})
]
...
```
## Demo IdentityServer
The configuration below is for the demo server at https://demo.duendesoftware.com/
If you want to try it out, you can copy and paste the configuration below.
You can sign in to the demo service with either <b>bob/bob</b> or <b>alice/alice</b>.
```js
import DuendeIDS6Provider from "next-auth/providers/duende-identity-server6"
...
providers: [
DuendeIDS6Provider({
clientId: "interactive.confidential",
clientSecret: "secret",
issuer: "https://demo.duendesoftware.com",
})
]
...
```

View File

@@ -15,7 +15,7 @@ https://github.com/settings/apps
The **Github Provider** comes with a set of default options:
- [Github Provider options](https://github.com/nextauthjs/next-auth/blob/main/src/providers/github.ts)
- [Github Provider options](https://github.com/nextauthjs/next-auth/blob/main/src/providers/github.js)
You can override any of the options to suit your own use case.

View File

@@ -54,6 +54,6 @@ providers: [
clientSecret: "secret",
protection: "pkce"
})
]
}
...
```

View File

@@ -2,24 +2,30 @@
"name": "root",
"version": "0.0.0",
"private": true,
"workspaces": {
"packages": [
"packages/*",
"apps/dev",
"docs"
]
},
"repository": "https://github.com/nextauthjs/next-auth.git",
"scripts": {
"build:app": "turbo run build --filter=next-auth-app --include-dependencies",
"build": "turbo run build --filter=next-auth --filter=@next-auth/* --no-deps",
"lint": "turbo run lint --filter=!next-auth-docs",
"build:app": "turbo run build --scope=next-auth-app --include-dependencies",
"build": "turbo run build --scope=next-auth --scope=@next-auth/* --no-deps",
"lint": "turbo run lint --scope=!next-auth-docs",
"lint:fix": "turbo run lint -- --fix",
"test": "turbo run test --concurrency=1 --filter=!@next-auth/pouchdb-adapter --filter=!next-auth-* --filter=[HEAD^1]",
"test": "turbo run test --concurrency=1 --scope=!@next-auth/pouchdb-adapter --scope=!next-auth-*",
"setup": "turbo run setup",
"dev": "pnpm dev:app",
"dev:app": "turbo run dev --parallel --no-deps --no-cache --filter=next-auth-app",
"dev:docs": "turbo run dev --parallel --no-deps --no-cache --filter=next-auth-docs",
"dev": "yarn dev:app",
"dev:app": "turbo run dev --parallel --no-deps --no-cache --scope=next-auth-app",
"dev:docs": "turbo run dev --parallel --no-deps --no-cache --scope=next-auth-docs",
"version:pr": "node ./config/version-pr",
"release": "ts-node scripts/release"
},
"devDependencies": {
"@actions/core": "^1.6.0",
"@commitlint/parse": "16.0.0",
"@types/node": "^17.0.25",
"@types/semver": "7.3.9",
"@typescript-eslint/eslint-plugin": "^5.10.2",
"@typescript-eslint/parser": "^4.33.0",
@@ -36,14 +42,12 @@
"pretty-quick": "^3.1.2",
"semver": "7.3.5",
"stream-to-array": "2.3.0",
"ts-node": "10.8.2",
"turbo": "1.3.1",
"type-fest": "2.16.0",
"ts-node": "10.5.0",
"turbo": "^1.1.6",
"typescript": "^4.5.2"
},
"engines": {
"node": "^12.19.0 || ^14.15.0 || ^16.13.0",
"pnpm": ">=6.32.3"
"node": "^12.19.0 || ^14.15.0 || ^16.13.0"
},
"prettier": {
"semi": false,
@@ -98,7 +102,7 @@
"**/tests",
"**/__tests__"
],
"packageManager": "pnpm@7.5.1",
"packageManager": "yarn@1.22.17",
"funding": [
{
"type": "github",

View File

@@ -6,7 +6,7 @@
Open Source. Full Stack. Own Your Data.
</p>
<!-- <p align="center" style="align: center;">
<img src="https://github.com/nextauthjs/next-auth/actions/workflows/release.yml/badge.svg?branch=main" alt="CI Test" />
<img src="https://github.com/nextauthjs/adapters/actions/workflows/release.yml/badge.svg" alt="CI Test" />
<img src="https://img.shields.io/bundlephobia/minzip/@next-auth/prisma-adapter" alt="Bundle Size"/>
<img src="https://img.shields.io/npm/v/@next-auth/prisma-adapter" alt="@next-auth/prisma-adapter Version" />
</p> -->
@@ -150,7 +150,7 @@ type User
## Contributing
We're open to all community contributions! If you'd like to contribute in any way, please read our [Contributing Guide](https://github.com/nextauthjs/next-auth/blob/main/CONTRIBUTING.md).
We're open to all community contributions! If you'd like to contribute in any way, please read our [Contributing Guide](https://github.com/nextauthjs/adapters/blob/main/CONTRIBUTING.md).
## License

View File

@@ -3,9 +3,9 @@
"version": "1.0.3",
"description": "Dgraph adapter for next-auth.",
"homepage": "https://next-auth.js.org",
"repository": "https://github.com/nextauthjs/next-auth",
"repository": "https://github.com/nextauthjs/adapters",
"bugs": {
"url": "https://github.com/nextauthjs/next-auth/issues"
"url": "https://github.com/nextauthjs/adapters/issues"
},
"author": "Arnaud Derbey <arnaud@derbey.dev>",
"contributors": [],
@@ -31,16 +31,14 @@
},
"peerDependencies": {
"jsonwebtoken": "^8.5.1",
"next-auth": "workspace:*"
"next-auth": "^4.0.1"
},
"devDependencies": {
"@next-auth/adapter-test": "workspace:^0.0.0",
"@next-auth/tsconfig": "workspace:^0.0.0",
"@types/jest": "^26.0.24",
"@types/jsonwebtoken": "^8.5.5",
"@types/node-fetch": "^2.5.11",
"jest": "^27.4.3",
"next-auth": "workspace:*",
"jest": "^27.0.6",
"next-auth": "^4.0.1",
"ts-jest": "^27.0.3"
},
"dependencies": {
@@ -48,6 +46,6 @@
"node-fetch": "^2.6.1"
},
"jest": {
"preset": "@next-auth/adapter-test/jest"
"preset": "adapter-test/jest"
}
}

View File

@@ -1,7 +1,7 @@
import { DgraphAdapter, format } from "../src"
import { client as dgraphClient } from "../src/client"
import * as fragments from "../src/graphql/fragments"
import { runBasicTests } from "@next-auth/adapter-test"
import { runBasicTests } from "adapter-test"
import fs from "fs"
import path from "path"

View File

@@ -1,5 +1,5 @@
{
"extends": "@next-auth/tsconfig/adapters.json",
"extends": "tsconfig/adapters.json",
"compilerOptions": {
"rootDir": "src",
"outDir": "dist"

View File

@@ -6,7 +6,7 @@
Open Source. Full Stack. Own Your Data.
</p>
<p align="center" style="align: center;">
<img src="https://github.com/nextauthjs/next-auth/actions/workflows/release.yml/badge.svg?branch=main" alt="Build Test" />
<img src="https://github.com/nextauthjs/adapters/actions/workflows/release.yml/badge.svg" alt="Build Test" />
<img src="https://img.shields.io/bundlephobia/minzip/@next-auth/dynamodb-adapter/latest" alt="Bundle Size"/>
<img src="https://img.shields.io/npm/v/@next-auth/dynamodb-adapter" alt="@next-auth/dynamodb-adapter Version" />
</p>
@@ -96,7 +96,7 @@ Here is a schema of the table :
## Contributing
We're open to all community contributions! If you'd like to contribute in any way, please read our [Contributing Guide](https://github.com/nextauthjs/next-auth/blob/main/CONTRIBUTING.md).
We're open to all community contributions! If you'd like to contribute in any way, please read our [Contributing Guide](https://github.com/nextauthjs/adapters/blob/main/CONTRIBUTING.md).
## License

View File

@@ -3,7 +3,7 @@
* https://jestjs.io/docs/en/configuration.html
*/
module.exports = {
...require("@next-auth/adapter-test/jest/jest-preset"),
...require("adapter-test/jest/jest-preset"),
// // Indicates whether the coverage information should be collected while executing the test
// collectCoverage: true,
// // Indicates which provider should be used to instrument code for coverage

View File

@@ -1,6 +1,6 @@
{
"name": "@next-auth/dynamodb-adapter",
"repository": "https://github.com/nextauthjs/next-auth",
"repository": "https://github.com/nextauthjs/adapters",
"version": "1.0.3",
"description": "AWS DynamoDB adapter for next-auth.",
"keywords": [
@@ -21,7 +21,7 @@
"scripts": {
"test:default": "jest",
"test:custom": "CUSTOM_MODEL=1 jest",
"test": "pnpm test:default && pnpm test:custom",
"test": "yarn test:default && yarn test:custom",
"build": "tsc"
},
"files": [
@@ -32,15 +32,12 @@
"license": "ISC",
"peerDependencies": {
"@aws-sdk/lib-dynamodb": "^3.36.1",
"next-auth": "workspace:*"
"next-auth": "^4.0.1"
},
"devDependencies": {
"@aws-sdk/client-dynamodb": "^3.36.1",
"@aws-sdk/lib-dynamodb": "^3.36.1",
"@next-auth/adapter-test": "workspace:^0.0.0",
"@next-auth/tsconfig": "workspace:^0.0.0",
"@shelf/jest-dynamodb": "^2.1.0",
"jest": "^27.4.3",
"next-auth": "workspace:*"
"next-auth": "^4.0.1"
}
}

View File

@@ -1,7 +1,7 @@
import { DynamoDB } from "@aws-sdk/client-dynamodb"
import { DynamoDBDocument } from "@aws-sdk/lib-dynamodb"
import { DynamoDBAdapter } from "../src"
import { runBasicTests } from "@next-auth/adapter-test"
import { runBasicTests } from "adapter-test"
import { format } from "../src/"
const config = {
endpoint: "http://127.0.0.1:8000",

View File

@@ -1,5 +1,5 @@
{
"extends": "@next-auth/tsconfig/adapters.json",
"extends": "tsconfig/adapters.json",
"compilerOptions": {
"rootDir": "src",
"outDir": "dist"

View File

@@ -7,7 +7,7 @@
Open Source. Full Stack. Own Your Data.
</p>
<p align="center" style="align: center;">
<img src="https://github.com/nextauthjs/next-auth/actions/workflows/release.yml/badge.svg?branch=main" alt="Build Test" />
<img src="https://github.com/nextauthjs/adapters/actions/workflows/release.yml/badge.svg" alt="Build Test" />
<a href="https://www.npmjs.com/package/@next-auth/faunadb-adapter" target="_blank"><img src="https://img.shields.io/bundlephobia/minzip/@next-auth/fauna-adapter/next" alt="Bundle Size"/></a>
<a href="https://www.npmjs.com/package/@next-auth/faunadb-adapter" target="_blank"><img src="https://img.shields.io/npm/v/@next-auth/fauna-adapter/next" alt="@next-auth/fauna-adapter Version" /></a>
</p>
@@ -53,7 +53,7 @@ export default NextAuth({
## Contributing
We're open to all community contributions! If you'd like to contribute in any way, please read our [Contributing Guide](https://github.com/nextauthjs/next-auth/blob/main/CONTRIBUTING.md).
We're open to all community contributions! If you'd like to contribute in any way, please read our [Contributing Guide](https://github.com/nextauthjs/adapters/blob/main/CONTRIBUTING.md).
## License

View File

@@ -3,14 +3,11 @@
"version": "1.0.3",
"description": "Fauna Adapter for NextAuth",
"homepage": "https://next-auth.js.org",
"repository": "https://github.com/nextauthjs/next-auth",
"repository": "https://github.com/nextauthjs/adapters",
"bugs": {
"url": "https://github.com/nextauthjs/next-auth/issues"
},
"files": [
"dist",
"README.md"
],
"files": ["dist", "README.md"],
"author": "Bhanu Teja P",
"contributors": [
{
@@ -24,12 +21,7 @@
],
"main": "dist/index.js",
"license": "ISC",
"keywords": [
"next-auth",
"next.js",
"fauna",
"faunadb"
],
"keywords": ["next-auth", "next.js", "fauna", "faunadb"],
"private": false,
"publishConfig": {
"access": "public"
@@ -41,17 +33,14 @@
},
"peerDependencies": {
"faunadb": "^4.3.0",
"next-auth": "workspace:*"
"next-auth": "^4.0.1"
},
"devDependencies": {
"@fauna-labs/fauna-schema-migrate": "^2.1.3",
"@next-auth/adapter-test": "workspace:^0.0.0",
"@next-auth/tsconfig": "workspace:^0.0.0",
"faunadb": "^4.3.0",
"jest": "^27.4.3",
"next-auth": "workspace:*"
"next-auth": "^4.0.1"
},
"jest": {
"preset": "@next-auth/adapter-test/jest"
"preset": "adapter-test/jest"
}
}

View File

@@ -1,5 +1,5 @@
import { collections, FaunaAdapter, format, indexes, query } from "../src"
import { runBasicTests } from "@next-auth/adapter-test"
import { runBasicTests } from "adapter-test"
import { Client as FaunaClient, Get, Match, Ref } from "faunadb"
const client = new FaunaClient({

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