gpt4 book ai didi

How to set session maxAge dynamically in nextjs using next-auth(如何使用Next-auth在nextjs中动态设置会话MaxAge)

转载 作者:bug小助手 更新时间:2023-10-28 13:33:44 26 4
gpt4 key购买 nike



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请求的方法:



  1. 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;


  1. 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

对我来说,这是错误的,但谢谢你

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com