@enclavemoney/enclave-wallet-sdk/POPUP_LOGIN_USAGE.md

A simple enclave wallet SDK for React applications

# Popup Login Functionality

The WalletProvider now includes popup-based login functionality that allows users to authenticate via a popup window and receive user data through postMessage communication.

## Functions Available

### 1. `openLoginPopup()`

Opens a login popup window pointing to your authentication endpoint.

```javascript
const { openLoginPopup } = useWallet();

// Call this function to open the popup
openLoginPopup();
```

### 2. `handlePopupMessage(event)`

Handles messages received from the popup window. This is automatically set up by the WalletProvider.

## New State Variables

- `isPopupAuthenticated`: Boolean indicating if user authenticated via popup
- `popupLoginData`: Complete user data received from popup

## Usage Example

```jsx
import React from "react";
import { useWallet } from "./components/WalletProvider";

function MyComponent() {
  const { openLoginPopup, isPopupAuthenticated, popupLoginData } = useWallet();

  return (
    <div>
      <button onClick={openLoginPopup}>Login with Popup</button>
      {isPopupAuthenticated && (
        <div>
          <h3>Welcome {popupLoginData?.username}!</h3>
          <p>EVM Address: {popupLoginData?.wallet?.scw_address}</p>
        </div>
      )}
    </div>
  );
}
```

## Message Format from Popup

The popup window should send messages in the following format:

### Login Success

```javascript
window.parent.postMessage(
  {
    type: "LOGIN_SUCCESS",
    data: {
      wallet: {
        bitcoin_wallet: {
          legacy_address: "1Gd6QgdAU95hJYb5vVbxz7YhP4qyUFC1Wt",
          segwit_address: "37Up9UCSFFPvCokcepVGEnkzZWyBrDHLVD",
          native_segwit_address: "bc1q4dwkqs67yya2fjdzztzwyj6gze5h3vvfasg29z",
          taproot_address:
            "bc1pspkt6m89f768fmwyet9nwz4q74nhra6j802z70gehpejaxg2zuxqnqkch2",
        },
        scw_address: "0x5AdE157fC8030B63a8959902Bb93EBdBDD268EF8",
        solana_program_wallet: "FUcF7Y5xvrxzmPCv5GsfY6fR1vHEH7pa4oFzf5sXwbRZ",
      },
      username: "sdktest",
      token: "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9...",
      // ... other user data
    },
  },
  "*"
);
```

### Login Error

```javascript
window.parent.postMessage(
  {
    type: "LOGIN_ERROR",
    error: {
      message: "Authentication failed",
      code: "AUTH_ERROR",
    },
  },
  "*"
);
```

### Login Closed

```javascript
window.parent.postMessage(
  {
    type: "LOGIN_CLOSED",
  },
  "*"
);
```

## Data Storage

The popup login functionality automatically:

1. **Stores user data in localStorage**:

   - `enclave_wallet_login`: Main login session data
   - `enclave_popup_login_data`: Complete popup user data

2. **Updates WalletProvider state**:

   - Sets `isLoggedIn` to true
   - Updates `username`, `evmWalletAddress`, `bitcoinWalletAddress`, etc.
   - Triggers balance and token refresh

3. **Persists across sessions**: Data is restored from localStorage on page reload

## Configuration

The popup opens to `http://localhost:3000` by default. You can modify this URL in the `openLoginPopup()` function within `WalletProvider.tsx`:

```javascript
const popup = window.open(
  "http://localhost:3000", // Change this to your auth URL
  "loginPopup",
  "width=500,height=600,..."
);
```

## Security Considerations

- In production, verify `event.origin` in `handlePopupMessage()` to ensure messages come from trusted sources
- Use HTTPS for production deployments
- Consider implementing message validation and authentication tokens

## Key Features

- **Direct Function Call**: Simply call `openLoginPopup()` to open the authentication popup
- **Automatic Message Handling**: The WalletProvider automatically listens for popup messages
- **State Management**: User data is automatically stored and managed
- **Toast Notifications**: Success and error messages are shown automatically
- **Persistence**: Login state persists across page reloads