useLogin

Overview

The useLogin hook manages the complete authentication flow including traditional login with username or email, intelligent password recovery with email verification codes, and failed attempt tracking. It integrates with Firebase Authentication and Firestore for user management.

Import

import { useLogin } from '@/hooks/useLogin';

Usage

const {
  identifier,
  setIdentifier,
  password,
  setPassword,
  handleLogin,
  loading,
  failedAttempts,
  handleStartRecovery,
  recoverModalVisible,
  setRecoverModalVisible,
  recoverStep,
  maskedEmail,
  inputCode,
  setInputCode,
  handleVerifyRecoverCode,
  recoverLoading
} = useLogin();

// Login with email or username
setIdentifier("[email protected]"); // or "username"
setPassword("myPassword123");
await handleLogin();

// Password recovery
setIdentifier("[email protected]"); // or username
await handleStartRecovery();

// Verify recovery code
setInputCode("1234");
handleVerifyRecoverCode();

State Values

identifier

string

User’s email address or username for login

password

string

User’s password for authentication

boolean

Indicates if login operation is in progress

failedAttempts

number

Counter tracking number of failed login attempts in current session

Recovery State

Controls visibility of the password recovery modal

recoverStep

'verify_code' | 'reset_link'

Current step in the recovery flow:

verify_code: User must enter the email verification code
reset_link: Final step showing reset link was sent

recoverEmail

string

The full email address found during recovery process (internal use)

maskedEmail

string

Censored email shown to user (e.g., “us***@gmail.com”)

generatedCode

string | null

The 4-digit verification code sent via email (internal use)

inputCode

string

User’s input for the verification code

recoverLoading

boolean

Indicates if recovery operation is in progress

Functions

setIdentifier

setIdentifier: (value: string) => void

Sets the identifier (email or username) for login.

value

string

Email address or username

setPassword

setPassword: (value: string) => void

Sets the password for login.

value

string

User’s password

handleLogin

handleLogin: () => Promise<void>

Handles the login process with intelligent identifier detection: Process:

Validates that both identifier and password are provided
Detects if identifier is email (contains ”@”) or username

If username, queries Firestore to find associated email:

const usersRef = collection(db, "users");
const q = query(usersRef, where("username", "==", identifier.trim()));
const querySnapshot = await getDocs(q);

Authenticates using Firebase Auth with email and password
On success:
- Resets failed attempts counter to 0
- Navigates to /inicio route
On failure:
- Increments failed attempts counter
- Shows appropriate error message based on error code

Error codes handled:

auth/invalid-credential: “Credenciales incorrectas.”
auth/wrong-password: “Contraseña incorrecta.”
Default: “Error al iniciar sesión.”

handleStartRecovery

handleStartRecovery: () => Promise<void>

Initiates the intelligent password recovery process: Process:

Validates that identifier field is filled
Determines if input is email or username
Queries Firestore to verify account exists:
- For email: where("email", "==", identifier)
- For username: where("username", "==", identifier)
If account found:
- Masks email for privacy (e.g., “ab***@domain.com”)
- Generates random 4-digit code
- Sends verification code via EmailJS
- Opens recovery modal on verify_code step
If not found:
- Shows appropriate error message

Email masking algorithm:

const [namePart, domainPart] = emailFound.split("@");
const masked = `${namePart.substring(0, 2)}***@${domainPart}`;

handleVerifyRecoverCode

handleVerifyRecoverCode: () => void

Verifies the recovery code entered by the user:

If code matches: Calls handleSendFinalResetLink
If code doesn’t match: Shows “Código incorrecto” alert

handleSendFinalResetLink

handleSendFinalResetLink: () => Promise<void>

Sends the official Firebase password reset email: Process:

Calls Firebase Auth’s sendPasswordResetEmail(auth, recoverEmail)
Updates modal step to reset_link
User can then check their email for the secure reset link

Security: Uses Firebase’s built-in password reset mechanism which:

Generates a secure, time-limited token
Sends official password reset link
Ensures secure password update flow

setRecoverModalVisible

setRecoverModalVisible: (visible: boolean) => void

Controls visibility of the password recovery modal.

setInputCode

setInputCode: (code: string) => void

Sets the user’s input for the verification code.

Email Integration

The hook uses EmailJS to send verification codes during password recovery:

await emailjs.send(
  EMAILJS_SERVICE_ID, 
  EMAILJS_TEMPLATE_ID,
  { 
    to_email: emailFound, 
    to_name: usernameFound, 
    message: code 
  },
  { publicKey: EMAILJS_PUBLIC_KEY }
);

EmailJS Configuration:

Service ID: service_ov1txor
Template ID: template_tn3fdwk
Public Key: uwyrohVqlzvgOj1KT

function LoginScreen() {
  const {
    identifier,
    setIdentifier,
    password,
    setPassword,
    handleLogin,
    loading,
    failedAttempts,
    handleStartRecovery
  } = useLogin();

  return (
    <View>
      <TextInput
        placeholder="Usuario o Correo"
        value={identifier}
        onChangeText={setIdentifier}
        autoCapitalize="none"
      />
      
      <TextInput
        placeholder="Contraseña"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />

      {failedAttempts > 0 && (
        <Text style={{ color: 'red' }}>
          Intentos fallidos: {failedAttempts}
        </Text>
      )}

      <Button
        title="Iniciar Sesión"
        onPress={handleLogin}
        disabled={loading}
      />

      <TouchableOpacity onPress={handleStartRecovery}>
        <Text>¿Olvidaste tu contraseña?</Text>
      </TouchableOpacity>
    </View>
  );
}

Example: Password Recovery Flow

function PasswordRecoveryModal() {
  const {
    identifier,
    setIdentifier,
    recoverModalVisible,
    setRecoverModalVisible,
    recoverStep,
    maskedEmail,
    inputCode,
    setInputCode,
    handleStartRecovery,
    handleVerifyRecoverCode,
    recoverLoading
  } = useLogin();

  return (
    <Modal visible={recoverModalVisible}>
      {recoverStep === 'verify_code' && (
        <View>
          <Text>Código enviado a {maskedEmail}</Text>
          <TextInput
            placeholder="Código de 4 dígitos"
            value={inputCode}
            onChangeText={setInputCode}
            keyboardType="numeric"
            maxLength={4}
          />
          <Button
            title="Verificar"
            onPress={handleVerifyRecoverCode}
            disabled={recoverLoading}
          />
        </View>
      )}

      {recoverStep === 'reset_link' && (
        <View>
          <Text>✅ Enlace de recuperación enviado</Text>
          <Text>Revisa tu correo {maskedEmail} para restablecer tu contraseña</Text>
          <Button
            title="Cerrar"
            onPress={() => setRecoverModalVisible(false)}
          />
        </View>
      )}
    </Modal>
  );
}

Security Features

Failed Attempts Tracking

The hook tracks failed login attempts to help detect potential security issues:

const [failedAttempts, setFailedAttempts] = useState(0);

// Increment on any authentication failure
setFailedAttempts(prev => prev + 1);

// Reset on successful login
setFailedAttempts(0);

This can be used to implement:

Account lockout after X attempts
CAPTCHA triggers
Security notifications

Two-Factor Email Verification

Password recovery requires email verification before sending reset link:

User enters identifier
System generates 4-digit code
Code sent to registered email
User must enter correct code
Only then is Firebase reset link sent

This prevents unauthorized password resets even if someone knows a username.

Email Masking

Email addresses are masked when displayed to prevent information leakage:

Shows only first 2 characters of local part
Keeps full domain for context
Example: [email protected] → us***@example.com

Error Handling

The hook handles various error scenarios:

Empty fields: Alert prompting for both identifier and password
Username not found: “El nombre de usuario no existe.”
Invalid credentials: “Credenciales incorrectas.”
Wrong password: “Contraseña incorrecta.”
Generic errors: “Error al iniciar sesión.”

Recovery Errors

Empty identifier: “Escribe tu Usuario o Correo en el campo de arriba para buscar tu cuenta.”
Email not found: “Ese correo electrónico no está registrado en ParkInMX.”
Username not found: “Ese nombre de usuario no existe.”
Email send failure: “No se pudo generar el enlace de cambio.”
Generic errors: “Ocurrió un problema al buscar tu cuenta.”

Firebase Dependencies

Authentication: signInWithEmailAndPassword, sendPasswordResetEmail
Firestore Collections: users
User document fields: username, email

On successful login, the hook navigates to the home screen:

router.replace("/inicio");

Uses replace to prevent users from going back to login screen after authentication.

useReservar - Requires authentication to create reservations
useHistorial - View user’s reservation history
useTarjetas - Manage payment methods

Architecture

Components

Hooks

Overview

Import

Usage

State Values

Recovery State

Functions

setIdentifier

setPassword

handleLogin

handleStartRecovery

handleVerifyRecoverCode

handleSendFinalResetLink

setRecoverModalVisible

setInputCode

Email Integration

Example: Password Recovery Flow

Security Features

Failed Attempts Tracking

Two-Factor Email Verification

Email Masking

Error Handling

Recovery Errors

Firebase Dependencies

Navigation

Build docs developers (and LLMs) love

Architecture

Components

Hooks

​Overview

​Import

​Usage

​State Values

​Login State

​Recovery State

​Functions

​setIdentifier

​setPassword

​handleLogin

​handleStartRecovery

​handleVerifyRecoverCode

​handleSendFinalResetLink

​setRecoverModalVisible

​setInputCode

​Email Integration

​Example: Login Form

​Example: Password Recovery Flow

​Security Features

​Failed Attempts Tracking

​Two-Factor Email Verification

​Email Masking

​Error Handling

​Login Errors

​Recovery Errors

​Firebase Dependencies

​Navigation

​Related Hooks

Build docs developers (and LLMs) love

Overview

Import

Usage

State Values

Login State

Recovery State

Functions

setIdentifier

setPassword

handleLogin

handleStartRecovery

handleVerifyRecoverCode

handleSendFinalResetLink

setRecoverModalVisible

setInputCode

Email Integration

Example: Login Form

Example: Password Recovery Flow

Security Features

Failed Attempts Tracking

Two-Factor Email Verification

Email Masking

Error Handling

Login Errors

Recovery Errors

Firebase Dependencies

Navigation

Related Hooks