使用T3栈+NextAuth CredentialProvider时Prisma环境变量无效问题

核心问题：前端组件直接调用Prisma Client #

你当前把注册逻辑写在前端页面（pages/account/register）里，直接调用Prisma操作数据库——这是错误做法：

• Prisma Client是服务器端专属库，只能在Node.js环境运行，前端浏览器环境无权访问服务器的私有环境变量（比如DATABASE_URL），因此会抛出环境变量无效的错误。
• 而GitHub等第三方登录能正常工作，是因为NextAuth的认证逻辑默认走服务器端的API路由（pages/api/auth/[...nextauth].js），这个环境可以读取到服务器的环境变量。

正确解决方案：将注册逻辑迁移到API路由 #

把注册逻辑移到服务器端的API路由中，前端通过HTTP请求调用该API完成注册。

步骤1：创建注册API路由 #

在pages/api/auth目录下新建register.js（TypeScript则建register.ts），写入以下代码：

import prisma from '../../../prisma/client';
import bcrypt from 'bcrypt';

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ message: 'Method not allowed' });
  }

  try {
    const { name, email, password, validPassword } = req.body;

    // 验证密码一致性
    if (password !== validPassword) {
      return res.status(400).json({ message: 'Passwords do not match' });
    }

    // 检查邮箱是否已存在
    const existingUser = await prisma.user.findUnique({ where: { email } });
    if (existingUser) {
      return res.status(409).json({ message: 'Email already registered' });
    }

    // 哈希密码（必须做，禁止存储明文密码）
    const hashedPassword = await bcrypt.hash(password, 10);

    // 创建用户
    const user = await prisma.user.create({
      data: {
        name,
        email,
        password: hashedPassword,
      },
    });

    // 返回用户信息（注意不要返回密码字段）
    return res.status(201).json({ id: user.id, name: user.name, email: user.email });
  } catch (error) {
    console.error(error);
    return res.status(500).json({ message: 'Internal server error' });
  }
}

注意：需要先安装bcrypt依赖：npm install bcrypt 或 yarn add bcrypt

步骤2：修改前端页面的注册逻辑 #

把原来直接调用Prisma的代码改成调用API：

async function handleRegister(values) {
  try {
    const response = await fetch('/api/auth/register', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(values),
    });

    const data = await response.json();

    if (!response.ok) {
      alert(data.message);
      return null;
    }

    alert('Registration successful!');
    return data;
  } catch (error) {
    console.error(error);
    alert('Registration failed, please try again later');
    return null;
  }
}

额外注意事项 #

1. 环境变量配置：确保.env文件中所有必填变量都正确设置，无拼写错误。Next.js中只有前缀为NEXT_PUBLIC_的变量会暴露给前端，其他变量（比如DATABASE_URL、NEXTAUTH_SECRET）仅服务器端可用，不要随意添加NEXT_PUBLIC_前缀。
2. Prisma Client初始化：确保API路由中导入的Prisma Client路径正确（通常从prisma/client或项目自定义初始化文件导入）。
3. 安全最佳实践：永远不要在前端处理敏感逻辑（如密码哈希、数据库操作），所有涉及数据修改和敏感信息的操作必须放在服务器端API中。

内容的提问来源于stack exchange，提问作者Retrokiller543