How to avoid page load when verifying email with NextAuth

Hi, I'm new to the T3 stack and web dev as a whole, and as the title implies, I'm trying to stay on the same page without reloading it when calling NextAuth's signIn() method with the Email provider. In a settings page, the user can change their e-mail but must verify it by pressing a button. The button handler is calling NextAuth's signIn() as shown below
async function handleVerification(providerId: string) {
await signIn(providerId, { email: user?.email, redirect: false });
setVerifyState("Sent");
}
async function handleVerification(providerId: string) {
await signIn(providerId, { email: user?.email, redirect: false });
setVerifyState("Sent");
}
All I want is for the user to be sent the e-mail that the default Email sign in sends when they click the button, and I thought redirect:false would do the job, but it doesn't. How should I proceed? Thanks in advance
12 Replies
rbatsenko
rbatsenko•2y ago
It works normally for me 🙂 Did you setup the DB adapter?
rbatsenko
rbatsenko•2y ago
rbatsenko
rbatsenko•2y ago
<button
className={styles.buttonPrimary}
onClick={async (e) => {
e.preventDefault();

const response = await signIn("email", {
redirect: false,
});

console.log(response);
}}
>
Sign in
</button>
<button
className={styles.buttonPrimary}
onClick={async (e) => {
e.preventDefault();

const response = await signIn("email", {
redirect: false,
});

console.log(response);
}}
>
Sign in
</button>
pedromcr
pedromcr•2y ago
I did set it up
pedromcr
pedromcr•2y ago
if I try to handle the button directly onClick I get this:
pedromcr
pedromcr•2y ago
But yeah you're right, it works, I get the email and I don't have a page reload... but I don't want to disable TS rules 😅
rbatsenko
rbatsenko•2y ago
You don't need to assign the response I think, just this should work:
await signIn("email", {
redirect: false,
});
await signIn("email", {
redirect: false,
});
Idk what is this promise-returning error, I don't have it 😄
pedromcr
pedromcr•2y ago
even then I get it
rbatsenko
rbatsenko•2y ago
You can make it IIFE or disable the rule
pedromcr
pedromcr•2y ago
I'm on "typescript": "^4.9.5" and "@typescript-eslint/parser": "^5.53.0",
rbatsenko
rbatsenko•2y ago
Stack Overflow
Async function passed as prop into React component causing @typescr...
I have the following asynchronous submitNewPatient function which is throwing @typescript-eslint/no-misused-promises error message from elint. Is it possible to adjust the function such that it rem...
pedromcr
pedromcr•2y ago
ohhh, cool! Been adding void returns everywhere for no reason... thank you very much for helping, appreciate it 🙂
Want results from more Discord servers?
Add your server