[Client] --login--> [Server]
[Server] creates session, stores in DB/Redis
[Server] --session_id cookie--> [Client]
[Client] --requests with cookie--> [Server]
[Server] validates session from storage

[Client] --login--> [Server]
[Server] validates credentials
[Server] generates JWT token (signed)
[Server] --token--> [Client]
[Client] stores token (SecureStore)
[Client] --requests with "Authorization: Bearer <token>"--> [Server]
[Server] validates token signature (stateless)

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

[Header].[Payload].[Signature]

{
  "sub": "1234567890",
  "name": "John Doe",
  "email": "john@example.com",
  "role": "user",
  "iat": 1516239022,
  "exp": 1516242622
}

[Client] --login request--> [Auth Provider (Google/FB/Apple)]
[Auth Provider] --shows login screen-->
[User] --enters credentials-->
[Auth Provider] --authorization code--> [Client]
[Client] --exchange code for token--> [Auth Provider]
[Auth Provider] --access_token + id_token--> [Client]
[Client] --access_token--> [Resource Server/API]

npx expo install expo-secure-store

import * as SecureStore from 'expo-secure-store';

const isAvailable = await SecureStore.isAvailableAsync();
if (!isAvailable) {
  console.warn('SecureStore не доступний на цьому пристрої');
  // Fallback стратегія
}

import * as SecureStore from 'expo-secure-store';

// Збереження даних
async function saveToken(token: string): Promise<void> {
  try {
    await SecureStore.setItemAsync('userToken', token);
    console.log('Токен успішно збережено');
  } catch (error) {
    console.error('Помилка збереження токену:', error);
    throw error;
  }
}

// Читання даних
async function getToken(): Promise<string | null> {
  try {
    const token = await SecureStore.getItemAsync('userToken');
    return token;
  } catch (error) {
    console.error('Помилка читання токену:', error);
    return null;
  }
}

// Видалення даних
async function deleteToken(): Promise<void> {
  try {
    await SecureStore.deleteItemAsync('userToken');
    console.log('Токен успішно видалено');
  } catch (error) {
    console.error('Помилка видалення токену:', error);
    throw error;
  }
}

interface SecureStoreOptions {
  keychainService?: string;      // iOS: custom keychain service name
  keychainAccessible?: number;   // iOS: коли дані доступні
  requireAuthentication?: boolean; // Вимагати біометрію для доступу
  authenticationPrompt?: string;  // Текст промпту біометрії
}

import * as SecureStore from 'expo-secure-store';

async function saveSecureToken(token: string): Promise<void> {
  await SecureStore.setItemAsync('userToken', token, {
    requireAuthentication: true,
    authenticationPrompt: 'Автентифікуйтесь для збереження токену',
  });
}

async function getSecureToken(): Promise<string | null> {
  // Користувач побачить промпт з Face ID / Touch ID / PIN
  const token = await SecureStore.getItemAsync('userToken', {
    requireAuthentication: true,
    authenticationPrompt: 'Автентифікуйтесь для доступу до додатку',
  });
  return token;
}

// ✅ Добре
await SecureStore.setItemAsync('nomad.auth.tokens', data);
await SecureStore.setItemAsync('user-profile', data);
await SecureStore.setItemAsync('access_token', data);

// ❌ Погано (невалідні символи)
await SecureStore.setItemAsync('@nomad/auth/tokens', data);  // Error: "/"
await SecureStore.setItemAsync('user@data', data);           // Error: "@"
await SecureStore.setItemAsync('cache#tokens', data);        // Error: "#"

// ✅ Добре
await SecureStore.setItemAsync('accessToken', token);
await SecureStore.setItemAsync('refreshToken', refreshToken);

// ❌ Погано (надмірне використання)
await SecureStore.setItemAsync('userName', 'John'); // Це не чутливі дані
await SecureStore.setItemAsync('theme', 'dark');    // Використайте AsyncStorage

async function safeGetToken(): Promise<string | null> {
  try {
    return await SecureStore.getItemAsync('userToken');
  } catch (error) {
    if (error instanceof Error) {
      // Логування в систему моніторингу (Sentry, Crashlytics)
      console.error('SecureStore error:', error.message);
    }
    // Не викидайте помилку далі — поверніть null і дозвольте додатку працювати
    return null;
  }
}

interface UserSession {
  accessToken: string;
  refreshToken: string;
  expiresAt: number;
  userId: string;
}

async function saveSession(session: UserSession): Promise<void> {
  const serialized = JSON.stringify(session);
  await SecureStore.setItemAsync('userSession', serialized);
}

async function getSession(): Promise<UserSession | null> {
  const serialized = await SecureStore.getItemAsync('userSession');
  if (!serialized) return null;
  
  try {
    return JSON.parse(serialized) as UserSession;
  } catch {
    // Corrupted data
    await SecureStore.deleteItemAsync('userSession');
    return null;
  }
}

const STORAGE_KEYS = {
  AUTH_TOKEN: '@app/auth/token',
  REFRESH_TOKEN: '@app/auth/refresh',
  USER_ID: '@app/auth/userId',
} as const;

// Використання
await SecureStore.setItemAsync(STORAGE_KEYS.AUTH_TOKEN, token);

src/
├── features/
│   └── auth/
│       ├── api/
│       │   └── authApi.ts           # HTTP запити до API
│       ├── components/
│       │   ├── LoginForm.tsx        # Форма входу
│       │   └── ProtectedRoute.tsx   # HOC для захищених екранів
│       ├── context/
│       │   └── AuthContext.tsx      # Глобальний стан автентифікації
│       ├── hooks/
│       │   ├── useAuth.ts           # Hook для доступу до контексту
│       │   └── useProtectedRoute.ts # Hook для захисту маршрутів
│       ├── services/
│       │   └── tokenService.ts      # Робота з SecureStore
│       ├── types/
│       │   └── auth.types.ts        # TypeScript типи
│       └── utils/
│           ├── tokenValidator.ts    # Валідація JWT
│           └── authErrors.ts        # Кастомні помилки
├── navigation/
│   ├── AuthNavigator.tsx            # Стек для неавторизованих
│   ├── AppNavigator.tsx             # Стек для авторизованих
│   └── RootNavigator.tsx            # Головний навігатор
└── App.tsx

// src/features/auth/types/auth.types.ts

/**
 * Дані користувача після автентифікації
 */
export interface User {
  id: string;
  email: string;
  name: string;
  avatar?: string;
  role: 'user' | 'admin' | 'moderator';
}

/**
 * Credentials для входу
 */
export interface LoginCredentials {
  email: string;
  password: string;
}

/**
 * Credentials для реєстрації
 */
export interface RegisterCredentials extends LoginCredentials {
  name: string;
  confirmPassword: string;
}

/**
 * Відповідь API після успішної автентифікації
 */
export interface AuthResponse {
  user: User;
  accessToken: string;
  refreshToken: string;
  expiresIn: number; // Секунди до закінчення терміну дії
}

/**
 * Стан автентифікації в контексті
 */
export interface AuthState {
  user: User | null;
  isAuthenticated: boolean;
  isLoading: boolean;
  error: string | null;
}

/**
 * Дії контексту автентифікації
 */
export interface AuthContextValue extends AuthState {
  login: (credentials: LoginCredentials) => Promise<void>;
  register: (credentials: RegisterCredentials) => Promise<void>;
  logout: () => Promise<void>;
  refreshSession: () => Promise<void>;
  clearError: () => void;
}

/**
 * Кастомні помилки автентифікації
 */
export class AuthError extends Error {
  constructor(
    message: string,
    public code: 'INVALID_CREDENTIALS' | 'NETWORK_ERROR' | 'TOKEN_EXPIRED' | 'UNKNOWN',
    public statusCode?: number
  ) {
    super(message);
    this.name = 'AuthError';
  }
}

/**
 * Токени збережені в SecureStore
 */
export interface StoredTokens {
  accessToken: string;
  refreshToken: string;
  expiresAt: number; // Unix timestamp
}

// src/features/auth/services/tokenService.ts

import * as SecureStore from 'expo-secure-store';
import type { StoredTokens } from '../types/auth.types';

/**
 * Ключі для SecureStore
 */
const STORAGE_KEYS = {
  TOKENS: '@secure-notes/tokens',
} as const;

/**
 * Сервіс для роботи з токенами в захищеному сховищі
 */
class TokenService {
  /**
   * Збереження токенів
   */
  async saveTokens(
    accessToken: string,
    refreshToken: string,
    expiresIn: number
  ): Promise<void> {
    try {
      const tokens: StoredTokens = {
        accessToken,
        refreshToken,
        expiresAt: Date.now() + expiresIn * 1000,
      };

      const serialized = JSON.stringify(tokens);
      await SecureStore.setItemAsync(STORAGE_KEYS.TOKENS, serialized);
      
      console.log('✅ Токени збережено у SecureStore');
    } catch (error) {
      console.error('❌ Помилка збереження токенів:', error);
      throw new Error('Не вдалося зберегти токени автентифікації');
    }
  }

  /**
   * Отримання збережених токенів
   */
  async getTokens(): Promise<StoredTokens | null> {
    try {
      const serialized = await SecureStore.getItemAsync(STORAGE_KEYS.TOKENS);
      
      if (!serialized) {
        console.log('ℹ️ Токени не знайдено');
        return null;
      }

      const tokens = JSON.parse(serialized) as StoredTokens;
      
      // Перевірка на валідність структури
      if (!tokens.accessToken || !tokens.refreshToken || !tokens.expiresAt) {
        console.warn('⚠️ Невалідна структура токенів, видаляємо');
        await this.clearTokens();
        return null;
      }

      return tokens;
    } catch (error) {
      console.error('❌ Помилка читання токенів:', error);
      // Corrupted data — видаляємо
      await this.clearTokens();
      return null;
    }
  }

  /**
   * Отримання лише access token
   */
  async getAccessToken(): Promise<string | null> {
    const tokens = await this.getTokens();
    return tokens?.accessToken ?? null;
  }

  /**
   * Перевірка чи токен валідний (не закінчився)
   */
  async isTokenValid(): Promise<boolean> {
    const tokens = await this.getTokens();
    
    if (!tokens) return false;

    // Додаємо буфер 60 секунд перед закінченням
    const isValid = tokens.expiresAt > Date.now() + 60000;
    
    if (!isValid) {
      console.log('⏰ Токен закінчився');
    }
    
    return isValid;
  }

  /**
   * Оновлення access token (після refresh)
   */
  async updateAccessToken(
    newAccessToken: string,
    expiresIn: number
  ): Promise<void> {
    const tokens = await this.getTokens();
    
    if (!tokens) {
      throw new Error('Неможливо оновити токен: поточні токени не знайдено');
    }

    await this.saveTokens(newAccessToken, tokens.refreshToken, expiresIn);
  }

  /**
   * Видалення токенів (logout)
   */
  async clearTokens(): Promise<void> {
    try {
      await SecureStore.deleteItemAsync(STORAGE_KEYS.TOKENS);
      console.log('🗑️ Токени видалено');
    } catch (error) {
      console.error('❌ Помилка видалення токенів:', error);
      // Не критично, можна проігнорувати
    }
  }

  /**
   * Отримання часу до закінчення токену (в секундах)
   */
  async getTimeUntilExpiry(): Promise<number | null> {
    const tokens = await this.getTokens();
    
    if (!tokens) return null;

    const timeLeft = Math.floor((tokens.expiresAt - Date.now()) / 1000);
    return Math.max(0, timeLeft);
  }
}

// Singleton instance
export const tokenService = new TokenService();

// src/features/auth/api/authApi.ts

import axios, { AxiosError, AxiosInstance } from 'axios';
import type {
  AuthResponse,
  LoginCredentials,
  RegisterCredentials,
  User,
} from '../types/auth.types';
import { tokenService } from '../services/tokenService';

/**
 * Базова конфігурація API
 */
const API_BASE_URL = __DEV__
  ? 'http://localhost:3000/api'
  : 'https://api.securenotes.com';

const API_TIMEOUT = 10000; // 10 секунд

/**
 * Клас для роботи з API автентифікації
 */
class AuthApi {
  private client: AxiosInstance;

  constructor() {
    this.client = axios.create({
      baseURL: API_BASE_URL,
      timeout: API_TIMEOUT,
      headers: {
        'Content-Type': 'application/json',
      },
    });

    // Interceptor для додавання токену до запитів
    this.client.interceptors.request.use(
      async (config) => {
        const token = await tokenService.getAccessToken();
        
        if (token) {
          config.headers.Authorization = `Bearer ${token}`;
        }
        
        return config;
      },
      (error) => Promise.reject(error)
    );

    // Interceptor для обробки 401 помилок
    this.client.interceptors.response.use(
      (response) => response,
      async (error: AxiosError) => {
        if (error.response?.status === 401) {
          // Токен невалідний — очищаємо
          await tokenService.clearTokens();
          
          // Тут можна додати логіку refresh token
          // або редірект на екран логіну
        }
        
        return Promise.reject(error);
      }
    );
  }

  /**
   * Вхід в систему
   */
  async login(credentials: LoginCredentials): Promise<AuthResponse> {
    try {
      const response = await this.client.post<AuthResponse>(
        '/auth/login',
        credentials
      );

      return response.data;
    } catch (error) {
      throw this.handleError(error);
    }
  }

  /**
   * Реєстрація
   */
  async register(credentials: RegisterCredentials): Promise<AuthResponse> {
    try {
      const response = await this.client.post<AuthResponse>(
        '/auth/register',
        credentials
      );

      return response.data;
    } catch (error) {
      throw this.handleError(error);
    }
  }

  /**
   * Вихід з системи (інвалідація токену на сервері)
   */
  async logout(): Promise<void> {
    try {
      await this.client.post('/auth/logout');
    } catch (error) {
      // Логуємо, але не кидаємо помилку
      console.error('Помилка logout на сервері:', error);
    }
  }

  /**
   * Оновлення токену за допомогою refresh token
   */
  async refreshToken(refreshToken: string): Promise<AuthResponse> {
    try {
      const response = await this.client.post<AuthResponse>(
        '/auth/refresh',
        { refreshToken }
      );

      return response.data;
    } catch (error) {
      throw this.handleError(error);
    }
  }

  /**
   * Отримання інформації про поточного користувача
   */
  async getCurrentUser(): Promise<User> {
    try {
      const response = await this.client.get<User>('/auth/me');
      return response.data;
    } catch (error) {
      throw this.handleError(error);
    }
  }

  /**
   * Валідація токену на сервері
   */
  async validateToken(): Promise<boolean> {
    try {
      await this.client.get('/auth/validate');
      return true;
    } catch {
      return false;
    }
  }

  /**
   * Уніфікована обробка помилок
   */
  private handleError(error: unknown): Error {
    if (axios.isAxiosError(error)) {
      const message = error.response?.data?.message || error.message;
      const status = error.response?.status;

      // Специфічні повідомлення для різних статусів
      switch (status) {
        case 400:
          return new Error('Невірні дані. Перевірте введену інформацію.');
        case 401:
          return new Error('Невірний email або пароль.');
        case 403:
          return new Error('Доступ заборонено.');
        case 404:
          return new Error('Користувача не знайдено.');
        case 409:
          return new Error('Користувач з таким email вже існує.');
        case 429:
          return new Error('Занадто багато спроб. Спробуйте пізніше.');
        case 500:
          return new Error('Помилка сервера. Спробуйте пізніше.');
        default:
          return new Error(message || 'Невідома помилка мережі');
      }
    }

    if (error instanceof Error) {
      return error;
    }

    return new Error('Невідома помилка');
  }
}

// Singleton instance
export const authApi = new AuthApi();

App Start
   ↓
AuthProvider init
   ↓
Check SecureStore for tokens
   ↓
   ├─ Tokens found & valid → Fetch user data → Set authenticated
   └─ No tokens / invalid → Set unauthenticated
   ↓
Render navigation tree
   ↓
   ├─ Authenticated → AppNavigator (main screens)
   └─ Unauthenticated → AuthNavigator (login/register)

// src/features/auth/context/AuthContext.tsx

import React, {
  createContext,
  useContext,
  useEffect,
  useState,
  useCallback,
  useMemo,
  ReactNode,
} from 'react';
import type {
  AuthContextValue,
  AuthState,
  LoginCredentials,
  RegisterCredentials,
  User,
} from '../types/auth.types';
import { authApi } from '../api/authApi';
import { tokenService } from '../services/tokenService';

/**
 * Context для автентифікації
 */
const AuthContext = createContext<AuthContextValue | undefined>(undefined);

/**
 * Props для Provider
 */
interface AuthProviderProps {
  children: ReactNode;
}

/**
 * Provider компонент для автентифікації
 */
export function AuthProvider({ children }: AuthProviderProps) {
  // Стан автентифікації
  const [state, setState] = useState<AuthState>({
    user: null,
    isAuthenticated: false,
    isLoading: true, // Початково true, поки перевіряємо токени
    error: null,
  });

  /**
   * Оновлення стану (helper)
   */
  const updateState = useCallback((updates: Partial<AuthState>) => {
    setState((prev) => ({ ...prev, ...updates }));
  }, []);

  /**
   * Очищення помилки
   */
  const clearError = useCallback(() => {
    updateState({ error: null });
  }, [updateState]);

  /**
   * Встановлення автентифікації
   */
  const setAuthenticated = useCallback(
    (user: User) => {
      updateState({
        user,
        isAuthenticated: true,
        isLoading: false,
        error: null,
      });
      console.log('✅ Користувач автентифікований:', user.email);
    },
    [updateState]
  );

  /**
   * Скидання автентифікації
   */
  const setUnauthenticated = useCallback(() => {
    updateState({
      user: null,
      isAuthenticated: false,
      isLoading: false,
    });
    console.log('🔓 Користувач деавтентифікований');
  }, [updateState]);

  /**
   * Відновлення сесії з SecureStore
   */
  const restoreSession = useCallback(async () => {
    console.log('🔄 Спроба відновлення сесії...');
    
    try {
      // Перевіряємо наявність токенів
      const tokens = await tokenService.getTokens();
      
      if (!tokens) {
        console.log('ℹ️ Токени не знайдено');
        setUnauthenticated();
        return;
      }

      // Перевіряємо валідність токену
      const isValid = await tokenService.isTokenValid();
      
      if (!isValid) {
        console.log('⏰ Токен закінчився');
        await tokenService.clearTokens();
        setUnauthenticated();
        return;
      }

      // Отримуємо дані користувача з сервера
      const user = await authApi.getCurrentUser();
      
      setAuthenticated(user);
    } catch (error) {
      console.error('❌ Помилка відновлення сесії:', error);
      // Очищаємо невалідні токени
      await tokenService.clearTokens();
      setUnauthenticated();
    }
  }, [setAuthenticated, setUnauthenticated]);

  /**
   * Вхід в систему
   */
  const login = useCallback(
    async (credentials: LoginCredentials) => {
      try {
        updateState({ isLoading: true, error: null });

        // Запит до API
        const response = await authApi.login(credentials);

        // Зберігаємо токени
        await tokenService.saveTokens(
          response.accessToken,
          response.refreshToken,
          response.expiresIn
        );

        // Оновлюємо стан
        setAuthenticated(response.user);
      } catch (error) {
        const errorMessage =
          error instanceof Error ? error.message : 'Помилка входу в систему';
        
        updateState({
          error: errorMessage,
          isLoading: false,
        });
        
        throw error;
      }
    },
    [updateState, setAuthenticated]
  );

  /**
   * Реєстрація
   */
  const register = useCallback(
    async (credentials: RegisterCredentials) => {
      try {
        updateState({ isLoading: true, error: null });

        // Запит до API
        const response = await authApi.register(credentials);

        // Зберігаємо токени
        await tokenService.saveTokens(
          response.accessToken,
          response.refreshToken,
          response.expiresIn
        );

        // Оновлюємо стан
        setAuthenticated(response.user);
      } catch (error) {
        const errorMessage =
          error instanceof Error ? error.message : 'Помилка реєстрації';
        
        updateState({
          error: errorMessage,
          isLoading: false,
        });
        
        throw error;
      }
    },
    [updateState, setAuthenticated]
  );

  /**
   * Вихід з системи
   */
  const logout = useCallback(async () => {
    try {
      updateState({ isLoading: true });

      // Інвалідуємо токен на сервері
      await authApi.logout();
    } catch (error) {
      console.error('Помилка logout на сервері:', error);
      // Продовжуємо logout локально навіть при помилці
    } finally {
      // Видаляємо токени з SecureStore
      await tokenService.clearTokens();
      
      // Оновлюємо стан
      setUnauthenticated();
    }
  }, [updateState, setUnauthenticated]);

  /**
   * Оновлення сесії (refresh token)
   */
  const refreshSession = useCallback(async () => {
    try {
      const tokens = await tokenService.getTokens();
      
      if (!tokens?.refreshToken) {
        throw new Error('Refresh token не знайдено');
      }

      const response = await authApi.refreshToken(tokens.refreshToken);

      await tokenService.saveTokens(
        response.accessToken,
        response.refreshToken,
        response.expiresIn
      );

      setAuthenticated(response.user);
    } catch (error) {
      console.error('❌ Помилка оновлення сесії:', error);
      await tokenService.clearTokens();
      setUnauthenticated();
      throw error;
    }
  }, [setAuthenticated, setUnauthenticated]);

  /**
   * Відновлення сесії при старті додатку
   */
  useEffect(() => {
    restoreSession();
  }, [restoreSession]);

  /**
   * Мемоїзоване значення контексту
   */
  const value = useMemo<AuthContextValue>(
    () => ({
      ...state,
      login,
      register,
      logout,
      refreshSession,
      clearError,
    }),
    [state, login, register, logout, refreshSession, clearError]
  );

  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}

/**
 * Hook для використання Auth Context
 */
export function useAuth(): AuthContextValue {
  const context = useContext(AuthContext);

  if (!context) {
    throw new Error('useAuth must be used within AuthProvider');
  }

  return context;
}

RootNavigator
   ↓
isAuthenticated?
   ├─ YES → AppNavigator
   │           ├─ HomeScreen
   │           ├─ NotesListScreen
   │           ├─ NoteDetailScreen
   │           └─ ProfileScreen
   │
   └─ NO  → AuthNavigator
               ├─ LoginScreen
               ├─ RegisterScreen
               └─ ForgotPasswordScreen

// src/navigation/RootNavigator.tsx

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { View, ActivityIndicator, StyleSheet } from 'react-native';
import { useAuth } from '../features/auth/context/AuthContext';
import { AuthNavigator } from './AuthNavigator';
import { AppNavigator } from './AppNavigator';

/**
 * Головний навігатор додатку
 * Вирішує, який стек показувати на основі стану автентифікації
 */
export function RootNavigator() {
  const { isAuthenticated, isLoading } = useAuth();

  // Показуємо загрузочний екран поки перевіряємо токени
  if (isLoading) {
    return (
      <View style={styles.loadingContainer}>
        <ActivityIndicator size="large" color="#007AFF" />
      </View>
    );
  }

  return (
    <NavigationContainer>
      {isAuthenticated ? <AppNavigator /> : <AuthNavigator />}
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
});

// src/navigation/AuthNavigator.tsx

import React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { LoginScreen } from '../screens/auth/LoginScreen';
import { RegisterScreen } from '../screens/auth/RegisterScreen';
import { ForgotPasswordScreen } from '../screens/auth/ForgotPasswordScreen';

/**
 * Типізація параметрів навігації
 */
export type AuthStackParamList = {
  Login: undefined;
  Register: undefined;
  ForgotPassword: undefined;
};

const Stack = createNativeStackNavigator<AuthStackParamList>();

/**
 * Навігаційний стек для неавторизованих користувачів
 */
export function AuthNavigator() {
  return (
    <Stack.Navigator
      initialRouteName="Login"
      screenOptions={{
        headerShown: false, // Приховуємо header для кастомного дизайну
        animation: 'slide_from_right',
      }}
    >
      <Stack.Screen name="Login" component={LoginScreen} />
      <Stack.Screen name="Register" component={RegisterScreen} />
      <Stack.Screen name="ForgotPassword" component={ForgotPasswordScreen} />
    </Stack.Navigator>
  );
}

// src/navigation/AppNavigator.tsx

import React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';
import { HomeScreen } from '../screens/app/HomeScreen';
import { NotesListScreen } from '../screens/app/NotesListScreen';
import { NoteDetailScreen } from '../screens/app/NoteDetailScreen';
import { ProfileScreen } from '../screens/app/ProfileScreen';

/**
 * Типізація параметрів навігації
 */
export type AppStackParamList = {
  MainTabs: undefined;
  NoteDetail: { noteId: string };
};

export type MainTabsParamList = {
  Home: undefined;
  Notes: undefined;
  Profile: undefined;
};

const Stack = createNativeStackNavigator<AppStackParamList>();
const Tab = createBottomTabNavigator<MainTabsParamList>();

/**
 * Bottom Tab Navigator
 */
function MainTabs() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName: keyof typeof Ionicons.glyphMap;

          switch (route.name) {
            case 'Home':
              iconName = focused ? 'home' : 'home-outline';
              break;
            case 'Notes':
              iconName = focused ? 'document-text' : 'document-text-outline';
              break;
            case 'Profile':
              iconName = focused ? 'person' : 'person-outline';
              break;
            default:
              iconName = 'help-outline';
          }

          return <Ionicons name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: '#007AFF',
        tabBarInactiveTintColor: '#8E8E93',
        headerShown: false,
      })}
    >
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{ tabBarLabel: 'Головна' }}
      />
      <Tab.Screen
        name="Notes"
        component={NotesListScreen}
        options={{ tabBarLabel: 'Нотатки' }}
      />
      <Tab.Screen
        name="Profile"
        component={ProfileScreen}
        options={{ tabBarLabel: 'Профіль' }}
      />
    </Tab.Navigator>
  );
}

/**
 * Навігаційний стек для авторизованих користувачів
 */
export function AppNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="MainTabs"
        component={MainTabs}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="NoteDetail"
        component={NoteDetailScreen}
        options={{
          title: 'Деталі нотатки',
          headerBackTitle: 'Назад',
        }}
      />
    </Stack.Navigator>
  );
}

// src/features/auth/components/ProtectedRoute.tsx

import React, { ComponentType } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { useAuth } from '../context/AuthContext';
import { useNavigation } from '@react-navigation/native';

/**
 * Опції для ProtectedRoute
 */
interface ProtectedRouteOptions {
  requiredRole?: 'user' | 'admin' | 'moderator';
  fallback?: ComponentType;
  redirectTo?: string;
}

/**
 * HOC для захисту окремих екранів
 */
export function withProtectedRoute<P extends object>(
  Component: ComponentType<P>,
  options: ProtectedRouteOptions = {}
) {
  return function ProtectedRoute(props: P) {
    const { user, isAuthenticated, logout } = useAuth();
    const navigation = useNavigation();

    // Перевірка автентифікації
    if (!isAuthenticated || !user) {
      if (options.fallback) {
        const FallbackComponent = options.fallback;
        return <FallbackComponent />;
      }

      return (
        <View style={styles.container}>
          <Text style={styles.title}>Доступ заборонено</Text>
          <Text style={styles.message}>
            Для перегляду цієї сторінки необхідно увійти в систему
          </Text>
          <TouchableOpacity style={styles.button} onPress={() => logout()}>
            <Text style={styles.buttonText}>Повернутися до входу</Text>
          </TouchableOpacity>
        </View>
      );
    }

    // Перевірка ролі
    if (options.requiredRole && user.role !== options.requiredRole) {
      return (
        <View style={styles.container}>
          <Text style={styles.title}>Недостатньо прав</Text>
          <Text style={styles.message}>
            У вас немає доступу до цієї сторінки. Необхідна роль:{' '}
            {options.requiredRole}
          </Text>
          <TouchableOpacity
            style={styles.button}
            onPress={() => navigation.goBack()}
          >
            <Text style={styles.buttonText}>Повернутися назад</Text>
          </TouchableOpacity>
        </View>
      );
    }

    // Все ОК — рендеримо компонент
    return <Component {...props} />;
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#FFFFFF',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#000000',
    marginBottom: 12,
  },
  message: {
    fontSize: 16,
    color: '#666666',
    textAlign: 'center',
    marginBottom: 24,
  },
  button: {
    backgroundColor: '#007AFF',
    paddingHorizontal: 24,
    paddingVertical: 12,
    borderRadius: 8,
  },
  buttonText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: '600',
  },
});

// Звичайний екран (доступний всім авторизованим)
export const NotesListScreen = withProtectedRoute(NotesListScreenComponent);

// Admin-екран
export const AdminDashboard = withProtectedRoute(AdminDashboardComponent, {
  requiredRole: 'admin',
});

// З кастомним fallback
export const PremiumFeature = withProtectedRoute(PremiumFeatureComponent, {
  fallback: PremiumPaywall,
});

// src/features/auth/hooks/useProtectedRoute.ts

import { useEffect } from 'react';
import { useAuth } from '../context/AuthContext';
import { useNavigation } from '@react-navigation/native';

/**
 * Hook для захисту маршрутів
 */
export function useProtectedRoute(requiredRole?: 'user' | 'admin' | 'moderator') {
  const { isAuthenticated, user, logout } = useAuth();
  const navigation = useNavigation();

  useEffect(() => {
    // Перевірка автентифікації
    if (!isAuthenticated) {
      // Logout автоматично перенаправить на Auth Stack
      logout();
      return;
    }

    // Перевірка ролі
    if (requiredRole && user?.role !== requiredRole) {
      console.warn(`Access denied: required role ${requiredRole}, got ${user?.role}`);
      navigation.goBack();
    }
  }, [isAuthenticated, user, requiredRole, logout, navigation]);

  return {
    isAuthorized: isAuthenticated && (!requiredRole || user?.role === requiredRole),
    user,
  };
}

function AdminScreen() {
  const { isAuthorized, user } = useProtectedRoute('admin');

  if (!isAuthorized) {
    return (
      <View>
        <Text>Завантаження...</Text>
      </View>
    );
  }

  return (
    <View>
      <Text>Вітаємо, адміністратор {user?.name}!</Text>
    </View>
  );
}

// src/features/auth/hooks/useTokenRefresh.ts

import { useEffect, useRef } from 'react';
import { AppState, AppStateStatus } from 'react-native';
import { useAuth } from '../context/AuthContext';
import { tokenService } from '../services/tokenService';

/**
 * Hook для автоматичного оновлення токену
 */
export function useTokenRefresh() {
  const { refreshSession, logout, isAuthenticated } = useAuth();
  const intervalRef = useRef<NodeJS.Timeout | null>(null);
  const appState = useRef(AppState.currentState);

  /**
   * Перевірка та оновлення токену
   */
  const checkAndRefresh = async () => {
    try {
      const timeLeft = await tokenService.getTimeUntilExpiry();
      
      if (timeLeft === null) return;

      // Якщо до закінчення менше 5 хвилин — оновлюємо
      if (timeLeft < 300) {
        console.log('⚠️ Токен скоро закінчиться, оновлюємо...');
        await refreshSession();
      }
    } catch (error) {
      console.error('❌ Помилка refresh токену:', error);
      // При помилці робимо logout
      await logout();
    }
  };

  /**
   * Обробка зміни стану додатку
   */
  const handleAppStateChange = async (nextAppState: AppStateStatus) => {
    // Додаток повернувся на передній план
    if (
      appState.current.match(/inactive|background/) &&
      nextAppState === 'active'
    ) {
      console.log('📱 Додаток активований, перевіряємо токен...');
      await checkAndRefresh();
    }
    
    appState.current = nextAppState;
  };

  useEffect(() => {
    if (!isAuthenticated) return;

    // Перевірка кожні 60 секунд
    intervalRef.current = setInterval(checkAndRefresh, 60000);

    // Слухач стану додатку
    const subscription = AppState.addEventListener(
      'change',
      handleAppStateChange
    );

    // Initial check
    checkAndRefresh();

    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
      }
      subscription.remove();
    };
  }, [isAuthenticated]);
}

function App() {
  useTokenRefresh(); // Автоматично працює в фоні

  return (
    <AuthProvider>
      <RootNavigator />
    </AuthProvider>
  );
}

// Interceptor для обробки 401
this.client.interceptors.response.use(
  (response) => response,
  async (error: AxiosError) => {
    const originalRequest = error.config;

    if (error.response?.status === 401 && originalRequest && !originalRequest._retry) {
      originalRequest._retry = true;

      try {
        // Спроба refresh
        const tokens = await tokenService.getTokens();
        
        if (!tokens?.refreshToken) {
          throw new Error('No refresh token');
        }

        const response = await this.client.post<AuthResponse>(
          '/auth/refresh',
          { refreshToken: tokens.refreshToken }
        );

        // Зберігаємо нові токени
        await tokenService.saveTokens(
          response.data.accessToken,
          response.data.refreshToken,
          response.data.expiresIn
        );

        // Повторюємо оригінальний запит з новим токеном
        originalRequest.headers.Authorization = `Bearer ${response.data.accessToken}`;
        return this.client(originalRequest);
      } catch (refreshError) {
        // Refresh не спрацював — logout
        await tokenService.clearTokens();
        // Тут можна викинути custom event для AuthContext
        return Promise.reject(refreshError);
      }
    }

    return Promise.reject(error);
  }
);

// src/features/auth/components/AuthErrorBoundary.tsx

import React, { Component, ReactNode } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

interface Props {
  children: ReactNode;
  onError?: (error: Error) => void;
}

interface State {
  hasError: boolean;
  error: Error | null;
}

/**
 * Error Boundary для ловлення auth-помилок
 */
export class AuthErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      hasError: false,
      error: null,
    };
  }

  static getDerivedStateFromError(error: Error): State {
    return {
      hasError: true,
      error,
    };
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    console.error('Auth Error Boundary caught:', error, errorInfo);
    this.props.onError?.(error);
  }

  handleReset = () => {
    this.setState({ hasError: false, error: null });
  };

  render() {
    if (this.state.hasError) {
      return (
        <View style={styles.container}>
          <Text style={styles.title}>Помилка автентифікації</Text>
          <Text style={styles.message}>
            {this.state.error?.message || 'Щось пішло не так'}
          </Text>
          <TouchableOpacity style={styles.button} onPress={this.handleReset}>
            <Text style={styles.buttonText}>Спробувати знову</Text>
          </TouchableOpacity>
        </View>
      );
    }

    return this.props.children;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#FFFFFF',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#FF3B30',
    marginBottom: 12,
  },
  message: {
    fontSize: 16,
    color: '#666666',
    textAlign: 'center',
    marginBottom: 24,
  },
  button: {
    backgroundColor: '#007AFF',
    paddingHorizontal: 24,
    paddingVertical: 12,
    borderRadius: 8,
  },
  buttonText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: '600',
  },
});

SecureNotesApp/
├── src/
│   ├── features/
│   │   ├── auth/
│   │   │   ├── api/
│   │   │   │   └── authApi.ts
│   │   │   ├── components/
│   │   │   │   ├── AuthErrorBoundary.tsx
│   │   │   │   └── ProtectedRoute.tsx
│   │   │   ├── context/
│   │   │   │   └── AuthContext.tsx
│   │   │   ├── hooks/
│   │   │   │   ├── useAuth.ts
│   │   │   │   └── useTokenRefresh.ts
│   │   │   ├── screens/
│   │   │   │   ├── LoginScreen.tsx
│   │   │   │   └── RegisterScreen.tsx
│   │   │   ├── services/
│   │   │   │   └── tokenService.ts
│   │   │   └── types/
│   │   │       └── auth.types.ts
│   │   └── notes/
│   │       ├── api/
│   │       │   └── notesApi.ts
│   │       ├── components/
│   │       │   ├── NoteCard.tsx
│   │       │   └── NoteForm.tsx
│   │       ├── screens/
│   │       │   ├── NotesListScreen.tsx
│   │       │   ├── NoteDetailScreen.tsx
│   │       │   └── CreateNoteScreen.tsx
│   │       └── types/
│   │           └── note.types.ts
│   ├── navigation/
│   │   ├── AuthNavigator.tsx
│   │   ├── AppNavigator.tsx
│   │   └── RootNavigator.tsx
│   ├── shared/
│   │   ├── components/
│   │   │   ├── Button.tsx
│   │   │   ├── Input.tsx
│   │   │   └── LoadingOverlay.tsx
│   │   └── constants/
│   │       └── theme.ts
│   └── App.tsx
├── app.json
├── package.json
└── tsconfig.json

npm install -g json-server
npm install --save-dev @types/json-server

{
  "users": [
    {
      "id": "1",
      "email": "demo@example.com",
      "password": "password123",
      "name": "Demo User",
      "role": "user"
    }
  ],
  "notes": [
    {
      "id": "1",
      "userId": "1",
      "title": "Перша нотатка",
      "content": "Це секретна нотатка!",
      "createdAt": "2024-01-15T10:00:00Z",
      "updatedAt": "2024-01-15T10:00:00Z"
    }
  ]
}

{
  "/api/*": "/$1",
  "/api/auth/login": "/login",
  "/api/auth/register": "/register",
  "/api/auth/me": "/users/1",
  "/api/notes": "/notes",
  "/api/notes/:id": "/notes/:id"
}

json-server --watch db.json --routes routes.json --port 3000

// server/index.ts
import express, { Request, Response } from 'express';
import jwt from 'jsonwebtoken';
import bodyParser from 'body-parser';

const app = express();
const PORT = 3000;
const SECRET_KEY = 'your-secret-key-change-in-production';

// Middleware
app.use(bodyParser.json());

// In-memory database
const users = [
  {
    id: '1',
    email: 'demo@example.com',
    password: 'password123', // В реальності — хешований!
    name: 'Demo User',
    role: 'user',
  },
];

const notes = [
  {
    id: '1',
    userId: '1',
    title: 'Перша нотатка',
    content: 'Це моя секретна нотатка!',
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  },
];

// Auth middleware
function authenticateToken(req: Request, res: Response, next: Function) {
  const authHeader = req.headers['authorization'];
  const token = authHeader && authHeader.split(' ')[1];

  if (!token) {
    return res.status(401).json({ message: 'Токен не надано' });
  }

  jwt.verify(token, SECRET_KEY, (err: any, user: any) => {
    if (err) {
      return res.status(401).json({ message: 'Невалідний токен' });
    }
    req.user = user;
    next();
  });
}

// Routes
app.post('/api/auth/login', (req: Request, res: Response) => {
  const { email, password } = req.body;

  const user = users.find((u) => u.email === email && u.password === password);

  if (!user) {
    return res.status(401).json({ message: 'Невірний email або пароль' });
  }

  const accessToken = jwt.sign(
    { userId: user.id, email: user.email },
    SECRET_KEY,
    { expiresIn: '1h' }
  );

  const refreshToken = jwt.sign(
    { userId: user.id, email: user.email },
    SECRET_KEY,
    { expiresIn: '7d' }
  );

  res.json({
    user: {
      id: user.id,
      email: user.email,
      name: user.name,
      role: user.role,
    },
    accessToken,
    refreshToken,
    expiresIn: 3600,
  });
});

app.post('/api/auth/register', (req: Request, res: Response) => {
  const { email, password, name } = req.body;

  if (users.find((u) => u.email === email)) {
    return res.status(409).json({ message: 'Користувач вже існує' });
  }

  const newUser = {
    id: String(users.length + 1),
    email,
    password, // В реальності — хешувати!
    name,
    role: 'user' as const,
  };

  users.push(newUser);

  const accessToken = jwt.sign(
    { userId: newUser.id, email: newUser.email },
    SECRET_KEY,
    { expiresIn: '1h' }
  );

  const refreshToken = jwt.sign(
    { userId: newUser.id, email: newUser.email },
    SECRET_KEY,
    { expiresIn: '7d' }
  );

  res.status(201).json({
    user: {
      id: newUser.id,
      email: newUser.email,
      name: newUser.name,
      role: newUser.role,
    },
    accessToken,
    refreshToken,
    expiresIn: 3600,
  });
});

app.get('/api/auth/me', authenticateToken, (req: Request, res: Response) => {
  const user = users.find((u) => u.id === req.user.userId);
  
  if (!user) {
    return res.status(404).json({ message: 'Користувача не знайдено' });
  }

  res.json({
    id: user.id,
    email: user.email,
    name: user.name,
    role: user.role,
  });
});

app.get('/api/notes', authenticateToken, (req: Request, res: Response) => {
  const userNotes = notes.filter((note) => note.userId === req.user.userId);
  res.json(userNotes);
});

app.post('/api/notes', authenticateToken, (req: Request, res: Response) => {
  const { title, content } = req.body;

  const newNote = {
    id: String(notes.length + 1),
    userId: req.user.userId,
    title,
    content,
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  };

  notes.push(newNote);
  res.status(201).json(newNote);
});

app.listen(PORT, () => {
  console.log(`✅ Server running on http://localhost:${PORT}`);
});