跳到主要内容

Next.js NextAuth.js

在现代 Web 应用程序中，身份验证和授权是至关重要的功能。Next.js 是一个流行的 React 框架，而 NextAuth.js 是一个专为 Next.js 设计的身份验证库，它简化了身份验证流程的实现。本文将带你从零开始学习如何在 Next.js 项目中使用 NextAuth.js 实现身份验证与授权。

什么是 NextAuth.js？​

NextAuth.js 是一个开源的 Next.js 身份验证库，支持多种身份验证提供商（如 Google、GitHub、Facebook 等）以及自定义数据库。它提供了简单易用的 API，帮助开发者快速集成身份验证功能。

主要功能​

  • 支持多种身份验证提供商（OAuth、Email、Credentials 等）。
  • 内置会话管理。
  • 支持自定义数据库。
  • 提供高级配置选项，如自定义回调、JWT 加密等。

安装与配置​

1. 安装 NextAuth.js​

首先，在你的 Next.js 项目中安装 NextAuth.js：

npm install next-auth

2. 创建 API 路由​

NextAuth.js 需要一个 API 路由来处理身份验证请求。在 pages/api/auth/[...nextauth].js 中创建以下文件：

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

export default NextAuth({
  providers: [
    Providers.GitHub({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),
  ],
});

3. 配置环境变量​

在 .env.local 文件中添加 GitHub 的客户端 ID 和密钥：

GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret

4. 添加登录按钮​

在你的页面中添加一个登录按钮，用户点击后将跳转到 NextAuth.js 的登录页面：

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

export default function Home() {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <button onClick={() => signIn("github")}>Sign in with GitHub</button>
    </div>
  );
}

会话管理​

NextAuth.js 提供了内置的会话管理功能。你可以使用 useSession 钩子来获取当前用户的会话信息：

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

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

  if (loading) return <p>Loading...</p>;
  if (!session) return <p>You are not signed in</p>;

  return (
    <div>
      <h1>Welcome, {session.user.name}</h1>
      <button onClick={() => signOut()}>Sign out</button>
    </div>
  );
}

实际应用场景​

1. 保护路由​

你可以使用 Next.js 的 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 (
    <div>
      <h1>Protected Page</h1>
      <p>Welcome, {session.user.name}</p>
    </div>
  );
}

2. 自定义登录页面​

你可以通过配置 NextAuth.js 来使用自定义登录页面：

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

export default NextAuth({
  providers: [
    Providers.GitHub({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),
  ],
  pages: {
    signIn: "/auth/signin",
  },
});

然后在 pages/auth/signin.js 中创建自定义登录页面。

总结​

NextAuth.js 是一个功能强大且易于使用的身份验证库，特别适合 Next.js 项目。通过本文的学习，你应该已经掌握了如何在 Next.js 中使用 NextAuth.js 实现身份验证与授权的基本方法。

附加资源​

练习​

  1. 尝试集成另一个身份验证提供商（如 Google 或 Facebook）。
  2. 创建一个自定义登录页面，并添加额外的表单字段。
  3. 使用 NextAuth.js 的 JWT 功能实现自定义令牌加密。

通过实践这些练习，你将更深入地理解 NextAuth.js 的工作原理，并能够在实际项目中灵活应用。