Skip to main content

Methods

WaaP implements the EIP-1193 request method, which covers most common use cases. For additional features, it implements additional methods below:

// --- Methods exported from "@human.tech/waap-sdk" ---
/**
 * Initialize WaaP SDK
 */
initWaaP(options?: InitWaaPOptions): WaaPProvider

// --- Methods on WaapProvider ---
interface WaapProvider {
 /**
  * Open the WaaP login modal.
  * Returns the login type: 'waap', 'injected', 'walletconnect', or null if the user cancels.
  */
 login(injectedProvider?: EthereumProvider): Promise<'waap' | 'injected' | 'walletconnect' | null>

 /**
  * Get the current login method without triggering a connection.
  * Returns the active login method or null if not connected.
  */
 getLoginMethod(): 'waap' | 'injected' | 'walletconnect' | null

 /**
  * EIP-1193 compliant request method with auto-connect functionality.
  */
 request(args: { method: string, params?: unknown[] | object }): Promise<unknown>

 /**
  * Log out the user (WaaP and WalletConnect only).
  */
 logout(): Promise<void>

 /**
  * Request the user's email address (WaaP only).
  */
 requestEmail(): Promise<string>

 /**
  * Prompt the user to mint a Zeronym SBT (WaaP only).
  */
 requestSBT(type: 'kyc' | 'phone'): Promise<string | null>
}

Method Details​

initWaaP​

Initializes the WaaP SDK and sets up window.waap. Must be called before using any other methods.

initWaaP configuration​

While initializing WaaP, you can configure the following options:

  • config: Configuration object for the WaaP
    • allowedSocials: Socials for authentication ['google', 'twitter', 'discord', 'linkedin', 'apple', 'coinbase']
    • authenticationMethods: Methods for authentication ['email', 'phone', 'social', 'wallet']
    • styles: { darkMode: boolean }: Whether to use dark mode (default: false)
    • showSecured: Optional, Show secured by human.tech (default: true)
  • project: (Optional) Configuration about about project
    • name: Project name
    • logo: Logo image as base64 string
    • entryTitle: Full login text, i.e: Welcome to my app
  • useStaging: Optional, Whether to use the staging environment (default: false)
  • walletConnectProjectId: WalletConnect project ID for external wallets, if wallet is enabled as an authentication method. Get one at https://cloud.walletconnect.com

You can also generate the configuration code for initWaaP with our no-code tool on the → Playground page.

import { initWaaP } from "@human.tech/waap-sdk";

const initConfig = {
  config: {
    allowedSocials: ["google", "twitter", "discord", "coinbase", "linkedin", "apple"],
    authenticationMethods: ["email", "phone", "social", "wallet"],
    styles: { darkMode: true },
  },
  useStaging: false,
  walletConnectProjectId: "<PROJECT_ID>", // Required if 'wallet' in authenticationMethods
  referralCode: "your-referral-code", // Optional
};

initWaaP(initConfig);

login​

Opens the WaaP login modal and returns the wallet type the user chose.

  • Returns: 'waap' | 'injected' | 'walletconnect' | null
  • Parameters:
    • injectedProvider (optional): Custom provider to use for injected wallet option
const loginType = await window.waap.login();

switch (loginType) {
  case "waap":
    console.log("User chose WaaP");
    break;
  case "injected":
    console.log("User chose injected wallet (for example, MetaMask)");
    break;
  case "walletconnect":
    console.log("User chose WalletConnect");
    break;
  case null:
    console.log("User cancelled login");
    break;
}

🌟 Demo

No wallet connected

getLoginMethod​

Returns the current login method without showing any UI. Useful for checking connection state and determining logout behavior.

  • Returns: 'waap' | 'injected' | 'walletconnect' | null
  • Validates: Automatically checks if the connection is still valid and cleans up invalid states
const loginMethod = window.waap.getLoginMethod();

// Use for conditional UI
if (loginMethod === "waap") {
  // Show WaaP specific features
  document.getElementById("email-button").style.display = "block";
} else if (loginMethod === "injected") {
  // Hide logout button (can't logout programmatically)
  document.getElementById("logout-button").style.display = "none";
} else if (loginMethod === "walletconnect") {
  // Show standard wallet UI
} else {
  // User not connected
  document.getElementById("connect-button").style.display = "block";
}

🌟 Demo

request​

EIP-1193 compliant request method with built-in auto-connect functionality.

  • Auto-Connect: When calling eth_requestAccounts, automatically attempts to reconnect using the user's previous login method
  • Fallback: If auto-connect fails, falls through to normal WaaP flow
// This will auto-connect if user was previously logged in
const accounts = await window.waap.request({
  method: "eth_requestAccounts",
});

// Standard EIP-1193 methods work as expected
const balance = await window.waap.request({
  method: "eth_getBalance",
  params: [accounts[0], "latest"],
});

// request wallet_switchEthereumChain
await window.waap.request({
  method: "wallet_switchEthereumChain",
  params: [{ chainId: 11155111 }], // sepolia testnet
})

const txHash = await window.waap.request({
  method: "eth_sendTransaction",
  params: [
    {
      from: accounts[0],
      to: "0x...",
      value: "0x123",
    },
  ],
});

🌟 Demo

logout​

Logs out the user and clears stored session data. Behavior depends on the login method:

  • WaaP / WalletConnect: Full logout with session cleanup
  • Injected Wallets: Clears app-level session but cannot disconnect the wallet itself
await window.waap.logout();
console.log(window.waap.getLoginMethod()); // Returns null

requestEmail​

Requests the user's verified email address (WaaP only).

try {
  const email = await window.waap.requestEmail();
  console.log("User email:", email);
} catch (error) {
  console.log("User declined to share email");
}

🌟 Demo

requestSBT​

Prompts the user to mint a Human ID Soulbound Token (WaaP only).

  • Parameters: 'kyc' or 'phone'
  • Returns: User's address if successful, null if already minted
  • Throws: Error if user exits before completion
try {
  const address = await window.waap.requestSBT("phone");
  if (address) {
    console.log("SBT minted for address:", address);
  } else {
    console.log("User already has this SBT");
  }
} catch (error) {
  console.log("User cancelled SBT minting");
}

🌟 Demo

Auto-Connect Functionality​

WaaP automatically attempts to reconnect users when they refresh the page or return to your application.

How It Works​

  1. Login Choice Remembered: When users log in via login(), their wallet choice is stored
  2. Seamless Reconnection: Calling eth_requestAccounts automatically attempts to reconnect using their previous method
  3. Graceful Fallback: If reconnection fails (for example, wallet extension disabled), it falls back to normal WaaP flow

Implementation Patterns​

Auto-Connect:

// Simple approach - just call eth_requestAccounts
try {
  const accounts = await window.waap.request({ method: "eth_requestAccounts" });
  console.log("Connected:", accounts[0]);
} catch (error) {
  console.log("Connection failed, show login button");
}

Logout and Session Management​

Simple Logout (WaaP and WalletConnect Only)​

This simple window.waap.logout() call disconnects user by clearing session. This works for if user is connected with WaaP or WalletConnect.

await window.waap.logout();

Smart Logout (With External Wallets)​

When external wallets are enabled, use getLoginMethod() first to determine with which wallet user is connected with to logout accordingly:

async function smartLogout() {
  const loginMethod = window.waap.getLoginMethod();

  switch (loginMethod) {
    case "waap":
    case "walletconnect":
      // Can logout programmatically
      await window.waap.logout();
      console.log("Logged out successfully");
      break;

    case "injected":
      // Cannot logout programmatically
      showDisconnectInstructions();
      // Still call logout to clear app session
      await window.waap.logout();
      break;

    case null:
      console.log("User not connected");
      break;
  }
}

function showDisconnectInstructions() {
  alert(
    "To disconnect, open your wallet extension (for example, MetaMask), " +
      'go to "Connected Sites", and remove this site. ' +
      "You can still connect with WaaP or WalletConnect " +
      "without disconnecting your injected wallet."
  );
}

Logout State Management​

You need to handle your app's login state as in the React example below.

window.waap.logout() only handles clearing user's WaaP session.

To check, if logout was successful, call window.waap.getLoginMethod() to see if it returns null.

// Complete logout with UI updates
async function logout() {
  const loginMethod = window.waap.getLoginMethod();

  // Clear UI state
  setConnectedAccount(null);
  setLoginMethod(null);

  // Handle wallet-specific logout
  if (loginMethod === "injected") {
    showManualDisconnectMessage();
  }

  // Always call logout to clear session
  await window.waap.logout();

  // Verify logout was successful
  console.log("Login method after logout:", window.waap.getLoginMethod()); // null
}

Error Handling​

try {
  const accounts = await window.waap.request({ method: 'eth_requestAccounts' })
} catch (error) {
  console.error('Error connecting:', error)
}

Event Listeners​

WaaP implements standard EIP-1193 event listeners:

connect, disconnect, accountsChanged, chainChanged

// Connection status changes
window.waap.on("connect", () => {
  console.log("Connected to WaaP");
});

// Account changes
window.waap.on("accountsChanged", (accounts) => {
  if (accounts.length === 0) {
    console.log("Wallet disconnected");
    setConnectedAccount(null);
  } else {
    console.log("Account changed to:", accounts[0]);
    setConnectedAccount(accounts[0]);
  }
});

// Chain changes
window.waap.on("chainChanged", (chainId) => {
  console.log("Chain changed to:", chainId);
  setCurrentChain(chainId);
});

// Disconnect events
window.waap.on("disconnect", (error) => {
  console.log("Wallet disconnected:", error);
  setConnectedAccount(null);
});

Event Cleanup​

useEffect(() => {
  const handleAccountsChanged = (accounts) => {
    setConnectedAccount(accounts[0] || null);
  };

  const handleChainChanged = (chainId) => {
    setCurrentChain(chainId);
  };

  // Add listeners
  window.waap.on("accountsChanged", handleAccountsChanged);
  window.waap.on("chainChanged", handleChainChanged);

  // Cleanup on unmount
  return () => {
    window.waap.removeListener("accountsChanged", handleAccountsChanged);
    window.waap.removeListener("chainChanged", handleChainChanged);
  };
}, []);

Get Support​

Questions or Trouble Integrating?

Please join our developer Telegram group and get in touch with us.