我遇到了一个问题,NextAuth总是返回到错误页面
它应该按照我下面的代码返回一个用户:***./app/account/login/page. tsx***
"use client";
import React, { useState } from "react";
import { useRouter } from "next/navigation";
import SubmitButton from "@/components/SubmitButton";
import { signIn } from "next-auth/react";
const Login = () => {
const router = useRouter();
const [formSubmitting, setFormSubmitting] = useState(false);
const handleFormSubmit = async (event: any) => {
setFormSubmitting(true);
event.preventDefault();
try {
const res = await signIn("credentials", {
email: "john@gmail.com",
password: "1234",
redirect: false,
});
console.log(res);
}
catch(err) {
console.error(err);
}
};
return (
<section id="login" className="flex items-center justify-center h-[100vh]">
<div className="form-wrapper min-w-[300px] rounded-md">
<h3 className="block mb-6 text-xl font-bold text-gray-900">Login</h3>
<form onSubmit={handleFormSubmit}>
<div className="mb-6">
<label
htmlFor="email"
className="block mb-2 text-sm font-medium text-gray-900"
>
Your email
</label>
<input
type="email"
id="email"
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
placeholder="name@plator.com"
required
/>
</div>
<div className="mb-6">
<label
htmlFor="password"
className="block mb-2 text-sm font-medium text-gray-900"
>
Your password
</label>
<input
type="password"
id="password"
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
required
/>
</div>
<div className="flex items-start mb-6">
<div className="flex items-center h-5">
<input
id="remember"
type="checkbox"
value=""
className="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300"
/>
</div>
<label
htmlFor="remember"
className="ml-2 text-sm font-medium text-gray-900"
>
Remember me
</label>
</div>
<div className="flex items-start mb-6">
<a className="text-sm font-medium text-blue-700" href="#">
Reset my password
</a>
</div>
{/* <button
type="submit"
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full px-5 py-2.5 text-center"
>
Login
</button> */}
<div className="flex items-center">
<SubmitButton
isSubmitting={formSubmitting}
onSubmittingLabel={"Logging In"}
label={"Login"}
/>
</div>
</form>
</div>
</section>
);
};
export default Login;
和***./app/api/auth/[... nextauh]. ts***
import NextAuth, { NextAuthOptions } from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
const authOptions: NextAuthOptions = {
session: {
strategy: "jwt",
},
providers: [
CredentialsProvider({
id: "credentials",
name: "Credentials",
type: "credentials",
credentials: {
username: { type: "text", label: "Username" },
password: { type: "text", label: "Password" },
},
authorize(credentials, req) {
//I'm setting it to always return user
return {
id: "1234",
name: "John Doe",
email: "john@gmail.com",
role: "admin",
};
},
}),
],
pages: {
signIn: "/account/login",
error: "/account/login",
// signOut: '/auth/signout'
},
callbacks: {
async signIn(user) {
console.log("user: " + user);
if (!user) return "/account/login?status=fail";
return "/";
},
},
};
export default NextAuth(authOptions);
我已经关注了这个链接https://next-auth.js.org/configuration/providers/credentials,因为我是Next Auth的初学者,我不确定是什么问题。
1条答案
按热度按时间hrirmatl1#
由于您使用的是Next.js 13应用路由器,因此需要按以下方式配置NextAuth:
https://next-auth.js.org/configuration/initialization#route-handlers-app