Pantalla: Login Social¶

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

1. Informacion General¶

Atributo	Valor
Nombre	Login Social
Proposito	Autenticacion via Google Sign-In o Apple Sign-In
Tipo	Full Screen (sin navegacion)
Acceso	Desde SCR-AUTH-001 (Splash) o sesion expirada
Prioridad	Critica

NOTA V1.0: Solo autenticacion social disponible. Email/password planificado para v1.5+.

2. Wireframe ASCII¶

+------------------------------------------+
|                                          |
|                                          |
|              +----------+                |
|              |          |                |
|              | MEDTIME  |                |
|              |   [Logo] |                |
|              +----------+                |
|                                          |
|           Inicia sesion para             |
|           continuar                      |
|                                          |
|                                          |
|  +------------------------------------+  |
|  | [G] Continuar con Google          |  |  <- Social Button
|  +------------------------------------+  |
|                                          |
|  +------------------------------------+  |
|  | [Apple] Continuar con Apple       |  |  <- Social Button
|  +------------------------------------+  |
|                                          |
|                                          |
|  Al continuar, aceptas nuestros          |
|  Terminos de Servicio y Politica         |  <- Legal links
|  de Privacidad                           |
|                                          |
|                                          |
|  ----- o crea una cuenta nueva -----     |  <- Divider
|                                          |
|  +------------------------------------+  |
|  |       Crear cuenta nueva           |  |  <- Secondary CTA
|  +------------------------------------+  |
|                                          |
+------------------------------------------+

2.2. Estado: Loading (OAuth en progreso)¶

+------------------------------------------+
|                                          |
|                                          |
|              +----------+                |
|              |          |                |
|              | MEDTIME  |                |
|              |   [Logo] |                |
|              +----------+                |
|                                          |
|           Inicia sesion para             |
|           continuar                      |
|                                          |
|                                          |
|  +------------------------------------+  |
|  | [G] [Spinner] Conectando...       |  |  <- Loading state
|  +------------------------------------+  |
|                                          |
|  +------------------------------------+  |
|  | [Apple] Continuar con Apple       |  |  <- Disabled
|  +------------------------------------+  |
|                                          |
|                                          |
|                                          |
+------------------------------------------+

2.3. Estado: Error¶

+------------------------------------------+
|                                          |
| +--------------------------------------+ |
| | [X] Error de conexion. Intenta       | |  <- Error banner
| |     de nuevo.            [Cerrar]    | |
| +--------------------------------------+ |
|                                          |
|              +----------+                |
|              | MEDTIME  |                |
|              +----------+                |
|                                          |
|           Inicia sesion para             |
|           continuar                      |
|                                          |
|  +------------------------------------+  |
|  | [G] Continuar con Google          |  |
|  +------------------------------------+  |
|                                          |
|  +------------------------------------+  |
|  | [Apple] Continuar con Apple       |  |
|  +------------------------------------+  |
|                                          |
|                                          |
+------------------------------------------+

2.4. Estado: Offline¶

+------------------------------------------+
| [Cloud-off] Sin conexion a internet      |  <- Offline banner
+------------------------------------------+
|                                          |
|              +----------+                |
|              | MEDTIME  |                |
|              +----------+                |
|                                          |
|           Inicia sesion para             |
|           continuar                      |
|                                          |
|                                          |
|  +------------------------------------+  |
|  | [G] Continuar con Google          |  |  <- Disabled
|  +------------------------------------+  |
|                                          |
|  +------------------------------------+  |
|  | [Apple] Continuar con Apple       |  |  <- Disabled
|  +------------------------------------+  |
|                                          |
|                                          |
|       Necesitas conexion a internet      |
|       para iniciar sesion.               |
|                                          |
|       [Reintentar conexion]              |
|                                          |
+------------------------------------------+

3. Componentes UI¶

3.1. Logo MedTime¶

Propiedad	Valor
Tamano	80x80dp
Posicion	Center, 15% from top

3.2. Titulo¶

Propiedad	Valor
Texto	"Inicia sesion para continuar"
Tipografia	xl (20sp), medium, neutral.900
Alineacion	Center

Propiedad	Valor
Componente	CMP-BTN-007 (Social Auth Button)
Variante	google
Texto	"Continuar con Google"
Icono	Google "G" logo (izquierda)
Height	56dp
Width	Full width - 32dp margins
Background	White (#FFFFFF)
Border	1dp neutral.300
Text color	neutral.800

Propiedad	Valor
Componente	CMP-BTN-007 (Social Auth Button)
Variante	apple
Texto	"Continuar con Apple"
Icono	Apple logo (izquierda)
Height	56dp
Width	Full width - 32dp margins
Background	Black (#000000)
Text color	White (#FFFFFF)

Nota iOS: En iOS, el boton Apple Sign-In usa ASAuthorizationAppleIDButton nativo para cumplir con App Store guidelines.

Propiedad	Valor
Texto	"Al continuar, aceptas nuestros [Terminos de Servicio] y [Politica de Privacidad]"
Tipografia	sm (14sp), regular, neutral.600
Links	primary, underlined
Posicion	Debajo de botones sociales

3.6. Divider¶

Propiedad	Valor
Componente	Divider con texto
Texto	"o crea una cuenta nueva"
Linea	1dp neutral.200
Texto color	neutral.500

3.7. Boton Crear Cuenta¶

Propiedad	Valor
Componente	CMP-BTN-002 (Secondary Button)
Variante	outlined
Texto	"Crear cuenta nueva"
Height	48dp
Width	Full width - 32dp margins
Accion	Ir a SCR-AUTH-003

Propiedad	Valor
Componente	CMP-FBK-004 (Banner)
Variante	error
Icono	Error icon (X)
Accion	Dismiss button
Posicion	Top, debajo de status bar
Auto-dismiss	5 segundos

Propiedad	Valor
Componente	CMP-SPC-009 (Offline Indicator)
Variante	banner
Texto	"Sin conexion a internet"
Icono	cloud-off
Persistente	Si, hasta recuperar conexion

4. Comportamientos¶

4.1. Flujo de Autenticacion¶

sequenceDiagram
    participant U as Usuario
    participant A as App
    participant G as Google/Apple
    participant F as Firebase

    U->>A: Tap "Continuar con Google"
    A->>A: Mostrar loading state
    A->>G: Iniciar OAuth flow
    G->>U: Mostrar selector de cuenta
    U->>G: Seleccionar cuenta
    G->>A: Retornar token
    A->>F: Verificar token Firebase

    alt Usuario nuevo
        F->>A: Usuario no existe
        A->>A: Navegar a Onboarding
    else Usuario existente
        F->>A: Usuario existe + tier
        alt Tier Perfect
            A->>A: Navegar a MFA
        else Tier Free/Pro
            A->>A: Navegar a Dashboard
        end
    end

4.2. Gestos¶

Gesto	Elemento	Accion
Tap	Boton Google	Iniciar Google OAuth
Tap	Boton Apple	Iniciar Apple OAuth
Tap	Link Terminos	Abrir modal terminos
Tap	Link Privacidad	Abrir modal privacidad
Tap	Crear cuenta	Navegar a SCR-AUTH-003
Tap	Cerrar banner	Dismiss error

4.3. Estados de Botones¶

Estado	Google Button	Apple Button
Default	Habilitado	Habilitado
Loading Google	Loading + "Conectando..."	Disabled
Loading Apple	Disabled	Loading + "Conectando..."
Offline	Disabled	Disabled
Error	Habilitado (retry)	Habilitado (retry)

5. Estados y Transiciones¶

5.1. Diagrama de Estados¶

stateDiagram-v2
    [*] --> Ready: Pantalla cargada

    Ready --> LoadingGoogle: Tap Google
    Ready --> LoadingApple: Tap Apple

    LoadingGoogle --> OAuthSheet: SDK listo
    LoadingApple --> OAuthSheet: SDK listo

    OAuthSheet --> Processing: Token recibido
    OAuthSheet --> Ready: Usuario cancela
    OAuthSheet --> Error: Error OAuth

    Processing --> NewUser: Usuario nuevo
    Processing --> ExistingUser: Usuario existe
    Processing --> Error: Error verificacion

    NewUser --> [*]: Navegar a Onboarding

    ExistingUser --> MFA: Tier Perfect
    ExistingUser --> [*]: Tier Free/Pro -> Dashboard

    MFA --> [*]: MFA exitoso -> Dashboard

    Error --> Ready: Auto-reset 3s

    Ready --> Offline: Perder conexion
    Offline --> Ready: Recuperar conexion

5.2. Transiciones¶

De	A	Trigger	Animacion
Ready	Loading	Tap social button	Button spinner
Loading	OAuth	SDK ready	Sheet slide up (nativo)
OAuth	Processing	Token received	Sheet dismiss
Processing	Onboarding	New user	Slide left
Processing	Dashboard	Existing (Free/Pro)	Fade + slide
Processing	MFA	Existing Perfect	Fade + slide

6. Datos Requeridos¶

6.1. Input Data¶

interface LoginScreenData {
  isOnline: boolean;
  lastProvider?: 'google' | 'apple';
  previousError?: AuthError;
}

interface AuthError {
  code: string;
  message: string;
  recoverable: boolean;
}

6.2. Output Events¶

Evento	Payload	Destino
onGoogleLogin	google_token	Firebase verify
onAppleLogin	apple_token	Firebase verify
onCreateAccount	-	SCR-AUTH-003
onTermsTap	-	Modal: Terminos
onPrivacyTap	-	Modal: Privacidad
onLoginSuccess	user_data, is_new	Onboarding o Dashboard
onLoginError	error_code	Error state

7. Accesibilidad¶

7.1. Labels y Hints¶

Elemento	accessibilityLabel	accessibilityHint
Logo	"MedTime"	-
Google Button	"Continuar con Google"	"Inicia sesion con tu cuenta de Google"
Apple Button	"Continuar con Apple"	"Inicia sesion con tu cuenta de Apple"
Link Terminos	"Terminos de Servicio"	"Abre los terminos de servicio"
Link Privacidad	"Politica de Privacidad"	"Abre la politica de privacidad"
Crear cuenta	"Crear cuenta nueva"	"Inicia el proceso de registro"
Error banner	"Error: {mensaje}"	"Toca para cerrar"
Offline banner	"Sin conexion a internet"	-

7.2. Orden de Foco¶

Titulo "Inicia sesion para continuar"
Boton Google Sign-In
Boton Apple Sign-In
Link Terminos de Servicio
Link Politica de Privacidad
Boton Crear cuenta nueva

Evento	Anuncio
Pantalla cargada	"Inicio de sesion. Continua con Google o Apple"
Loading iniciado	"Conectando con {provider}..."
Error	"Error de inicio de sesion: {mensaje}"
Offline	"Sin conexion a internet. Conectate para continuar"
Login exitoso	"Inicio de sesion exitoso"

7.4. Contraste y Tamanos¶

Elemento	Min Size	Contraste
Titulo	20sp	4.5:1
Social buttons	56dp height	4.5:1 (texto)
Legal text	14sp	4.5:1
Links	14sp	4.5:1 + underline
Touch targets	48dp min	-

8. Responsive Design¶

8.1. Breakpoints¶

Ancho	Adaptacion
< 360dp	Botones full width, margins 16dp
360-600dp	Layout default, margins 32dp
> 600dp (tablet)	Max width 400dp, centrado

8.2. Orientacion¶

Orientacion	Adaptacion
Portrait	Layout vertical default
Landscape	Logo + titulo izquierda, botones derecha

8.3. Teclado¶

No aplica (sin campos de texto en V1.0)

9. Seguridad¶

9.1. OAuth Security¶

Aspecto	Implementacion
State parameter	Random string para CSRF protection
PKCE	Code verifier + challenge (mobile)
Token storage	Keychain (iOS) / Keystore (Android)
Token validation	Server-side via Firebase

9.2. Rate Limiting¶

Evento	Limite
OAuth attempts	10 por minuto
Errors consecutivos	5 antes de cooldown 1 min

10. Metricas¶

10.1. Performance¶

Metrica	Objetivo
Time to interactive	< 500ms
OAuth SDK load	< 1s
Token verification	< 2s

10.2. Analytics Events¶

Evento	Parametros
screen_view	screen_name: "login_social"
login_attempt	provider: "google"/"apple"
login_success	provider, is_new_user, time_ms
login_error	provider, error_code
login_cancel	provider
terms_tap	-
privacy_tap	-
create_account_tap	-

11. Referencias¶

Documento generado por MobileUxUiDrone (Eight of Eight)

1. Informacion General¶

2. Wireframe ASCII¶

2.2. Estado: Loading (OAuth en progreso)¶

2.3. Estado: Error¶

2.4. Estado: Offline¶

3. Componentes UI¶

3.1. Logo MedTime¶

3.2. Titulo¶

3.5. Legal Footer¶

3.6. Divider¶

3.7. Boton Crear Cuenta¶

3.8. Error Banner¶

3.9. Offline Banner¶

4. Comportamientos¶

4.1. Flujo de Autenticacion¶

4.2. Gestos¶

4.3. Estados de Botones¶

5. Estados y Transiciones¶

5.1. Diagrama de Estados¶

5.2. Transiciones¶

6. Datos Requeridos¶

6.1. Input Data¶

6.2. Output Events¶

7. Accesibilidad¶

7.1. Labels y Hints¶

7.2. Orden de Foco¶

7.4. Contraste y Tamanos¶

8. Responsive Design¶

8.1. Breakpoints¶

8.2. Orientacion¶

8.3. Teclado¶

9. Seguridad¶

9.1. OAuth Security¶

9.2. Rate Limiting¶

10. Metricas¶

10.1. Performance¶

10.2. Analytics Events¶

11. Referencias¶

Pantalla: Login Social¶

1. Informacion General¶

2. Wireframe ASCII¶

2.1. Estado: Login Inicial¶

2.2. Estado: Loading (OAuth en progreso)¶

2.3. Estado: Error¶

2.4. Estado: Offline¶

3. Componentes UI¶

3.1. Logo MedTime¶

3.2. Titulo¶

3.3. Boton Google Sign-In¶

3.4. Boton Apple Sign-In¶

3.5. Legal Footer¶

3.6. Divider¶

3.7. Boton Crear Cuenta¶

3.8. Error Banner¶

3.9. Offline Banner¶

4. Comportamientos¶

4.1. Flujo de Autenticacion¶

4.2. Gestos¶

4.3. Estados de Botones¶

5. Estados y Transiciones¶

5.1. Diagrama de Estados¶

5.2. Transiciones¶

6. Datos Requeridos¶

6.1. Input Data¶

6.2. Output Events¶

7. Accesibilidad¶

7.1. Labels y Hints¶

7.2. Orden de Foco¶

7.3. Screen Reader Announcements¶

7.4. Contraste y Tamanos¶

8. Responsive Design¶

8.1. Breakpoints¶

8.2. Orientacion¶

8.3. Teclado¶

9. Seguridad¶

9.1. OAuth Security¶

9.2. Rate Limiting¶

10. Metricas¶

10.1. Performance¶

10.2. Analytics Events¶

11. Referencias¶