Flujo de Navegacion - Autenticacion

Identificador: UIF-AUTH-001 Modulo: MTS-AUTH-001 - Autenticacion y Seguridad Version: 1.0.0 Fecha: 2025-12-05 Autor: MobileUxUiDrone (Eight of Eight)

---

1. Resumen del Flujo

Este documento especifica el flujo de navegacion completo para el modulo de Autenticacion, cubriendo login con autenticacion social (Google/Apple), registro de nuevos usuarios, recuperacion de credenciales, verificacion MFA y desbloqueo biometrico.

NOTA CRITICA V1.0: MedTime V1.0 utilizaexclusivamente Firebase Authentication con autenticacion social (Google Sign-In, Apple Sign-In). Email/password NO esta disponible en V1.0 (planificado para v1.5+).

1.1. Pantallas del Modulo

ID	Nombre	Proposito	Prioridad
SCR-AUTH-001	Splash/Welcome	Pantalla inicial con branding y opciones de acceso	Critica
SCR-AUTH-002	Login Social	Opciones de login con Google/Apple	Critica
SCR-AUTH-003	Registro	Crear cuenta nueva via social auth	Critica
SCR-AUTH-004	Recuperacion	Recuperar acceso a cuenta	Alta
SCR-AUTH-005	Verificacion 2FA	Ingresar codigo TOTP (tier Perfect)	Alta
SCR-AUTH-006	Biometria	Desbloqueo con FaceID/TouchID/Fingerprint	Alta

---

2. Diagrama de Flujo Principal

flowchart TD
    subgraph Entry["Puntos de Entrada"]
        COLD[App Cold Start]
        RESUME[App Resume]
        LOGOUT[Post Logout]
        DEEP[Deep Link Auth]
    end

    subgraph SplashFlow["Splash Flow"]
        SPLASH[SCR-AUTH-001<br/>Splash/Welcome]
    end

    subgraph AuthFlow["Flujo Principal Auth"]
        LOGIN[SCR-AUTH-002<br/>Login Social]
        REGISTER[SCR-AUTH-003<br/>Registro]
        RECOVER[SCR-AUTH-004<br/>Recuperacion]
    end

    subgraph SecurityFlow["Flujo de Seguridad"]
        MFA[SCR-AUTH-005<br/>Verificacion 2FA]
        BIO[SCR-AUTH-006<br/>Biometria]
    end

    subgraph Destination["Destino"]
        ONBOARD[MTS-ONB-001<br/>Onboarding]
        HOME[Dashboard<br/>Principal]
    end

    %% Entry Points
    COLD --> SPLASH
    RESUME --> CHECK{Sesion<br/>valida?}
    LOGOUT --> LOGIN
    DEEP --> LOGIN

    %% Splash decisions
    SPLASH --> FIRST{Primera<br/>vez?}
    FIRST -->|Si| LOGIN
    FIRST -->|No| CHECK

    %% Session check
    CHECK -->|Si + Biometria| BIO
    CHECK -->|Si + Solo PIN| PIN_CHECK
    CHECK -->|No| LOGIN

    PIN_CHECK{PIN<br/>valido?} -->|Si| HOME
    PIN_CHECK -->|No| LOGIN

    %% Login flow
    LOGIN -->|Crear cuenta| REGISTER
    LOGIN -->|Google/Apple| OAUTH{OAuth<br/>exitoso?}
    LOGIN -->|Olvidaste acceso?| RECOVER

    OAUTH -->|Si, nuevo| ONBOARD
    OAUTH -->|Si, existente| TIER_CHECK
    OAUTH -->|No| LOGIN

    TIER_CHECK{Tier<br/>Perfect?} -->|Si| MFA
    TIER_CHECK -->|No| HOME

    %% Registration
    REGISTER --> OAUTH_REG{OAuth<br/>exitoso?}
    OAUTH_REG -->|Si| ONBOARD
    OAUTH_REG -->|No| REGISTER

    %% Recovery
    RECOVER --> RECOVER_SUCCESS{Exito?}
    RECOVER_SUCCESS -->|Si| LOGIN
    RECOVER_SUCCESS -->|No| RECOVER

    %% MFA
    MFA --> MFA_CHECK{Codigo<br/>valido?}
    MFA_CHECK -->|Si| HOME
    MFA_CHECK -->|No, reintentar| MFA
    MFA_CHECK -->|Usar recovery key| RECOVER

    %% Biometrics
    BIO --> BIO_CHECK{Exitoso?}
    BIO_CHECK -->|Si| HOME
    BIO_CHECK -->|No, 3 intentos| PIN_FALLBACK[PIN Fallback]
    PIN_FALLBACK --> HOME

    %% Styling
    classDef entry fill:#E3F2FD,stroke:#1976D2
    classDef splash fill:#FFF3E0,stroke:#F57C00
    classDef auth fill:#E8F5E9,stroke:#388E3C
    classDef security fill:#FCE4EC,stroke:#C2185B
    classDef dest fill:#F3E5F5,stroke:#7B1FA2

    class COLD,RESUME,LOGOUT,DEEP entry
    class SPLASH splash
    class LOGIN,REGISTER,RECOVER auth
    class MFA,BIO security
    class ONBOARD,HOME dest

---

3. User Journey: Paciente Independiente - Iniciar Sesion Primera Vez

Persona: Maria, 45 anos, quiere empezar a usar MedTime para gestionar su diabetes.

journey
    title Maria inicia sesion por primera vez
    section Descubrimiento
      Descarga app: 5: Maria
      Abre por primera vez: 5: Maria
      Ve splash screen: 4: Maria
    section Autenticacion
      Swipe carrusel bienvenida: 4: Maria
      Tap Continuar con Google: 5: Maria
      Autoriza en Google: 4: Maria
      Espera verificacion: 3: Maria
    section Transicion
      Ve mensaje de bienvenida: 5: Maria
      Continua a onboarding: 5: Maria

3.1. Pasos Detallados - PI Login Primera Vez

Paso	Pantalla	Accion	Siguiente	Notas UX
1	-	Abre app primera vez	SCR-AUTH-001	Cold start
2	SCR-AUTH-001	Ve splash con logo	-	1.5s auto-transicion
3	SCR-AUTH-001	Ve carrusel bienvenida (3 slides)	-	Swipe horizontal
4	SCR-AUTH-001	Tap "Comenzar"	SCR-AUTH-002	CTA primario
5	SCR-AUTH-002	Ve opciones de login	-	Google/Apple prominentes
6	SCR-AUTH-002	Tap "Continuar con Google"	OAuth Flow	Google SDK
7	OAuth	Selecciona cuenta Google	-	Sheet nativo Google
8	OAuth	Autoriza permisos	-	Consentimiento Google
9	SCR-AUTH-002	Ve loading "Creando cuenta..."	-	2-3s max
10	-	Usuario nuevo detectado	MTS-ONB-001	Redirect a onboarding

3.2. Consideraciones de Accesibilidad

• Carrusel navegable con VoiceOver/TalkBack
• Botones sociales con labels claros: "Continuar con Google", "Continuar con Apple"
• Loading states anunciados para screen readers
• Sin timeouts en flujo de OAuth
• Mensajes de error claros y accionables

---

4. User Journey: Usuario Existente - Login con MFA

Persona: Roberto, 55 anos, tier Perfect, usa MFA obligatorio.

journey
    title Roberto inicia sesion con MFA
    section Acceso
      Abre app: 5: Roberto
      Ve pantalla login: 4: Roberto
    section Autenticacion
      Tap Continuar con Apple: 5: Roberto
      Verifica Face ID en iPhone: 5: Roberto
    section MFA
      Ve pantalla codigo TOTP: 4: Roberto
      Abre Google Authenticator: 3: Roberto
      Copia codigo 6 digitos: 4: Roberto
      Ingresa codigo: 5: Roberto
    section Acceso
      Ve dashboard: 5: Roberto

4.1. Pasos Detallados - MFA

Paso	Pantalla	Accion	Siguiente	Notas UX
1	-	Abre app	SCR-AUTH-001	Sesion expirada
2	SCR-AUTH-001	Splash rapido	SCR-AUTH-002	0.5s para usuario existente
3	SCR-AUTH-002	Tap Apple Sign-In	OAuth Flow	Face ID integrado
4	OAuth	Face ID verificado	-	Automatico en Apple
5	-	Tier Perfect detectado	SCR-AUTH-005	MFA obligatorio
6	SCR-AUTH-005	Ve 6 campos de codigo	-	Auto-focus primer campo
7	SCR-AUTH-005	Abre app TOTP	-	Hint en pantalla
8	SCR-AUTH-005	Ingresa 6 digitos	-	Teclado numerico
9	SCR-AUTH-005	Submit automatico	Validacion	Al completar 6 digitos
10	-	Codigo valido	Dashboard	Transicion a home

---

5. User Journey: Desbloqueo Biometrico

Persona: Ana, 28 anos, configuro Face ID para acceso rapido.

journey
    title Ana desbloquea con biometria
    section Acceso Rapido
      Abre app: 5: Ana
      Ve prompt Face ID: 5: Ana
      Mira pantalla: 5: Ana
      Acceso instantaneo: 5: Ana

5.1. Flujo Biometrico

stateDiagram-v2
    [*] --> AppOpen: Usuario abre app
    AppOpen --> CheckSession: Verificar sesion local

    CheckSession --> BiometricPrompt: Sesion valida + biometria habilitada
    CheckSession --> Login: Sesion invalida

    BiometricPrompt --> BiometricSuccess: Biometria exitosa
    BiometricPrompt --> BiometricFail: Intento fallido

    BiometricFail --> BiometricPrompt: Intentos < 3
    BiometricFail --> PINFallback: Intentos >= 3

    PINFallback --> PINSuccess: PIN correcto
    PINFallback --> PINFail: PIN incorrecto

    PINFail --> PINFallback: Intentos < 5
    PINFail --> Login: Intentos >= 5 (bloqueo)

    BiometricSuccess --> Dashboard
    PINSuccess --> Dashboard

    Dashboard --> [*]

5.2. Comportamiento por Plataforma

Plataforma	Biometria	Fallback	UX Nativa
iOS Face ID	Face Recognition	PIN 4-6 digitos	Prompt sistema
iOS Touch ID	Fingerprint	PIN 4-6 digitos	Prompt sistema
Android Fingerprint	Fingerprint	PIN 4-6 digitos	BiometricPrompt API
Android Face Unlock	Face Recognition	PIN 4-6 digitos	BiometricPrompt API

---

6. Transiciones y Animaciones

6.1. Transiciones Entre Pantallas

De	A	Tipo	Duracion	Ease
Splash (logo)	Splash (carrusel)	Fade + Scale up	500ms	ease-out
Splash	Login	Slide up	300ms	ease-out
Login	OAuth Sheet	Native sheet	Sistema	Sistema
OAuth	MFA	Fade + Slide up	300ms	ease-out
MFA	Dashboard	Fade + Scale	250ms	ease-out
Biometric Prompt	Dashboard	Instant + Haptic	100ms	linear

6.2. Animacion del Splash

SECUENCIA SPLASH:

0ms:    Logo MedTime (scale 0.8, opacity 0)
0-300ms: Logo fade in + scale to 1.0
300-500ms: Hold
500-800ms: Tagline fade in
800-1500ms: Hold
1500ms: Auto-transicion si primera vez, o check sesion

REDUCED MOTION:
- Sin scale animations
- Fade in instantaneo
- Hold times respetados

6.3. Animacion del Carrusel

CARRUSEL BIENVENIDA (3 slides):

Slide 1: "Nunca olvides tus medicamentos"
         [Ilustracion: Persona con app y medicinas]

Slide 2: "Control total de tu tratamiento"
         [Ilustracion: Dashboard con estadisticas]

Slide 3: "Tu salud, tu privacidad"
         [Ilustracion: Candado y datos protegidos]

NAVEGACION:
- Swipe horizontal
- Dots indicator (3 puntos)
- "Saltar" en esquina superior derecha
- "Comenzar" en slide 3

---

7. Estados de Pantalla

7.1. SCR-AUTH-001 - Splash/Welcome

Estado	Condicion	Visualizacion
Logo	Carga inicial	Logo centrado, animado
Carrusel	Primera vez	3 slides con ilustraciones
Loading	Verificando sesion	Logo + spinner sutil

7.2. SCR-AUTH-002 - Login Social

Estado	Condicion	Visualizacion
Initial	Pantalla cargada	Botones Google/Apple visibles
Loading Google	OAuth en progreso	Boton Google con spinner
Loading Apple	OAuth en progreso	Boton Apple con spinner
Error OAuth	Fallo de autenticacion	Toast error + retry
Network Error	Sin conexion	Banner offline + mensaje

7.3. SCR-AUTH-005 - Verificacion 2FA

Estado	Condicion	Visualizacion
Input	Esperando codigo	6 campos vacios
Filling	Ingresando codigo	Campos llenandose
Validating	Verificando codigo	Spinner central
Error	Codigo invalido	Shake animation + mensaje
Cooldown	Muchos intentos	Timer de espera

7.4. SCR-AUTH-006 - Biometria

Estado	Condicion	Visualizacion
Prompt	Esperando biometria	Prompt nativo sistema
Processing	Verificando	Animacion de procesamiento
Success	Exitoso	Checkmark + transicion
Failed	Fallo 1-2 intentos	Retry prompt
Locked	3+ fallos	Fallback a PIN

---

8. Manejo de Errores

8.1. Errores de OAuth

Error	Codigo	Mensaje Usuario	Accion
User cancelled	CANCELLED	(ninguno)	Volver a login
Network error	NETWORK	"Sin conexion. Verifica tu internet."	Retry button
Account disabled	DISABLED	"Tu cuenta ha sido desactivada. Contacta soporte."	Link soporte
Invalid token	TOKEN	"Error de autenticacion. Intenta de nuevo."	Retry
Server error	SERVER	"Error del servidor. Intenta mas tarde."	Retry con backoff

8.2. Errores de MFA

Error	Mensaje Usuario	Accion
Codigo invalido	"Codigo incorrecto. Verifica e intenta de nuevo."	Clear + retry
Codigo expirado	"Codigo expirado. Usa el codigo actual de tu app."	Clear + retry
Muchos intentos	"Demasiados intentos. Espera {X} segundos."	Countdown timer

8.3. Errores de Biometria

Error	Mensaje Usuario	Accion
No reconocido	"No reconocido. Intenta de nuevo."	Retry prompt
Sensor no disponible	"Sensor no disponible. Usa tu PIN."	PIN fallback
Bloqueado	"Biometria bloqueada. Usa tu PIN."	PIN fallback

---

9. Deep Links

9.1. Estructura de Deep Links

Deep Link	Destino	Parametros
medtime://login	SCR-AUTH-002	-
medtime://register	SCR-AUTH-003	-
medtime://recover	SCR-AUTH-004	-
medtime://verify-mfa	SCR-AUTH-005	session_token (encrypted)

9.2. Links de Recuperacion

Link	Fuente	Destino
Email reset link	Firebase	SCR-AUTH-004 + context
Recovery key flow	In-app	SCR-AUTH-004 (recovery mode)

---

10. Seguridad

10.1. Almacenamiento de Credenciales

Dato	Almacenamiento	Proteccion
Firebase Token	Keychain/Keystore	Secure Enclave
PIN Hash	Keychain/Keystore	Argon2id + salt
Master Key	Keychain/Keystore	Biometric protected
Biometric reference	Sistema	Never exported

10.2. Timeouts de Seguridad

Evento	Timeout	Accion
Inactividad app	5 min	Require biometria/PIN
Sesion Firebase (Pro)	30 dias	Re-login
Sesion Firebase (Perfect)	7 dias	Re-login + MFA
Pantalla MFA abierta	5 min	Cancelar y volver a login

10.3. Bloqueo Progresivo

INTENTOS FALLIDOS DE PIN:

1-3 intentos: Mensaje de error, continuar
4 intentos: Advertencia de bloqueo proximo
5 intentos: Bloqueo 1 minuto
6 intentos: Bloqueo 5 minutos
7 intentos: Bloqueo 15 minutos
8+ intentos: Bloqueo 1 hora

BIOMETRIA:
3 fallos consecutivos: Fallback a PIN
(PIN sigue reglas arriba)

---

11. Metricas de UX

11.1. KPIs del Flujo

Metrica	Objetivo	Medicion
Tiempo login exitoso	< 10 segundos	analytics
Tasa exito primer intento OAuth	> 95%	analytics
Tasa exito MFA primer intento	> 85%	analytics
Tasa uso biometria vs PIN	> 70% biometria	analytics
Abandono en login	< 5%	analytics

11.2. Eventos de Analytics

Evento	Parametros
screen_view	screen_name: "splash", "login", "mfa", "biometric"
login_attempt	provider: "google"/"apple"
login_success	provider, time_ms, is_new_user
login_error	provider, error_code
mfa_attempt	-
mfa_success	time_ms
mfa_error	error_type
biometric_attempt	type: "face"/"fingerprint"
biometric_success	type, time_ms
biometric_fallback	reason

---

12. Referencias

• MTS-AUTH-001 - Especificacion Funcional
• MTS-ONB-001 - Onboarding
• 02-component-library.md
• 03-accessibility-guidelines.md

---

13. Historial de Cambios

Version	Fecha	Cambios
1.0.0	2025-12-05	Version inicial - Flujo V1.0 solo auth social

---

Documento generado por MobileUxUiDrone (Eight of Eight) "La autenticacion segura es la puerta a la confianza del usuario."