NextAuth.js 是 Next.js 的認(rèn)證庫，支持 OAuth、郵件密碼、JWT 等方式；2. 安裝后在 pages/api/auth/[...nextauth].js 配置提供者和密鑰；3. 通過 SessionProvider 包裹應(yīng)用并使用 useSession、signIn、signOut 管理狀態(tài)；4. 用 getSession 或 getServerSession 保護(hù)頁面和 API 路由；5. 可添加 Credentials 提供者實(shí)現(xiàn)郵箱密碼登錄并配合 JWT 策略；6. 可自定義登錄頁面并通過回調(diào)擴(kuò)展用戶信息；NextAuth.js 憑借其靈活性和對 Serverless 的支持，成為 Next.js 應(yīng)用中最流行的認(rèn)證解決方案，適合快速集成多種登錄方式并實(shí)現(xiàn)安全的會話管理。

在 Next.js 中實(shí)現(xiàn)用戶認(rèn)證，NextAuth.js 是目前最流行、最靈活的解決方案之一。它不僅支持多種認(rèn)證方式（如 OAuth、郵件密碼、JWT 等），還兼容 Serverless 環(huán)境，非常適合現(xiàn)代全棧應(yīng)用。

下面帶你一步步理解并實(shí)現(xiàn) NextAuth.js 的基礎(chǔ)認(rèn)證流程。

1. 什么是 NextAuth.js？

NextAuth.js 是一個為 Next.js 量身打造的開源認(rèn)證庫，支持：

• OAuth 登錄（Google、GitHub、Facebook 等）
• 郵箱/密碼登錄（通過郵件驗(yàn)證）
• JWT 和 Session 管理
• 自定義數(shù)據(jù)庫適配（如 MongoDB、PostgreSQL）
• 無需后端服務(wù)器，天然支持 API Routes

它通過 API 路由處理認(rèn)證邏輯，前端通過 useSession() 等 Hook 獲取用戶狀態(tài)。

2. 安裝與初始化

首先安裝依賴：

npm install next-auth

然后在 pages/api/auth/[...nextauth].js 創(chuàng)建認(rèn)證 API 路由：

import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
  pages: {
    signIn: '/auth/signin', // 自定義登錄頁（可選）
  },
});

?? 注意：你需要在 .env.local 中配置環(huán)境變量：

GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
NEXTAUTH_SECRET=your-very-secret-string-here

NEXTAUTH_SECRET 用于加密 JWT 和 session，建議用 openssl rand -base64 32 生成。

3. 前端調(diào)用登錄與獲取用戶

使用 SessionProvider 包裹應(yīng)用（通常在 _app.js）：

// pages/_app.js
import { SessionProvider } from 'next-auth/react';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return (
    <SessionProvider session={pageProps.session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}

export default MyApp;

然后在頁面中使用：

// pages/index.js
import { useSession, signIn, signOut } from 'next-auth/react';

export default function Home() {
  const { data: session } = useSession();

  if (session) {
    return (
      <>
        <p>Welcome, {session.user.email}</p>
        <button onClick={() => signOut()}>Sign out</button>
      </>
    );
  }

  return (
    <>
      <p>You are not signed in.</p>
      <button onClick={() => signIn('google')}>Sign in with Google</button>
    </>
  );
}

4. 保護(hù)頁面或 API 路由

保護(hù)頁面（服務(wù)端渲染）

使用 getServerSideProps 檢查會話：

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

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

  return {
    props: { session },
  };
}

保護(hù) API 路由

// pages/api/protected.js
import { getServerSession } from 'next-auth';
import { authOptions } from './auth/[...nextauth]';

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

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

  res.json({ message: 'Hello, you are logged in!' });
}

5. 添加更多認(rèn)證方式（如 Credentials）

你可以添加郵箱/密碼登錄（需后端驗(yàn)證）：

import CredentialsProvider from 'next-auth/providers/credentials';

export default NextAuth({
  providers: [
    GoogleProvider({ ... }),
    CredentialsProvider({
      name: 'Credentials',
      credentials: {
        email: { label: 'Email', type: 'email' },
        password: { label: 'Password', type: 'password' }
      },
      async authorize(credentials) {
        // 這里模擬驗(yàn)證邏輯（實(shí)際應(yīng)查數(shù)據(jù)庫）
        const user = { id: 1, name: 'John', email: credentials.email };

        if (user) {
          return user; // 返回用戶對象表示登錄成功
        } else {
          return null; // 登錄失敗
        }
      }
    })
  ],
  session: {
    strategy: 'jwt', // 推薦使用 JWT
  },
  callbacks: {
    async jwt({ token, user }) {
      if (user) token.id = user.id;
      return token;
    },
    async session({ session, token }) {
      if (session.user) session.user.id = token.id;
      return session;
    }
  }
});

?? 注意：Credentials 方式必須使用 JWT 會話策略，且不會持久化 session 到數(shù)據(jù)庫。

6. 自定義登錄頁面（可選）

創(chuàng)建 pages/auth/signin.js：

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

export default function SignIn() {
  return (
    <div>
      <h1>Sign In</h1>
      <button onClick={() => signIn('google')}>Sign in with Google</button>
      <button onClick={() => signIn('credentials', { email: 'test@test.com', password: '123' })}>
        Sign in with Credentials
      </button>
    </div>
  );
}

小結(jié)

NextAuth.js 讓 Next.js 的認(rèn)證變得簡單高效：

• 支持 OAuth、郵件、自定義登錄
• 提供前端 Hook 和服務(wù)端驗(yàn)證工具
• 易于集成數(shù)據(jù)庫（通過 Prisma 或 Adapter）
• 可擴(kuò)展性強(qiáng)，適合中小型項(xiàng)目快速上線

只要配置好環(huán)境變量和路由，幾分鐘就能跑通 Google 登錄。如果需要更復(fù)雜邏輯（如角色權(quán)限、數(shù)據(jù)庫用戶表），可以結(jié)合 Prisma 和自定義 callbacks 實(shí)現(xiàn)。

基本上就這些，不復(fù)雜但容易忽略細(xì)節(jié)。

以上是Next.js中的nextAuth.js的身份驗(yàn)證的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！