shogun-button-react 1.3.2 → 1.3.8

package/CHANGELOG.md

@@ -0,0 +1,54 @@
+# Changelog
+
+## Version 1.3.4 (Latest)
+
+### 🐛 Bug Fixes
+- **Export Gun Pair Fix**: Fixed issue where "Export Pair" option was not accessible from user dropdown - now works correctly without requiring disconnect
+- **Modal Logic Improvement**: Enhanced modal rendering logic to allow export functionality when user is already authenticated
+- **UX Enhancement**: Improved back button behavior in export modal - now properly closes modal when user is logged in instead of showing unnecessary auth options
+
+### 🔧 Technical Changes
+- Modified component render logic to show modal even when user is logged in
+- Improved export form navigation for better user experience
+- Reordered dropdown menu items for better flow (Export Pair before Disconnect)
+
+## Version 1.3.3
+
+### ✨ New Features
+- **Import Gun Pair Login**: Aggiunta possibilità di effettuare login tramite importazione di un Gun pair esistente
+- **Export Gun Pair**: Funzionalità per esportare il proprio Gun pair con opzione di crittografia tramite password
+- **Improved UX**: Migliorata l'interfaccia utente con feedback visivi e messaggi informativi
+
+### 🔧 Improvements
+- **Navigation Fix**: Il toggle "Don't have account? Sign up" ora porta alla selezione dei metodi di autenticazione invece che direttamente al form password
+- **Visual Feedback**: Sostituiti gli alert con feedback visivi eleganti per export/import
+- **Better Icons**: Aggiunte icone SVG personalizzate per import/export
+- **Auto-copy**: L'export del pair viene automaticamente copiato negli appunti (quando supportato dal browser)
+- **Enhanced Security**: Messaggi informativi per guidare l'utente nell'uso sicuro delle funzionalità
+
+### 🛠 Technical Changes
+- Rimosso l'uso del metodo `on` non disponibile in ShogunCore
+- Definiti tipi locali per `AuthResult` per compatibilità
+- Migliorata gestione degli stati nel provider
+- Aggiunto reset completo degli stati quando si chiude il modal
+
+### 🎨 UI/UX Enhancements
+- Box informativi colorati per import/export
+- Feedback di successo con timer automatico
+- Indicatori di caricamento migliorati
+- Messaggi di fallback per browser senza supporto clipboard
+
+## Version 1.3.2
+
+### Features
+- Basic Gun pair export/import functionality
+- Multi-authentication support (Password, MetaMask, WebAuthn, Nostr, OAuth)
+- Dark mode support
+- Responsive design
+
+## Version 1.3.1
+
+### Features
+- Initial release
+- Basic authentication flow
+- Provider integration 

package/README.md

@@ -8,7 +8,8 @@ A React component library for seamless integration of Shogun authentication into
 - 🎨 Customizable UI components
 - 🔒 Secure authentication flow
 - 🌓 Dark mode support
-- 🔌 Multiple authentication methods (Username/Password, MetaMask, WebAuthn)
+- 🔌 Multiple authentication methods (Username/Password, MetaMask, WebAuthn, Nostr, OAuth)
+- 🔑 Account backup and recovery (Gun pair export/import)
 - 📱 Responsive design
 - 🌍 TypeScript support
 
@@ -20,8 +21,8 @@ import {
   ShogunButton,
   ShogunButtonProvider,
   shogunConnector,
-} from "@shogun/shogun-button-react";
-import "@shogun/shogun-button-react/styles.css";
+} from "shogun-button-react";
+import "shogun-button-react/styles.css";
 
 function App() {
   const { sdk, options, setProvider } = shogunConnector({
@@ -66,62 +67,113 @@ The provider component that supplies Shogun context to your application.
 
 | Name            | Type                     | Description                                    |
 | --------------- | ------------------------ | ---------------------------------------------- |
-| sdk             | ShogunSDK                | Shogun SDK instance created by shogunConnector |
+| sdk             | ShogunCore               | Shogun SDK instance created by shogunConnector |
 | options         | Object                   | Configuration options                          |
-| onLoginSuccess  | (data: AuthData) => void | Callback fired on successful login             |
-| onSignupSuccess | (data: AuthData) => void | Callback fired on successful signup            |
+| onLoginSuccess  | (data: { userPub: string; username: string; password?: string; authMethod?: string }) => void | Callback fired on successful login             |
+| onSignupSuccess | (data: { userPub: string; username: string; password?: string; authMethod?: string }) => void | Callback fired on successful signup            |
 | onError         | (error: Error) => void   | Callback fired when an error occurs            |
 
 ### ShogunButton
 
-The main button component for triggering Shogun authentication.
-
-#### Custom Button
-
-You can customize the button appearance using `ShogunButton.Custom`:
-
-```tsx
-<ShogunButton.Custom>
-  {({ ready, authenticate }) => (
-    <button
-      className="my-custom-button"
-      disabled={!ready}
-      onClick={authenticate}
-    >
-      Connect with Shogun
-    </button>
-  )}
-</ShogunButton.Custom>
-```
+The main button component for triggering Shogun authentication. The component provides a complete authentication UI with modal dialogs for login and signup.
 
 ### useShogun Hook
 
 A hook to access Shogun authentication state and functions.
 
 ```tsx
-import { useShogun } from "@shogun/shogun-button-react";
+import React, { useEffect } from "react";
+import { useShogun } from "shogun-button-react";
 
 function Profile() {
   const {
-    isAuthenticated,
-    user,
+    isLoggedIn,
+    userPub,
+    username,
     login,
     signup,
     logout,
-    connectWithMetaMask,
-    connectWithWebAuthn,
     setProvider,
+    hasPlugin,
+    getPlugin,
+    exportGunPair,
+    importGunPair,
+    observe,
   } = useShogun();
 
+  const handleLogin = async () => {
+    // Login with username/password
+    await login("password", "username", "password");
+    
+    // Or login with MetaMask
+    await login("web3");
+    
+    // Or login with WebAuthn
+    await login("webauthn", "username");
+    
+    // Or login with Nostr
+    await login("nostr");
+    
+    // Or login with OAuth
+    await login("oauth", "google");
+    
+    // Or login with Gun pair (for account recovery)
+    const pairData = { /* Gun pair object */ };
+    await login("pair", pairData);
+  };
+
+  const handleSignUp = async () => {
+    // Sign up with username/password
+    await signup("password", "newusername", "newpassword");
+    
+    // Or sign up with other methods (similar to login)
+    await signup("web3");
+    await signup("webauthn", "newusername");
+  };
+
   const switchToCustomNetwork = () => {
     setProvider('https://my-custom-rpc.example.com');
   };
 
-  return isAuthenticated ? (
+  const handleExportPair = async () => {
+    try {
+      const pairData = await exportGunPair("optional-encryption-password");
+      console.log("Exported pair:", pairData);
+      // Save this data securely for account recovery
+    } catch (error) {
+      console.error("Export failed:", error);
+    }
+  };
+
+  const handleImportPair = async () => {
+    try {
+      const success = await importGunPair(savedPairData, "optional-password");
+      if (success) {
+        console.log("Pair imported successfully");
+      }
+    } catch (error) {
+      console.error("Import failed:", error);
+    }
+  };
+
+  // Observe reactive data changes
+  useEffect(() => {
+    if (isLoggedIn) {
+      const subscription = observe<any>('user/profile').subscribe(data => {
+        console.log('Profile data updated:', data);
+      });
+      
+      return () => subscription.unsubscribe();
+    }
+  }, [isLoggedIn, observe]);
+
+  return isLoggedIn ? (
     <div>
-      <h2>Welcome, {user.username}!</h2>
+      <h2>Welcome, {username}!</h2>
+      <p>User Public Key: {userPub}</p>
       <button onClick={logout}>Logout</button>
       <button onClick={switchToCustomNetwork}>Switch Network</button>
+      <button onClick={handleExportPair}>Export Account</button>
     </div>
   ) : (
     <div>Please login to continue</div>
@@ -135,17 +187,43 @@ The `shogunConnector` accepts the following options:
 
 ```typescript
 interface ShogunConnectorOptions {
+  // App information
   appName: string;
   appDescription?: string;
   appUrl?: string;
   appIcon?: string;
+  
+  // Feature toggles
   showMetamask?: boolean;
   showWebauthn?: boolean;
+  showNostr?: boolean;
+  showOauth?: boolean;
   darkMode?: boolean;
+  
+  // Network configuration
   websocketSecure?: boolean;
-  didRegistryAddress?: string | null;
   providerUrl?: string | null;
   peers?: string[];
+  authToken?: string;
+  gunInstance?: IGunInstance<any>;
+  
+  // Advanced options
+  logging?: {
+    enabled: boolean;
+    level: "error" | "warning" | "info" | "debug";
+  };
+  timeouts?: {
+    login?: number;
+    signup?: number;
+    operation?: number;
+  };
+  oauth?: {
+    providers: Record<string, {
+      clientId: string;
+      clientSecret?: string;
+      redirectUri?: string;
+    }>
+  }
 }
 ```
 
@@ -157,6 +235,8 @@ interface ShogunConnectorResult {
   options: ShogunConnectorOptions;
   setProvider: (provider: string | EthersProvider) => boolean;
   getCurrentProviderUrl: () => string | null;
+  registerPlugin: (plugin: any) => boolean;
+  hasPlugin: (name: string) => boolean;
 }
 ```