@bmc-soft/keycloak-auth 1.0.0

package/README.md

@@ -0,0 +1,539 @@
+# @bmc-soft/keycloak-auth
+
+Готовый к продакшену пакет аутентификации Keycloak для React Native с упором на производительность и безопасность.
+
+## Возможности
+
+- **Производительность**: разбиение контекстов снижает лишние ре-рендеры; обновление токенов не затрагивает компоненты, которым нужны только конфиг или инстанс.
+- **Безопасность**: токены в OS Keychain; PIN шифруется AES; учётные данные не хранятся в открытом виде.
+- **Готовые экраны**: AuthPage, ConfirmAuthPage, виджеты ReauthBottomSheet и кнопки выхода.
+- **Темизация**: настройка через тему в `KeycloakProvider` (цвета, шрифты, Loader, кнопки).
+- **Автообновление токена**: обновление с повтором запроса; при ошибке — опциональный `onReauthRequired`.
+- **Биометрия**: FaceID/TouchID для подтверждения по PIN.
+- **React Native**: встроенные полифиллы для keycloak-js, без дополнительной настройки.
+
+## Установка
+
+```bash
+npm install @bmc-soft/keycloak-auth
+# или
+yarn add @bmc-soft/keycloak-auth
+```
+
+### Peer-зависимости
+
+```bash
+npm install react-native-keychain
+```
+
+Настройка нативных модулей: [react-native-keychain](https://github.com/oblador/react-native-keychain).
+
+Опционально (для интерцепторов): `axios` (>=1.0.0).  
+Для UI нужны: `@gorhom/bottom-sheet`, `react-native-webview`, `react-native-safe-area-context`, `lottie-react-native`, `react-native-svg`.
+
+> Полифиллы для React Native подключаются автоматически при использовании пакета; отдельная настройка keycloak-js не требуется.
+
+---
+
+## Быстрый старт
+
+### 1. Оборачиваем приложение в KeycloakProvider
+
+```tsx
+import { KeycloakProvider } from '@bmc-soft/keycloak-auth';
+
+const App = () => (
+  <KeycloakProvider
+    config={{
+      url: 'https://your-keycloak-server.com',
+      realm: 'your-realm',
+      clientId: 'your-client-id',
+    }}
+    redirectUri="myapp://callback"
+  >
+    <YourApp />
+  </KeycloakProvider>
+);
+```
+
+### 2. Экран входа
+
+```tsx
+import { AuthPage } from '@bmc-soft/keycloak-auth';
+
+const LoginScreen = () => (
+  <AuthPage
+    logo={require('./logo.png')}
+    onSuccess={(token) => {
+      // Сохраняем токен в сессию приложения и переходим
+      saveToken(token);
+      navigation.replace('Home');
+    }}
+    onError={(err) => console.error(err)}
+  />
+);
+```
+
+### 3. (Опционально) Настройка интерцепторов Axios
+
+Если используете axios, задайте провайдер токенов (см. [Axios](#axios)) и вызовите `setupAxiosInterceptors` с `tokenProvider` и `onReauthRequired`. Провайдер обычно настраивается внутри KeycloakProvider после инициализации keycloak (см. [Интеграция](#интеграция)).
+
+---
+
+## Провайдер и конфигурация
+
+### KeycloakProvider
+
+| Проп | Тип | Обязательный | Описание |
+|------|-----|--------------|----------|
+| `children` | ReactNode | да | Дерево приложения |
+| `config` | KeycloakConfigWith2FA | да | `url`, `realm`, `clientId`; опционально `clientId2fa` для первого входа с 2FA |
+| `redirectUri` | string | да | URI OAuth callback (например `myapp://callback`) |
+| `theme` | KeycloakTheme | нет | Цвета, шрифты, LoaderComponent, компоненты кнопок |
+| `onTokens` | (tokens: KeycloakTokens) => void | нет | Вызывается при изменении токенов (логин, refresh, logout) |
+| `autoRefreshToken` | boolean | нет | По умолчанию `true` |
+| `autoRefreshTokenMinValidity` | number | нет | За сколько секунд до истечения вызывать refresh; по умолчанию `5` |
+| `onReauthRequired` | () => void | нет | Вызывается при ошибке обновления токена (например показать экран реавторизации) |
+
+### KeycloakTheme
+
+Все поля опциональны; недостающие подставляются из дефолтной темы. Передаётся в KeycloakProvider как `theme`.
+
+- **fonts**: `primary`, `heading`
+- **colors**: `primary`, `background`, `error`, `text`, `button`, `buttonText`, `link`, `outlinedButtonBackground`, `outlinedButtonText`, `numberPadButtonBackground`, `numberPadText`, `numberPadDisabled`, `pinIndicatorEmpty`, `border`, `success`
+- **LoaderComponent**: компонент состояния загрузки
+- **ContainedButtonComponent**, **OutlinedButtonComponent**, **IconButtonComponent**: компоненты кнопок (пропсы см. в THEMING.md)
+
+Полная структура и примеры: [THEMING.md](./THEMING.md).
+
+---
+
+## Компоненты
+
+### Экраны
+
+#### AuthPage
+
+Первый вход: логин в WebView → установка PIN → обмен code на токены. Используется на экране «Вход».
+
+| Проп | Тип | По умолчанию | Описание |
+|------|-----|--------------|----------|
+| `onSuccess` | (token: string) => void | — | После успешного обмена code; передаётся access token |
+| `onError` | (error: Error) => void | — | При ошибке обмена или сохранения |
+| `logo` | ReactNode \| ImageSourcePropType | — | Логотип приложения |
+| `logoHeight`, `logoWidth` | number | 80 | Размер логотипа при использовании image source |
+| `showBiometryPrompt` | boolean | true | Спрашивать биометрию после установки PIN |
+| `pinLength` | number | 4 | Длина PIN |
+| `style`, `paddingTop`, `paddingBottom` | ViewStyle / number | — | Стили контейнера |
+
+#### ConfirmAuthPage
+
+Подтверждение сессии: фазы webview_detect → pin → webview_with_credentials (если сохранены учётные данные). Используется на экране «Подтверждение PIN» и внутри BottomSheet реавторизации.
+
+| Проп | Тип | По умолчанию | Описание |
+|------|-----|--------------|----------|
+| `onSuccess` | () => void | — | Успех (редирект или PIN без credentials) |
+| `onError` | (error: Error) => void | — | Например неверный PIN |
+| `onLogout` | () => void | — | После очистки хранилища пакета; в приложении — очистить сессию и перейти на экран входа |
+| `logoutText` | string | "Выйти из аккаунта" | Текст ссылки «Выйти» |
+| `logo`, `logoHeight`, `logoWidth` | — | 80 | Логотип |
+| `pinLength` | number | 4 | Длина PIN |
+| `allowBiometry`, `autoShowBiometry` | boolean | true | Биометрия |
+| `title`, `description` | string | — | Заголовок и описание блока PIN |
+| `style` | ViewStyle | — | Стиль контейнера |
+| `webViewTimeoutMs` | number | 3000 | Задержка (мс) в фазе webview_detect перед переходом на PIN |
+
+### Виджеты
+
+#### ReauthBottomSheet
+
+BottomSheet с подтверждением PIN для реавторизации. Управляется только пропсами (не привязан к Session приложения).
+
+| Проп | Тип | По умолчанию | Описание |
+|------|-----|--------------|----------|
+| `isVisible` | boolean | — | Отображать ли sheet |
+| `onSuccess` | () => void | — | Реавторизация прошла успешно |
+| `onDismiss` | () => void | — | Закрытие без успеха |
+| `onError` | (error: Error) => void | — | Ошибка ввода PIN |
+| `pinLength` | number | 4 | Длина PIN |
+| `allowBiometry`, `autoShowBiometry` | boolean | true | Биометрия |
+| `title` | string | "Подтвердите вход" | Заголовок |
+| `description` | string | "Введите PIN-код" | Описание |
+| `footer` | ReactNode | — | Опциональный футер |
+| `snapPointPercentage` | number | 50 | Высота sheet в % |
+
+### Кнопки выхода
+
+#### LogoutButtonText
+
+Текстовая кнопка (contained или outlined). По нажатию открывается полноэкранный Modal с WebViewLogout. Должна использоваться внутри KeycloakProvider.
+
+- **Базовые**: `onLogoutSuccess`, `onError`, `style`
+- **Специфичные**: `variant: 'contained' | 'outlined'`, `label: string`
+
+#### LogoutButtonIcon
+
+Кнопка выхода только с иконкой. Базовые пропсы плюс `renderIcon: ReactNode`.
+
+### Остальные UI (внутри пакета или для кастомных сценариев)
+
+- **WebViewLogin**, **WebViewLogout** — OAuth-потоки в WebView
+- **PINSetup**, **PINConfirm** — ввод и подтверждение PIN
+- **NumberPad**, **PINIndicator** — UI ввода PIN
+- **LogoutConfirmSheet** — подтверждение выхода
+
+---
+
+## Хуки
+
+Все хуки должны вызываться внутри KeycloakProvider (если не указано иное).
+
+### useKeycloakAuth()
+
+Полный API авторизации: инстанс keycloak, токен, login, logout, URL, состояние реавторизации.
+
+Возвращает: `keycloak`, `isInitialized`, `isLoading`, `error`, `token`, `isExpired`, `isAuthenticated`, `updateToken`, `login`, `logout`, `loadUserProfile`, `createLoginUrl`, `createLogoutUrl`, `clearTokens`, `isReauthRequired`, `showReauth`, `hideReauth`.
+
+### useToken()
+
+Доступ только к токенам (меньше ре-рендеров). Возвращает: `token`, `refreshToken`, `idToken`, `isExpired`, `updateToken`, `clearTokens`.
+
+### useReauth()
+
+Состояние UI реавторизации. Возвращает: `isReauthRequired`, `showReauth`, `hideReauth`.
+
+### useKeycloakAuthScreen(options?)
+
+Определяет, какой экран авторизации показывать: `'login'` или `'confirm'`. Используется для `initialRouteName` в Auth Stack.
+
+Возвращает: `screen: 'login' | 'confirm' | null`, `isLoading`, `error`.
+
+Опции: `shouldShowConfirm?: () => Promise<boolean>` — переопределить стандартную проверку (наличие токенов и PIN).
+
+### useKeycloakTheme()
+
+Текущая тема (объединённая с дефолтной). Возвращает: `fonts`, `colors`, `LoaderComponent`, `ContainedButtonComponent`, `OutlinedButtonComponent`, `IconButtonComponent`. Можно вызывать вне провайдера (вернётся дефолтная тема).
+
+---
+
+## Хранилище
+
+### tokenStorage
+
+Хранение токенов в Keychain. API: `getToken`, `saveToken`, `getRefreshToken`, `saveRefreshToken`, `getIdToken`, `saveIdToken`, `getTokens`, `saveTokens`, `clearTokens`, `hasTokens`.
+
+После успешного ConfirmAuthPage (например при реавторизации) вызовите `tokenStorage.getToken()`, чтобы получить текущий access token и обновить сессию приложения.
+
+> **Важно**: не храните токены в AsyncStorage. Используйте только Keychain через пакет.
+
+### credentialStorage
+
+Используется внутри пакета для зашифрованных учётных данных и биометрии. Экспортируется для продвинутых сценариев (например очистка PIN/credentials при выходе).
+
+---
+
+## Axios
+
+### Интерфейс TokenProvider
+
+Используется интерцепторами для получения и обновления токенов:
+
+- `getToken(): Promise<string | null> | string | null`
+- `refreshToken(): Promise<string | null>`
+- `hasRefreshToken?(): Promise<boolean> | boolean` (опционально)
+- `formatToken?(token: string): string` (опционально; по умолчанию `Bearer ${token}`)
+
+### setupAxiosInterceptors(axiosInstance, config)
+
+Добавляет интерцепторы: в запрос — подстановка токена; в ответ — retry при 401, обновление токена, при ошибке — вызов `onReauthRequired`.
+
+**config**: `tokenProvider`, `onReauthRequired`, `onTokenRefreshed`, `onRefreshError`, `maxRetries` (по умолчанию 1), `autoAddToken` (true), `autoRetryOn401` (true), `excludeEndpoints`.
+
+Возвращает `{ cleanup }` для снятия интерцепторов.
+
+### KeycloakTokenProvider
+
+Класс, реализующий TokenProvider на основе инстанса KeycloakReactNativeClient. Удобно, когда инстанс клиента уже есть и нужен адаптер для интерцепторов.
+
+---
+
+## Интеграция
+
+Пошаговая интеграция с примерами кода. Рассматривается только Keycloak.
+
+### 1. Оборачивание приложения в KeycloakProvider
+
+Конфиг и `redirectUri` берут из настроек приложения. Тему (Loader, кнопки, цвета) передайте из темы приложения. В `onTokens` сохраняйте токен в хранилище сессии; в `onReauthRequired` показывайте экран реавторизации.
+
+**Порядок провайдеров**: если используется `BottomSheetModalProvider` из `@gorhom/bottom-sheet` (например для реавторизации или других модалок), он должен находиться **внутри** KeycloakProvider. Иначе ReauthBottomSheet или ConfirmAuthPage внутри модалки не получат контекст Keycloak. Порядок: `KeycloakProvider` → `BottomSheetModalProvider` → остальное дерево приложения.
+
+```tsx
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+import { KeycloakProvider, type KeycloakTheme } from '@bmc-soft/keycloak-auth';
+
+const theme: KeycloakTheme = {
+  colors: {
+    primary: appColors.primary,
+    background: appColors.background,
+    error: appColors.error,
+    text: appColors.text,
+    numberPadButtonBackground: appColors.cardBackground,
+    numberPadText: appColors.text,
+    pinIndicatorEmpty: appColors.textMuted,
+  },
+  LoaderComponent: AppLoader,
+  ContainedButtonComponent: AppContainedButton,
+  OutlinedButtonComponent: AppOutlinedButton,
+  IconButtonComponent: AppIconButton,
+};
+
+export const App = () => (
+  <KeycloakProvider
+    config={{
+      url: 'https://sso.example.com',
+      realm: 'my-realm',
+      clientId: 'my-app',
+    }}
+    redirectUri="myapp://callback"
+    theme={theme}
+    onTokens={({ token }) => {
+      Session.events.onChangeAuthToken(token);
+    }}
+    onReauthRequired={() => {
+      Session.events.onRequireReauth();
+    }}
+  >
+    <BottomSheetModalProvider>
+      <RootNavigator />
+    </BottomSheetModalProvider>
+  </KeycloakProvider>
+);
+```
+
+### 2. Установка TokenProvider для axios
+
+Провайдер токенов настраивается один раз внутри KeycloakProvider после инициализации keycloak (например во вспомогательном компоненте). Не дублируйте настройку на экране логина.
+
+```tsx
+import { useKeycloakAuth } from '@bmc-soft/keycloak-auth';
+import { setKeycloakTokenProvider, resetKeycloakTokenProvider } from './axios';
+
+const KeycloakAxiosTokenProviderSetup = ({ children }) => {
+  const { keycloak, isInitialized } = useKeycloakAuth();
+
+  useEffect(() => {
+    if (isInitialized && keycloak) {
+      setKeycloakTokenProvider({
+        getToken: () => keycloak.token || null,
+        updateToken: async (minValidity) => {
+          const result = await keycloak.updateToken(minValidity);
+          return result !== null;
+        },
+      });
+    }
+    return () => resetKeycloakTokenProvider();
+  }, [isInitialized, keycloak]);
+
+  return <>{children}</>;
+};
+
+// Внутри KeycloakProvider:
+<KeycloakProvider config={...} redirectUri={...} ...>
+  <KeycloakAxiosTokenProviderSetup>
+    <BottomSheetModalProvider>
+      <RootNavigator />
+    </BottomSheetModalProvider>
+  </KeycloakAxiosTokenProviderSetup>
+</KeycloakProvider>
+```
+
+Подключение интерцепторов к инстансу axios (там, где он создаётся):
+
+```tsx
+import { setupAxiosInterceptors } from '@bmc-soft/keycloak-auth';
+import { getKeycloakTokenProvider } from './keycloakTokenProvider';
+
+const api = axios.create({ baseURL: 'https://api.example.com' });
+
+setupAxiosInterceptors(api, {
+  tokenProvider: {
+    getToken: () => getKeycloakTokenProvider()?.getToken() ?? null,
+    refreshToken: () =>
+      getKeycloakTokenProvider()
+        ?.updateToken(120)
+        .then((ok) => (ok ? getKeycloakTokenProvider()?.getToken() ?? null : null)),
+  },
+  onReauthRequired: () => Session.events.onRequireReauth(),
+});
+```
+
+### 3. Стек авторизации (Login + Confirm)
+
+Два экрана: Login (AuthPage) и Confirm (ConfirmAuthPage). Начальный маршрут задаётся через `useKeycloakAuthScreen()`: показывать Confirm, если есть токены и PIN, иначе Login.
+
+```tsx
+import { useKeycloakAuthScreen, AuthPage, ConfirmAuthPage, tokenStorage } from '@bmc-soft/keycloak-auth';
+
+const Stack = createNativeStackNavigator();
+
+export const AuthStack = () => {
+  const { screen, isLoading } = useKeycloakAuthScreen();
+
+  if (isLoading) return <Loader />;
+
+  const initialRoute = screen === 'confirm' ? 'Confirm' : 'Login';
+
+  return (
+    <Stack.Navigator initialRouteName={initialRoute}>
+      <Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
+      <Stack.Screen name="Confirm" component={ConfirmScreen} options={{ headerShown: false }} />
+    </Stack.Navigator>
+  );
+};
+
+const LoginScreen = () => (
+  <AuthPage
+    logo={require('./logo.png')}
+    onSuccess={(token) => Session.events.onLogin(token)}
+    onError={(err) => console.error(err)}
+  />
+);
+
+const ConfirmScreen = () => {
+  const navigation = useNavigation();
+
+  const onSuccess = useCallback(async () => {
+    const token = await tokenStorage.getToken();
+    if (token) Session.events.onLogin(token);
+  }, []);
+
+  return (
+    <ConfirmAuthPage
+      onSuccess={onSuccess}
+      onLogout={() => {
+        Session.events.onLogout();
+        navigation.replace('Login');
+      }}
+      pinLength={4}
+    />
+  );
+};
+```
+
+### 4. Реавторизация при 401
+
+При 401 интерцепторы вызывают `onReauthRequired`. Покажите BottomSheet (или полноэкранный экран) с ConfirmAuthPage. После успешного ввода PIN получите токен из пакета, обновите сессию и закройте реавторизацию.
+
+```tsx
+import { ConfirmAuthPage, tokenStorage } from '@bmc-soft/keycloak-auth';
+import BottomSheet from '@gorhom/bottom-sheet';
+
+export const ReauthBottomSheet = () => {
+  const sheetRef = useRef(null);
+  const showReauth = useStore($reauthRequired); // например Effector / useState
+
+  useEffect(() => {
+    showReauth ? sheetRef.current?.snapToIndex(0) : sheetRef.current?.close();
+  }, [showReauth]);
+
+  const handleSuccess = useCallback(async () => {
+    const token = await tokenStorage.getToken();
+    if (token) {
+      Session.events.onLogin(token);
+      Session.events.onReauthCompleted();
+    }
+    sheetRef.current?.close();
+  }, []);
+
+  return (
+    <BottomSheet ref={sheetRef} snapPoints={['50%']} enablePanDownToClose>
+      <ConfirmAuthPage onSuccess={handleSuccess} pinLength={4} />
+    </BottomSheet>
+  );
+};
+```
+
+### 5. Выход
+
+Используйте LogoutButtonIcon или LogoutButtonText. По нажатию открывается Modal с WebViewLogout; при успешном выходе вызывается `onLogoutSuccess` — там очищайте сессию приложения.
+
+```tsx
+import { LogoutButtonIcon, LogoutButtonText } from '@bmc-soft/keycloak-auth';
+
+export const LogoutButton = ({ variant }: { variant: 'icon' | 'text' }) => {
+  const handleLogoutSuccess = useCallback(() => {
+    Session.events.onLogout();
+  }, []);
+
+  if (variant === 'icon') {
+    return (
+      <LogoutButtonIcon
+        renderIcon={<Icon name="logout" color={theme.error} />}
+        onLogoutSuccess={handleLogoutSuccess}
+      />
+    );
+  }
+
+  return (
+    <LogoutButtonText
+      variant="outlined"
+      label="Выйти"
+      onLogoutSuccess={handleLogoutSuccess}
+    />
+  );
+};
+```
+
+### Схема потока
+
+```
+KeycloakProvider → инициализация Keycloak → установка TokenProvider для axios
+       ↓
+useKeycloakAuthScreen → Login (AuthPage) или Confirm (ConfirmAuthPage)
+       ↓
+onSuccess → Session.onLogin(token)   |   onLogout → Session.onLogout + навигация
+       ↓
+axios 401 → onReauthRequired → ReauthBottomSheet с ConfirmAuthPage
+       ↓
+onSuccess → tokenStorage.getToken() → Session.onLogin + onReauthCompleted → закрыть sheet
+```
+
+---
+
+## Архитектура и безопасность
+
+### Иерархия контекстов
+
+```
+KeycloakConfigProvider     ← конфиг (редко меняется)
+  └─ KeycloakInstanceProvider ← инстанс (один раз)
+      └─ KeycloakThemeProvider ← тема (опционально; мемоизирована)
+          └─ TokenProvider     ← токены (частые обновления)
+              └─ ReauthProvider ← состояние реавторизации
+```
+
+Обновление токенов не вызывает ре-рендер компонентов, зависящих только от конфига, инстанса или темы.
+
+### Безопасность
+
+- Токены в OS Keychain (не AsyncStorage)
+- PIN шифруется AES перед сохранением
+- Запросы по HTTPS
+- Учётные данные не хранятся в открытом виде
+
+### Полифиллы React Native
+
+Пакет подключает полифиллы для `document`, `window`, `navigator`, требуемые keycloak-js. Они применяются автоматически при использовании KeycloakProvider. Чтобы применить раньше: `import { initKeycloakPolyfills } from '@bmc-soft/keycloak-auth'; initKeycloakPolyfills();`.
+
+---
+
+## Экспорты
+
+- **Основной**: `@bmc-soft/keycloak-auth` — провайдер, хуки, экраны, виджеты, UI, хранилище, помощники axios, типы
+- **Подпути**: `@bmc-soft/keycloak-auth/screens`, `/widgets`, `/hooks`, `/axios`, `/context`, `/storage` (см. `exports` в package.json)
+
+---
+
+## Лицензия
+
+MIT © Koala Team

package/THEMING.md

@@ -0,0 +1,116 @@
+# Theming
+
+Настройка внешнего вида экранов и виджетов Keycloak через единую тему в `KeycloakProvider`.
+
+## Передача темы
+
+Передайте объект `theme` в `KeycloakProvider`. Все поля опциональны; не указанные значения берутся из дефолтной темы пакета.
+
+```tsx
+import { KeycloakProvider, type KeycloakTheme } from '@bmc-soft/keycloak-auth';
+
+const theme: KeycloakTheme = {
+  fonts: { primary: 'OpenSans-Regular', heading: 'OpenSans-SemiBold' },
+  colors: { background: '#0d0d0d', primary: '#0066cc' },
+  LoaderComponent: MyLoader,
+};
+
+<KeycloakProvider config={config} redirectUri={redirectUri} theme={theme}>
+  <App />
+</KeycloakProvider>
+```
+
+## Приоритет значений
+
+Во всех компонентах пакета действует правило:
+
+**проп компонента > тема из контекста > дефолт пакета**
+
+Например, в теме задаётся `colors.background` — экраны и виджеты пакета (AuthPage, ConfirmAuthPage, ReauthBottomSheet и др.) используют его для фона. Компоненты, у которых есть соответствующие пропы (например `style`), могут переопределять стили точечно.
+
+## Структура KeycloakTheme
+
+Тип экспортируется из пакета: `import type { KeycloakTheme } from '@bmc-soft/keycloak-auth'`.
+
+| Поле | Тип | Описание |
+|------|-----|----------|
+| `fonts` | `KeycloakThemeFonts` | Шрифты для текста и заголовков |
+| `colors` | `KeycloakThemeColors` | Цвета экранов, кнопок, ошибок и т.д. |
+| `LoaderComponent` | `React.ComponentType` | Компонент индикатора загрузки |
+| `ContainedButtonComponent` | `React.ComponentType<KeycloakThemeButtonProps>` | Кнопка с заливкой |
+| `OutlinedButtonComponent` | `React.ComponentType<KeycloakThemeButtonProps>` | Кнопка с обводкой |
+| `IconButtonComponent` | `React.ComponentType<KeycloakThemeIconButtonProps>` | Иконковая кнопка |
+
+### KeycloakThemeFonts
+
+- `primary?: string` — основной шрифт (текст)
+- `heading?: string` — шрифт заголовков
+
+### KeycloakThemeColors
+
+Все поля опциональны. Основные:
+
+- `primary` — акцент (ссылки, активный PIN)
+- `background` — фон экранов и контейнеров
+- `error` — ошибки и опасные действия
+- `text` — основной текст
+- `button` / `buttonText` — кнопка с заливкой
+- `link` — ссылки
+- `outlinedButtonBackground` / `outlinedButtonText` — кнопка с обводкой
+- `numberPadButtonBackground` / `numberPadText` / `numberPadDisabled` — клавиатура PIN
+- `pinIndicatorEmpty` — пустые точки PIN-индикатора
+- `border` — разделители
+- `success` — успешное состояние
+
+## Пример с приложением
+
+Подстановка темы приложения (например, из shared/settings или brandbook):
+
+```tsx
+import { KeycloakProvider, type KeycloakTheme } from '@bmc-soft/keycloak-auth';
+import { useAppTheme } from '@shared/settings';
+import { Loader } from '@shared/ui';
+
+function KeycloakAppProvider({ children }) {
+  const { colors, fonts } = useAppTheme();
+
+  const theme: KeycloakTheme = {
+    fonts: {
+      primary: fonts?.regular,
+      heading: fonts?.semiBold,
+    },
+    colors: {
+      primary: colors.primary,
+      background: colors.screenBackground,
+      error: colors.error,
+      text: colors.text,
+    },
+    LoaderComponent: Loader,
+  };
+
+  return (
+    <KeycloakProvider config={config} redirectUri={redirectUri} theme={theme}>
+      {children}
+    </KeycloakProvider>
+  );
+}
+```
+
+## Хук useKeycloakTheme()
+
+Компоненты пакета получают тему через внутренний контекст. Если вы пишете обёртку или кастомный экран, можно использовать хук:
+
+```tsx
+import { useKeycloakTheme } from '@bmc-soft/keycloak-auth';
+
+function MyWrapper() {
+  const { colors, LoaderComponent } = useKeycloakTheme();
+  return (
+    <View style={{ backgroundColor: colors.background }}>
+      <LoaderComponent />
+    </View>
+  );
+}
+```
+
+Без обёртки `KeycloakProvider` хук возвращает дефолтную тему пакета (не бросает ошибку).

package/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "@bmc-soft/keycloak-auth",
+  "version": "1.0.0",
+  "description": "Production-ready Keycloak authentication package for React Native with optimized performance and security",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "THEMING.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./screens": {
+      "types": "./dist/screens/index.d.ts",
+      "default": "./dist/screens/index.js"
+    },
+    "./widgets": {
+      "types": "./dist/widgets/index.d.ts",
+      "default": "./dist/widgets/index.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "default": "./dist/hooks/index.js"
+    },
+    "./axios": {
+      "types": "./dist/axios/index.d.ts",
+      "default": "./dist/axios/index.js"
+    },
+    "./context": {
+      "types": "./dist/context/index.d.ts",
+      "default": "./dist/context/index.js"
+    },
+    "./storage": {
+      "types": "./dist/storage/index.d.ts",
+      "default": "./dist/storage/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "watch": "tsc --watch",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run clean && npm run build",
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": [
+    "bmc-soft"
+  ],
+  "author": "BMC-Soft Team",
+  "license": "MIT",
+  "peerDependencies": {
+    "@gorhom/bottom-sheet": ">=5.0.0",
+    "axios": ">=1.0.0",
+    "react": ">=18.0.0",
+    "react-native": ">=0.72.0",
+    "react-native-safe-area-context": ">=4.0.0",
+    "react-native-webview": ">=13.0.0",
+    "lottie-react-native": ">=6.0.0",
+    "react-native-svg": ">=14.0.0"
+  },
+  "peerDependenciesMeta": {
+    "axios": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@react-keycloak/keycloak-ts": "^0.2.4",
+    "@types/crypto-js": "^4.2.0",
+    "crypto-js": "^4.2.0",
+    "react-native-get-random-values": "^1.11.0",
+    "react-native-keychain": "^8.1.0"
+  },
+  "devDependencies": {
+    "@gorhom/bottom-sheet": ">=5.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-native": "^0.72.0",
+    "axios": ">=1.0.0",
+    "lottie-react-native": ">=6.0.0",
+    "react": ">=18.0.0",
+    "react-native": ">=0.72.0",
+    "react-native-safe-area-context": ">=4.0.0",
+    "react-native-svg": ">=14.0.0",
+    "react-native-webview": ">=13.0.0",
+    "typescript": "^5.3.0"
+  },
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/waohwaohwaoh/keycloak_auth.git"
+  },
+  "homepage": "https://github.com/waohwaohwaoh/keycloak_auth#readme",
+  "bugs": {
+    "url": "https://github.com/waohwaohwaoh/keycloak_auth/issues"
+  }
+}