How to Integrate Bolt.new with Yodlee

1// lib/financial/config.ts
2// Financial data provider configuration
3// Yodlee: requires enterprise partnership (yodlee.com/contact-us)
4// Plaid: free developer account available at dashboard.plaid.com
5
6export type FinancialProvider = 'yodlee' | 'plaid';
7
8export const FINANCIAL_PROVIDER: FinancialProvider =
9  (process.env.FINANCIAL_PROVIDER as FinancialProvider) ?? 'plaid';
10
11export const YODLEE_CONFIG = {
12  clientId: process.env.YODLEE_CLIENT_ID ?? '',
13  secret: process.env.YODLEE_SECRET ?? '',
14  configName: process.env.YODLEE_CONFIG_NAME ?? '',
15  // Yodlee environments: 'sandbox' (partnership required), 'production'
16  apiBase: process.env.YODLEE_ENV === 'production'
17    ? 'https://production.api.yodlee.com/ysl'
18    : 'https://sandbox.api.yodlee.com/ysl',
19};
20
21export const PLAID_CONFIG = {
22  clientId: process.env.PLAID_CLIENT_ID ?? '',
23  secret: process.env.PLAID_SECRET ?? '',
24  // Plaid environments: 'sandbox' (free), 'development', 'production'
25  env: process.env.PLAID_ENV ?? 'sandbox',
26  apiBase: `https://${process.env.PLAID_ENV ?? 'sandbox'}.plaid.com`,
27};
28
29// Unified account type for display layer — same shape regardless of provider
30export interface FinancialAccount {
31  id: string;
32  name: string;
33  type: string;
34  institution: string;
35  balance: number;
36  currency: string;
37  providerAccountId?: string;
38}
39
40export interface FinancialTransaction {
41  id: string;
42  accountId: string;
43  description: string;
44  amount: number;
45  type: 'income' | 'expense';
46  category: string;
47  date: string;
48  pending: boolean;
49}

1// lib/yodlee/auth.ts
2import { YODLEE_CONFIG } from '@/lib/financial/config';
3
4interface YodleeTokenResponse {
5  token: {
6    accessToken: string;
7    issuedAt: string;
8    expiresIn: number;
9  };
10}
11
12// Module-level cache for app-level token
13let cachedAppToken: { token: string; expiresAt: number } | null = null;
14
15export async function getYodleeAppToken(): Promise<string> {
16  // Return cached token if still valid (with 2-minute buffer)
17  if (cachedAppToken && Date.now() < cachedAppToken.expiresAt - 120_000) {
18    return cachedAppToken.token;
19  }
20
21  const credentials = Buffer.from(
22    `${YODLEE_CONFIG.clientId}:${YODLEE_CONFIG.secret}`
23  ).toString('base64');
24
25  const response = await fetch(`${YODLEE_CONFIG.apiBase}/auth/token`, {
26    method: 'POST',
27    headers: {
28      Authorization: `Basic ${credentials}`,
29      'Content-Type': 'application/x-www-form-urlencoded',
30      Api-Version: '1.1',
31    },
32    body: 'grant_type=client_credentials',
33  });
34
35  if (!response.ok) {
36    const error = await response.text();
37    throw new Error(`Yodlee app token failed: ${response.status} ${error}`);
38  }
39
40  const data: YodleeTokenResponse = await response.json();
41  cachedAppToken = {
42    token: data.token.accessToken,
43    expiresAt: Date.now() + data.token.expiresIn * 1000,
44  };
45  return cachedAppToken.token;
46}
47
48export async function getYodleeUserToken(loginName: string): Promise<string> {
49  const appToken = await getYodleeAppToken();
50
51  const response = await fetch(`${YODLEE_CONFIG.apiBase}/auth/token`, {
52    method: 'POST',
53    headers: {
54      Authorization: `Bearer ${appToken}`,
55      'Content-Type': 'application/x-www-form-urlencoded',
56      loginName,
57      'Api-Version': '1.1',
58    },
59    body: 'grant_type=client_credentials',
60  });
61
62  if (!response.ok) {
63    const error = await response.text();
64    throw new Error(`Yodlee user token failed: ${response.status} ${error}`);
65  }
66
67  const data: YodleeTokenResponse = await response.json();
68  return data.token.accessToken;
69}

1// components/YodleeFastlink.tsx
2'use client';
3import { useEffect, useRef, useState } from 'react';
4
5interface YodleeAccount {
6  id: string;
7  accountName: string;
8  accountType: string;
9  providerName: string;
10  balance?: { amount: number; currency: string };
11}
12
13interface YodleeWindow extends Window {
14  fastlink?: {
15    open: (params: object, containerId: string) => void;
16    close: () => void;
17  };
18}
19
20export function YodleeFastlink({ loginName }: { loginName: string }) {
21  const [accounts, setAccounts] = useState<YodleeAccount[]>([]);
22  const [loading, setLoading] = useState(false);
23  const [error, setError] = useState<string>('');
24  const containerRef = useRef<HTMLDivElement>(null);
25  const scriptLoaded = useRef(false);
26
27  useEffect(() => {
28    if (scriptLoaded.current) return;
29    // Load Yodlee Fastlink script — URL provided by Yodlee partnership
30    const fastlinkUrl = process.env.NEXT_PUBLIC_YODLEE_FASTLINK_URL;
31    if (!fastlinkUrl) return;
32
33    const script = document.createElement('script');
34    script.src = `${fastlinkUrl}/authenticate/restserver/fastlink`;
35    script.async = true;
36    document.body.appendChild(script);
37    scriptLoaded.current = true;
38  }, []);
39
40  const openFastlink = async () => {
41    setLoading(true);
42    setError('');
43
44    try {
45      // Get user-scoped Fastlink token
46      const tokenRes = await fetch('/api/yodlee/token', {
47        method: 'POST',
48        headers: { 'Content-Type': 'application/json' },
49        body: JSON.stringify({ loginName }),
50      });
51      const { token } = await tokenRes.json();
52
53      const yodleeWindow = window as YodleeWindow;
54      if (!yodleeWindow.fastlink) {
55        setError('Fastlink script not loaded. Check NEXT_PUBLIC_YODLEE_FASTLINK_URL.');
56        setLoading(false);
57        return;
58      }
59
60      yodleeWindow.fastlink.open(
61        {
62          fastLinkURL: process.env.NEXT_PUBLIC_YODLEE_FASTLINK_URL,
63          accessToken: `Bearer ${token}`,
64          params: {
65            configName: process.env.NEXT_PUBLIC_YODLEE_CONFIG_NAME ?? 'Aggregation',
66          },
67          onSuccess: async (data: { providerAccountId: string }) => {
68            console.log('Fastlink success, providerAccountId:', data.providerAccountId);
69            // Fetch newly linked accounts
70            const accountsRes = await fetch(`/api/yodlee/accounts?loginName=${loginName}`);
71            const accountsData = await accountsRes.json();
72            setAccounts(accountsData.accounts ?? []);
73            setLoading(false);
74          },
75          onError: (data: { message: string }) => {
76            setError(`Fastlink error: ${data.message}`);
77            setLoading(false);
78          },
79          onClose: () => setLoading(false),
80        },
81        'yodlee-fastlink-container'
82      );
83    } catch (err) {
84      setError(err instanceof Error ? err.message : 'Failed to open Fastlink');
85      setLoading(false);
86    }
87  };
88
89  return (
90    <div className="space-y-4">
91      <button
92        onClick={openFastlink}
93        disabled={loading}
94        className="rounded-lg bg-blue-600 px-6 py-3 font-medium text-white hover:bg-blue-700 disabled:opacity-50"
95      >
96        {loading ? 'Connecting...' : 'Connect Your Bank'}
97      </button>
98
99      {error && <p className="text-sm text-red-600">{error}</p>}
100
101      {/* Fastlink renders into this container */}
102      <div id="yodlee-fastlink-container" ref={containerRef} className="min-h-[500px]" />
103
104      {accounts.length > 0 && (
105        <div className="mt-6">
106          <h3 className="font-semibold">Connected Accounts</h3>
107          {accounts.map((account) => (
108            <div key={account.id} className="mt-2 rounded border p-3">
109              <p className="font-medium">{account.accountName}</p>
110              <p className="text-sm text-gray-500">{account.providerName} · {account.accountType}</p>
111              {account.balance && (
112                <p className="text-sm">{account.balance.currency} {account.balance.amount.toFixed(2)}</p>
113              )}
114            </div>
115          ))}
116        </div>
117      )}
118    </div>
119  );
120}

1// app/api/yodlee/accounts/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { YODLEE_CONFIG, type FinancialAccount } from '@/lib/financial/config';
4import { getYodleeUserToken } from '@/lib/yodlee/auth';
5
6export async function GET(request: NextRequest) {
7  const loginName = request.nextUrl.searchParams.get('loginName');
8  if (!loginName) {
9    return NextResponse.json({ error: 'loginName is required' }, { status: 400 });
10  }
11
12  try {
13    const userToken = await getYodleeUserToken(loginName);
14
15    const response = await fetch(`${YODLEE_CONFIG.apiBase}/accounts`, {
16      headers: {
17        Authorization: `Bearer ${userToken}`,
18        'Api-Version': '1.1',
19        'Content-Type': 'application/json',
20      },
21    });
22
23    if (!response.ok) {
24      return NextResponse.json(
25        { error: `Yodlee accounts API error: ${response.status}` },
26        { status: response.status }
27      );
28    }
29
30    const data = await response.json();
31
32    const accounts: FinancialAccount[] = (data.account ?? []).map((acc: {
33      id: number;
34      accountName: string;
35      accountType: string;
36      providerName: string;
37      balance?: { amount: number; currency: string };
38      providerAccountId: number;
39    }) => ({
40      id: String(acc.id),
41      name: acc.accountName,
42      type: acc.accountType,
43      institution: acc.providerName,
44      balance: acc.balance?.amount ?? 0,
45      currency: acc.balance?.currency ?? 'USD',
46      providerAccountId: String(acc.providerAccountId),
47    }));
48
49    return NextResponse.json({ accounts });
50  } catch (error) {
51    const message = error instanceof Error ? error.message : 'Request failed';
52    return NextResponse.json({ error: message }, { status: 500 });
53  }
54}