typescript - 使用 Prisma + Next-Auth 通过 EmailProvider 登录时获取 'CreateVerificationTokenError'

Question

在使用 next-auth 和 prsima 适配器时，我尝试使用电子邮件提供商。我在“标题”中有一个标志，当按下它时，它会很好地打开/signin 页面。通过电子邮件提供商登录时，它不起作用并出现如下错误消息:

[next-auth][error][SIGNIN_EMAIL_ERROR] 
https://next-auth.js.org/errors#signin_email_error Cannot read properties of undefined (reading 'create') {
  error: TypeError: Cannot read properties of undefined (reading 'create')
      at createVerificationToken (C:\Users\Simon Palmer\Documents\Programming\ideally\frontend\node_modules\@next-auth\prisma-adapter\dist\index.js:37:65)
      at _callee2$ (C:\Users\Simon Palmer\Documents\Programming\ideally\frontend\node_modules\next-auth\core\errors.js:365:29)
      at tryCatch (C:\Users\Simon Palmer\Documents\Programming\ideally\frontend\node_modules\@babel\runtime\helpers\regeneratorRuntime.js:44:17)    
      at Generator.<anonymous> (C:\Users\Simon Palmer\Documents\Programming\ideally\frontend\node_modules\@babel\runtime\helpers\regeneratorRuntime.js:125:22)
      at Generator.next (C:\Users\Simon Palmer\Documents\Programming\ideally\frontend\node_modules\@babel\runtime\helpers\regeneratorRuntime.js:69:21)
      at asyncGeneratorStep (C:\Users\Simon Palmer\Documents\Programming\ideally\frontend\node_modules\@babel\runtime\helpers\asyncToGenerator.js:3:24)
      at _next (C:\Users\Simon Palmer\Documents\Programming\ideally\frontend\node_modules\@babel\runtime\helpers\asyncToGenerator.js:22:9)
      at C:\Users\Simon Palmer\Documents\Programming\ideally\frontend\node_modules\@babel\runtime\helpers\asyncToGenerator.js:27:7
      at new Promise (<anonymous>)
      at Object.createVerificationToken (C:\Users\Simon Palmer\Documents\Programming\ideally\frontend\node_modules\@babel\runtime\helpers\asyncToGenerator.js:19:12) {
    name: 'CreateVerificationTokenError',
    code: undefined
  },
  providerId: 'email',
  message: "Cannot read properties of undefined (reading 'create')"
}

我的页面/api/auth/[...nextauth].ts

import { NextApiHandler } from 'next';
import NextAuth from 'next-auth';
import { PrismaAdapter } from '@next-auth/prisma-adapter';
import EmailProvider from "next-auth/providers/email";
import LinkedInProvider from 'next-auth/providers/linkedin';
import { prisma } from '../../../common/prisma/lib/prisma';

const authHandler: NextApiHandler = (req, res) => NextAuth(req, res, options);
export default authHandler;

const options = {
  providers: [
    LinkedInProvider({
      clientId: process.env.LINKEDIN_ID!,
      clientSecret: process.env.LINKEDIN_SECRET!,
    }),
    EmailProvider({
      server: process.env.EMAIL_SERVER,
      from: process.env.EMAIL_FROM,
    }),
  ],
  adapter: PrismaAdapter(prisma),
  secret: process.env.SECRET,
};

简单的登录按钮

// Header.tsx
import React from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { signIn, signOut, useSession } from 'next-auth/react';

const Header: React.FC = () => {
    const { data: session } = useSession()
    if (session) {
        console.log(session)
      return (
        <>
          Signed in as {session.user.email} <br />
          <button onClick={() => signOut()}>Sign out</button>
        </>
      )
    }
    return (
      <>
        Not signed in <br />
        <button onClick={() => signIn()}>Sign in</button>
      </>
    )
};

export default Header;

Prisma 架构

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

// schema.prisma
model Account {
  id                 String  @id @default(cuid())
  userId             String
  type               String
  provider           String
  providerAccountId  String
  refresh_token      String?  @db.Text
  access_token       String?  @db.Text
  expires_at         Int?
  token_type         String?
  scope              String?
  id_token           String?  @db.Text
  session_state      String?

  user User @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@unique([provider, providerAccountId])
}

model Session {
  id           String   @id @default(cuid())
  sessionToken String   @unique
  userId       String
  expires      DateTime
  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
}

model User {
  id            String    @id @default(cuid())
  name          String?
  email         String?   @unique
  emailVerified DateTime? @map("email_verified")
  image         String?
  createdAt     DateTime?
  updatedAt     DateTime?
  social        Json?
  accounts      Account[]
  sessions      Session[]
}

model VerificationToken {
  identifier String
  token      String   @unique
  expires    DateTime

  @@unique([identifier, token])
}

.env 大致如下所示

NEXTAUTH_URL="http://localhost:3000/"

# Email OAuth
EMAIL_SERVER="smtp://username:<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d0a0b1a3a3a7bfa2b490a3bda4a0feb7bdb1b9bcfeb3bfbd" rel="noreferrer noopener nofollow">[email protected]</a>:465"
EMAIL_FROM="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fa949b979fba9d979b9396d4999597" rel="noreferrer noopener nofollow">[email protected]</a>"

linkedin 提供程序也不起作用，但我需要首先修复此问题。谢谢!

Answer 1

我很长一段时间都遇到和你一样的错误，不知道如何修复它，直到我意识到我的 prisma VerificationToken 模型由于某种原因被命名为“VerificationRequest”。

导致错误的原因是 prisma 客户端无法调用模型上的“创建”函数，因为在我的情况下它不存在。

在您的情况下，我将确保数据库和 prisma 客户端同步并生成 prisma 客户端。