我一直在尝试为 Next.js 项目实现可靠的身份验证流程，但现在我完全迷失了。我已经看过 Next.js 的示例存储库。但我对完整的解决方案有很多疑问。

我有一个express.js API 和一个单独的Next.js 前端项目。所有数据和身份验证均由 API 处理。前端只是使用 SSR 渲染页面。如果我只是创建一个整体项目，其中渲染页面和所有数据都由单个服务器处理（我的意思是 Next.js 的自定义服务器选项），我只会使用express-session 和 csurf。这将是管理会话和创建针对 CSRF 的安全性的传统方式。

Express.js API 不是必需的。这只是一个例子。它可以是 Django API，也可以是 .Net Core API。要点是，它是一个单独的服务器和一个单独的项目。

如何才能拥有一个简单而可靠的结构？我检查了一些我最喜欢的网站（netlify、zeit.co、heroku、spectrum.chat 等）。其中一些使用 localstorage 来存储访问和刷新令牌（存在 XSS 漏洞）。其中一些使用 cookie，甚至不是 HTTPOnly（XSS 和 CSRF 都容易受到攻击）。像spectrum.chat这样的例子使用了我上面提到的方式（cookie-session + 防止csrf）。

我知道围绕 JWT 代币存在着巨大的炒作。但我发现它们太复杂了。大多数教程只是跳过所有过期、令牌刷新、令牌撤销、黑名单、白名单等。

Next.js 的许多会话 cookie 示例几乎从未提及 CSRF。老实说，身份验证对我来说始终是一个大问题。有一天，我读到应该使用 HTTPOnly cookie，第二天我看到一个巨大的流行网站甚至没有使用它们。或者他们说“永远不要将你的代币存储到 localStorage”，而一些巨大的项目就使用了这种方法。

谁能为我指明这种情况的方向？

免责声明：我是下面的免费开源包的维护者，但我认为在这里是合适的，因为这是一个常见问题，没有一个很好的答案，因为许多流行的解决方案都存在问题中提出的特定安全缺陷（例如在适当的情况下不使用 CSRF 并向客户端 JavaScript 公开会话令牌或 Web 令牌）。

套餐NextAuth.js https://next-auth.js.org尝试使用免费的开源软件来解决上述问题。

• It uses httpOnly饼干与secure.
• 它具有 CSRF 保护（双重提交 cookie 方法，带有签名 cookie）。
• Cookie 带有适当的前缀（例如__HOST- or __Secure).
• 它支持电子邮件/无密码登录和 OAuth 提供商（其中包括许多提供商）。
• 它支持 JSON Web 令牌（签名+加密）和会话数据库。
• 您可以在没有数据库的情况下使用它（例如任何 ANSI SQL、MongoDB）。
• Has a 现场演示 https://next-auth-example.now.sh (查看源代码 https://github.com/nextauthjs/next-auth-example).
• 它是 100% FOSS，不是商业软件或 SaaS 解决方案（不销售任何东西）。

API 路由示例

e.g. page/api/auth/[...nextauth.js]

import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'

const options = {
  providers: [
    // OAuth authentication providers
    Providers.Apple({
      clientId: process.env.APPLE_ID,
      clientSecret: process.env.APPLE_SECRET
    }),
    Providers.Google({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET
    }),
    // Sign in with email (passwordless)
    Providers.Email({
      server: process.env.MAIL_SERVER,
      from: '<[email protected] /cdn-cgi/l/email-protection>'
    }),
  ],
  // MySQL, Postgres or MongoDB database (or leave empty)
  database: process.env.DATABASE_URL
}

export default (req, res) => NextAuth(req, res, options)

反应组件示例

e.g. pages/index.js

import React from 'react'
import { 
  useSession, 
  signin, 
  signout 
} from 'next-auth/client'

export default () => {
  const [ session, loading ] = useSession()

  return <p>
    {!session && <>
      Not signed in <br/>
      <button onClick={signin}>Sign in</button>
    </>}
    {session && <>
      Signed in as {session.user.email} <br/>
      <button onClick={signout}>Sign out</button>
    </>}
  </p>
}

即使您不选择使用它，您也可能会发现该代码作为参考很有用（例如如何JSON 网络令牌 https://github.com/nextauthjs/next-auth/blob/main/src/lib/jwt.js被处理并且他们如何在会议中轮换 https://github.com/nextauthjs/next-auth/blob/main/src/server/routes/session.js.