Auth Signup

Overview

Auth Signup is a pre-built registration page template. It composes Card, Input, Button, Checkbox, and Divider into a complete sign-up flow with name, email, password, terms agreement, and optional social auth providers. Part of the Authentication Pattern suite.

When to use

• SaaS application registration — new user account creation
• Multi-tenant onboarding — organization sign-up with workspace name
• Ecommerce customer registration — checkout account creation
• Community or forum registration — username, email, password sign-up
• Social sign-up flows — OAuth with Google, GitHub, or other providers

When not to use

• Do not use Auth Signup for invite-only sign-up — use an invite link flow instead.
• Do not use it for non-authentication forms — use Form Field directly for profile or settings forms.
• Do not use it for email-only sign-up — use Auth OTP for passwordless flows.

Basic HTML example

React example

Import AuthSignup from @byteion/react. Props mirror the HTML structure: onSubmit, onOauth, termsHref, privacyHref.

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

export default function SignupPage() {
  return (
    <AuthSignup
      onSubmit={(values) => signUp(values)}
      onOauth={(provider) => signUpWithProvider(provider)}
      termsHref="/terms"
      privacyHref="/privacy"
    />
  );
}`}

Vue example

Import AuthSignup from @byteion/vue. Events are emitted as @submit, @oauth. Props use kebab-case: terms-href, privacy-href.

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

function onSubmit(values: any) { /* signUp(values) */ }
function onOauth(provider: string) { /* signUpWithProvider(provider) */ }
</script>

<template>
  <AuthSignup
    @submit="onSubmit"
    @oauth="onOauth"
    terms-href="/terms"
    privacy-href="/privacy"
  />
</template>`}

Props / API

Anatomy

Validation and error states

Auth Signup supports field-level validation (empty fields, invalid email, weak password, password mismatch) and form-level errors (email already registered, server error). Use Form Field for consistent error styling and Alert for form-level error messages.

Security notes

• Use HTTPS — all sign-up requests must be sent over HTTPS.
• Enable CSRF protection — for Laravel apps, pair with CSRF-protected routes.
• Rate limit registration — prevent brute-force account creation from the same IP.
• Validate server-side — never rely on client-side validation alone.
• Use autocomplete="new-password" — enables password manager to generate and save strong passwords.
• Reveal no account status — use a generic success message after sign-up regardless of whether the email was already registered.

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 up with Google"
• Terms checkbox is focusable and keyboard-toggleable
• Focus ring is visible in all themes — uses focus:ring-2 focus:ring-primary/20
• Loading state disables all form controls to prevent duplicate submission

Developer tips

Common mistakes

• Using placeholder text as the only label — always use visible labels
• Missing autocomplete attributes — password managers need them
• Not validating password strength on the server
• Displaying "Email already registered" as a field error — use a generic message to prevent account enumeration
• Allowing duplicate form submissions — disable the submit button while loading
• Forgetting the "Already have an account? Sign in" link — new users need a path to login

Production checklist

• Test empty fields, invalid email, weak password, password mismatch, and successful sign-up
• Test existing email — verify generic error message with no account enumeration
• Test OAuth flow — provider redirect, callback, and account linking
• Test loading state — button disabled, no double submission
• Test keyboard-only — Tab through all fields, Enter to submit
• Test password manager autofill — Chrome, Safari, Firefox, 1Password, Bitwarden
• Test mobile layout — card is max-w-sm, fields stack vertically
• Test dark mode and branded themes — token-based colors adapt automatically
• For Laravel apps: render validation errors from session or API response, keep CSRF enabled
• For React/Vue SPAs: coordinate with router, auth store, loading state, and redirect logic

Related components and pages

• Auth Signin — sign-in page template
• Auth Forgot Password — password recovery flow
• Auth Reset Password — set new password
• Auth OTP — multi-factor or passwordless code entry
• Input — base form field inside sign-up
• Button — submit and social auth actions
• Checkbox — terms agreement control
• Card — form surface container
• Form Field — field layout and validation wrapper
• Alert — form-level error messages
• Divider — visual separator between auth methods
• Authentication Pattern — full auth pattern guide

Why this exists

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

API Reference

Customization

Auth Signup 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 Signup 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 Forgot Password - password recovery flow
• Auth Reset Password - set new password
• Auth OTP - multi-factor or passwordless code entry
• Input - base form field
• Button - submit and social auth actions
• Checkbox - terms agreement control
• Card - form surface container
• Form Field - field layout and validation wrapper
• Alert - form-level error messages
• Divider - visual separator

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