@trust-proto/auth-react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Liberion
+
+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,137 @@
+# Liberion Auth - Integration Guide
+
+Liberion Auth is a modern authentication widget for web applications.
+
+---
+
+## Installation as NPM Package
+
+Install the npm package:
+
+```bash
+npm i @trust-proto/auth-react
+```
+
+### React Example with NPM Package
+
+**Props:**
+
+| Parameter    | Type       | Required | Description                                                        |
+| ------------ | ---------- | -------- | ------------------------------------------------------------------ |
+| `backendUrl` | `string`   | ✅       | WebSocket authentication server URL                                |
+| `isOpen`     | `boolean`  | ✅       | Controls widget visibility (true/false)                            |
+| `theme`      | `string`   | ❌       | Theme mode: `'light'` or `'dark'` (default: `'dark'`)              |
+| `successCb`  | `function` | ❌       | Callback function called on success. Receives authentication token |
+| `failedCb`   | `function` | ❌       | Callback function called on error.                                 |
+| `closeCb`    | `function` | ❌       | Callback function called when widget is closed                     |
+
+Import the widget into your React application:
+
+```jsx
+import { useState } from "react";
+import { LiberionAuth } from "@trust-proto/auth-react";
+
+function App() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <button onClick={() => setIsOpen(true)}>Login with Liberion ID</button>
+
+      <LiberionAuth
+        backendUrl="wss://your-backend-url.example.com"
+        isOpen={isOpen}
+        theme="light"
+        closeCb={() => setIsOpen(false)}
+        successCb={(result) => {
+          console.log("Authentication successful, result:", result);
+          localStorage.setItem("authToken", result.token);
+        }}
+        failedCb={(error) => {
+          console.error("Authentication failed:", error);
+        }}
+      />
+    </>
+  );
+}
+
+export default App;
+```
+
+### React Example with script tag
+
+```jsx
+import React, { useState, useEffect } from "react";
+
+const App = () => {
+  const [isWidgetLoaded, setIsWidgetLoaded] = useState(false);
+  const [token, setToken] = useState(null);
+
+  // Load widget script
+  useEffect(() => {
+    const script = document.createElement("script");
+    script.src = "https://cdn.statically.io/gh/liberion-official/auth-sdk-frontend/main/build/index.js";
+    script.async = true;
+    script.onload = () => setIsWidgetLoaded(true);
+    document.body.appendChild(script);
+
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, []);
+
+  // Check for existing token
+  useEffect(() => {
+    const savedToken = localStorage.getItem("authToken");
+    if (savedToken) {
+      setToken(savedToken);
+    }
+  }, []);
+
+  const handleLogin = () => {
+    if (!isWidgetLoaded) return;
+
+    window.LiberionAuth.open({
+      backendUrl: "wss://your-backend-url.example.com",
+      successCb: (result) => {
+        console.log("Authentication successful, result:", result);
+        localStorage.setItem("authToken", result.token);
+        setToken(result.token);
+      },
+      failedCb: (error) => {
+        console.error("Authentication failed:", error);
+      },
+      closeCb: () => {
+        console.log("Widget closed");
+      },
+      theme: "light",
+    });
+  };
+
+  const handleLogout = () => {
+    localStorage.removeItem("authToken");
+    setToken(null);
+  };
+
+  if (!token) {
+    return (
+      <div>
+        <h1>Welcome!</h1>
+        <button onClick={handleLogin} disabled={!isWidgetLoaded}>
+          {isWidgetLoaded ? "Login" : "Loading..."}
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h1>You are authenticated!</h1>
+      <p>Token: {token.substring(0, 20)}...</p>
+      <button onClick={handleLogout}>Logout</button>
+    </div>
+  );
+};
+
+export default App;
+```