NextAuth.js：Web身份认证

NextAuth.js是一个开源、全栈、自己管理数据的Web身份认证组件。

特性

灵活且易于使用

设计用于与任何 OAuth 服务配合使用，支持 2.0+、OIDC
对许多流行登录服务的内置支持
电子邮件/无密码身份验证
带上您的数据库 - 或不带！- 与任何后端（Active Directory、LDAP 等）进行无状态身份验证
与运行时无关，可以在任何地方运行！（Vercel Edge Functions、Node.js、无服务器等）

拥有您的数据

NextAuth.js 可以在有或没有数据库的情况下使用。

一个开源解决方案，可让您保持对数据的控制
内置支持MySQL、MariaDB、Postgres、Microsoft SQL Server、MongoDB、SQLite 等。
与流行托管提供商的数据库配合良好

默认安全

推广使用无密码登录机制
默认情况下是安全的，并鼓励保护用户数据的最佳实践
在 POST 路由（登录、注销）上使用跨站点请求伪造 (CSRF) 令牌
默认 cookie 策略旨在为每个 cookie 提供最严格的限制性策略
使用 JSON Web 令牌时，默认使用 A256CBC-HS512 对其进行加密 (JWE)
具有选项卡/窗口同步和会话轮询功能，以支持短期会话
尝试实施开放 Web 应用程序安全项目发布的最新指南

高级配置允许您定义例程来处理控制允许哪些帐户登录、编码和解码 JSON Web 令牌以及设置自定义 cookie 安全策略和会话属性，以便您可以控制谁可以登录以及会话登录的频率待重新验证。

入门

对于新项目，最简单的入门方法是克隆示例应用程序并按照 README.md 中的说明进行操作。

现有项目

安装

npm install next-auth

添加API路由

要将 NextAuth.js 添加到项目中，请在pages/api/auth创建一个名为[...nextauth].js的文件。其中包含 NextAuth.js 的动态路由处理程序，该处理程序还将包含所有全局 NextAuth.js 配置。

如果您使用Next.js 13.2或更高版本，用新的 App Router (app/)，则可以按照我们的指南，使用新的路由处理器初始化配置。

import NextAuth from "next-auth"
import GithubProvider from "next-auth/providers/github"

export const authOptions = {
  // Configure one or more authentication providers
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    // ...add more providers here
  ],
}

export default NextAuth(authOptions)

所有对/api/auth/*( signIn、callback、signOut等)的请求都将由 NextAuth.js 自动处理。

配置共享会话状态

为了能够使用useSession，您首选需要在应用程序的顶层引入会话上下文<SessionProvider />：

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

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}

然后，useSession的实例将可以访问会话数据和状态。<SessionProvider />还负责保持会话更新并在浏览器选项卡和窗口之间同步。

前端 - 添加 React Hook

NextAuth.js 客户端中的 useSession()React Hook 是检查某人是否登录的最简单方法。

import { useSession, signIn, signOut } from "next-auth/react"

export default function Component() {
  const { data: session } = useSession()
  if (session) {
    return (
      <>
        Signed in as {session.user.email} <br />
        <button onClick={() => signOut()}>Sign out</button>
      </>
    )
  }
  return (
    <>
      Not signed in <br />
      <button onClick={() => signIn()}>Sign in</button>
    </>
  )
}

您可以从应用程序中的任何位置使用该useSession钩子（例如在标头组件中）。

后端 - API 路由

要保护 API 路由，您可以使用getServerSession()方法。

import { getServerSession } from "next-auth/next"
import { authOptions } from "./auth/[...nextauth]"

export default async (req, res) => {
  const session = await getServerSession(req, res, authOptions)

  if (session) {
    res.send({
      content:
        "This is protected content. You can access this content because you are signed in.",
    })
  } else {
    res.send({
      error: "You must be signed in to view the protected content on this page.",
    })
  }
}

可扩展性

使用 NextAuth.js 回调

NextAuth.js 允许您通过我们的内置回调连接到身份验证流程的各个部分。

例如，要将值从登录传递到前端、客户端，您可以使用session和jwt回调的组合，如下所示：

...
callbacks: {
  async jwt({ token, account }) {
    // Persist the OAuth access_token to the token right after signin
    if (account) {
      token.accessToken = account.access_token
    }
    return token
  },
  async session({ session, token, user }) {
    // Send properties to the client, like an access_token from a provider.
    session.accessToken = token.accessToken
    return session
  }
}
...

现在，每当您调用getSession或useSession时，返回的数据对象将包含该accessToken值。

import { useSession, signIn, signOut } from "next-auth/react"

export default function Component() {
  const { data } = useSession()
  const { accessToken } = data

  return <div>Access Token: {accessToken}</div>
}

配置回调 URL（仅限 OAuth）

如果您通过我们的内置提供者之一或自定义提供者使用 OAuth，则需要在提供者的设置中配置回调 URL。每个提供者都有一个“配置”部分，应该为您提供如何执行此操作的指导。

请按照以下步骤了解如何与 OAuth 提供者集成。

部署到生产环境

部署站点时，将NEXTAUTH_URL环境变量设置为网站的规范 URL。

NEXTAUTH_URL=https://example.com

来自：