How to Integrate Bolt.new with Etsy Open API

1// .env.local
2ETSY_API_KEY=your_etsy_api_key_here
3ETSY_SHARED_SECRET=your_etsy_shared_secret_here
4ETSY_REDIRECT_URI=https://your-app.netlify.app/api/etsy/callback

1// app/api/etsy/listings/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const ETSY_API = 'https://openapi.etsy.com/v3';
5const API_KEY = process.env.ETSY_API_KEY;
6
7export async function GET(request: NextRequest) {
8  const { searchParams } = new URL(request.url);
9  const shopId = searchParams.get('shopId');
10  const limit = searchParams.get('limit') ?? '50';
11  const offset = searchParams.get('offset') ?? '0';
12
13  if (!shopId) {
14    return NextResponse.json({ error: 'shopId is required' }, { status: 400 });
15  }
16
17  const response = await fetch(
18    `${ETSY_API}/application/shops/${shopId}/listings/active?limit=${limit}&offset=${offset}&includes=Images`,
19    { headers: { 'x-api-key': API_KEY! } }
20  );
21
22  if (!response.ok) {
23    const error = await response.json();
24    return NextResponse.json({ error }, { status: response.status });
25  }
26
27  const data = await response.json();
28
29  const listings = data.results.map((listing: Record<string, unknown>) => {
30    const images = listing.images as Array<Record<string, string>> | undefined;
31    return {
32      id: listing.listing_id,
33      title: listing.title,
34      price: listing.price,
35      quantity: listing.quantity,
36      url: listing.url,
37      imageUrl: images?.[0]?.url_570xN ?? null,
38    };
39  });
40
41  return NextResponse.json({
42    listings,
43    count: data.count,
44    total: data.total_count ?? data.count,
45  });
46}

1// app/api/etsy/authorize/route.ts
2import { NextResponse } from 'next/server';
3import crypto from 'crypto';
4import { cookies } from 'next/headers';
5
6function base64urlEncode(buffer: Buffer): string {
7  return buffer.toString('base64').replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
8}
9
10export async function GET() {
11  // Generate PKCE code verifier and challenge
12  const codeVerifier = base64urlEncode(crypto.randomBytes(32));
13  const codeChallenge = base64urlEncode(
14    crypto.createHash('sha256').update(codeVerifier).digest()
15  );
16  const state = base64urlEncode(crypto.randomBytes(16));
17
18  // Store verifier and state in a cookie for the callback
19  const cookieStore = await cookies();
20  cookieStore.set('etsy_code_verifier', codeVerifier, { httpOnly: true, sameSite: 'lax' });
21  cookieStore.set('etsy_state', state, { httpOnly: true, sameSite: 'lax' });
22
23  const authUrl = new URL('https://www.etsy.com/oauth/connect');
24  authUrl.searchParams.set('response_type', 'code');
25  authUrl.searchParams.set('redirect_uri', process.env.ETSY_REDIRECT_URI!);
26  authUrl.searchParams.set('scope', 'listings_r listings_w transactions_r shops_r');
27  authUrl.searchParams.set('client_id', process.env.ETSY_API_KEY!);
28  authUrl.searchParams.set('state', state);
29  authUrl.searchParams.set('code_challenge', codeChallenge);
30  authUrl.searchParams.set('code_challenge_method', 'S256');
31
32  return NextResponse.redirect(authUrl.toString());
33}
34
35// app/api/etsy/callback/route.ts
36import { NextRequest, NextResponse } from 'next/server';
37import { cookies } from 'next/headers';
38
39export async function GET(request: NextRequest) {
40  const { searchParams } = new URL(request.url);
41  const code = searchParams.get('code');
42  const state = searchParams.get('state');
43
44  const cookieStore = await cookies();
45  const storedState = cookieStore.get('etsy_state')?.value;
46  const codeVerifier = cookieStore.get('etsy_code_verifier')?.value;
47
48  if (state !== storedState || !code || !codeVerifier) {
49    return NextResponse.json({ error: 'Invalid OAuth state or missing parameters' }, { status: 400 });
50  }
51
52  const tokenResponse = await fetch('https://api.etsy.com/v3/public/oauth/token', {
53    method: 'POST',
54    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
55    body: new URLSearchParams({
56      grant_type: 'authorization_code',
57      client_id: process.env.ETSY_API_KEY!,
58      redirect_uri: process.env.ETSY_REDIRECT_URI!,
59      code,
60      code_verifier: codeVerifier,
61    }).toString(),
62  });
63
64  const tokens = await tokenResponse.json();
65  // Store tokens in your database or session
66  return NextResponse.json({ success: true, expiresIn: tokens.expires_in });
67}