@the-bearded-bear/claude-craft 3.0.0

package/Dev/i18n/es/ReactNative/skills/security-reactnative/REFERENCE.md

@@ -0,0 +1,719 @@
+# Seguridad - Mejores Prácticas de React Native
+
+## Introducción
+
+La seguridad es crítica en las aplicaciones móviles que manipulan datos sensibles.
+
+---
+
+## Almacenamiento Seguro
+
+### 1. Expo SecureStore (iOS Keychain / Android Keystore)
+
+```typescript
+// services/storage/secure.storage.ts
+import * as SecureStore from 'expo-secure-store';
+import { Platform } from 'react-native';
+
+class SecureStorage {
+  /**
+   * Store sensitive data securely
+   * iOS: Keychain
+   * Android: Encrypted SharedPreferences with Keystore
+   */
+  async setItem(key: string, value: string): Promise<void> {
+    if (Platform.OS === 'web') {
+      // Web fallback (not secure, warn user)
+      console.warn('SecureStore not available on web, using localStorage');
+      localStorage.setItem(key, value);
+      return;
+    }
+
+    await SecureStore.setItemAsync(key, value, {
+      keychainAccessible: SecureStore.WHEN_UNLOCKED_THIS_DEVICE_ONLY,
+    });
+  }
+
+  async getItem(key: string): Promise<string | null> {
+    if (Platform.OS === 'web') {
+      return localStorage.getItem(key);
+    }
+
+    return await SecureStore.getItemAsync(key);
+  }
+
+  async removeItem(key: string): Promise<void> {
+    if (Platform.OS === 'web') {
+      localStorage.removeItem(key);
+      return;
+    }
+
+    await SecureStore.deleteItemAsync(key);
+  }
+}
+
+export const secureStorage = new SecureStorage();
+```
+
+### 2. MMKV con Encriptación
+
+```typescript
+// services/storage/mmkv.storage.ts
+import { MMKV } from 'react-native-mmkv';
+
+// Encrypted storage
+export const secureMMKV = new MMKV({
+  id: 'secure-storage',
+  encryptionKey: 'your-encryption-key', // Store in Keychain/Keystore
+});
+
+// Usage
+secureMMKV.set('accessToken', token);
+const token = secureMMKV.getString('accessToken');
+```
+
+### Qué Almacenar de Forma Segura
+
+```typescript
+// ✅ Store in SecureStore
+// - Access tokens
+// - Refresh tokens
+// - API keys
+// - User credentials
+// - Biometric keys
+// - Encryption keys
+
+// ✅ Store in MMKV (encrypted)
+// - User preferences
+// - Session data
+// - Cache data
+
+// ❌ NEVER store in plain text
+// - Passwords
+// - Credit card numbers
+// - Social security numbers
+// - Health data
+```
+
+---
+
+## Seguridad de API
+
+### 1. Gestión de Tokens
+
+```typescript
+// services/auth/token.service.ts
+import { secureStorage } from '@/services/storage/secure.storage';
+
+class TokenService {
+  private readonly ACCESS_TOKEN_KEY = 'access_token';
+  private readonly REFRESH_TOKEN_KEY = 'refresh_token';
+
+  async saveTokens(accessToken: string, refreshToken: string): Promise<void> {
+    await Promise.all([
+      secureStorage.setItem(this.ACCESS_TOKEN_KEY, accessToken),
+      secureStorage.setItem(this.REFRESH_TOKEN_KEY, refreshToken),
+    ]);
+  }
+
+  async getAccessToken(): Promise<string | null> {
+    return await secureStorage.getItem(this.ACCESS_TOKEN_KEY);
+  }
+
+  async getRefreshToken(): Promise<string | null> {
+    return await secureStorage.getItem(this.REFRESH_TOKEN_KEY);
+  }
+
+  async clearTokens(): Promise<void> {
+    await Promise.all([
+      secureStorage.removeItem(this.ACCESS_TOKEN_KEY),
+      secureStorage.removeItem(this.REFRESH_TOKEN_KEY),
+    ]);
+  }
+
+  async refreshAccessToken(): Promise<string> {
+    const refreshToken = await this.getRefreshToken();
+    if (!refreshToken) {
+      throw new Error('No refresh token available');
+    }
+
+    // Call refresh endpoint
+    const response = await fetch('/api/auth/refresh', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ refreshToken }),
+    });
+
+    if (!response.ok) {
+      await this.clearTokens();
+      throw new Error('Token refresh failed');
+    }
+
+    const { accessToken, refreshToken: newRefreshToken } = await response.json();
+    await this.saveTokens(accessToken, newRefreshToken);
+
+    return accessToken;
+  }
+}
+
+export const tokenService = new TokenService();
+```
+
+### 2. Seguridad de Peticiones API
+
+```typescript
+// services/api/interceptors.ts
+import { tokenService } from '@/services/auth/token.service';
+import type { AxiosInstance, AxiosError } from 'axios';
+import { router } from 'expo-router';
+
+export const setupInterceptors = (instance: AxiosInstance) => {
+  // Request interceptor - Add auth token
+  instance.interceptors.request.use(
+    async (config) => {
+      const token = await tokenService.getAccessToken();
+
+      if (token) {
+        config.headers.Authorization = `Bearer ${token}`;
+      }
+
+      // Add request ID for tracking
+      config.headers['X-Request-ID'] = generateRequestId();
+
+      // Add app version
+      config.headers['X-App-Version'] = Constants.expoConfig?.version;
+
+      return config;
+    },
+    (error) => Promise.reject(error)
+  );
+
+  // Response interceptor - Handle token refresh
+  instance.interceptors.response.use(
+    (response) => response,
+    async (error: AxiosError) => {
+      const originalRequest = error.config;
+
+      // Token expired, try to refresh
+      if (error.response?.status === 401 && originalRequest && !originalRequest._retry) {
+        originalRequest._retry = true;
+
+        try {
+          const newToken = await tokenService.refreshAccessToken();
+          originalRequest.headers.Authorization = `Bearer ${newToken}`;
+          return instance(originalRequest);
+        } catch (refreshError) {
+          // Refresh failed, logout user
+          await tokenService.clearTokens();
+          router.replace('/(auth)/login');
+          return Promise.reject(refreshError);
+        }
+      }
+
+      return Promise.reject(error);
+    }
+  );
+};
+
+function generateRequestId(): string {
+  return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+```
+
+### 3. Certificate Pinning
+
+```typescript
+// For bare workflow with react-native-ssl-pinning
+import { fetch as sslFetch } from 'react-native-ssl-pinning';
+
+const fetchWithPinning = async () => {
+  try {
+    const response = await sslFetch('https://api.example.com/data', {
+      method: 'GET',
+      sslPinning: {
+        certs: ['certificate'], // Certificate in android/app/src/main/assets/
+      },
+    });
+    return response.json();
+  } catch (error) {
+    console.error('SSL Pinning failed:', error);
+    throw error;
+  }
+};
+```
+
+---
+
+## Validación y Sanitización de Entradas
+
+### 1. Validación con Zod
+
+```typescript
+// utils/validation.schemas.ts
+import { z } from 'zod';
+
+export const loginSchema = z.object({
+  email: z
+    .string()
+    .email('Invalid email format')
+    .max(255, 'Email too long'),
+  password: z
+    .string()
+    .min(8, 'Password must be at least 8 characters')
+    .max(128, 'Password too long')
+    .regex(
+      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/,
+      'Password must contain uppercase, lowercase, and number'
+    ),
+});
+
+export const profileUpdateSchema = z.object({
+  name: z
+    .string()
+    .min(1, 'Name required')
+    .max(100, 'Name too long')
+    .regex(/^[a-zA-Z\s]+$/, 'Name can only contain letters'),
+  bio: z
+    .string()
+    .max(500, 'Bio too long')
+    .optional(),
+  website: z
+    .string()
+    .url('Invalid URL')
+    .optional()
+    .or(z.literal('')),
+});
+
+// Usage
+const validateLogin = (data: unknown) => {
+  try {
+    return loginSchema.parse(data);
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      // Handle validation errors
+      console.error(error.errors);
+    }
+    throw error;
+  }
+};
+```
+
+### 2. Sanitización
+
+```typescript
+// utils/sanitize.utils.ts
+
+/**
+ * Sanitize user input to prevent XSS
+ */
+export const sanitizeString = (input: string): string => {
+  return input
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#x27;')
+    .replace(/\//g, '&#x2F;');
+};
+
+/**
+ * Sanitize HTML (if needed)
+ */
+export const sanitizeHTML = (html: string): string => {
+  // Use DOMPurify or similar
+  // For React Native, use react-native-render-html with sanitization
+  return html; // Implement based on your needs
+};
+
+/**
+ * Validate and sanitize URL
+ */
+export const sanitizeURL = (url: string): string | null => {
+  try {
+    const parsed = new URL(url);
+    // Only allow http and https
+    if (!['http:', 'https:'].includes(parsed.protocol)) {
+      return null;
+    }
+    return parsed.toString();
+  } catch {
+    return null;
+  }
+};
+```
+
+---
+
+## Autenticación Biométrica
+
+### 1. Configuración
+
+```bash
+npx expo install expo-local-authentication
+```
+
+### 2. Implementación
+
+```typescript
+// hooks/useBiometrics.ts
+import * as LocalAuthentication from 'expo-local-authentication';
+import { useState, useEffect } from 'react';
+
+export const useBiometrics = () => {
+  const [isAvailable, setIsAvailable] = useState(false);
+  const [biometricType, setBiometricType] = useState<string | null>(null);
+
+  useEffect(() => {
+    checkBiometrics();
+  }, []);
+
+  const checkBiometrics = async () => {
+    const compatible = await LocalAuthentication.hasHardwareAsync();
+    const enrolled = await LocalAuthentication.isEnrolledAsync();
+    const types = await LocalAuthentication.supportedAuthenticationTypesAsync();
+
+    setIsAvailable(compatible && enrolled);
+
+    if (types.includes(LocalAuthentication.AuthenticationType.FACIAL_RECOGNITION)) {
+      setBiometricType('Face ID');
+    } else if (types.includes(LocalAuthentication.AuthenticationType.FINGERPRINT)) {
+      setBiometricType('Touch ID');
+    }
+  };
+
+  const authenticate = async (): Promise<boolean> => {
+    try {
+      const result = await LocalAuthentication.authenticateAsync({
+        promptMessage: 'Authenticate to continue',
+        fallbackLabel: 'Use passcode',
+        cancelLabel: 'Cancel',
+      });
+
+      return result.success;
+    } catch (error) {
+      console.error('Biometric authentication error:', error);
+      return false;
+    }
+  };
+
+  return {
+    isAvailable,
+    biometricType,
+    authenticate,
+  };
+};
+
+// Usage
+const LoginScreen = () => {
+  const { isAvailable, biometricType, authenticate } = useBiometrics();
+
+  const handleBiometricLogin = async () => {
+    const success = await authenticate();
+    if (success) {
+      // Login user
+    }
+  };
+
+  return (
+    <View>
+      {isAvailable && (
+        <Button onPress={handleBiometricLogin}>
+          Login with {biometricType}
+        </Button>
+      )}
+    </View>
+  );
+};
+```
+
+---
+
+## Ofuscación de Código
+
+### 1. react-native-obfuscating-transformer
+
+```bash
+npm install --save-dev react-native-obfuscating-transformer
+```
+
+### 2. metro.config.js
+
+```javascript
+const obfuscatingTransformer = require('react-native-obfuscating-transformer');
+
+module.exports = {
+  transformer: {
+    babelTransformerPath: obfuscatingTransformer,
+  },
+};
+```
+
+### 3. Qué Ofuscar
+
+```typescript
+// ✅ Obfuscate
+// - API keys (but prefer env variables)
+// - Business logic
+// - Algorithms
+// - Sensitive constants
+
+// ❌ Don't rely solely on obfuscation
+// It's security through obscurity, not real security
+// Always use proper encryption for sensitive data
+```
+
+---
+
+## Seguridad de Variables de Entorno
+
+### 1. Configuración de .env
+
+```bash
+# .env.development
+EXPO_PUBLIC_API_URL=https://dev-api.example.com
+EXPO_PUBLIC_ENVIRONMENT=development
+
+# Don't commit secrets!
+# Use EAS Secrets for sensitive values
+```
+
+### 2. EAS Secrets
+
+```bash
+# Set secret
+eas secret:create --name API_KEY --value "your-secret-key" --type string
+
+# List secrets
+eas secret:list
+
+# Use in app.config.ts
+export default {
+  expo: {
+    extra: {
+      apiKey: process.env.API_KEY,
+    },
+  },
+};
+```
+
+### 3. Acceso en la Aplicación
+
+```typescript
+// config/env.ts
+import Constants from 'expo-constants';
+
+export const ENV = {
+  API_URL: Constants.expoConfig?.extra?.apiUrl || 'https://api.example.com',
+  API_KEY: Constants.expoConfig?.extra?.apiKey,
+  ENVIRONMENT: Constants.expoConfig?.extra?.environment || 'production',
+};
+
+// ❌ NEVER
+export const ENV = {
+  API_KEY: 'hardcoded-key-in-source', // NEVER DO THIS!
+};
+```
+
+---
+
+## Seguridad de Red
+
+### 1. Solo HTTPS
+
+```typescript
+// services/api/client.ts
+import axios from 'axios';
+
+export const apiClient = axios.create({
+  baseURL: ENV.API_URL,
+  timeout: 10000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+// Ensure HTTPS
+if (!ENV.API_URL.startsWith('https://')) {
+  console.error('API URL must use HTTPS');
+  // In production, throw error
+  if (ENV.ENVIRONMENT === 'production') {
+    throw new Error('Insecure API URL');
+  }
+}
+```
+
+### 2. Configuración de Timeout
+
+```typescript
+// Prevent hanging requests
+const apiClient = axios.create({
+  timeout: 10000, // 10 seconds
+  timeoutErrorMessage: 'Request timeout',
+});
+```
+
+---
+
+## Seguridad de Pantalla
+
+### 1. Prevenir Capturas de Pantalla (iOS/Android)
+
+```typescript
+// utils/security.utils.ts
+import { Platform } from 'react-native';
+
+export const preventScreenshots = () => {
+  if (Platform.OS === 'android') {
+    // Use react-native-screen-capture or similar
+    // ScreenCapture.preventScreenCapture();
+  }
+  // iOS: Set UIApplicationUserInterfaceStylePrivacy in Info.plist
+};
+
+export const allowScreenshots = () => {
+  if (Platform.OS === 'android') {
+    // ScreenCapture.allowScreenCapture();
+  }
+};
+```
+
+### 2. Entrada de Texto Segura
+
+```typescript
+// components/SecureTextInput.tsx
+import { TextInput, type TextInputProps } from 'react-native';
+
+interface SecureTextInputProps extends TextInputProps {
+  autoComplete?: 'off';
+}
+
+export const SecureTextInput: FC<SecureTextInputProps> = (props) => {
+  return (
+    <TextInput
+      {...props}
+      autoComplete="off"
+      autoCorrect={false}
+      autoCapitalize="none"
+      secureTextEntry
+      textContentType="none" // Disable autofill
+    />
+  );
+};
+```
+
+---
+
+## Seguridad de Deep Links
+
+### 1. Validar Deep Links
+
+```typescript
+// utils/deeplink.utils.ts
+export const validateDeepLink = (url: string): boolean => {
+  try {
+    const parsed = new URL(url);
+
+    // Only allow your app's scheme
+    if (parsed.protocol !== 'myapp:') {
+      return false;
+    }
+
+    // Validate host
+    const allowedHosts = ['login', 'profile', 'article'];
+    if (!allowedHosts.includes(parsed.host)) {
+      return false;
+    }
+
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+// Usage in app
+const handleDeepLink = (url: string) => {
+  if (!validateDeepLink(url)) {
+    console.error('Invalid deep link:', url);
+    return;
+  }
+
+  // Process valid deep link
+  const parsed = new URL(url);
+  router.push(parsed.pathname);
+};
+```
+
+---
+
+## Checklist de Seguridad
+
+### Fase de Desarrollo
+- [ ] Datos sensibles en SecureStore/Keychain
+- [ ] Tokens de API asegurados
+- [ ] Validación de entradas implementada (Zod)
+- [ ] HTTPS forzado
+- [ ] Variables de entorno configuradas
+- [ ] Autenticación biométrica (si es necesario)
+- [ ] Deep links validados
+- [ ] Sin secretos hardcodeados en el código
+
+### Pre-Producción
+- [ ] Ofuscación de código habilitada
+- [ ] Certificate pinning (si es necesario)
+- [ ] Prevención de capturas de pantalla (si es necesario)
+- [ ] EAS Secrets configurados
+- [ ] Auditoría de seguridad completada
+- [ ] Pruebas de penetración realizadas
+
+### Post-Producción
+- [ ] Monitoreo de incidentes de seguridad
+- [ ] Actualizaciones regulares de dependencias
+- [ ] Estrategia de rotación de tokens
+- [ ] Plan de respuesta a incidentes
+
+---
+
+## Vulnerabilidades Comunes
+
+### 1. XSS (Cross-Site Scripting)
+
+```typescript
+// ❌ VULNERABLE
+<Text>{userInput}</Text> // If userInput contains malicious HTML
+
+// ✅ SAFE
+<Text>{sanitizeString(userInput)}</Text>
+```
+
+### 2. Inyección SQL (Backend)
+
+```typescript
+// ❌ VULNERABLE (backend)
+const query = `SELECT * FROM users WHERE email = '${email}'`;
+
+// ✅ SAFE (backend)
+const query = 'SELECT * FROM users WHERE email = ?';
+db.query(query, [email]);
+```
+
+### 3. Man-in-the-Middle
+
+```typescript
+// ❌ VULNERABLE
+fetch('http://api.example.com/data'); // HTTP!
+
+// ✅ SAFE
+fetch('https://api.example.com/data'); // HTTPS
+// + Certificate pinning for extra security
+```
+
+---
+
+## Recursos de Seguridad
+
+- [OWASP Mobile Security](https://owasp.org/www-project-mobile-security/)
+- [React Native Security Best Practices](https://reactnative.dev/docs/security)
+- [Expo Security](https://docs.expo.dev/guides/security/)
+
+---
+
+**La seguridad no es una funcionalidad, es una responsabilidad.**

package/Dev/i18n/es/ReactNative/skills/security-reactnative/SKILL.md

@@ -0,0 +1,10 @@
+---
+name: security-reactnative
+description: Seguridad - Mejores Prácticas de React Native. Use when reviewing security, implementing auth, or hardening code.
+---
+
+# Seguridad - Mejores Prácticas de React Native
+
+This skill provides guidelines and best practices.
+
+See @REFERENCE.md for detailed documentation.