编辑“︁Next.js NextAuth.js”︁（章节）

= Next.js NextAuth.js =

'''NextAuth.js''' 是一个用于 [[Next.js]] 应用程序的流行身份验证库，它简化了身份验证和授权的实现过程。它支持多种身份验证提供商（如 Google、GitHub、Facebook 等），并提供了会话管理、JWT（JSON Web Token）支持和数据库适配器等功能。NextAuth.js 非常适合需要快速集成身份验证功能的开发者，无论是初学者还是高级用户。

== 介绍 ==

NextAuth.js 是一个开源的 Next.js 身份验证库，旨在为开发者提供一种简单、灵活且安全的方式来实现用户身份验证。它支持多种身份验证策略，包括 OAuth（如 Google、GitHub）、电子邮件/密码、无密码登录（如 Magic Links）以及自定义数据库适配器。NextAuth.js 还内置了会话管理功能，可以轻松地与 Next.js 的服务器端渲染（SSR）和 API 路由集成。

=== 主要特性 ===
* 支持多种身份验证提供商（OAuth、电子邮件/密码等）。
* 内置会话管理和 JWT 支持。
* 可扩展的数据库适配器（支持 PostgreSQL、MySQL、MongoDB 等）。
* 与 Next.js API 路由无缝集成。
* 提供客户端和服务器端的身份验证钩子。

== 安装与配置 ==

要使用 NextAuth.js，首先需要在 Next.js 项目中安装它：

<syntaxhighlight lang="bash">
npm install next-auth
</syntaxhighlight>

接下来，在项目中创建一个 API 路由来处理身份验证请求。通常，这个路由位于 <code>pages/api/auth/[...nextauth].js</code>。

=== 基本配置示例 ===
以下是一个简单的 NextAuth.js 配置示例，使用 GitHub 作为身份验证提供商：

<syntaxhighlight lang="javascript">
// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth';
import GitHubProvider from 'next-auth/providers/github';

export default NextAuth({
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
});
</syntaxhighlight>

=== 环境变量 ===
确保在 <code>.env.local</code> 文件中设置以下环境变量：
<syntaxhighlight lang="bash">
GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret
NEXTAUTH_SECRET=your_secret_key
</syntaxhighlight>

== 会话管理 ==

NextAuth.js 提供了会话管理功能，可以通过 <code>useSession</code> 钩子或 <code>getSession</code> 方法在客户端和服务器端访问用户会话。

=== 客户端会话示例 ===
<syntaxhighlight lang="javascript">
import { useSession, signIn, signOut } from 'next-auth/react';

export default function Component() {
  const { data: session, status } = useSession();

  if (status === 'loading') {
    return <div>Loading...</div>;
  }

  if (session) {
    return (
      <div>
        Signed in as {session.user.email} <br />
        <button onClick={() => signOut()}>Sign out</button>
      </div>
    );
  }
  return (
    <div>
      Not signed in <br />
      <button onClick={() => signIn()}>Sign in</button>
    </div>
  );
}
</syntaxhighlight>

=== 服务器端会话示例 ===
<syntaxhighlight lang="javascript">
import { getSession } from 'next-auth/react';

export async function getServerSideProps(context) {
  const session = await getSession(context);

  if (!session) {
    return {
      redirect: {
        destination: '/auth/signin',
        permanent: false,
      },
    };
  }

  return {
    props: { session },
  };
}
</syntaxhighlight>

== 身份验证提供商 ==

NextAuth.js 支持多种身份验证提供商，包括：
* OAuth 提供商（如 Google、GitHub、Facebook）。
* 电子邮件/密码登录。
* 无密码登录（如 Magic Links）。
* 自定义数据库适配器。

=== 多提供商配置示例 ===
<syntaxhighlight lang="javascript">
// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth';
import GitHubProvider from 'next-auth/providers/github';
import GoogleProvider from 'next-auth/providers/google';
import EmailProvider from 'next-auth/providers/email';

export default NextAuth({
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    EmailProvider({
      server: process.env.EMAIL_SERVER,
      from: process.env.EMAIL_FROM,
    }),
  ],
});
</syntaxhighlight>

== 数据库适配器 ==

NextAuth.js 支持与数据库集成，以存储用户、会话和令牌信息。它提供了多种数据库适配器，包括：
* PostgreSQL
* MySQL
* MongoDB
* SQLite

=== 使用 PostgreSQL 适配器 ===
首先安装适配器：
<syntaxhighlight lang="bash">
npm install @next-auth/postgresql-adapter pg
</syntaxhighlight>

然后在配置中启用适配器：
<syntaxhighlight lang="javascript">
import NextAuth from 'next-auth';
import { PostgresAdapter } from '@next-auth/postgresql-adapter';
import { Pool } from 'pg';

const pool = new Pool({
  connectionString: process.env.DATABASE_URL,
});

export default NextAuth({
  adapter: PostgresAdapter(pool),
  providers: [
    // 配置提供商...
  ],
});
</syntaxhighlight>

== 实际应用案例 ==

=== 案例：保护 API 路由 ===
NextAuth.js 可以用于保护 Next.js 的 API 路由，确保只有登录用户才能访问。

<syntaxhighlight lang="javascript">
// pages/api/protected.js
import { getSession } from 'next-auth/react';

export default async function handler(req, res) {
  const session = await getSession({ req });

  if (!session) {
    return res.status(401).json({ message: 'Unauthorized' });
  }

  res.status(200).json({ message: 'Protected data', user: session.user });
}
</syntaxhighlight>

=== 案例：自定义登录页面 ===
NextAuth.js 允许自定义登录页面，以适应应用程序的设计需求。

<syntaxhighlight lang="javascript">
// pages/auth/signin.js
import { signIn } from 'next-auth/react';

export default function SignIn() {
  return (
    <div>
      <h1>Sign In</h1>
      <button onClick={() => signIn('github')}>Sign in with GitHub</button>
      <button onClick={() => signIn('google')}>Sign in with Google</button>
    </div>
  );
}
</syntaxhighlight>

== 高级主题 ==

=== JWT 配置 ===
NextAuth.js 默认使用 JWT 进行会话管理。可以通过配置自定义 JWT 的行为：

<syntaxhighlight lang="javascript">
export default NextAuth({
  // ...
  session: {
    strategy: 'jwt',
  },
  jwt: {
    secret: process.env.JWT_SECRET,
    encryption: true,
  },
});
</syntaxhighlight>

=== 自定义回调 ===
NextAuth.js 提供了多个回调函数，允许在身份验证流程的不同阶段执行自定义逻辑。

<syntaxhighlight lang="javascript">
export default NextAuth({
  // ...
  callbacks: {
    async jwt(token, user) {
      if (user) {
        token.id = user.id;
      }
      return token;
    },
    async session(session, token) {
      session.user.id = token.id;
      return session;
    },
  },
});
</syntaxhighlight>

== 总结 ==

NextAuth.js 是一个功能强大且灵活的身份验证库，非常适合 Next.js 应用程序。它支持多种身份验证提供商、数据库适配器和自定义配置，能够满足从简单到复杂的身份验证需求。通过本文的介绍和示例，你应该能够快速上手并集成 NextAuth.js 到你的项目中。

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js身份验证与授权]]