Components
<ChangeEmailConfirmationEmail />
Email template for approving an email address change from the current address.
Usage
import { ChangeEmailConfirmationEmail } from "@better-auth-ui/react/email"
import { render } from "@react-email/render"
const html = await render(
<ChangeEmailConfirmationEmail
url="https://better-auth-ui.com/api/auth/change-email/verify?token=example-token"
appName="Better Auth UI"
logoURL={{
light: "/favicon-96x96.png",
dark: "/favicon-96x96-inverted.png"
}}
currentEmail="[email protected]"
newEmail="[email protected]"
expirationMinutes={60}
darkMode={true}
poweredBy={true}
/>
)Better Auth setup
Render this template from user.changeEmail.sendChangeEmailConfirmation and send it to user.email. Better Auth supplies the approval URL and requested address.
sendChangeEmailConfirmation: async ({ user, newEmail, url }) => {
const html = await render(
<ChangeEmailConfirmationEmail
url={url}
currentEmail={user.email}
newEmail={newEmail}
appName="My App"
/>
)
await sendEmail({
to: user.email,
subject: "Approve your email change",
html
})
}Use <EmailChangedEmail /> separately if you also send a notification after the address has changed.
Installation
npx shadcn@latest add https://better-auth-ui.com/r/change-email-confirmation-email.jsonProps
Prop
Type
Features
- Shows the current and requested email addresses
- Includes an approval button and fallback URL
- Explains that ignoring the message leaves the address unchanged
- Supports expiration details, theming, branding, and localization
Last updated on