如何解决next-auth 自定义登录表单不要将用户名和密码传递给 [...nextauth].js
我想使用自定义登录页面进行下一次身份验证
问题是我无法将数据从登录页面传递到 [...nextauth].js 。
signIn('credentials',{ redirect: false,phone: phone,password: password })
可以访问 [..nextauth].js 中的提供者,但是
Providers.Credentials({...
未运行以从 API 获取令牌。
1.[...nextauth].js
import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'
import axios from 'axios'
import { useRouter } from 'next/router'
const providers = [
Providers.Credentials({
id: 'credentials',name: 'credentials',authorize: async (credentials) => {
const user = await axios.post('MyAPI',{
phone: credentials.phone,password: credentials.password
},)
}
})
]
const callbacks = {
// Getting the JWT token from API response
async session(session,user) {
session.accessToken = user.token
return session
}
}
const options = {
providers,callbacks
}
export default (req,res) => NextAuth(req,res,options)
2.signin.js
import { useState } from "react";
import { signIn,csrfToken } from 'next-auth/client';
export default function Login() {
const [phone,setPhone] = useState("");
const [password,setPassword] = useState("");
const handleSubmit = async (e) => {
// e.preventDefault();
await signIn('credentials',password: password })
};
return (
<form onSubmit={handleSubmit}>
<div>
<label>Phone</label>
<input
id="username"
name="username"
type="text"
placeholder="Phone"
onChange={(e) => setPhone(e.target.value)}
value={phone}
/>
</div>
<div>
<label>Password</label>
<input
id="password"
name="password"
type="password"
placeholder="Password"
onChange={(e) => setPassword(e.target.value)}
value={password}
/>
</div>
<button type="submit">
Login
</button>
</form>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。