Auth Forgot Password

Overview

Auth Forgot Password is a pre-built password recovery page template. It provides a single-field form (email input) that triggers a password reset email. Part of the Authentication Pattern suite. After submitting, the user is directed to check their inbox and then proceeds to Auth Reset Password.

When to use

• Any sign-in flow that uses email/password credentials
• SaaS applications with self-service password reset
• Ecommerce customer account recovery
• Admin panel login — forgotten admin credentials

When not to use

• Do not use for passwordless apps — use Auth OTP or magic link flows instead.
• Do not use it for account recovery via SMS — this template is email-only.
• Do not use it if you need username recovery — create a separate flow for forgotten usernames.

Basic HTML example

React example

{`import { AuthForgotPassword } from '@byteion/react';

export default function ForgotPasswordPage() {
  return (
    <AuthForgotPassword
      onSubmit={(values) => sendResetEmail(values.email)}
      onBackToSignin={() => router.push('/signin')}
    />
  );
}`}

Vue example

{`<script setup lang="ts">
import { AuthForgotPassword } from '@byteion/vue';
import { useRouter } from 'vue-router';

const router = useRouter();
function onSubmit(values: any) { /* sendResetEmail(values.email) */ }
</script>

<template>
  <AuthForgotPassword
    @submit="onSubmit"
    @back-to-signin="router.push('/signin')"
  />
</template>`}

Props / API

Anatomy

Email delivery notes

The "Send reset link" action triggers an email delivery. Implement a rate-limited email service with a short token expiry (15-30 minutes). For Laravel apps, use the built-in password reset notification. For React/Vue SPAs, call your auth API endpoint which handles email dispatch server-side.

Security notes

• Never reveal whether the email exists — use a generic message: "If an account exists, we've sent a reset link." This prevents account enumeration.
• Rate limit per email and per IP — prevent brute-force email verification and spam.
• Short token expiry — reset tokens should expire within 15-30 minutes.
• Single-use tokens — invalidate the token after password reset or after the first use.
• Use HTTPS — all password reset requests must be over HTTPS.
• Enable CSRF protection — for Laravel apps, keep CSRF token on the forgot-password route.

Accessibility

• Single-field form — straightforward keyboard flow: Tab to input, type email, Enter to submit
• Email input has type="email" for mobile keyboard and browser validation
• Error message uses role="alert"
• Submit button responds to Enter key
• Focus ring is visible in all themes
• Loading state disables the input and button to prevent double submission

Developer tips

Common mistakes

• Revealing whether the email exists — "No account found" or "Reset link sent" are different messages
• No rate limiting — allows attackers to spam email addresses
• Long token expiry — increases the window for token interception
• Missing CSRF protection — vulnerable to cross-site request forgery
• No loading state on submit — users may click multiple times
• Forgetting the back-to-sign-in link — users who remember their password need a path back

Production checklist

• Test empty email, invalid email format, existing email, non-existing email
• Test rate-limit error, server error, loading state, sent-success state
• Verify generic message is identical for existing and non-existing emails
• Test token expiry — submit reset link after 30+ minutes
• Test keyboard-only usage and screen reader announcements
• Test dark mode and branded themes — token-based colors adapt automatically
• Test mobile layout — single field works well on small screens
• For Laravel apps: render validation or status messages from session or API, keep CSRF and throttling enabled
• For React/Vue SPAs: coordinate with router, auth API client, loading state, error state, and sent state

Related components and pages

• Auth Signin — sign-in page template
• Auth Signup — registration form
• Auth Reset Password — set new password after recovery
• Auth OTP — multi-factor or passwordless code entry
• Input — email form field
• Button — submit action
• Card — form surface container
• Form Field — field layout and validation wrapper
• Alert — form-level error messages
• Authentication Pattern — full auth pattern guide

Why this exists

Byteion includes Auth Forgot Password so teams can ship this pattern with consistent markup, tokens, accessibility expectations, and framework parity.

API Reference

Customization

Auth Forgot Password customization should happen through Byteion tokens, semantic CSS variables, and documented utility classes. Avoid hardcoded one-off colors, spacing, or focus styles.

Production usage

Auth Forgot Password is production-ready when examples are wired to real state, validation, loading, empty, and error paths. Test the HTML example plus React and Vue adapters separately if your app supports multiple frameworks.

Related components

• Auth Signin - sign-in page template
• Auth Signup - registration form
• Auth Reset Password - set new password after recovery
• Auth OTP - multi-factor or passwordless code entry
• Input - email form field
• Button - submit action
• Card - form surface container
• Form Field - field layout and validation wrapper
• Alert - form-level error messages

Runtime events

Byteion keeps framework APIs idiomatic: HTML uses DOM custom events, React uses callback props, and Vue uses emitted events / v-model updates.

Remote / AJAX