NextAuth.js 使用指南：安装、配置与自定义页面

回答：

NextAuth.js 是一个用于 Next.js 应用程序的身份验证库。它提供了一个简单且灵活的方式来添加用户身份验证功能，包括支持 OAuth 提供商、电子邮件登录、凭据登录等。以下是 NextAuth.js 的详细用法和配置指南。

安装

首先，你需要在你的 Next.js 项目中安装 next-auth 包：

npm install next-auth

或者使用 Yarn：

yarn add next-auth

配置

NextAuth.js 的配置主要在 pages/api/auth/[...nextauth].js 文件中进行。这个文件是 Next.js API 路由的一部分，用于处理所有与身份验证相关的请求。

基本配置

创建 pages/api/auth/[...nextauth].js 文件，并添加以下��本配置：

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

export default NextAuth({
  // 配置身份验证提供商
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    // 你可以添加更多的提供商
  ],
  
  // 数据库配置（可选）
  database: process.env.DATABASE_URL,

  // 自定义页面（可选）
  pages: {
    signIn: '/auth/signin',
    signOut: '/auth/signout',
    error: '/auth/error', // 错误页面
    verifyRequest: '/auth/verify-request', // 验证请求
    newUser: null // 新用户重定向
  },

  // 回调函数（可选）
  callbacks: {
    async signIn(user, account, profile) {
      // 用户登录时的回调
      return true;
    },
    async redirect(url, baseUrl) {
      // 登录后重定向的回调
      return url.startsWith(baseUrl) ? url : baseUrl;
    },
    async session(session, user) {
      // 会话回调
      session.user.id = user.id;
      return session;
    },
    async jwt(token, user, account, profile, isNewUser) {
      // JWT 回调
      if (user) {
        token.id = user.id;
      }
      return token;
    }
  },

  // 事件（可选）
  events: {
    async signIn(message) { /* 用户登录事件 */ },
    async signOut(message) { /* 用户登出事件 */ },
    async createUser(message) { /* 用户创建事件 */ },
    async updateUser(message) { /* 用户更新事件 */ },
    async linkAccount(message) { /* 账户链接事件 */ },
    async session(message) { /* 会话事件 */ },
  },

  // 调试模式（可选）
  debug: false,
});

环境变量

为了安全起见，敏感信息如客户端 ID 和客户端��钥应存储在环境变量中。你可以在项目根目录下创建一个 .env.local 文件，并添加以下内容：

GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
DATABASE_URL=your-database-url

使用身份验证

在你的 Next.js 应用中，你可以使用 useSession 和 signIn、signOut 函数来管理用户会话。

获取会话

你可以在任何组件中使用 useSession 钩子来获取当前用户的会话信息：

import { useSession, signIn, signOut } from 'next-auth/client';

export default function Component() {
  const [session, loading] = useSession();

  if (loading) return <p>Loading...</p>;

  if (!session) {
    return (
      <>
        <p>Not signed in</p>
        <button onClick={() => signIn()}>Sign in</button>
      </>
    );
  }

  return (
    <>
      <p>Signed in as {session.user.email}</p>
      <button onClick={() => signOut()}>Sign out</button>
    </>
  );
}

保护页面

你可以使用 getSession 函数在服务器端保护页面：

import { getSession } from 'next-auth/client';

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

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

  return {
    props: { session },
  };
}

export default function ProtectedPage({ session }) {
  return <p>Welcome, {session.user.email}</p>;
}

自定义页面

你可以自定义登录、登出等页面。首先，在 pages/auth 目录下创建相应的文件，例如 signin.js：

import { signIn } from 'next-auth/client';

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

然后在 pages/api/auth/[...nextauth].js 文件中配置自定义页面路径：

pages: {
  signIn: '/auth/signin',
  // 其他页面配置
},

总结

NextAuth.js 提供了一个强大且灵活的身份验证解决方案，适用于各种 Next.js 应用。通过简单的配置和丰富的回调函数，你可以轻松地集成和自定义身份验证功能。希望这篇指南能帮助你快速上手 NextAuth.js。