VerifyEmailPrompt

Overview

VerifyEmailPrompt is a presentational component used by SignUpForm and SignUpModal after registration when the user still needs to verify their email.

Preview

Interactive preview requires JavaScript.

Install

Shipped with sign-up:

npx @simpleauthjs/react add sign-up --style minimal

The install snippet uses --style minimal. You can also use --style modern. Style variants compares those two in the live preview. Run npx @simpleauthjs/react add --help for every --style slug the CLI accepts.

Props

Name	Type	Required	Description
`email`	`string`	Yes	Address shown in the copy.
`onResend`	`() => void`	Yes	Called when the user taps resend.
`isSending`	`boolean`	Yes	Disables the button while a resend is in flight.
`sent`	`boolean`	Yes	Shows a short success line after a resend.
`error`	`string \| null`	No	Optional error message.
`appName`	`string`	No	Optional product name in the copy.

Usage

Most apps rely on SignUpForm or SignUpModal, which embed this prompt after registration. To use it standalone, wire useSendVerificationEmail into onResend:

"use client"

import { useState } from "react"
import { useSendVerificationEmail, VerifyEmailPrompt } from "@/components/simpleauth"

export function StandaloneResend({ email }: { email: string }) {
  const { sendVerificationEmail, isLoading, error, reset } = useSendVerificationEmail()
  const [sent, setSent] = useState(false)

  async function onResend() {
    reset()
    await sendVerificationEmail(email)
    setSent(true)
  }

  return (
    <VerifyEmailPrompt
      email={email}
      appName="Acme"
      onResend={onResend}
      isSending={isLoading}
      sent={sent}
      error={error}
    />
  )
}

Source

components/simpleauth/ui/verify-email-prompt.tsx

"use client"

type VerifyEmailPromptProps = {
  email: string
  onResend: () => void
  isSending: boolean
  sent: boolean
  error?: string | null
  appName?: string
}

export function VerifyEmailPrompt({
  email,
  onResend,
  isSending,
  sent,
  error,
  appName,
}: VerifyEmailPromptProps) {
  return (
    <div className="sa-verify-prompt">
      <h3 className="sa-verify-prompt-title">Check your email</h3>
      <p className="sa-verify-prompt-body">
        {appName
          ? `We sent a verification link to ${email} for your ${appName} account.`
          : `We sent a verification link to ${email}.`}
      </p>
      <p className="sa-verify-prompt-hint">Open the link in that email to verify your address.</p>
      {sent ? <p className="sa-verify-prompt-success">Verification email sent.</p> : null}
      {error ? <p className="sa-verify-prompt-error">{error}</p> : null}
      <button
        type="button"
        className="sa-verify-prompt-button"
        onClick={onResend}
        disabled={isSending}
      >
        {isSending ? "Sending…" : "Resend verification email"}
      </button>
    </div>
  )
}