@ssoeasy-dev/react 1.0.0-beta.0abbf06

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 MoreWiktor
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,179 @@
+# @ssoeasy-dev/react
+
+React-адаптер для SSO Easy. Оборачивает `@ssoeasy-dev/core` в React Context и предоставляет хук `useAuth` и компонент `ProtectedRoute`.
+
+## Установка
+
+```bash
+npm install @ssoeasy-dev/react @ssoeasy-dev/core
+```
+
+## Быстрый старт
+
+### 1. Оборачиваем приложение в `AuthProvider`
+
+```tsx
+import { AuthProvider } from "@ssoeasy-dev/react";
+import { AuthManager } from "@ssoeasy-dev/core";
+
+const auth = new AuthManager({
+  serviceId: "your-service-id",
+  redirectUri: "https://yourapp.com",
+  loginPath: "/callback",
+  authPageUrl: "https://sso.example.com/login",
+  authServerConfig: {
+    baseURL: "https://api.example.com",
+  },
+});
+
+function App() {
+  return (
+    <AuthProvider auth={auth}>
+      <AppRouter />
+    </AuthProvider>
+  );
+}
+```
+
+### 2. Защищаем роуты через `ProtectedRoute`
+
+```tsx
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { ProtectedRoute } from "@ssoeasy-dev/react";
+
+function AppRouter() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/callback" element={<CallbackPage />} />
+        <Route path="/" element={<PublicPage />} />
+        <Route
+          path="/dashboard"
+          element={
+            <ProtectedRoute redirectTo="/dashboard">
+              <Dashboard />
+            </ProtectedRoute>
+          }
+        />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+```
+
+### 3. Используем `useAuth` в компонентах
+
+```tsx
+import { useAuth } from "@ssoeasy-dev/react";
+
+function Header() {
+  const auth = useAuth();
+
+  return (
+    <header>
+      {auth.getState().isAuthenticated ? (
+        <button onClick={() => auth.logout()}>Выйти</button>
+      ) : (
+        <button onClick={() => auth.login()}>Войти</button>
+      )}
+    </header>
+  );
+}
+```
+
+### 4. Страница callback
+
+```tsx
+import { useEffect } from "react";
+import { useAuth } from "@ssoeasy-dev/react";
+import { useNavigate } from "react-router-dom";
+
+function CallbackPage() {
+  const auth = useAuth();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    auth.handleRedirectCallback().then(({ redirectTo }) => {
+      navigate(redirectTo, { replace: true });
+    });
+  }, []);
+
+  return <div>Авторизация...</div>;
+}
+```
+
+## API
+
+### `AuthProvider`
+
+```tsx
+<AuthProvider auth={AuthManager}>{children}</AuthProvider>
+```
+
+Предоставляет `AuthManager` через React Context. Должен оборачивать всё приложение.
+
+### `useAuth`
+
+```tsx
+const auth = useAuth(); // возвращает AuthManager
+```
+
+Хук для доступа к `AuthManager` внутри компонентов. Выбрасывает ошибку если вызван вне `AuthProvider`.
+
+### `ProtectedRoute`
+
+```tsx
+<ProtectedRoute
+  redirectTo="/target-path" // путь для redirectTo при логине (опционально)
+  fallback={<Spinner />} // отображается во время checkAuth (по умолчанию <div>Loading...</div>)
+  unauthenticatedElement={<Node />} // рендерится вместо редиректа на SSO, если пользователь не авторизован (опционально)
+>
+  <ProtectedContent />
+</ProtectedRoute>
+```
+
+При монтировании вызывает `auth.checkAuth()`. Пока идёт проверка — рендерит `fallback`.
+
+Если пользователь не авторизован:
+
+- **`unauthenticatedElement` не передан** — вызывает `auth.login({ redirectTo })`, редирект на SSO (поведение по умолчанию)
+- **`unauthenticatedElement` передан** — рендерит переданный элемент без редиректа
+
+#### Пример: внутренняя страница выбора входа/регистрации
+
+Если в приложении есть собственная страница `/auth` с кнопками «Войти» и «Зарегистрироваться», можно передать `<Navigate>` вместо того, чтобы сразу уходить на SSO:
+
+```tsx
+import { Navigate } from "react-router-dom";
+import { ProtectedRoute } from "@ssoeasy-dev/react";
+
+const LayoutWrapper = () => {
+  return (
+    <ProtectedRoute unauthenticatedElement={<Navigate to="/auth" replace />}>
+      <Layout>
+        <Outlet />
+      </Layout>
+    </ProtectedRoute>
+  );
+};
+```
+
+Страница `/auth` при этом остаётся публичной — она не обёрнута в `ProtectedRoute`.
+
+## Экспорты
+
+```typescript
+export { AuthProvider } from "./AuthProvider";
+export { ProtectedRoute } from "./ProtectedRoute";
+export { useAuth } from "./useAuth";
+```
+
+## Лицензия
+
+MIT — см. [LICENSE](../LICENSE).
+
+## Контакты
+
+- Email: morewiktor@yandex.ru
+- Telegram: [@MoreWiktor](https://t.me/MoreWiktor)
+- GitHub: [@MoreWiktor](https://github.com/MoreWiktor)

package/dist/AuthProvider.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { AuthConfig } from "@ssoeasy-dev/core";
+export declare const AuthProvider: React.FC<{
+    config: AuthConfig;
+    children: React.ReactNode;
+}>;
+//# sourceMappingURL=AuthProvider.d.ts.map

package/dist/AuthProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthProvider.d.ts","sourceRoot":"","sources":["../src/AuthProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,UAAU,EAA0B,MAAM,mBAAmB,CAAC;AAIvE,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC,MAAM,EAAE,UAAU,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAaA,CAAC"}

package/dist/AuthProvider.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { AuthManager } from "@ssoeasy-dev/core";
+import { useEffect, useState } from "react";
+import { AuthContext } from "./context";
+export const AuthProvider = ({ config, children }) => {
+    const auth = useMemo(() => new AuthManager(config), [config.serviceId, config.redirectUri]);
+    const [_, setState] = useState(auth.getState());
+    useEffect(() => {
+        const unsubscribe = auth.onStateChange(setState);
+        return unsubscribe;
+    }, [auth]);
+    return _jsx(AuthContext.Provider, { value: auth, children: children });
+};
+//# sourceMappingURL=AuthProvider.js.map

package/dist/AuthProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthProvider.js","sourceRoot":"","sources":["../src/AuthProvider.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAc,WAAW,EAAa,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,MAAM,CAAC,MAAM,YAAY,GAGpB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC5B,MAAM,IAAI,GAAG,OAAO,CAClB,GAAG,EAAE,CAAC,IAAI,WAAW,CAAC,MAAM,CAAC,EAC7B,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,CACvC,CAAC;IACF,MAAM,CAAC,CAAC,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAY,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;IAE3D,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACjD,OAAO,WAAW,CAAC;IACrB,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,YAAG,QAAQ,GAAwB,CAAC;AAC9E,CAAC,CAAC"}

package/dist/ProtectedRoute.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export declare const ProtectedRoute: React.FC<{
+    children: React.ReactNode;
+    redirectTo?: string;
+    fallback?: React.ReactNode;
+    unauthenticatedElement?: React.ReactNode;
+}>;
+//# sourceMappingURL=ProtectedRoute.d.ts.map

package/dist/ProtectedRoute.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProtectedRoute.d.ts","sourceRoot":"","sources":["../src/ProtectedRoute.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,sBAAsB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1C,CA0BA,CAAC"}

package/dist/ProtectedRoute.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useAuth } from "./useAuth";
+export const ProtectedRoute = ({ children, redirectTo, fallback = _jsx("div", { children: "Loading..." }), unauthenticatedElement, }) => {
+    const auth = useAuth();
+    const [isAuthorized, setIsAuthorized] = useState(null);
+    useEffect(() => {
+        auth.checkAuth().then((val) => {
+            setIsAuthorized(val);
+        });
+    }, [auth]);
+    if (isAuthorized === null)
+        return fallback;
+    if (!isAuthorized) {
+        if (unauthenticatedElement !== undefined) {
+            return _jsx(_Fragment, { children: unauthenticatedElement });
+        }
+        auth.login({ redirectTo });
+        return null;
+    }
+    return _jsx(_Fragment, { children: children });
+};
+//# sourceMappingURL=ProtectedRoute.js.map

package/dist/ProtectedRoute.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProtectedRoute.js","sourceRoot":"","sources":["../src/ProtectedRoute.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,MAAM,CAAC,MAAM,cAAc,GAKtB,CAAC,EACJ,QAAQ,EACR,UAAU,EACV,QAAQ,GAAG,uCAAqB,EAChC,sBAAsB,GACvB,EAAE,EAAE;IACH,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IACvB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAiB,IAAI,CAAC,CAAC;IAEvE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS,EAAE,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE;YAC5B,eAAe,CAAC,GAAG,CAAC,CAAC;QACvB,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,IAAI,YAAY,KAAK,IAAI;QAAE,OAAO,QAAQ,CAAC;IAE3C,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,IAAI,sBAAsB,KAAK,SAAS,EAAE,CAAC;YACzC,OAAO,4BAAG,sBAAsB,GAAI,CAAC;QACvC,CAAC;QACD,IAAI,CAAC,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC;QAC3B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,4BAAG,QAAQ,GAAI,CAAC;AACzB,CAAC,CAAC"}

package/dist/context.d.ts

@@ -0,0 +1,3 @@
+import { AuthManager } from "@ssoeasy-dev/core";
+export declare const AuthContext: import("react").Context<AuthManager | null>;
+//# sourceMappingURL=context.d.ts.map

package/dist/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,eAAO,MAAM,WAAW,6CAA0C,CAAC"}

package/dist/context.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+export const AuthContext = createContext(null);
+//# sourceMappingURL=context.js.map

package/dist/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAqB,IAAI,CAAC,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./AuthProvider";
+export * from "./ProtectedRoute";
+export * from "./useAuth";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC"}

package/dist/index.js

@@ -0,0 +1,4 @@
+export * from "./AuthProvider";
+export * from "./ProtectedRoute";
+export * from "./useAuth";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC"}

package/dist/useAuth.d.ts

@@ -0,0 +1,2 @@
+export declare const useAuth: () => import("@ssoeasy-dev/core").AuthManager;
+//# sourceMappingURL=useAuth.d.ts.map

package/dist/useAuth.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAuth.d.ts","sourceRoot":"","sources":["../src/useAuth.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,+CAInB,CAAC"}

package/dist/useAuth.js

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { AuthContext } from "./context";
+export const useAuth = () => {
+    const auth = useContext(AuthContext);
+    if (!auth)
+        throw new Error("useAuth must be used within AuthProvider");
+    return auth;
+};
+//# sourceMappingURL=useAuth.js.map

package/dist/useAuth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAuth.js","sourceRoot":"","sources":["../src/useAuth.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE;IAC1B,MAAM,IAAI,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACrC,IAAI,CAAC,IAAI;QAAE,MAAM,IAAI,KAAK,CAAC,0CAA0C,CAAC,CAAC;IACvE,OAAO,IAAI,CAAC;AACd,CAAC,CAAC"}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@ssoeasy-dev/react",
+  "version": "1.0.0-beta.0abbf06",
+  "description": "",
+  "main": "index.ts",
+  "types": "index.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "@ssoeasy-dev/core": "1.0.0-beta.806f697"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "typescript": "^5.0.0"
+  },
+  "author": "MoreWiktor <MoreWiktor@yandex.ru>",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc"
+  }
+}