How to Integrate Bolt.new with Plaid

1# .env
2PLAID_CLIENT_ID=your-client-id-here
3PLAID_SECRET=your-sandbox-secret-here
4PLAID_ENV=sandbox
5# For development: PLAID_ENV=development, PLAID_SECRET=your-development-secret
6# For production: PLAID_ENV=production, PLAID_SECRET=your-production-secret

1// lib/plaid.ts
2import { Configuration, PlaidApi, PlaidEnvironments } from 'plaid';
3
4const env = process.env.PLAID_ENV as keyof typeof PlaidEnvironments || 'sandbox';
5
6const configuration = new Configuration({
7  basePath: PlaidEnvironments[env],
8  baseOptions: {
9    headers: {
10      'PLAID-CLIENT-ID': process.env.PLAID_CLIENT_ID!,
11      'PLAID-SECRET': process.env.PLAID_SECRET!,
12    },
13  },
14});
15
16export const plaidClient = new PlaidApi(configuration);

1// app/api/plaid/create-link-token/route.ts
2import { NextResponse } from 'next/server';
3import { plaidClient } from '@/lib/plaid';
4import { CountryCode, Products } from 'plaid';
5
6export async function POST(request: Request) {
7  try {
8    const { userId } = await request.json();
9
10    const response = await plaidClient.linkTokenCreate({
11      user: { client_user_id: userId },
12      client_name: 'My Finance App',
13      products: [Products.Transactions],
14      country_codes: [CountryCode.Us],
15      language: 'en',
16    });
17
18    return NextResponse.json({ link_token: response.data.link_token });
19  } catch (error: unknown) {
20    const e = error as { message: string };
21    return NextResponse.json({ error: e.message }, { status: 500 });
22  }
23}
24
25// app/api/plaid/exchange-token/route.ts
26import { NextResponse } from 'next/server';
27import { plaidClient } from '@/lib/plaid';
28
29export async function POST(request: Request) {
30  try {
31    const { publicToken, userId } = await request.json();
32
33    const response = await plaidClient.itemPublicTokenExchange({
34      public_token: publicToken,
35    });
36
37    const { access_token, item_id } = response.data;
38
39    // IMPORTANT: Save access_token and item_id to your database
40    // associated with userId. Never return access_token to the client.
41    // await db.plaidItems.create({ userId, accessToken: access_token, itemId: item_id });
42
43    return NextResponse.json({ success: true, itemId: item_id });
44  } catch (error: unknown) {
45    const e = error as { message: string };
46    return NextResponse.json({ error: e.message }, { status: 500 });
47  }
48}

1'use client';
2import { useEffect, useState, useCallback } from 'react';
3import { usePlaidLink, PlaidLinkOptions, PlaidLinkOnSuccess } from 'react-plaid-link';
4
5interface PlaidLinkButtonProps {
6  userId: string;
7  onConnected?: (accounts: Array<{ name: string; type: string }>) => void;
8}
9
10export function PlaidLinkButton({ userId, onConnected }: PlaidLinkButtonProps) {
11  const [linkToken, setLinkToken] = useState<string | null>(null);
12  const [loading, setLoading] = useState(true);
13
14  useEffect(() => {
15    fetch('/api/plaid/create-link-token', {
16      method: 'POST',
17      headers: { 'Content-Type': 'application/json' },
18      body: JSON.stringify({ userId }),
19    })
20      .then((res) => res.json())
21      .then((data) => {
22        setLinkToken(data.link_token);
23        setLoading(false);
24      });
25  }, [userId]);
26
27  const onSuccess = useCallback<PlaidLinkOnSuccess>(async (publicToken, metadata) => {
28    await fetch('/api/plaid/exchange-token', {
29      method: 'POST',
30      headers: { 'Content-Type': 'application/json' },
31      body: JSON.stringify({ publicToken, userId }),
32    });
33    const accounts = metadata.accounts.map((acc) => ({
34      name: acc.name,
35      type: acc.type,
36    }));
37    onConnected?.(accounts);
38  }, [userId, onConnected]);
39
40  const config: PlaidLinkOptions = {
41    token: linkToken,
42    onSuccess,
43  };
44
45  const { open, ready } = usePlaidLink(config);
46
47  if (loading) return <p className="text-gray-500">Loading...</p>;
48
49  return (
50    <button
51      onClick={() => open()}
52      disabled={!ready}
53      className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 disabled:opacity-50"
54    >
55      Connect Bank Account
56    </button>
57  );
58}

1// app/api/plaid/transactions/route.ts
2import { NextResponse } from 'next/server';
3import { plaidClient } from '@/lib/plaid';
4
5export async function GET(request: Request) {
6  try {
7    // Retrieve access_token from your database for the authenticated user
8    // const accessToken = await db.plaidItems.findByUserId(userId);
9    const accessToken = 'access-sandbox-xxxx'; // replace with DB lookup
10
11    const thirtyDaysAgo = new Date();
12    thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
13
14    const response = await plaidClient.transactionsGet({
15      access_token: accessToken,
16      start_date: thirtyDaysAgo.toISOString().split('T')[0],
17      end_date: new Date().toISOString().split('T')[0],
18    });
19
20    return NextResponse.json({
21      transactions: response.data.transactions,
22      total: response.data.total_transactions,
23    });
24  } catch (error: unknown) {
25    const e = error as { message: string };
26    return NextResponse.json({ error: e.message }, { status: 500 });
27  }
28}