NextAuth 是一個適用於 Next.js 的完整身份驗證解決方案，支持 OAuth（如 Google、Facebook、Line 等）和憑證(Credential)登入。可以在幾小時內做出一個包含帳號密碼和第三方登入的機制，理論上會比自己做一個 OAuth 實作來得簡單許多。

為了讓小寶成長日記可以使用 Gmail 和 Line 登入，也可以使用帳號密碼登入，我用了大概 6-8 小時去實作 NextAuth 並 deploy 成功。

實作流程

1. 安裝 NextAuth

npm install next-auth

2. 設定 .env.local

在專案的根目錄下新增 .env.local 檔案，並填入各個第三方平台的 clientId 和 clientSecret：

# OAuth Providers
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
FACEBOOK_CLIENT_ID=your-facebook-client-id
FACEBOOK_CLIENT_SECRET=your-facebook-client-secret
LINE_CLIENT_ID=your-line-client-id
LINE_CLIENT_SECRET=your-line-client-secret

# NextAuth Config
NEXTAUTH_SECRET=your-nextauth-secret

3. 建立 API 路由

在 pages/api/auth/[...nextauth].ts 中設定 NextAuth：

import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';
import FacebookProvider from 'next-auth/providers/facebook';
import LineProvider from 'next-auth/providers/line';
import CredentialsProvider from 'next-auth/providers/credentials';
import { MongoDBAdapter } from '@auth/mongodb-adapter';
import bcrypt from 'bcrypt';
import clientPromise from '@/utils/mongodb';
import { UserModel } from '@/types/users';

export default NextAuth({
  // Adapter Configuration
  adapter: MongoDBAdapter(clientPromise),

  // Provider Setup
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
    FacebookProvider({
      clientId: process.env.FACEBOOK_CLIENT_ID!,
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET!,
    }),
    LineProvider({
      clientId: process.env.LINE_CLIENT_ID!,
      clientSecret: process.env.LINE_CLIENT_SECRET!,
    }),
    CredentialsProvider({
      name: 'Credentials',
      credentials: {
        username: { label: 'Username', type: 'text' },
        password: { label: 'Password', type: 'password' },
      },
      async authorize(credentials) {
        const user = await UserModel.findOne({
          username: credentials?.username,
        });
        if (user && bcrypt.compare(credentials?.password, user.password)) {
          return { id: user._id.toString(), name: user.username };
        }
        throw new Error('Invalid credentials');
      },
    }),
  ],

  // Callback Functions
  callbacks: {
    async signIn({ user, account }) {
      if (account?.provider !== 'credentials') {
        const existingUser = await UserModel.findOne({ email: user.email });
        if (!existingUser) {
          await new UserModel({
            email: user.email,
            providers: [account.provider],
          }).save();
        }
      }
      return true;
    },
    async jwt({ token, user }) {
      if (user) token.id = user.id;
      return token;
    },
    async session({ session, token }) {
      session.user.id = token.id;
      return session;
    },
  },

  // Security Configuration
  secret: process.env.NEXTAUTH_SECRET,
});

常遇到的問題點 & 解決方式

1. Invalid redirect_uri value

原因：

未在第三方平台（如 Google、Line）中設定正確的重定向 URI

解決方法：

確保所有環境的 URI（包含正式和測試）都已在第三方平台的「應用程式設定」中註冊
常見的 URI 格式：
- 開發環境：http://localhost:3000/api/auth/callback/[provider]
- 正式環境：https://yourdomain.com/api/auth/callback/[provider]

2. 無法驗證憑證登入

原因：

密碼比對失敗或使用者不存在

解決方法：

確認資料庫中的使用者密碼是否經過 bcrypt 加密
確保比對過程正確無誤
檢查資料庫連線狀態

3. OAuth 連結的帳號重複問題

原因：

不同 OAuth 提供者可能使用相同的 Email 地址

解決方法：

在 signIn 回調中檢查現有帳戶
將提供者名稱新增到使用者資料的 providers 欄位
考慮實作帳號合併機制

測試流程

1. 單元測試

測試重點：

各個回調函數的正確性：
- authorize
- signIn
- jwt
- session

2. 集成測試

需要驗證：

使用者登入的完整流程
- 第三方登入流程
- 憑證登入流程
各環境的正確性
- 開發環境
- 預覽環境
- 正式環境

3. 手動測試

檢查項目：

所有提供者的登入按鈕功能
使用 console.log 追蹤排查錯誤
登入後的 session 狀態
登出功能的正確性

NextAuth簡易實作流程