@trust-proto/auth-react 0.4.0 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +86 -30
  2. package/build/index.js +1 -1
  3. package/lib/liberion-auth.js +1 -1
  4. package/package.json +5 -5
package/README.md CHANGED
@@ -2,9 +2,16 @@
2
2
 
3
3
  Liberion Auth is a modern authentication widget for web applications.
4
4
 
5
+ ## Two Ways to Use
6
+
7
+ | Method | Use Case | React Required |
8
+ | ------------------ | ------------------ | ------------------------- |
9
+ | **NPM Package** | React applications | Yes (peer dependency) |
10
+ | **Standalone CDN** | Any website | No (React bundled inside) |
11
+
5
12
  ---
6
13
 
7
- ## Installation as NPM Package
14
+ ## Option 1: NPM Package (React Projects)
8
15
 
9
16
  Install the npm package:
10
17
 
@@ -12,15 +19,6 @@ Install the npm package:
12
19
  npm i @trust-proto/auth-react
13
20
  ```
14
21
 
15
- ## Standalone Browser Usage (CDN)
16
-
17
- **CDN Options:**
18
- - unpkg: `https://unpkg.com/@trust-proto/auth-react@{version}/lib/liberion-auth.js`
19
- - jsDelivr: `https://cdn.jsdelivr.net/npm/@trust-proto/auth-react@{version}/lib/liberion-auth.js`
20
- - GitHub Releases: Download from [releases page](https://github.com/liberion-official/auth-sdk-ts/releases)
21
-
22
- ---
23
-
24
22
  ### React Example with NPM Package
25
23
 
26
24
  **Props:**
@@ -67,7 +65,69 @@ function App() {
67
65
  export default App;
68
66
  ```
69
67
 
70
- ### React Example with script tag
68
+ ---
69
+
70
+ ## Option 2: Standalone CDN (Any Website)
71
+
72
+ Use this method for non-React websites. React is bundled inside — no dependencies required.
73
+
74
+ **CDN Options:**
75
+ - jsDelivr: `https://cdn.jsdelivr.net/npm/@trust-proto/auth-react@latest/lib/liberion-auth.js`
76
+ - unpkg: `https://unpkg.com/@trust-proto/auth-react@latest/lib/liberion-auth.js`
77
+ - GitHub Releases: Download from [releases page](https://github.com/liberion-official/auth-sdk-ts/releases)
78
+
79
+ ### Standalone API
80
+
81
+ | Method | Description |
82
+ | ---------------------------- | --------------------------------- |
83
+ | `LiberionAuth.open(options)` | Open the authentication widget |
84
+ | `LiberionAuth.close()` | Close the widget programmatically |
85
+
86
+ **Options:**
87
+
88
+ | Parameter | Type | Required | Description |
89
+ | ------------ | ---------- | -------- | ----------------------------------------- |
90
+ | `backendUrl` | `string` | ✅ | WebSocket authentication server URL |
91
+ | `theme` | `string` | ❌ | `'light'` or `'dark'` (default: `'dark'`) |
92
+ | `successCb` | `function` | ❌ | Called on success with `{ token }` object |
93
+ | `failedCb` | `function` | ❌ | Called on error |
94
+ | `closeCb` | `function` | ❌ | Called when widget is closed |
95
+
96
+ ### Basic HTML Example
97
+
98
+ ```html
99
+ <!DOCTYPE html>
100
+ <html>
101
+ <head>
102
+ <title>Liberion Auth Demo</title>
103
+ </head>
104
+ <body>
105
+ <button id="login-btn">Login with Liberion ID</button>
106
+
107
+ <script src="https://cdn.jsdelivr.net/npm/@trust-proto/auth-react@latest/lib/liberion-auth.js"></script>
108
+ <script>
109
+ document.getElementById('login-btn').onclick = function() {
110
+ LiberionAuth.open({
111
+ backendUrl: 'wss://your-backend-url.example.com',
112
+ theme: 'light',
113
+ successCb: function(result) {
114
+ console.log('Token:', result.token);
115
+ alert('Authentication successful!');
116
+ },
117
+ failedCb: function(error) {
118
+ console.error('Failed:', error);
119
+ },
120
+ closeCb: function() {
121
+ console.log('Widget closed');
122
+ }
123
+ });
124
+ };
125
+ </script>
126
+ </body>
127
+ </html>
128
+ ```
129
+
130
+ ### React with Script Tag (Dynamic Loading)
71
131
 
72
132
  ```jsx
73
133
  import React, { useState, useEffect } from "react";
@@ -76,44 +136,31 @@ const App = () => {
76
136
  const [isWidgetLoaded, setIsWidgetLoaded] = useState(false);
77
137
  const [token, setToken] = useState(null);
78
138
 
79
- // Load widget script
80
139
  useEffect(() => {
81
140
  const script = document.createElement("script");
82
- script.src = "https://cdn.statically.io/gh/liberion-official/auth-sdk-frontend/main/build/index.js";
141
+ script.src = "https://cdn.jsdelivr.net/npm/@trust-proto/auth-react@latest/lib/liberion-auth.js";
83
142
  script.async = true;
84
143
  script.onload = () => setIsWidgetLoaded(true);
85
144
  document.body.appendChild(script);
86
-
87
- return () => {
88
- document.body.removeChild(script);
89
- };
145
+ return () => document.body.removeChild(script);
90
146
  }, []);
91
147
 
92
- // Check for existing token
93
148
  useEffect(() => {
94
149
  const savedToken = localStorage.getItem("authToken");
95
- if (savedToken) {
96
- setToken(savedToken);
97
- }
150
+ if (savedToken) setToken(savedToken);
98
151
  }, []);
99
152
 
100
153
  const handleLogin = () => {
101
154
  if (!isWidgetLoaded) return;
102
-
103
155
  window.LiberionAuth.open({
104
156
  backendUrl: "wss://your-backend-url.example.com",
157
+ theme: "light",
105
158
  successCb: (result) => {
106
- console.log("Authentication successful, result:", result);
107
159
  localStorage.setItem("authToken", result.token);
108
160
  setToken(result.token);
109
161
  },
110
- failedCb: (error) => {
111
- console.error("Authentication failed:", error);
112
- },
113
- closeCb: () => {
114
- console.log("Widget closed");
115
- },
116
- theme: "light",
162
+ failedCb: (error) => console.error("Failed:", error),
163
+ closeCb: () => console.log("Widget closed"),
117
164
  });
118
165
  };
119
166
 
@@ -144,3 +191,12 @@ const App = () => {
144
191
 
145
192
  export default App;
146
193
  ```
194
+
195
+ ---
196
+
197
+ ## Build Outputs
198
+
199
+ | File | Size | Description |
200
+ | ---------------------- | ------- | -------------------------------------- |
201
+ | `build/index.js` | ~200 KB | NPM package (React as peer dependency) |
202
+ | `lib/liberion-auth.js` | ~870 KB | Standalone bundle (React included) |