patterns
VerifyEmailPage
Landing page for the email-verification link. Calls `verify(token)` on mount and renders one of four states — verifying, success, expired (with optional resend), or generic error. The host returns `{ error: "expired" }` to switch to the expired state.
Install
Pull this component (and its dependencies) straight into your app via the shadcn CLI:
npx shadcn@latest add https://design.oapps.io/r/verify-email-page.jsonOr import from the workspace package:
import { VerifyEmailPage, VerifyEmailPageProps, VerifyEmailState } from "@8maverik8/auth";Examples
Default — auto-success
<VerifyEmailPage
wordmark="archi"
token={token}
verify={async (t) => {
const res = await authClient.verifyEmail({ query: { token: t } });
if (res.error?.code === "TOKEN_EXPIRED") return { error: "expired" };
if (res.error) return { error: res.error.message ?? "Verification failed." };
return { error: null };
}}
onResend={async () => {
await authClient.sendVerificationEmail({ email });
return { error: null };
}}
/>Guidelines
- Always provide an `onResend` so users with expired links can self-recover without contacting support.
- Auto-redirect on success without showing the success state for at least a moment.An instant redirect feels like a bug — the user doesn't see confirmation. The component shows the green checkmark and a 'Continue' link; let them click it.