Проблема со страницей входа. Next.Js 13 проект чат-приложения
У меня проблема со страницей входа в мой проект. Я использую NextAuth, Prisma, TypeScript и Next.Js. У меня есть эта ошибка:
No value exists in scope for the shorthand property 'email'. Either declare one or provide an initializer.ts(18004)
Я создал эту страницу входа в каталог app/login
'use client'
import router, {useRouter} from "next/router";
import Link from 'next/link'
import React, { MouseEventHandler, useState } from 'react'
import styles from '../styles/loginpage.module.scss'
import { signIn } from "next-auth/react";
interface LoginProps {
onClick: MouseEventHandler<HTMLButtonElement>
onChange: React.ChangeEventHandler<HTMLInputElement>
}
export default function LoginComponent({}: LoginProps) {
const [user, setUser] = useState("")
const [password, setPassword] = useState("")
const [loginError, setLoginError] = useState('');
const handleLogin = (e: React.SyntheticEvent) => {
e.preventDefault();
e.stopPropagation();
const data = signIn("credentials", {email, password, callbackUrl: `${window.location.origin}/dashboard`, redirect: false }
).then(function(result: any){
if (result.error !== null)
{
if (result.status === 401)
{
setLoginError("Your username/password combination was incorrect. Please try again");
}
else
{
setLoginError(result.error);
}
}
else
{
router.push(result.url);
}
});
}
return (
<div className= {styles.registerBody}>
<div className={styles.loginDiv} >
<h1 className={styles.banner}>Login</h1>
<h4 className={styles.description}>Please enter your Login and your Password </h4>
<form onSubmit={handleLogin}>
{loginError}
<input className={styles.formInput} value={email} onChange={(event) => setUser(event.target.value)} type="text" placeholder='Email'/>
<input value={password} className={styles.formInput} onChange={(event) => setPassword(event.target.value)} type="password" placeholder='Password'/>
<button type='submit' className={styles.button} >Login</button>
</form>
<p className={styles.question}>Not sign yet? <Link href={"../register"}>Register</Link> now</p>
</div>
</div>
)
}
А это файл [...nextAuth.js], который я создал в pages/api/directory. Я объявил свойство "электронная почта" в этом файле.
import NextAuth from 'next-auth'
import { PrismaClient } from '@prisma/client'
import CredentialsProvider from "next-auth/providers/credentials";
import { NextApiRequest, NextApiResponse } from 'next/types';
import { AuthOptions } from 'next-auth/core/types';
let userAccount:any = null;
const prisma = new PrismaClient();
const bcrypt = require('bcrypt');
const confirmPasswordHash = (plainPassword: any, hashedPassword: string) => {
return new Promise(resolve => {
bcrypt.compare(plainPassword, hashedPassword, function(err: any, res: unknown) {
resolve(res);
});
})
}
const configuration = {
cookie: {
secure: process.env.NODE_ENV && process.env.NODE_ENV === 'production',
},
session: {
jwt: true,
maxAge: 30 * 24 * 60 * 60
},
providers: [
CredentialsProvider({
id: "credentials",
name: "credentials",
credentials: {},
async authorize(credentials : any) {
try
{
const user = await prisma.users.findFirst({
where: {
email: credentials.email
}
});
if (user !== null)
{
//Compare the hash
const res = await confirmPasswordHash(credentials.password, user.password);
if (res === true)
{
userAccount = {
userId: user.userId,
firstName: user.firstName,
lastName: user.lastName,
email: user.email,
isActive: user.isActive
};
return userAccount;
}
else
{
console.log("Hash not matched logging in");
return null;
}
}
else {
return null;
}
}
catch (err)
{
console.log("Authorize error:", err);
}
}
}),
],
callbacks: {
async signIn(user: { user: any; userId: any; isActive: string; }, account: any, profile: any) {
try
{
//the user object is wrapped in another user object so extract it
user = user.user;
console.log("Sign in callback", user);
console.log("User id: ", user.userId)
if (typeof user.userId !== typeof undefined)
{
if (user.isActive === '1')
{
console.log("User is active");
return user;
}
else
{
console.log("User is not active")
return false;
}
}
else
{
console.log("User id was undefined")
return false;
}
}
catch (err)
{
console.error("Signin callback error:", err);
}
},
async register(firstName: string, lastName: string, email: string, password: string) {
try
{
await prisma.users.create({
data: {
firstName: firstName,
lastName: lastName,
email: email,
password: password
}
})
return true;
}
catch (err)
{
console.error("Failed to register user. Error", err);
return false;
}
},
async session(session: { user: { userId: any; name?: string; email?: any; }; token: any; }, token: { user: any; }) {
if (userAccount !== null)
{
//session.user = userAccount;
session.user = {
userId: userAccount.userId,
name: `${userAccount.firstName} ${userAccount.lastName}`,
email: userAccount.email
}
}
else if (typeof token.user !== typeof undefined && (typeof session.user === typeof undefined
|| (typeof session.user !== typeof undefined && typeof session.user.userId === typeof undefined)))
{
session.user = token.user;
}
else if (typeof token !== typeof undefined)
{
session.token = token;
}
return session;
},
async jwt(token: { user: any; }, user: any, account: any, profile: any, isNewUser: any) {
console.log("JWT callback. Got User: ", user);
if (typeof user !== typeof undefined)
{
token.user = user;
}
return token;
}
}
}
export default (req: NextApiRequest, res: NextApiResponse, configuration: AuthOptions) => NextAuth(req, res, configuration)
Я проверил свою схему prisma и базу данных mysql и создал свойство электронной почты. Что я должен проверить, чтобы избавиться от этой ошибки. Может я что-то не так задекларировал?