I am using next-auth in nextjs 13, I want to implement the remember me during the signin.
so i use next-auth signIn function to pass email and password.
我在nextjs13中使用了Next-auth,我想在登录时实现记住我。所以我使用Next-auth登录功能来传递电子邮件和密码。
now when I want set maxAge of the session in ...nextauth.ts, I can not pass/receive the rememberMe variable in nextauth.ts.
现在当我想设置会话的maxAge时. nextauth.ts,我无法在nextauth. ts中传递/接收rememberMe变量。
code: //nextauth.ts
代码://nextauth.ts
const handler = async (req: NextApiRequest, res: NextApiResponse) =>{
return await NextAuth(req, res, {
session: {
strategy: 'jwt',
// maxAge: req.body?.rememberMe ? 15 * 24 * 60 * 60 : 20
},
})
}
when i submit the sign in form, and log the req in nextuath.ts file, the method is get. so how i can access the body i sent from form?
当我提交sign in表单,并在nextuath.ts文件中记录请求时,方法是get。我怎么能访问我从表单发送的身体?
更多回答
优秀答案推荐
When using Next.js with NextAuth.js, you have the ability to adjust the session's maxAge
based on the rememberMe
variable sent from the sign-in form. To do this, make sure that the form submission method is set to POST in order to include the form data in the request body. If the method appears as GET, it could be a result of incorrect form configuration.
当将Next.js与NextAuth.js一起使用时,您可以根据从登录表单发送的rememberMe变量调整会话的maxAge。为此,请确保表单提交方法设置为POST,以便在请求主体中包含表单数据。如果该方法显示为GET,则可能是表单配置不正确的结果。
Here's how you can set up your sign-in form to correctly submit a POST request:
以下是如何设置登录表单以正确提交POST请求的方法:
- In your sign-in form component, make sure to use the
POST
method in your form tag and include an input field for the rememberMe
option. For example:
// SigninForm.js
import { useState } from 'react';
const SigninForm = () => {
const [rememberMe, setRememberMe] = useState(false);
const handleSubmit = async (e) => {
e.preventDefault();
// Include 'rememberMe' in the form data when submitting.
const formData = new FormData();
formData.append('email', /* email value */);
formData.append('password', /* password value */);
formData.append('rememberMe', rememberMe);
// Use fetch or a library like axios to send a POST request to your authentication endpoint.
const response = await fetch('/api/auth/signin', {
method: 'POST',
body: formData,
});
// Handle the response from the server.
};
return (
<form onSubmit={handleSubmit} method="post">
{/* Add your email and password input fields */}
<label>
Email:
<input type="email" name="email" required />
</label>
<label>
Password:
<input type="password" name="password" required />
</label>
{/* Add the rememberMe checkbox */}
<label>
Remember me:
<input
type="checkbox"
name="rememberMe"
checked={rememberMe}
onChange={() => setRememberMe(!rememberMe)}
/>
</label>
<button type="submit">Sign In</button>
</form>
);
};
export default SigninForm;
- In your
nextauth.ts
file, you can access the rememberMe
value from the request body as follows:
// nextauth.ts
const handler = async (req: NextApiRequest, res: NextApiResponse) => {
const { body } = req;
const rememberMe = body.rememberMe === 'true'; // Convert to a boolean
return await NextAuth(req, res, {
session: {
strategy: 'jwt',
maxAge: rememberMe ? 15 * 24 * 60 * 60 : 20, // Set maxAge based on 'rememberMe'
},
});
};
In order to dynamically set the maxAge
of the session, the code converts the rememberMe
value from the request body into a boolean. To ensure that the sign-in form sends a POST request with the rememberMe
option correctly included in the form data, it is important. This will allow for access to it in the nextauth.ts
file and proper setting of the maxAge
.
为了动态设置会话的MaxAge,代码将请求正文中的RememberMe值转换为布尔值。要确保登录表单在表单数据中正确包含RememberMe选项来发送POST请求,这一点很重要。这将允许在nextauth.ts文件中访问它,并正确设置MaxAge。
All the info from here: THE DOX I mean docs. 😁
所有的信息都来自这里:DOX我是说医生。😁
the TUTORIAL
本教程
My answer is bad 😓, No problem see this StackOverflow question, your question is fairly similar to their question. This post is very inspired by this answer only!
我的答案是不好的😓,没有问题请看这个堆栈溢出问题,你的问题和他们的问题非常相似。这个帖子仅仅是受到了这个答案的启发!
更多回答
Thank you, but im not directly sending request to my auth endpoint, instead im using the signIn function of next-auth, passing the string credentials, and the json obj. I send the request the auth endpoint from ...nextauth.ts
谢谢您,但是我并没有直接向我的auth端点发送请求,而是使用了Next-auth的signin函数,传递字符串Credentials和json obj。我从...nextauth.ts向身份验证终结点发送请求
it is correct or wrong ans?
这是正确还是错误的答案?
can you check the stackoverflow question
您能检查堆栈溢出问题吗
for my case, its wrong, but thank you
对我来说,这是错误的,但谢谢你
我是一名优秀的程序员,十分优秀!