自定义登录表单错误:使用https://localhost:3000/api/auth/signin?csrf=true重定向到CredentialsProvider
自定义登录表单错误:使用https://localhost:3000/api/auth/signin?csrf=true重定向到CredentialsProvider
提问于 2022-04-04 07:03:40
描述:在我的nextjs站点中使用next-auth实现自定义登录表单时，我面临的是。它继续重定向到"https://localhost:3000/api/auth/signin?csrf=true“
在"pages/api/auth/“文件夹中用"...nextauth.js”文件编写的服务器端代码。
import NextAuth from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';
const providers = [
CredentialsProvider({
id: 'credentials',
name: 'credentials',
authorize: async (credentials) => {
console.log("AUTHORIZING...",credentials,req);
const res = await fetch(process.env.apiURL+"api/users/authenticate", {
method: 'POST',
body: JSON.stringify(credentials),
headers: { "Content-Type": "application/json" }
});
const user = await res.json();
if (res.ok && user) {
return user;
}
return null;
}
}),
];
const callbacks = {
async signIn({ user, account, profile, email, credentials }) {
console.log("IN CALLBACK HERE!!!");
const isAllowedToSignIn = true
if (isAllowedToSignIn) {
return true
} else {
return false
}
},
async redirect({ url, baseUrl }) {
return baseUrl;
},
async session(session, token) {
console.log("IN THE CALLBACK SESSION NOW");
session.accessToken = token.accessToken
return session
}
}
const options = {
providers,
callbacks,
secret: process.env.JWT_SECRET,
pages: {
signIn: '/my-account',
signUp: '/signup',
error: '/my-account'
},
debug: true
}
export default (req, res) => NextAuth(req, res, options);我的自定义登录表单的提交按钮操作：
const res = await signIn('credentials', { redirect: false, username: user.username, passw: user.passw, callbackUrl: `${window.location.origin}` });
console.log(res);
if (res?.error) {
console.error(res.error);
}
if (res.url) router.push(res.url);环境变量
NEXTAUTH_URL=https://localhost:3000/api/auth
NEXTAUTH_SECRET=PETSFINEST错误是凭据提供程序的授权函数根本没有被调用。只要我从我的自定义登录表单中按下签署按钮，它就会简单地重定向到"https://localhost:3000/api/auth/signin?csrf=true“URL，就这样。
请帮帮大家..。我在这里做错什么了？在任何地方都没有其他的细节，我已经跟踪了下一个网站上提供的文档。
回答 3
Stack Overflow用户
发布于 2022-09-26 18:51:58
我遇到了同样的问题。在我的头撞墙多年后，它最终被使用https是因为我运行它与Vercel.
因此，我没有使用vercel dev，而是将其转换为npx next dev，并为我解决了这个问题。
Stack Overflow用户
发布于 2022-04-07 01:15:39
嘿，尝试更改为http上的NEXTAUTH_URL env变量，因此更改如下：
NEXTAUTH_URL=https://localhost:3000/api/auth转到
NEXTAUTH_URL=http://localhost:3000/api/authStack Overflow用户
发布于 2022-09-02 00:05:57
打开浏览器，检查工具并检查网络选项卡。注意提交时的有效负载。您应该让csrfToken显示一个值。检查有效载荷中是否存在电子邮件、密码和csrf。这帮助我解决了我的问题，类似于这在实现无密码电子邮件形式。这是我的风俗标志..。
import React from 'react'
import {getProviders, signIn} from 'next-auth/react'
import { getCsrfToken } from "next-auth/react"
import styles from '../../styles/signin.module.css'
import Logo from '../../components/Logo'
import Link from 'next/link'
import { GoogleLogin } from '../../components/GoogleLogin'
export default function SignIn ({ csrfToken, providers }) {
console.log(providers.google.signinUrl);
return (
<div className={styles.content}>
<div className={styles.cardWrapper}>
<Logo className={styles.logo}/>
<div className={styles.cardContent}>
<form method="post" action="/api/auth/signin/email">
<input name="csrfToken" type="hidden" defaultValue={csrfToken} />
<input type="email" id="email" name="email" placeholder='Email..' />
<button className={styles.primaryBtn} type="submit">Sign in with Email</button>
</form>
<p className={styles.seperator}> Or </p>
<form method="post" action="/api/auth/signin/google">
<input name="csrfToken" type="hidden" defaultValue={csrfToken} />
<button className={styles.primaryBtn} type="submit">Sign in with Google</button>
</form>
</div>
</div>
</div>
)
}
export async function getServerSideProps(context) {
const csrfToken = await getCsrfToken(context)
const providers = await getProviders(context)
return {
props: { csrfToken, providers },
}
}我认为，只要您按照...nextauth.js中的文档正确设置了凭证，就可以对凭证执行类似的操作。
上面的代码可以放在单独的组件中，以“反应”代码。
希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71733194
复制相关文章
相似问题
腾讯云开发者
