Monstera Connect

One button. Your wallet, in place.

The hosted preview opens Monstera on its own origin. The user selects a registered account, reviews the requesting website, and approves using the wallet’s active authenticator. With a different wallet origin, passwords and authentication proofs stay inside its frame or window. The hosted demo shares the wallet origin and is a first-party preview. Each message requires fresh approval.

<div id="monstera"></div>
<script type="module">
import { mountMonsteraConnect } from
  "https://monstera.cellact.nl/components/monstera-connect-ui-0.6.0.js";
const leaf = mountMonsteraConnect(document.querySelector("#monstera"), {
  appName: "Your application", display: "modal"
});
// await leaf.signMessage(message); // Opens the approval dialog.
// leaf.destroy(); // Unmount and clear the unlock session.
</script>

For your own UI, use the transport directly:

import { createMonsteraConnector } from
  "https://monstera.cellact.nl/components/monstera-connect-0.6.0.js";

const monstera = createMonsteraConnector({
  walletUrl: "https://monstera.cellact.nl/connect/",
  appName: "Your application",
  display: "modal", // Or "popup" for a browser window.
});
// Call directly from a user’s button click.
const { account } = await monstera.connect();
const receipt = await monstera.signMessage(account, "Message to review");
// Call from the account menu. Configuration stays in the wallet dialog.
const settings = await monstera.manageAuthentication(account);

Login your website can verify

Your server must issue a fresh ERC-4361 challenge bound to its domain, URI, account, chain and nonce, with a short expiry. Verify the exact signed challenge and consume it once before creating an HttpOnly session. Authorize protected resources on the server. The derived EOA signs the message; the WalletLogic proxy is not the signing address.

const monstera = createMonsteraConnector({
  walletUrl: "https://monstera.cellact.nl/connect/",
  getChallenge: async account =>
    (await post("/api/monstera/challenge", { account })).message,
  verifyChallenge: proof => post("/api/monstera/verify", proof),
});
// post: check HTTP status, send JSON, include session cookies.
const { account, session } = await monstera.connect();

A runnable local reference is included at examples/auth-server/server.mjs (npm run demo:auth-server). It validates registered accounts, origin, nonce, expiry and ECDSA signatures; rotates cookies; and offers session/logout routes. Its stores are in memory. Production needs HTTPS, durable atomic challenge/session storage and a security review. GitHub Pages cannot run this backend.

Familiar Ethereum calls

import { createMonsteraProvider } from
  "https://monstera.cellact.nl/components/monstera-connect-0.6.0.js";
const provider = createMonsteraProvider({
  walletUrl: "https://monstera.cellact.nl/connect/",
});
await provider.request({ method: "eth_requestAccounts" });
await provider.request({ method: "eth_accounts" });
await provider.request({ method: "eth_chainId" });
// personal_sign: [hex-encoded UTF-8 message, connected EOA]
provider.on("accountsChanged", accounts => { /* update UI */ });

Authentication & next steps

• Enter the Monstera username, not a MetaMask address, to find an existing account. A Monstera wallet address also works. Lookup does not authenticate or link a wallet. If the same username exists on both mainnet and testnet, choose the separate account explicitly. If a network is unavailable, lookup reports it rather than treating the account as missing. The selected network remains fixed for every signing or settings operation.
• Wired strategies: Password, PasswordMinuteSignature, WalletSignature and DualFactor. The vault’s active address determines the method; it is not freely chosen by the website.
• Version 0.6.0 finds accounts across both Sapphire networks, displays only enabled sign-in methods and keeps the resolved network fixed through settings. Version 0.5.0 introduced the wallet-origin memory session; 0.4.0 introduced display: modal: a same-page dialog with a wallet-origin frame. Popup remains the default; 0.3.0 stays window-only. Close, Escape and frame removal cancel and clean up the request. The frame waits for a verified parent request and displays both origins.
• Optional unlock in the same-page dialog keeps the password in wallet-origin memory for at most 15 minutes, with a 5-minute idle lock. It is scoped to the requesting origin, chain, vault, account, authenticator and selected method. Nothing is saved to browser storage. Every operation still needs explicit approval, and wallet/guardian signatures stay fresh. Lock, disconnect, reload, failed authorization and authentication policy changes clear the unlock. Popup mode and browsers without the private channel fall back to password entry per request.
• Browser wallet proofs use an EIP-712 adapter because SDK 2.3.0’s proof helpers restrict signers to Wallet/HDNodeWallet. Credentials stay in the wallet document. Browser-wallet extensions may be unavailable inside frames; use popup mode for those flows if needed.
• Unknown/custom authenticators fail closed. The component supports verified Password OR Wallet and Multi deployments; unsupported API-key and custom children still need reviewed adapters.
• Add login method keeps password access while enabling signed MetaMask linking. Password wallets use two explicit transactions; existing Multi wallets can retain and manage several supported methods. New wallet access requires a verified MetaMask ownership signature and current authentication. Settings also includes password updates, wallet removal, guardian replacement and authenticator migration. Each operation reviews the exact change, requires current authorization and a browser gas payer, waits for a mined receipt, and checks resulting settings. Previously configured presets need a separate credential-preserving reactivation flow.
• Import mountMonsteraConnect from the versioned monstera-connect-ui-0.6.0.js module and mount it in one div. Styling is isolated in a shadow root. The returned controller provides connect, getAccount, signMessage, manageAuthentication, disconnect and destroy; call destroy on unmount. This is a hosted module preview, not an npm package.