Theo's Typesafe Cult•2y 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•2y ago

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

rbatsenko•2y ago

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

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

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

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

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

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

pedromcrOP•2y ago

I did set it up

pedromcrOP•2y ago

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

pedromcrOP•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•2y ago

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

await signIn("email", {
  redirect: false,
  email: "[email protected]",
});

await signIn("email", {
  redirect: false,
  email: "[email protected]",
});

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

pedromcrOP•2y ago

even then I get it

rbatsenko•2y ago

You can make it IIFE or disable the rule

pedromcrOP•2y ago

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

rbatsenko•2y 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...

pedromcrOP•2y 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