Wasp-lang•5w ago

What would be the easiest way to implement a change email verification link?

Hello, I would like to implement a feature to change email in account settings. What would be the easiest way to do it? Thank you!

2 Replies

kapa.ai•5w ago

Hi @Hastur. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To implement a feature for changing email in account settings with email verification in Wasp, you can leverage the existing email verification functionality. Here's a high-level approach that would be relatively easy to implement: 1. Create a new action for changing the email address. 2. Use the existing email verification flow to verify the new email address. 3. Update the user's email only after successful verification. Here's a more detailed breakdown: 1. Create a "change email" action: - This action would take the new email address as input. - It would update a temporary field in the user's record with the new email (e.g., pendingEmail). - Then, it would trigger the email verification process for the new email. 2. Use the existing email verification flow: - Wasp already provides email verification functionality as described in the documentation (https://wasp-lang.dev/docs/auth/email#email-verification-flow). - You can use the createEmailVerificationLink and sendEmailVerificationEmail functions from Wasp's auth utilities to send a verification email to the new address. 3. Update the verification process: - Modify the email verification handler to check if it's verifying a new email change. - If it is, update the user's primary email address with the verified new email. Here's a basic example of how the "change email" action might look:

import { 
  createEmailVerificationLink, 
  sendEmailVerificationEmail 
} from 'wasp/server/auth'

export const changeEmail = async (args, context) => {
  const { newEmail } = args;
  const { user } = context;

  // Update user with pending email
  await updateUser(user.id, { pendingEmail: newEmail });

  // Create verification link
  const verificationLink = await createEmailVerificationLink(newEmail, '/email-verification');
// Send verification email
  await sendEmailVerificationEmail(
    newEmail,
    {
      from: { name: "My App", email: "[email protected]" },
      subject: "Verify your new email",
      text: `Click the link to verify your new email: ${verificationLink}`,
      html: `<p>Click <a href="${verificationLink}">here</a> to verify your new email.</p>`
    }
  );

  return { success: true, message: "Verification email sent to new address" };
}

import { 
  createEmailVerificationLink, 
  sendEmailVerificationEmail 
} from 'wasp/server/auth'

export const changeEmail = async (args, context) => {
  const { newEmail } = args;
  const { user } = context;

  // Update user with pending email
  await updateUser(user.id, { pendingEmail: newEmail });

  // Create verification link
  const verificationLink = await createEmailVerificationLink(newEmail, '/email-verification');
// Send verification email
  await sendEmailVerificationEmail(
    newEmail,
    {
      from: { name: "My App", email: "[email protected]" },
      subject: "Verify your new email",
      text: `Click the link to verify your new email: ${verificationLink}`,
      html: `<p>Click <a href="${verificationLink}">here</a> to verify your new email.</p>`
    }
  );

  return { success: true, message: "Verification email sent to new address" };
}

You would then need to modify your email verification handler to check for the pendingEmail field and update the user's primary email if it exists. This approach leverages Wasp's built-in email verification system, making it relatively easy to implement. However, remember to handle edge cases, such as what happens if the user tries to change their email again before verifying the previous change. For more details on email verification in Wasp, you can refer to the Email Verification Flow documentation (https://wasp-lang.dev/docs/auth/email#email-verification-flow). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Hastur, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

miho•4w ago

Did you try doing what the bot suggested?

Gaming

Programming

What would be the easiest way to implement a change email verification link?