Skip to main content

Adding API Keys to RPC Requests via HTTP Headers

Adding API Keys in RPC Headers​

Web3Auth allows you to specify the RPC endpoint URL, but it doesn't directly provide an option to set custom HTTP headers such as API keys required by certain blockchain providers. To accommodate blockchain APIs that require authentication headers, you need to manually intercept and attach these headers to your application's outgoing RPC requests.

We'll use TRON as an example in this guide. You can obtain your TRON API key here.

tip

If you're using TRON's mainnet RPC endpoint (https://api.trongrid.io), you may face rate limits or rejected requests unless you attach the required TRON-PRO-API-KEY header. This guide helps you configure that. However, if you're working on the Shasta testnet (https://api.shasta.trongrid.io), this step is not required.

Identifying RPC Host URL​

First, identify the hostname for your RPC provider by checking the network logs in your browser:

  1. Open your browser's Developer Tools (Network tab).
  2. Execute a blockchain-related action (e.g., fetching balance).
  3. Locate the RPC request URL (e.g., https://api.trongrid.io/jsonrpc).
  4. Note the hostname (e.g., api.trongrid.io).

Adding Headers via Global fetch Patch​

Create a file named globals.js and include the following code snippet:

globals.js
(function () {
  if (typeof globalThis === "undefined") {
    if (typeof global !== "undefined") global.globalThis = global;
    else if (typeof self !== "undefined") self.globalThis = self;
    else if (typeof window !== "undefined") window.globalThis = window;
    else throw new Error("Unable to locate global object");
  }
})();

const { fetch: originalFetch } = globalThis;

const RPC_HEADER_MAP = {
  "api.trongrid.io": {
    "TRON-PRO-API-KEY": "YOUR_TRON_API_KEY",
  },
  // Add other RPC hosts and headers if needed
};

globalThis.fetch = (...args) => {
  const [resource, config = {}] = args;
  const url = new URL(resource instanceof Request ? resource.url : resource);
  const headers = new Headers(config.headers || {});

  const customHeaders = RPC_HEADER_MAP[url.hostname];

  if (customHeaders) {
    Object.entries(customHeaders).forEach(([key, value]) => {
      headers.set(key, value);
    });
  }

  return originalFetch(resource, { ...config, headers });
};

Replace "YOUR_TRON_API_KEY" with the actual API key provided by your blockchain RPC provider.

Importing the Patch into Your Application​

Make sure to import this file at the very beginning of your application's entry point (index.tsx or main.ts):

import "./globals"; // Ensure this is the first import
Note

Perform this operation with caution. Avoid exposing sensitive API keys within client-side applications. Ensure the API keys used here are restricted and suitable for public-facing environments.

Why This Approach Works​

  • Web3Auth SDK uses the provided RPC URL configured via the developer dashboard.
  • Blockchain SDKs like TronWeb internally use the global fetch API.
  • Our patch intercepts these fetch calls and injects necessary headers, ensuring compatibility with authenticated blockchain RPCs.
tip

Security Recommendations:

  • Always use restricted or public-safe API keys in frontend environments.
  • Enable key restrictions or usage limits wherever possible.
  • For sensitive transactions, consider routing through a secure backend server.