Authentication Components

The authentication module provides three core components for building login and registration flows with a consistent UI/UX.

Components Overview

LoginForm

Complete login form with email/password and OAuth

RegisterForm

User registration form with validation

AuthHero

Branded hero section for auth screens

LoginForm

A fully-featured login form component with email/password authentication, OAuth support, and remember me functionality.

Usage

modules/auth/screens/LoginScreen.tsx

import { LoginForm } from "../components/LoginForm";

export const LoginScreen = () => {
  return (
    <section className="flex w-full items-center justify-center bg-white p-8">
      <LoginForm />
    </section>
  );
};

Features

Email/Password Authentication: Validated input fields with error handling
OAuth Integration: Google sign-in button (ready for implementation)
Password Visibility Toggle: Eye icon to show/hide password
Remember Me Checkbox: Session persistence option
Loading States: Disabled state with “Ingresando…” text during submission
Error Display: API error messages shown below form
Forgot Password Link: Navigation to password recovery

Component Structure

The component is self-contained with its own state management:

const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [showPassword, setShowPassword] = useState(false);
const { mutate, isPending, error } = useLogin();

Integration

Uses the useLogin hook from /modules/auth/hooks/useLogin.ts:9 for authentication logic:

const handleSubmit = (e: React.FormEvent) => {
  e.preventDefault();
  mutate({ email, password });
};

Dependencies

@/components/ui/button - shadcn/ui Button component
@/components/ui/input - shadcn/ui Input component
@/components/ui/label - shadcn/ui Label component
@/components/ui/checkbox - shadcn/ui Checkbox component
lucide-react - EyeIcon, EyeOffIcon
useLogin - Custom authentication hook

RegisterForm

User registration form with first name, last name, email, password fields and terms acceptance.

Usage

modules/auth/screens/RegisterScreen.tsx

import { RegisterForm } from "../components/RegisterForm";

export const RegisterScreen = () => {
  return (
    <section className="flex w-full items-center justify-center bg-white p-8">
      <RegisterForm />
    </section>
  );
};

Features

Multi-field Form: First name, last name, email, and password inputs
OAuth Alternative: Google registration button
Terms & Conditions: Checkbox with links to terms and privacy policy
Form Validation: Required fields with HTML5 validation
Responsive Layout: Two-column grid for name fields on larger screens

Form Fields

first-name

string

required

User’s first name (e.g., “Juan”)

last-name

string

required

User’s last name (e.g., “Pérez”)

required

User’s email address (e.g., “[email protected]”)

password

required

Password with minimum 8 characters

terms

boolean

required

Accept terms of service and privacy policy

Styling

The form uses consistent styling with the login form:

Input height: h-12 (48px)
Button styling: bg-[#2563eb] with bold text
Maximum width: max-w-[450px]
Spacing: space-y-8 for sections, space-y-5 for form fields

AuthHero

Branded hero component displayed on the left side of authentication screens, featuring the RespondeIA logo, customizable title, subtitle, and feature list.

Props

title

React.ReactNode

required

Main heading - can include JSX for styling (e.g., colored spans, line breaks)

subtitle

string

required

Descriptive text shown below the title in muted color

features

string[]

required

Array of feature strings displayed as a checklist

Usage Example

modules/auth/screens/LoginScreen.tsx

import { AuthHero } from "../components/AuthHero";

export const LoginScreen = () => {
  return (
    <section className="hidden lg:flex lg:w-1/2">
      <AuthHero
        title={
          <>
            Bienvenido <br /> de <span className="text-blue-400">vuelta</span>
          </>
        }
        subtitle="Accedé a tu panel y gestioná tu asistente virtual desde cualquier lugar."
        features={[
          "Asistente activo las 24 horas respondiendo por vos",
          "Métricas en tiempo real de todas tus conversaciones",
          "Configuración y ajustes en segundos",
        ]}
      />
    </section>
  );
};

Visual Design

Background: Dark navy bg-[#0b1222]
Logo: “Responde” + blue “IA” in top left
Title: Large (4xl-6xl) white text with optional colored spans
Subtitle: White with 55% opacity
Features: Checklist with CheckCircle2 icons and white/55 text

Typography Scale

Logo: text-xl font-bold
Title: text-4xl md:text-5xl lg:text-6xl font-bold
Subtitle: text-lg text-white/55
Features: text-base md:text-lg font-medium

Layout

<div className="flex h-full w-full flex-col justify-center bg-[#0b1222] p-8 md:p-16 text-white min-h-[400px]">
  <div className="max-w-md space-y-10">
    {/* Logo */}
    {/* Title & Subtitle */}
    {/* Features List */}
  </div>
</div>

Complete Integration Example

import { AuthHero } from "../components/AuthHero";
import { LoginForm } from "../components/LoginForm";

export const LoginScreen = () => {
  return (
    <div className="flex min-h-screen w-full flex-col lg:flex-row">
      {/* Left Side: Hero */}
      <section className="hidden lg:flex lg:w-1/2">
        <AuthHero
          title={
            <>
              Bienvenido <br /> de <span className="text-blue-400">vuelta</span>
            </>
          }
          subtitle="Accedé a tu panel y gestioná tu asistente virtual desde cualquier lugar."
          features={[
            "Asistente activo las 24 horas respondiendo por vos",
            "Métricas en tiempo real de todas tus conversaciones",
            "Configuración y ajustes en segundos",
          ]}
        />
      </section>

      {/* Right Side: Form */}
      <section className="flex w-full items-center justify-center bg-white p-8 lg:w-1/2">
        <LoginForm />
      </section>
    </div>
  );
};

Best Practices

Responsive Layout

Always wrap auth components in a two-column layout: hero (left) and form (right). Hide the hero on mobile with hidden lg:flex.

Error Handling

The LoginForm displays errors automatically via the useLogin hook. Ensure your API returns meaningful error messages.

OAuth Integration

Both forms include Google OAuth buttons. Implement the OAuth flow by adding onClick handlers to the Google buttons.

Custom Styling

All components use Tailwind CSS. Override styles by passing additional className props to wrapped UI components.

useLogin Hook

Authentication hook used by LoginForm

Auth Store

Zustand store for auth state management

shadcn/ui Components

UI component library reference

Auth Service

API service for authentication endpoints

UI Components

Module Components

Authentication Components

Authentication Components

Components Overview

LoginForm

RegisterForm

AuthHero

LoginForm

Usage

Features

Component Structure

Integration

Dependencies

RegisterForm

Usage

Features

Form Fields

Styling

AuthHero

Props

Usage Example

Visual Design

Typography Scale

Layout

Complete Integration Example

Best Practices

useLogin Hook

Auth Store

shadcn/ui Components

Auth Service

Build docs developers (and LLMs) love

UI Components

Module Components

​Authentication Components

​Components Overview

LoginForm

RegisterForm

AuthHero

​LoginForm

​Usage

​Features

​Component Structure

​Integration

​Dependencies

​RegisterForm

​Usage

​Features

​Form Fields

​Styling

​AuthHero

​Props

​Usage Example

​Visual Design

​Typography Scale

​Layout

​Complete Integration Example

​Best Practices

​Related Documentation

useLogin Hook

Auth Store

shadcn/ui Components

Auth Service

Build docs developers (and LLMs) love

Authentication Components

Components Overview

LoginForm

Usage

Features

Component Structure

Integration

Dependencies

RegisterForm

Usage

Features

Form Fields

Styling

AuthHero

Props

Usage Example

Visual Design

Typography Scale

Layout

Complete Integration Example

Best Practices

Related Documentation