How to Integrate Lovable with Etsy API

Navigate to developers.etsy.com and sign in with your Etsy account. Click 'Register a new app' and fill in the application name, description, and website URL. For the website URL during development, use your Lovable project's preview URL (visible in the top bar of the Lovable editor). In the OAuth 2.0 redirect URIs section, add your Lovable app's callback URL — this will be your deployed project URL plus the path /auth/etsy/callback, for example https://yourproject.lovable.app/auth/etsy/callback. You can add multiple redirect URIs including localhost URLs for testing. After saving, Etsy shows you a Keystring — this is your API key used in all requests. Etsy's OAuth2 uses PKCE (Proof Key for Code Exchange), which is a security mechanism that prevents authorization code interception attacks. Unlike traditional OAuth2, PKCE does not require a client secret for the code exchange step — instead it uses a cryptographically random code verifier and challenge that your app generates at the start of each authorization flow. Select the OAuth scopes your app needs: email_r (read email), listings_r (read listings), listings_w (write listings), receipts_r (read receipts), shops_r (read shop data), and transactions_r (read transactions).

In Lovable, open the Cloud tab by clicking the '+' icon next to the Preview panel and navigate to Secrets. Click 'Add Secret' and add one secret: ETSY_API_KEY with your Etsy app's Keystring as the value. The Etsy Keystring is a 24-character alphanumeric string that must be included as the x-api-key header in every Etsy API request. Unlike some other APIs, Etsy's PKCE OAuth2 flow does not use a client secret for the authorization code exchange — the PKCE code verifier generated by your frontend serves as proof of identity. This means you only need to protect one credential server-side: your API key. The OAuth2 access tokens that grant access to individual users' Etsy data are obtained at runtime through the browser flow and stored in your Supabase database per user — not in Secrets. Your Edge Function will need both the API key from Secrets and the user's access token (passed from the frontend after OAuth login) to make authenticated Etsy API calls.

Etsy's OAuth2 PKCE flow has two client-side steps that happen in the browser before any Edge Function is involved. First, your React app generates a random code verifier (a 32-byte random string), computes a code challenge (the SHA-256 hash of the code verifier, base64url-encoded), and stores the code verifier in sessionStorage. Then it redirects the user to Etsy's authorization URL with the code challenge, your Keystring, the requested scopes, and a state parameter for CSRF protection. The user logs in to Etsy, approves your app's access, and Etsy redirects them back to your callback URL with an authorization code. Your callback page extracts the code from the URL, retrieves the code verifier from sessionStorage, then calls your Edge Function to exchange the code and code verifier for an access token. The Edge Function makes the POST request to Etsy's token endpoint — this step requires the x-api-key header and the code verifier, but no client secret. The access token and refresh token are then stored in your Supabase database for that user.

1// PKCE helper functions for the frontend
2export async function generateCodeVerifier(): Promise<string> {
3  const array = new Uint8Array(32);
4  crypto.getRandomValues(array);
5  return base64urlEncode(array);
6}
7
8export async function generateCodeChallenge(verifier: string): Promise<string> {
9  const encoder = new TextEncoder();
10  const data = encoder.encode(verifier);
11  const digest = await crypto.subtle.digest('SHA-256', data);
12  return base64urlEncode(new Uint8Array(digest));
13}
14
15function base64urlEncode(buffer: Uint8Array): string {
16  return btoa(String.fromCharCode(...buffer))
17    .replace(/\+/g, '-')
18    .replace(/\//g, '_')
19    .replace(/=/g, '');
20}

You need two Edge Functions: one to handle the OAuth2 token exchange (etsy-auth) and one to proxy authenticated API calls to Etsy (etsy-proxy). The auth function accepts the authorization code and code verifier from your callback page, exchanges them for tokens at Etsy's token endpoint using POST to https://api.etsy.com/v3/public/oauth/token, and returns the access token and Etsy user ID to the frontend to save in Supabase. The proxy function accepts the Etsy API endpoint path and the user's access token, then makes the authenticated request to Etsy with both the x-api-key header and the Authorization: Bearer header. The proxy must forward both headers — Etsy requires the API key on every request regardless of OAuth state. Any Etsy API endpoint that returns user-specific data (listings, receipts, shop data) requires both headers. Public endpoints like taxonomy and some listing lookups require only the API key.

1// supabase/functions/etsy-proxy/index.ts
2import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
3
4const corsHeaders = {
5  "Access-Control-Allow-Origin": "*",
6  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
7};
8
9serve(async (req) => {
10  if (req.method === "OPTIONS") {
11    return new Response("ok", { headers: corsHeaders });
12  }
13
14  try {
15    const apiKey = Deno.env.get("ETSY_API_KEY");
16    if (!apiKey) throw new Error("ETSY_API_KEY not configured");
17
18    const { endpoint, method = "GET", access_token, body } = await req.json();
19    if (!endpoint) throw new Error("'endpoint' is required");
20    if (!access_token) throw new Error("'access_token' is required");
21
22    const url = `https://openapi.etsy.com/v3${endpoint}`;
23
24    const fetchOptions: RequestInit = {
25      method,
26      headers: {
27        "x-api-key": apiKey,
28        Authorization: `Bearer ${access_token}`,
29        "Content-Type": "application/json",
30      },
31    };
32
33    if (body && method !== "GET") {
34      fetchOptions.body = JSON.stringify(body);
35    }
36
37    const response = await fetch(url, fetchOptions);
38    const data = await response.json();
39
40    return new Response(JSON.stringify(data), {
41      headers: { ...corsHeaders, "Content-Type": "application/json" },
42      status: response.ok ? 200 : response.status,
43    });
44  } catch (error) {
45    return new Response(
46      JSON.stringify({ error: error.message }),
47      { headers: { ...corsHeaders, "Content-Type": "application/json" }, status: 500 }
48    );
49  }
50});

With OAuth and the proxy in place, prompt Lovable to build the seller dashboard. The Etsy API uses path parameters extensively — the shop ID is required for most seller-specific endpoints. After OAuth login, fetch the seller's shop ID from the API endpoint /v3/application/users/{userId}/shops, which returns their shop details including the numeric shop ID. Store this in your app state for use in subsequent API calls. The Listings API returns active, inactive, draft, and sold-out listings, each with images, pricing, tags, materials, and taxonomy category data. Etsy's taxonomy paths use period-separated IDs (for example, 68887422.1 represents a specific category) — for display purposes, you can fetch taxonomy labels from the /v3/application/seller-taxonomy/nodes endpoint and build a lookup table. For receipts, the Etsy API supports filtering by paid status, shipped status, and date range, making it easy to build a focused view of open orders that need fulfillment attention.