gelatodigital · pedrocrvz · Feb 17, 2026 · Feb 17, 2026 · Feb 17, 2026
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -14,7 +14,8 @@
     "relayer-ws",
     "bundler-ws",
     "relayer-get-balance",
-    "bundler-get-balance"
+    "bundler-get-balance",
+    "browser-ws"
   ],
   "linked": [],
   "updateInternalDependencies": "patch"

diff --git a/.changeset/tricky-carrots-sniff.md b/.changeset/tricky-carrots-sniff.md
@@ -0,0 +1,5 @@
+---
+"@gelatocloud/gasless": patch
+---
+
+fix: ws auth for browsers
diff --git a/examples/account/ws/src/global.ts b/examples/account/ws/src/global.ts
@@ -60,7 +60,7 @@ const main = async () => {
     console.log(`[reverted] Transaction ${data.id} reverted on block ${data.receipt.blockNumber}`)
   );
 
-  const taskId = await relayer.sendTransaction({
+  const id = await relayer.sendTransaction({
     calls: [
       {
         data: '0xd09de08a',
@@ -69,7 +69,7 @@ const main = async () => {
     ]
   });
 
-  console.log(`Sent transaction ${taskId}`);
+  console.log(`Sent transaction ${id}`);
 
   // Graceful shutdown
   process.on('SIGINT', async () => {

diff --git a/examples/browser-ws/.env.example b/examples/browser-ws/.env.example
@@ -0,0 +1 @@
+VITE_GELATO_API_KEY="Get your api key at https://app.gelato.cloud/"
diff --git a/examples/browser-ws/index.html b/examples/browser-ws/index.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Gasless WebSocket Test</title>
+    <style>
+      * {
+        box-sizing: border-box;
+        padding: 0;
+        margin: 0;
+      }
+      body {
+        max-width: 720px;
+        padding: 24px;
+        margin: 0 auto;
+        font-family: system-ui, -apple-system, sans-serif;
+        color: #e0e0e0;
+        background: #0a0a0a;
+      }
+      h1 {
+        margin-bottom: 20px;
+        font-size: 1.4rem;
+        color: #fff;
+      }
+      .controls {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        margin-bottom: 16px;
+      }
+      input {
+        flex: 1;
+        min-width: 200px;
+        padding: 8px 12px;
+        font-size: 0.9rem;
+        color: #e0e0e0;
+        background: #1a1a1a;
+        border: 1px solid #333;
+        border-radius: 6px;
+      }
+      input::placeholder {
+        color: #666;
+      }
+      button {
+        padding: 8px 16px;
+        font-size: 0.9rem;
+        font-weight: 500;
+        cursor: pointer;
+        border: none;
+        border-radius: 6px;
+        transition: opacity 0.15s;
+      }
+      button:hover:not(:disabled) {
+        opacity: 0.85;
+      }
+      button:disabled {
+        cursor: not-allowed;
+        opacity: 0.4;
+      }
+      #connectBtn {
+        color: #fff;
+        background: #2563eb;
+      }
+      #sendBtn {
+        color: #fff;
+        background: #16a34a;
+      }
+      #disconnectBtn {
+        color: #fff;
+        background: #dc2626;
+      }
+      .status {
+        margin-bottom: 12px;
+        font-size: 0.85rem;
+        color: #888;
+      }
+      .status .dot {
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        margin-right: 6px;
+        background: #666;
+        border-radius: 50%;
+      }
+      .status .dot.connected {
+        background: #22c55e;
+      }
+      #log {
+        height: 400px;
+        padding: 12px;
+        overflow-y: auto;
+        font-family: "SF Mono", "Fira Code", monospace;
+        font-size: 0.8rem;
+        line-height: 1.6;
+        background: #111;
+        border: 1px solid #222;
+        border-radius: 8px;
+      }
+      .log-entry {
+        padding: 2px 0;
+        border-bottom: 1px solid #1a1a1a;
+      }
+      .log-entry .time {
+        margin-right: 8px;
+        color: #555;
+      }
+      .log-entry.submitted {
+        color: #60a5fa;
+      }
+      .log-entry.success {
+        color: #4ade80;
+      }
+      .log-entry.rejected {
+        color: #f87171;
+      }
+      .log-entry.reverted {
+        color: #fb923c;
+      }
+      .log-entry.info {
+        color: #888;
+      }
+      .log-entry.error {
+        color: #f87171;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Gasless WebSocket Test</h1>
+    <div class="controls">
+      <input id="apiKey" type="text" placeholder="Enter Gelato API Key" />
+      <button id="connectBtn">Connect</button>
+      <button id="sendBtn" disabled>Send Tx</button>
+      <button id="disconnectBtn" disabled>Disconnect</button>
+    </div>
+    <div class="status">
+      <span class="dot" id="statusDot"></span>
+      <span id="statusText">Disconnected</span>
+    </div>
+    <div id="log"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/browser-ws/package.json b/examples/browser-ws/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "browser-ws",
+  "private": true,
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "vite"
+  },
+  "dependencies": {
+    "@gelatocloud/gasless": "workspace:*",
+    "viem": "catalog:"
+  },
+  "devDependencies": {
+    "typescript": "catalog:",
+    "vite": "^6.3.5"
+  }
+}
diff --git a/examples/browser-ws/src/main.ts b/examples/browser-ws/src/main.ts
@@ -0,0 +1,128 @@
+import type { GelatoEvmRelayerClient } from '@gelatocloud/gasless';
+import { createGelatoEvmRelayerClient } from '@gelatocloud/gasless';
+import { baseSepolia } from 'viem/chains';
+
+const chain = baseSepolia;
+const TARGET_CONTRACT = '0xE27C1359cf02B49acC6474311Bd79d1f10b1f8De';
+const INCREMENT_CALLDATA = '0xd09de08a';
+
+// Pre-fill API key from env (Vite exposes VITE_-prefixed vars)
+const envApiKey = import.meta.env['VITE_GELATO_API_KEY'] as string | undefined;
+
+// DOM elements
+const apiKeyInput = document.getElementById('apiKey') as HTMLInputElement;
+const connectBtn = document.getElementById('connectBtn') as HTMLButtonElement;
+const sendBtn = document.getElementById('sendBtn') as HTMLButtonElement;
+const disconnectBtn = document.getElementById('disconnectBtn') as HTMLButtonElement;
+const statusDot = document.getElementById('statusDot') as HTMLSpanElement;
+const statusText = document.getElementById('statusText') as HTMLSpanElement;
+const logEl = document.getElementById('log') as HTMLDivElement;
+
+if (envApiKey) apiKeyInput.value = envApiKey;
+
+let relayer: GelatoEvmRelayerClient | null = null;
+let subscriptionId: string | null = null;
+
+function log(
+  message: string,
+  type: 'info' | 'submitted' | 'success' | 'rejected' | 'reverted' | 'error' = 'info'
+) {
+  const entry = document.createElement('div');
+  entry.className = `log-entry ${type}`;
+  const time = new Date().toLocaleTimeString();
+  entry.innerHTML = `<span class="time">${time}</span>${message}`;
+  logEl.appendChild(entry);
+  logEl.scrollTop = logEl.scrollHeight;
+}
+
+function setConnected(connected: boolean) {
+  connectBtn.disabled = connected;
+  apiKeyInput.disabled = connected;
+  sendBtn.disabled = !connected;
+  disconnectBtn.disabled = !connected;
+  statusDot.className = connected ? 'dot connected' : 'dot';
+  statusText.textContent = connected ? 'Connected' : 'Disconnected';
+}
+
+connectBtn.addEventListener('click', async () => {
+  const apiKey = apiKeyInput.value.trim();
+  if (!apiKey) {
+    log('Please enter an API key', 'error');
+    return;
+  }
+
+  try {
+    log('Creating relayer client...');
+
+    relayer = createGelatoEvmRelayerClient({
+      apiKey,
+      testnet: chain.testnet
+    });
+
+    log('Subscribing to transaction updates...');
+    const subscription = await relayer.ws.subscribe();
+    subscriptionId = subscription.subscriptionId;
+
+    subscription.on('submitted', (data) =>
+      log(`[submitted] Transaction ${data.id} submitted with hash: ${data.hash}`, 'submitted')
+    );
+    subscription.on('success', (data) =>
+      log(
+        `[success] Transaction ${data.id} included in block ${data.receipt.blockNumber}`,
+        'success'
+      )
+    );
+    subscription.on('rejected', (data) =>
+      log(`[rejected] Transaction ${data.id} was rejected: ${data.message}`, 'rejected')
+    );
+    subscription.on('reverted', (data) =>
+      log(
+        `[reverted] Transaction ${data.id} reverted on block ${data.receipt.blockNumber}`,
+        'reverted'
+      )
+    );
+
+    setConnected(true);
+    log('Connected! Listening for transaction updates...');
+  } catch (err) {
+    log(`Connection failed: ${err instanceof Error ? err.message : err}`, 'error');
+  }
+});
+
+sendBtn.addEventListener('click', async () => {
+  if (!relayer) return;
+
+  try {
+    sendBtn.disabled = true;
+    log(`Sending increment() to ${TARGET_CONTRACT} on ${chain.name}...`);
+
+    const id = await relayer.sendTransaction({
+      chainId: chain.id,
+      data: INCREMENT_CALLDATA,
+      to: TARGET_CONTRACT
+    });
+
+    log(`Transaction sent: ${id}`);
+    sendBtn.disabled = false;
+  } catch (err) {
+    log(`Send failed: ${err instanceof Error ? err.message : err}`, 'error');
+    sendBtn.disabled = false;
+  }
+});
+
+disconnectBtn.addEventListener('click', async () => {
+  if (!relayer) return;
+
+  try {
+    if (subscriptionId) {
+      await relayer.ws.unsubscribe(subscriptionId);
+      subscriptionId = null;
+    }
+    relayer.ws.disconnect();
+    relayer = null;
+    setConnected(false);
+    log('Disconnected.');
+  } catch (err) {
+    log(`Disconnect error: ${err instanceof Error ? err.message : err}`, 'error');
+  }
+});
diff --git a/examples/browser-ws/src/vite-env.d.ts b/examples/browser-ws/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/browser-ws/tsconfig.json b/examples/browser-ws/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "lib": ["DOM", "ESNext"]
+  }
+}
diff --git a/examples/browser-ws/vite.config.ts b/examples/browser-ws/vite.config.ts
@@ -0,0 +1,10 @@
+import { resolve } from 'node:path';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@gelatocloud/gasless': resolve(__dirname, '../../src/index.ts')
+    }
+  }
+});
diff --git a/examples/relayer/sponsored/README.md b/examples/relayer/sponsored/README.md
@@ -89,6 +89,6 @@ Polls until the transaction reaches a final state (Success, Rejected, or Reverte
 | Concept | Description |
 |---------|-------------|
 | `sponsored()` | Gelato pays gas fees |
-| `sendTransaction` | Async - returns immediately with task ID |
+| `sendTransaction` | Async - returns immediately with ID |
 | `waitForStatus` | Blocks until transaction is finalized |
 | `StatusCode.Success` | Transaction successfully included on-chain |
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		VITE_GELATO_API_KEY="Get your api key at https://app.gelato.cloud/"