How to Integrate Lovable with Binance API

Log in to binance.com. In the top-right area, click your profile icon, then select 'API Management'. Click 'Create API'. Binance offers two API types: 'System Generated' (standard HMAC authentication) and 'Self-Generated' (for ED25519 keys). Select 'System Generated' for this tutorial — it's the most compatible with standard HMAC implementations. Give your API key a memorable label like 'Lovable Portfolio App'. Binance may require 2FA verification. After creation, you'll see both the API Key and Secret Key — critically, the Secret Key is shown only once. Copy it immediately and store it somewhere safe before closing the page. On the API key settings page, configure the permissions carefully based on what your app needs. For a read-only portfolio tracker or price dashboard, enable only 'Enable Reading' — this allows fetching account balances and trade history but cannot place orders or withdraw funds. Do not enable 'Enable Spot & Margin Trading' or 'Enable Withdrawals' unless your app specifically needs them, as these permissions represent significant financial risk if the API key is ever compromised. For an extra layer of security, restrict the API key to specific IP addresses. Your Lovable app's Edge Functions run from Supabase's infrastructure — you can find the IP ranges in your Supabase project settings under 'Database → Connection' or 'Project Settings'. IP restriction means the key is useless even if stolen.

Open your Lovable project and click the '+' button in the top-right editor area to access panels. Select 'Cloud', then expand the 'Secrets' section. Add your credentials as encrypted environment variables. Add BINANCE_API_KEY with your API Key value (the non-secret identifier). Add BINANCE_API_SECRET with your Secret Key value. Add BINANCE_BASE_URL with value 'https://api.binance.com' — this lets you switch to testnet (https://testnet.binance.vision) for testing order placement without using real funds. For public market data, you could optionally use 'https://api1.binance.com' or 'https://api2.binance.com' as alternative endpoints if the primary is slow. Binance's API secret is used to compute HMAC-SHA256 signatures for authenticated requests. This computation must happen in your Edge Function, never in the browser. The API key itself is sent as an X-MBX-APIKEY header in every authenticated request, which is also handled in the Edge Function. Note: for public market data endpoints (price tickers, order books, candlesticks), no API key or secret is required. These can be called directly from the frontend or through an Edge Function without any secrets. The credentials are only needed for the authenticated account endpoints covered in Step 4.

Public Binance market data endpoints don't require authentication, but routing through an Edge Function avoids CORS issues and lets you cache results, rate limit calls from multiple users, and add your own data transformation logic. Create an Edge Function for common market data queries. The most useful public endpoints are: /api/v3/ticker/24hr for 24-hour price statistics (price, change, volume, high, low), /api/v3/ticker/price for simple current price by symbol, /api/v3/klines for candlestick data (OHLCV) with configurable intervals (1m, 5m, 1h, 1d, etc.), and /api/v3/depth for order book data showing bids and asks. Design the Edge Function to accept a symbol parameter and an action parameter so one function handles multiple data types. For example, action='ticker' fetches the 24hr ticker for a given symbol, action='price' fetches just the current price, and action='klines' fetches candlestick data with a specified interval and limit. For displaying multiple symbols (like a price watchlist), the /api/v3/ticker/24hr endpoint accepts either no symbol (returns all tickers, ~500+ entries) or a symbols parameter with a JSON-encoded array. Fetch only the symbols you need to minimize bandwidth and processing.

1// supabase/functions/binance-market/index.ts
2import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
3
4const BASE_URL = Deno.env.get("BINANCE_BASE_URL") ?? "https://api.binance.com";
5const corsHeaders = {
6  "Access-Control-Allow-Origin": "*",
7  "Access-Control-Allow-Methods": "POST, OPTIONS",
8  "Access-Control-Allow-Headers": "Content-Type, Authorization",
9};
10
11serve(async (req) => {
12  if (req.method === "OPTIONS") return new Response(null, { headers: corsHeaders });
13
14  try {
15    const { action, symbol, symbols, interval, limit } = await req.json();
16
17    let url = "";
18    if (action === "ticker") {
19      url = `${BASE_URL}/api/v3/ticker/24hr?symbol=${symbol}`;
20    } else if (action === "prices") {
21      const encoded = encodeURIComponent(JSON.stringify(symbols));
22      url = `${BASE_URL}/api/v3/ticker/price?symbols=${encoded}`;
23    } else if (action === "klines") {
24      url = `${BASE_URL}/api/v3/klines?symbol=${symbol}&interval=${interval ?? "1h"}&limit=${limit ?? 100}`;
25    } else {
26      return new Response(JSON.stringify({ error: "Unknown action" }), { status: 400, headers: corsHeaders });
27    }
28
29    const res = await fetch(url);
30    if (!res.ok) {
31      const err = await res.json();
32      return new Response(JSON.stringify(err), { status: res.status, headers: { ...corsHeaders, "Content-Type": "application/json" } });
33    }
34    const data = await res.json();
35    return new Response(JSON.stringify(data), { headers: { ...corsHeaders, "Content-Type": "application/json" } });
36  } catch (err) {
37    return new Response(JSON.stringify({ error: err.message }), {
38      status: 500,
39      headers: { ...corsHeaders, "Content-Type": "application/json" },
40    });
41  }
42});

For account balances and trade history, Binance requires HMAC-SHA256 signed requests. The signing process works as follows: construct the query parameters string (including a timestamp parameter set to the current UTC time in milliseconds), compute an HMAC-SHA256 hash of this string using your API secret as the key, append the resulting signature to the query string, and include your API key in the X-MBX-APIKEY header. Deno has built-in Web Crypto API support that handles HMAC-SHA256 without any external dependencies. The key steps in the Edge Function are: get the current timestamp, build the parameter string, sign it with your secret, and make the authenticated request. The main authenticated endpoints for a portfolio tracker are: GET /api/v3/account (returns all balances including non-zero assets), GET /api/v3/myTrades (trade history for a specific symbol, requires symbol parameter), and GET /api/v3/openOrders (currently open orders). Store only the aggregated portfolio data in Supabase (total value, asset allocations by percentage) rather than raw account data. The access tokens pattern from Plaid doesn't apply here — each user of your Binance-connected app would need to provide their own API key and secret, which you'd store encrypted in their user profile. For a personal portfolio tracker (single user), your own API key in Cloud Secrets is sufficient.

1// supabase/functions/binance-account/index.ts
2import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
3
4const BASE_URL = Deno.env.get("BINANCE_BASE_URL") ?? "https://api.binance.com";
5const API_KEY = Deno.env.get("BINANCE_API_KEY") ?? "";
6const API_SECRET = Deno.env.get("BINANCE_API_SECRET") ?? "";
7const corsHeaders = { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "POST, OPTIONS", "Access-Control-Allow-Headers": "Content-Type, Authorization" };
8
9async function sign(queryString: string): Promise<string> {
10  const key = await crypto.subtle.importKey(
11    "raw",
12    new TextEncoder().encode(API_SECRET),
13    { name: "HMAC", hash: "SHA-256" },
14    false,
15    ["sign"]
16  );
17  const sig = await crypto.subtle.sign("HMAC", key, new TextEncoder().encode(queryString));
18  return Array.from(new Uint8Array(sig)).map(b => b.toString(16).padStart(2, "0")).join("");
19}
20
21serve(async (req) => {
22  if (req.method === "OPTIONS") return new Response(null, { headers: corsHeaders });
23  try {
24    const { action, symbol } = await req.json();
25    const timestamp = Date.now();
26
27    if (action === "balances") {
28      const qs = `timestamp=${timestamp}`;
29      const signature = await sign(qs);
30      const res = await fetch(`${BASE_URL}/api/v3/account?${qs}&signature=${signature}`, {
31        headers: { "X-MBX-APIKEY": API_KEY },
32      });
33      const data = await res.json();
34      if (data.code) throw new Error(data.msg);
35      const nonZero = (data.balances ?? []).filter((b: any) => parseFloat(b.free) > 0 || parseFloat(b.locked) > 0);
36      return new Response(JSON.stringify({ balances: nonZero }), { headers: { ...corsHeaders, "Content-Type": "application/json" } });
37    }
38
39    if (action === "trades") {
40      const qs = `symbol=${symbol}&timestamp=${timestamp}&limit=50`;
41      const signature = await sign(qs);
42      const res = await fetch(`${BASE_URL}/api/v3/myTrades?${qs}&signature=${signature}`, {
43        headers: { "X-MBX-APIKEY": API_KEY },
44      });
45      const data = await res.json();
46      if (data.code) throw new Error(data.msg);
47      return new Response(JSON.stringify({ trades: data }), { headers: { ...corsHeaders, "Content-Type": "application/json" } });
48    }
49
50    return new Response(JSON.stringify({ error: "Unknown action" }), { status: 400, headers: corsHeaders });
51  } catch (err) {
52    return new Response(JSON.stringify({ error: err.message }), { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } });
53  }
54});

With both Edge Functions deployed, build the portfolio tracker UI in Lovable. The dashboard should combine account balance data from the binance-account function with current prices from the binance-market function to calculate USD values for each holding. Design the component to load on mount by calling both functions in parallel — account balances and current prices for the held assets. Map each balance to its current price to calculate position values. Sort by position value descending. Display in a table with columns: Asset, Holdings, Current Price, USD Value. Add a pie chart component showing portfolio allocation percentages. For the price data, batch the symbol requests efficiently. If you hold BTC, ETH, and SOL, fetch BTCUSDT, ETHUSDT, and SOLUSDT prices in a single /api/v3/ticker/price request with the symbols array rather than making separate calls for each. This reduces API calls and stays within Binance's rate limits more efficiently. Add a manual refresh button and display the last-updated timestamp. For a production app, you might refresh prices every 30 seconds and balances every 5 minutes (account data is less time-sensitive and has higher weight costs).