Pantalla: Verificacion 2FA
Identificador: SCR-AUTH-005
Modulo: MTS-AUTH-001 - Autenticacion y Seguridad
Version: 1.0.0
Fecha: 2025-12-05
Autor: MobileUxUiDrone (Eight of Eight)
Estado: Especificado
| Atributo |
Valor |
| Nombre |
Verificacion 2FA |
| Proposito |
Ingresar codigo TOTP para segundo factor (tier Perfect) |
| Tipo |
Full Screen (modal obligatorio) |
| Acceso |
Automatico despues de OAuth para tier Perfect |
| Prioridad |
Alta |
NOTA: MFA esobligatoriopara tier Perfect yopcional para tier Pro.
2. Wireframe ASCII
+------------------------------------------+
| |
| |
| +----------+ |
| | [Lock] | |
| | Shield | |
| +----------+ |
| |
| Verificacion en dos pasos |
| |
| Ingresa el codigo de 6 digitos de |
| tu aplicacion autenticadora. |
| |
| +----+ +----+ +----+ +----+ +----+ +----+
| | | | | | | | | | | | |
| | 5 | | 2 | | 8 | | | | | | |
| | | | | | | | | | | | |
| +----+ +----+ +----+ +----+ +----+ +----+
| |
| |
| No tienes acceso a tu autenticador? |
| [Usar Recovery Key] |
| |
| |
| +------------------------------------+ |
| | 1 | 2 | 3 | | |
| +---+---+---+ | |
| | 4 | 5 | 6 | | | <- Teclado numerico
| +---+---+---+ | |
| | 7 | 8 | 9 | | |
| +---+---+---+ | |
| | | 0 | X | | |
| +---+---+---+ | |
+------------------------------------------+
2.2. Estado: Validando
+------------------------------------------+
| |
| |
| +----------+ |
| | [Lock] | |
| | Shield | |
| +----------+ |
| |
| Verificacion en dos pasos |
| |
| Ingresa el codigo de 6 digitos de |
| tu aplicacion autenticadora. |
| |
| +----+ +----+ +----+ +----+ +----+ +----+
| | | | | | | | | | | | |
| | 5 | | 2 | | 8 | | 4 | | 7 | | 1 |
| | | | | | | | | | | | |
| +----+ +----+ +----+ +----+ +----+ +----+
| |
| [Spinner] |
| Verificando... |
| |
+------------------------------------------+
2.3. Estado: Error - Codigo Incorrecto
+------------------------------------------+
| |
| |
| +----------+ |
| | [X] | | <- Icono error
| | Rojo | |
| +----------+ |
| |
| Codigo incorrecto |
| |
| El codigo no es valido. Verifica |
| que el codigo sea el actual de tu |
| app autenticadora. |
| |
| +----+ +----+ +----+ +----+ +----+ +----+
| | | | | | | | | | | | |
| | | | | | | | | | | | | <- Limpiados
| | | | | | | | | | | | |
| +----+ +----+ +----+ +----+ +----+ +----+
| ^ Shake animation |
| |
| Intentos restantes: 4 |
| |
| [Usar Recovery Key] |
| |
+------------------------------------------+
2.4. Estado: Cooldown (muchos intentos)
+------------------------------------------+
| |
| |
| +----------+ |
| | [!] | |
| | Warning | |
| +----------+ |
| |
| Demasiados intentos |
| |
| Has excedido el numero de intentos |
| permitidos. Espera antes de intentar |
| de nuevo. |
| |
| +------------------------------------+ |
| | | |
| | 04:32 | | <- Countdown
| | | |
| +------------------------------------+ |
| |
| O usa tu Recovery Key para acceder |
| inmediatamente. |
| |
| +------------------------------------+ |
| | Usar Recovery Key | |
| +------------------------------------+ |
| |
+------------------------------------------+
2.5. Estado: Exito
+------------------------------------------+
| |
| |
| |
| +----------+ |
| | | |
| | [Check] | |
| | Verde | |
| | | |
| +----------+ |
| |
| Verificacion exitosa |
| |
| |
| |
| |
| |
+------------------------------------------+
(Auto-transicion a Dashboard en 1s)
3. Componentes UI
3.1. Security Icon
| Propiedad |
Valor |
| Icono |
Lock with shield |
| Tamano |
64x64dp |
| Color |
primary |
| Posicion |
Center, 15% from top |
3.2. Titulo
| Propiedad |
Valor |
| Texto |
"Verificacion en dos pasos" |
| Tipografia |
2xl (24sp), medium, neutral.900 |
| Alineacion |
Center |
3.3. Subtitulo
| Propiedad |
Valor |
| Texto |
"Ingresa el codigo de 6 digitos de tu aplicacion autenticadora." |
| Tipografia |
md (16sp), regular, neutral.700 |
| Alineacion |
Center |
| Max width |
280dp |
| Propiedad |
Valor |
| Componente |
CMP-INP-003 (PIN Input) |
| Variante |
6 digitos |
| Cell size |
48x56dp |
| Cell spacing |
8dp |
| Border default |
2dp neutral.300 |
| Border focused |
2dp primary |
| Border error |
2dp error |
| Digit font |
2xl (24sp), medium |
3.4.1. Estados de celda
| Estado |
Visual |
| Empty |
Border gris, vacio |
| Filled |
Border primary, digito visible |
| Current |
Border primary, cursor parpadeante |
| Error |
Border rojo, shake animation |
| Disabled |
Background neutral.100, opacity 0.5 |
3.5. Teclado Numerico Custom
| Propiedad |
Valor |
| Layout |
Grid 3x4 |
| Key size |
72x56dp |
| Key font |
xl (20sp), medium |
| Key background |
neutral.50 |
| Key pressed |
neutral.200 |
| Delete key |
Backspace icon |
| Spacing |
4dp |
3.6. Link Recovery Key
| Propiedad |
Valor |
| Texto |
"Usar Recovery Key" |
| Tipografia |
sm (14sp), primary |
| Touch target |
44dp height |
| Accion |
Navegar a SCR-AUTH-004 (recovery mode) |
3.7. Countdown Timer
| Propiedad |
Valor |
| Formato |
MM:SS |
| Tipografia |
3xl (30sp), bold, neutral.900 |
| Alineacion |
Center |
| Update |
Cada segundo |
3.8. Success Checkmark
| Propiedad |
Valor |
| Icono |
Checkmark circle |
| Tamano |
80x80dp |
| Color |
success |
| Animacion |
Scale up + fade in |
| Duracion |
300ms |
4. Comportamientos
4.1. Flujo de Verificacion
sequenceDiagram
participant U as Usuario
participant A as App
participant F as Firebase
U->>A: Ingresa digito 1
A->>A: Update display, move cursor
U->>A: Ingresa digitos 2-6
A->>A: Al completar 6, auto-submit
A->>A: Mostrar loading state
A->>F: Verificar codigo TOTP
alt Codigo valido
F->>A: Success
A->>A: Mostrar checkmark
A->>U: Navegar a Dashboard
else Codigo invalido
F->>A: Error
A->>A: Shake animation
A->>A: Clear inputs
A->>U: Mostrar intentos restantes
else Muchos intentos
F->>A: Rate limited
A->>U: Mostrar countdown
end
4.2. Gestos
| Gesto |
Elemento |
Accion |
| Tap |
Key 0-9 |
Ingresar digito |
| Tap |
Key X (delete) |
Borrar ultimo digito |
| Long press |
Key X |
Borrar todo |
| Tap |
Recovery Key link |
Ir a recovery |
| Swipe back |
- |
Bloqueado (no escape de MFA) |
4.3. Auto-Submit
REGLA: Al ingresar el 6to digito, submit automatico
- No hay boton "Verificar" explicito
- Submit inmediato despues del 6to digito
- Haptic feedback al submit
- Si error, clear y refocus en primer campo
4.4. Animacion de Error (Shake)
SHAKE ANIMATION:
- Duracion: 400ms
- Keyframes:
0% { translateX: 0 }
20% { translateX: -8dp }
40% { translateX: 8dp }
60% { translateX: -4dp }
80% { translateX: 4dp }
100% { translateX: 0 }
- Haptic: error vibration pattern
- Despues: clear inputs, focus en primero
5. Estados y Transiciones
5.1. Diagrama de Estados
stateDiagram-v2
[*] --> Input: Pantalla cargada
Input --> Input: Ingresar/borrar digito
Input --> Validating: 6 digitos completos
Validating --> Success: Codigo valido
Validating --> Error: Codigo invalido
Validating --> Cooldown: Rate limited
Error --> Input: Shake + clear
Error --> Cooldown: 5 intentos fallidos
Cooldown --> Input: Timer completado
Success --> [*]: Auto-nav a Dashboard (1s)
Input --> Recovery: Tap Recovery Key
Cooldown --> Recovery: Tap Recovery Key
Recovery --> [*]: Recovery exitoso
5.2. Transiciones
| De |
A |
Trigger |
Animacion |
| Input |
Validating |
6 digitos |
Spinner fade in |
| Validating |
Success |
Codigo ok |
Checkmark scale up |
| Validating |
Error |
Codigo mal |
Shake + clear |
| Error |
Input |
Auto |
Focus primer campo |
| Cooldown |
Input |
Timer = 0 |
Fade out timer |
| Success |
Dashboard |
1s delay |
Slide left |
6. Rate Limiting
6.1. Reglas de Intentos
| Intentos fallidos |
Accion |
| 1-4 |
Mostrar intentos restantes |
| 5 |
Cooldown 5 minutos |
| 6-9 (despues de cooldown) |
Mostrar intentos restantes |
| 10 |
Cooldown 30 minutos |
| 11+ |
Cooldown 1 hora + notificacion email |
6.2. Contador de Cooldown
FORMATO: MM:SS
ACTUALIZACION: Cada segundo
PERSISTENCIA: Guardado en local storage (sobrevive app kill)
AL COMPLETAR: Enable inputs, reset contador
7. Accesibilidad
7.1. Labels y Hints
| Elemento |
accessibilityLabel |
accessibilityHint |
| Screen |
"Verificacion en dos pasos" |
- |
| Code input |
"Codigo de verificacion, {n} de 6 digitos ingresados" |
"Ingresa el codigo de tu app autenticadora" |
| Key 0-9 |
"{numero}" |
"Ingresa {numero}" |
| Key delete |
"Borrar" |
"Borra el ultimo digito" |
| Recovery link |
"Usar Recovery Key" |
"Recupera acceso con tu clave de 24 palabras" |
| Timer |
"Espera {tiempo} para reintentar" |
- |
7.2. Orden de Foco
- Titulo
- Subtitulo
- Code input (anuncia estado)
- Teclado numerico (key por key)
- Link Recovery Key
7.3. Screen Reader Announcements
| Evento |
Anuncio |
Prioridad |
| Pantalla cargada |
"Verificacion en dos pasos. Ingresa el codigo de 6 digitos" |
Alta |
| Digito ingresado |
"{n} de 6 digitos ingresados" |
Media |
| Validando |
"Verificando codigo" |
Alta |
| Error |
"Codigo incorrecto. {n} intentos restantes" |
Alta |
| Cooldown |
"Demasiados intentos. Espera {tiempo} para reintentar" |
Alta |
| Exito |
"Verificacion exitosa" |
Alta |
7.4. Contraste y Tamanos
| Elemento |
Min Size |
Contraste |
| Code cells |
48x56dp |
4.5:1 (digitos) |
| Keyboard keys |
72x56dp |
4.5:1 |
| Titulo |
24sp |
4.5:1 |
| Subtitulo |
16sp |
4.5:1 |
| Timer |
30sp |
4.5:1 |
8. Seguridad
8.1. Proteccion de Codigo
| Aspecto |
Implementacion |
| Input masking |
No (digitos visibles para verificacion) |
| Screenshot |
Bloqueado en esta pantalla |
| Screen recording |
Bloqueado |
| Logging |
Nunca loguear codigo |
| Memory |
Clear inmediato despues de submit |
8.2. Prevencion de Brute Force
| Proteccion |
Implementacion |
| Rate limiting |
Progresivo (5 min, 30 min, 1 hora) |
| Lockout notification |
Email al usuario |
| Attempt logging |
Server-side (sin codigo) |
| IP tracking |
Solo conteo, no bloqueo |
9. Datos Requeridos
interface MFAScreenData {
userId: string;
mfaMethod: 'totp';
attemptsRemaining: number;
cooldownUntil?: Date;
}
9.2. Output Events
| Evento |
Payload |
Destino |
| onCodeComplete |
code (6 digits) |
Validation |
| onCodeValid |
- |
Dashboard |
| onCodeInvalid |
attempts_remaining |
Error state |
| onCooldown |
seconds |
Cooldown state |
| onRecoveryTap |
- |
SCR-AUTH-004 |
10. Metricas
10.1. Analytics Events
| Evento |
Parametros |
| screen_view |
screen_name: "mfa_verification" |
| mfa_code_entered |
- |
| mfa_attempt |
- |
| mfa_success |
time_ms, attempts_used |
| mfa_failure |
attempt_number |
| mfa_cooldown_start |
duration_seconds |
| mfa_recovery_tap |
from_cooldown: boolean |
11. Referencias
Documento generado por MobileUxUiDrone (Eight of Eight)