Theo's Typesafe Cult•15mo ago

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•15mo ago

It works normally for me 🙂 Did you setup the DB adapter?

rbatsenko•15mo ago

<button
  className={styles.buttonPrimary}
  onClick={async (e) => {
    e.preventDefault();

    const response = await signIn("email", {
      redirect: false,
      email: "example@test.com",
    });

    console.log(response);
   }}
>
  Sign in
</button>

<button
  className={styles.buttonPrimary}
  onClick={async (e) => {
    e.preventDefault();

    const response = await signIn("email", {
      redirect: false,
      email: "example@test.com",
    });

    console.log(response);
   }}
>
  Sign in
</button>

pedromcr•15mo ago

I did set it up

pedromcr•15mo ago

if I try to handle the button directly onClick I get this:

pedromcr•15mo 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•15mo ago

You don't need to assign the response I think, just this should work:

await signIn("email", {
  redirect: false,
  email: "example@test.com",
});

await signIn("email", {
  redirect: false,
  email: "example@test.com",
});

Idk what is this promise-returning error, I don't have it 😄

pedromcr•15mo ago

even then I get it

rbatsenko•15mo ago

You can make it IIFE or disable the rule

pedromcr•15mo ago

I'm on "typescript": "^4.9.5" and "@typescript-eslint/parser": "^5.53.0",

rbatsenko•15mo ago

https://stackoverflow.com/questions/72149756/async-function-passed-as-prop-into-react-component-causing-typescript-eslint-no

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•15mo ago

ohhh, cool! Been adding void returns everywhere for no reason... thank you very much for helping, appreciate it 🙂

Gaming

Programming

How to avoid page load when verifying email with NextAuth