@restorehub/widget 1.0.0 → 1.0.1

package/README.md

@@ -1,42 +1,26 @@
 # @restorehub/widget
 
-Add Discord member verification to any website with one line of code.
+Add Discord member verification to any website. One package, one function call.
 
-## Quick Start
-
-### CDN (no build step)
-
-```html
-<script src="https://cdn.restorehub.net/widget.js"></script>
-<script>
-  document.getElementById("verify-btn").onclick = function () {
-    RestoreHub.verify("your-server-slug").then(function (result) {
-      console.log("Verified!", result.user.username);
-      // result.token — JWT to verify server-side
-      // result.user — { id, username, avatar }
-    });
-  };
-</script>
-```
-
-### npm
+## Install
 
 ```bash
 npm install @restorehub/widget
 ```
 
+## Quick Start
+
 ```js
 import { verify } from "@restorehub/widget";
 
 const result = await verify("your-server-slug");
-console.log(result.user.username, result.token);
+console.log(result.user.username); // Discord username
+console.log(result.token);        // signed JWT — verify on your backend
 ```
 
-### React
+That's it. `verify()` opens a popup where the user authenticates with Discord, verifies their identity, and returns a signed token with their info.
 
-```bash
-npm install @restorehub/widget
-```
+## React
 
 ```jsx
 import { RestoreHubButton } from "@restorehub/widget/react";
@@ -45,65 +29,114 @@ function App() {
   return (
     <RestoreHubButton
       serverSlug="your-server-slug"
-      onSuccess={(result) => console.log("Verified!", result)}
+      onSuccess={(result) => {
+        // result.token — signed verification token
+        // result.user  — { id, username, avatar }
+        fetch("/api/verify", {
+          method: "POST",
+          body: JSON.stringify({ token: result.token }),
+        });
+      }}
       onError={(err) => console.error(err)}
     />
   );
 }
 ```
 
-## API
+## How It Works
+
+1. Your site calls `verify("your-server-slug")`
+2. A popup opens where the user authenticates with Discord
+3. Restore Hub verifies the user, assigns roles, and signs a token
+4. The token is returned to your site via `postMessage`
+5. You verify the token on your backend to confirm the user's identity
 
-### `verify(serverSlug): Promise<Result>`
+## API Reference
 
-One-liner. Opens the verification popup and returns a promise.
+### `verify(serverSlug)`
+
+Opens the verification popup and returns a promise with the result.
 
 ```js
 const { token, user } = await verify("my-server");
+// user.id       — Discord user ID
+// user.username — Discord username
+// user.avatar   — Avatar hash (nullable)
+// token         — Signed JWT for server-side verification
 ```
 
-### `init(options)` + `open()`
+### `init(options)` / `open()` / `destroy()`
 
-For more control:
+For manual control over the widget lifecycle:
 
 ```js
 import { init, open, destroy } from "@restorehub/widget";
 
 init({
   serverSlug: "my-server",
-  onSuccess: (result) => console.log(result),
-  onError: (err) => console.error(err),
+  onSuccess: (result) => { /* handle success */ },
+  onError: (err) => { /* handle error */ },
 });
 
-// Call on button click
-open();
-
-// Clean up
-destroy();
+document.getElementById("btn").onclick = () => open();
 ```
 
-### Server-side token verification
+### Server-Side Token Verification
 
-Verify the JWT token on your backend:
+Verify the token on your backend to confirm the user actually completed verification:
 
 ```bash
 curl -X POST https://api.restorehub.net/api/widget/token/verify \
   -H "Content-Type: application/json" \
-  -d '{"token": "eyJ..."}'
+  -d '{"token": "eyJhbG..."}'
+```
+
+Response:
+
+```json
+{
+  "valid": true,
+  "userId": "123456789",
+  "username": "user",
+  "serverId": "abc-123",
+  "guildId": "987654321"
+}
 ```
 
-## Configuration
+## Dashboard Setup
+
+Before using the widget, configure it in the [Restore Hub Dashboard](https://restorehub.net/dashboard):
 
-Configure your widget in the [Restore Hub Dashboard](https://restorehub.net/dashboard) under Server Settings > Widget:
+1. Go to **Server Settings** → **Widget** tab
+2. Enable the widget
+3. Add your domain to **Allowed Origins**
+4. Customize button appearance (optional)
+5. Configure auto-pull, webhooks, and redirect URL (optional)
 
-- Allowed origins
-- Button customization
-- Auto-pull to Discord
-- Webhook notifications
-- Success redirect URL
+Your server's **slug** (found in General settings) is what you pass to `verify()`.
+
+## Error Handling
+
+```js
+try {
+  const result = await verify("my-server");
+} catch (err) {
+  switch (err.code) {
+    case "POPUP_BLOCKED": // Browser blocked the popup
+    case "POPUP_CLOSED":  // User closed without completing
+    case "VERIFICATION_FAILED": // Verification was denied
+    case "NETWORK_ERROR": // Connection issue
+    case "TIMEOUT":       // 10 minute timeout
+  }
+}
+```
 
 ## Links
 
-- [Documentation](https://restorehub.net/docs)
 - [Dashboard](https://restorehub.net/dashboard)
+- [Documentation](https://restorehub.net/docs)
 - [Discord](https://discord.gg/restorehub)
+
+## License
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@restorehub/widget",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Embeddable Discord verification widget for Restore Hub. Add Discord SSO and member verification to any website with one line of code.",
   "main": "./dist/widget.js",
   "module": "./dist/widget.esm.js",