Auth Signin

Overview

Auth Signin is a pre-built sign-in page template. It composes Card, Input, Button, Checkbox, and Divider into a complete login flow with email, password, "Remember me", "Forgot password" link, and optional social auth providers. Part of the Authentication Pattern suite.

When to use

• SaaS application login — returning user credential verification
• Admin panel sign-in — dashboard and admin area access
• Ecommerce customer login — checkout account access
• Multi-tenant platform login — organization-specific sign-in
• Social login flows — OAuth with Google, GitHub, or other providers

When not to use

• Do not use Auth Signin for registration — use Auth Signup for new accounts.
• Do not use it for passwordless login — use Auth OTP for magic-code flows.
• Do not use it for non-authentication forms — use Form Field directly for general-purpose forms.

Basic HTML example

React example

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

export default function SigninPage() {
  return (
    <AuthSignin
      onSubmit={(values) => signIn(values)}
      onForgotPassword={() => router.push('/forgot')}
      onOauth={(provider) => signInWithProvider(provider)}
      branding={}
    />
  );
}`}

Vue example

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

const router = useRouter();
function onSubmit(values: any) { /* signIn(values) */ }
function onForgot() { router.push('/forgot'); }
function onOauth(provider: string) { /* signInWithProvider(provider) */ }
</script>

<template>
  <AuthSignin
    @submit="onSubmit"
    @forgot-password="onForgot"
    @oauth="onOauth"
  >
    <template #branding>
      <img src="/logo.svg" alt="Acme" class="h-8" />
    </template>
  </AuthSignin>
</template>`}

Props / API

Anatomy

Validation and error states

Auth Signin supports field-level validation (empty email, invalid email format, empty password) and form-level errors (invalid credentials, account locked, server error). Use Form Field for consistent error styling and Alert for form-level error messages.

Security notes

• Use HTTPS — all sign-in requests must be sent over HTTPS.
• Enable CSRF protection — for Laravel apps, pair with CSRF-protected routes.
• Rate limit login attempts — prevent brute-force attacks per email and per IP.
• Use generic error messages — "Invalid email or password" instead of "No account found" or "Wrong password".
• Use autocomplete="email" and autocomplete="current-password" — enables password manager autofill.
• Preserve email after failed login — but never preserve the password.

Accessibility

• All form inputs have visible labels linked via htmlFor / for and id
• Error messages use role="alert" and are connected via aria-describedby
• Submit button has type="submit" and responds to Enter key
• Social buttons have accessible labels via aria-label="Sign in with Google"
• Forgot password and sign-up links are keyboard-focusable
• Focus ring is visible in all themes — uses focus:ring-2 focus:ring-primary/20
• Loading state disables all form controls to prevent double submission

Developer tips

Common mistakes

• Missing labels or using placeholder as the only label
• Missing autocomplete attributes — password managers need them
• Revealing whether an email exists — "No account found" vs "Wrong password"
• Allowing duplicate form submits while loading
• Not showing form-level auth errors — generic "Invalid credentials" message
• Forgetting the forgot-password path — users who can't remember need a path
• Claiming built-in OTP support — Auth-signin handles credentials only; use Auth-otp for MFA
• Styling errors with colour only — always include text description
• Hardcoding colours instead of using tokens

Production checklist

• Test empty fields, invalid email, wrong password, locked account, disabled account
• Test loading state, server error, and successful login
• Test keyboard-only usage and screen reader announcements
• Test password manager autofill in multiple browsers (Chrome, Safari, Firefox, 1Password, Bitwarden)
• Test dark mode and branded themes — token-based colors adapt automatically
• Test mobile layout — card is max-w-md and centers naturally
• For Laravel apps: render validation errors from session or response, keep CSRF enabled
• For React/Vue SPAs: coordinate with router redirects, auth store, loading state, error state, and OTP/MFA routes

Related components and pages

• Auth Signup — registration form
• Auth Forgot Password — password recovery flow
• Auth Reset Password — set new password after reset
• Auth OTP — multi-factor or passwordless code entry
• Input — base form field
• Checkbox — remember-me pattern
• Button — submit action
• Alert — error messages
• Card — shell surface
• Form Field — layout and validation
• Authentication Pattern — full auth pattern guide

Why this exists

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

API Reference

Customization

Auth Signin 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 Signin 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-signup - registration form
• Auth-reset-password - set new password after reset
• Auth-otp - OTP/MFA code verification
• Input - base form field
• Checkbox - remember-me pattern
• Button - submit action
• Alert - error messages
• Card - shell surface
• Form Field - layout and validation

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