Auth Reset Password

Overview

Auth Reset Password is a pre-built password reset page template. It provides new-password and confirm-password fields that allow users to set a new password after receiving a reset link from Auth Forgot Password. Part of the Authentication Pattern suite.

When to use

• After a user requests a password reset via email link
• Admin-forced password reset — first-time login or security breach response
• Expired password flow — periodic password rotation requirements
• Account recovery after lockout — reset password to regain access

When not to use

• Do not use for initial sign-up password creation — use Auth Signup instead.
• Do not use for password change within settings — this template handles reset flows, not in-session password changes.
• Do not use without a valid reset token — the page should only render when a valid, non-expired token is present in the URL.
• Do not use for passwordless apps — use Auth OTP instead.

Basic HTML example

React example

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

export default function ResetPasswordPage() {
  return (
    <AuthResetPassword
      onSubmit={(values) => resetPassword(values)}
      requireStrong
    />
  );
}`}

Vue example

{`<script setup lang="ts">
import { AuthResetPassword } from '@byteion/vue';

function onSubmit(values: any) { /* resetPassword(values) */ }
</script>

<template>
  <AuthResetPassword @submit="onSubmit" require-strong />
</template>`}

Props / API

Anatomy

Security notes

• Validate reset token — verify the token from the URL is valid and not expired before rendering the form
• Single-use tokens — invalidate the token after successful password reset
• Short token expiry — reset tokens should expire within 15-30 minutes
• Password strength validation — enforce minimum requirements server-side regardless of client-side validation
• Use HTTPS — all password reset requests must be over HTTPS
• Enable CSRF protection — for Laravel apps, keep CSRF token on the reset-password route
• Use autocomplete="new-password" — tells password managers to generate and save the new password rather than autofill the current one

Accessibility

• Both password fields have visible labels linked via htmlFor and id
• Password requirements hint is connected via aria-describedby
• Error messages use role="alert"
• Submit button responds to Enter key
• Focus ring is visible in all themes
• Loading state disables all form controls to prevent double submission

Developer tips

Common mistakes

• Missing confirm password field — both new-password and confirm-password fields are required
• Using autocomplete="current-password" instead of autocomplete="new-password"
• No client-side password match validation before submit
• Not validating token expiry on page load — user submits with an expired token and gets a confusing error
• Weak password requirements — enforce minimum length and complexity
• Allowing the same password as the current one — check password history when possible
• Not showing password strength feedback — users need to know why their password was rejected

Production checklist

• Test empty fields, weak password, password mismatch, expired token, invalid token
• Test server error, loading state, and successful reset
• Verify password manager autofill with autocomplete="new-password"
• Test keyboard-only usage
• Test token validation flow — expired token shows error and redirects to forgot-password
• Test dark mode and branded themes
• Test mobile layout
• For Laravel apps: render validation or status messages from API response, keep CSRF and reset-token validation enabled
• For React/Vue SPAs: coordinate with router token params, API client, auth store, loading state, error state, and redirect logic

Related components and pages

• Auth Signin — sign-in page template
• Auth Signup — registration form
• Auth Forgot Password — password recovery flow (precedes reset)
• Auth OTP — multi-factor or passwordless code entry
• Input — password form field
• Button — submit action
• Card — form surface container
• Form Field — field layout and validation wrapper
• Alert — error messages
• Authentication Pattern — full auth pattern guide

Why this exists

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

API Reference

Customization

Auth Reset 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 Reset 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 Forgot Password - password recovery flow (precedes reset)
• Auth OTP - multi-factor or passwordless code entry
• Input - password form field
• Button - submit action
• Card - form surface container
• Form Field - field layout and validation wrapper
• Alert - 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