How to Integrate Yodlee with V0

Start by building the finance dashboard layout using V0. Financial dashboards benefit from a clear visual hierarchy — net worth at the top, account balances in the middle, and recent transactions at the bottom. V0 is excellent at generating these card-based layouts with Tailwind CSS. Prompt V0 to create the structure with placeholder data first. You'll want account cards showing institution name, account type (checking, savings, credit card), current balance, and a color indicator. The transaction list should show date, merchant name, category (with icon), amount, and account. Use color coding: green for positive amounts (deposits, income), red for negative (purchases, fees). For the net worth calculation display, prompt V0 to show a large total balance number at the top with a breakdown of assets and liabilities. Add a trend indicator showing whether net worth changed this month. Once the layout looks right in V0's preview pane, you can refine colors and spacing using V0's Design Mode before connecting the real data.

Yodlee uses a two-step JWT authentication process. First, you generate a 'cobrand' token that authenticates your application. Then, for each user, you generate a 'user' token that scopes API calls to that user's data. Both tokens are generated by POSTing to Yodlee's token endpoints with your credentials. Yodlee's API base URL for sandbox is https://sandbox.api.yodlee.com/ysl and for production is https://production.api.yodlee.com/ysl. The cobrand token endpoint is POST /auth/token with a JSON body containing your loginName and password. This returns a JWT valid for 30 minutes. For user tokens, call the same endpoint with the user's loginName in the JWT payload. Since tokens expire every 30 minutes, you'll want to cache them server-side and refresh as needed. For a Vercel serverless deployment, you can't maintain in-memory cache across function invocations — use Vercel's KV (Upstash Redis via the Marketplace) for token caching, or simply generate a fresh token on each API route call (Yodlee allows this, though it adds ~200ms of latency). Create a utility function for token generation that your other API routes import. This centralizes the authentication logic and makes it easy to update when Yodlee changes their auth flow.

1// lib/yodlee.ts — Shared authentication utility
2const YODLEE_BASE_URL = process.env.YODLEE_BASE_URL || 'https://sandbox.api.yodlee.com/ysl';
3const COBRAND_LOGIN = process.env.YODLEE_COBRAND_LOGIN!;
4const COBRAND_PASSWORD = process.env.YODLEE_COBRAND_PASSWORD!;
5
6export async function getCobrandToken(): Promise<string> {
7  const response = await fetch(`${YODLEE_BASE_URL}/auth/token`, {
8    method: 'POST',
9    headers: { 'Content-Type': 'application/json' },
10    body: JSON.stringify({
11      cobrand: {
12        cobrandLogin: COBRAND_LOGIN,
13        cobrandPassword: COBRAND_PASSWORD,
14      },
15    }),
16  });
17
18  if (!response.ok) {
19    throw new Error(`Yodlee cobrand auth failed: ${response.status}`);
20  }
21
22  const data = await response.json();
23  return data.token.accessToken;
24}
25
26export async function getUserToken(cobrandToken: string, userLoginName: string): Promise<string> {
27  const response = await fetch(`${YODLEE_BASE_URL}/user/accessTokens`, {
28    method: 'POST',
29    headers: {
30      'Content-Type': 'application/json',
31      Authorization: `cobSession=${cobrandToken}`,
32    },
33    body: JSON.stringify({
34      user: { loginName: userLoginName },
35    }),
36  });
37
38  if (!response.ok) {
39    throw new Error(`Yodlee user token failed: ${response.status}`);
40  }
41
42  const data = await response.json();
43  return data.user.accessTokens[0].value;
44}
45
46// app/api/yodlee/accounts/route.ts
47import { NextResponse } from 'next/server';
48import { getCobrandToken, getUserToken } from '@/lib/yodlee';
49
50export async function GET(request: Request) {
51  try {
52    const { searchParams } = new URL(request.url);
53    const userLoginName = searchParams.get('userId');
54
55    if (!userLoginName) {
56      return NextResponse.json({ error: 'userId required' }, { status: 400 });
57    }
58
59    const cobrandToken = await getCobrandToken();
60    const userToken = await getUserToken(cobrandToken, userLoginName);
61
62    const accountsResponse = await fetch(
63      `${process.env.YODLEE_BASE_URL}/accounts?status=ACTIVE`,
64      {
65        headers: {
66          Authorization: `Bearer ${userToken}`,
67          'Api-Version': '1.1',
68        },
69      }
70    );
71
72    const data = await accountsResponse.json();
73    return NextResponse.json(data);
74  } catch (error) {
75    console.error('Yodlee accounts error:', error);
76    return NextResponse.json({ error: 'Failed to fetch accounts' }, { status: 500 });
77  }
78}

Yodlee requires three server-side environment variables: your cobrand login name, cobrand password, and the API base URL (sandbox vs. production). These are highly sensitive credentials that authenticate your entire application — they must never be exposed to the browser or committed to source control. From your Yodlee developer portal at developer.envestnet.com, retrieve your cobrand login name and password. These were provided when your developer account was approved. The sandbox base URL is https://sandbox.api.yodlee.com/ysl and the production URL is https://production.api.yodlee.com/ysl. In Vercel Dashboard → Settings → Environment Variables, create the following variables: YODLEE_COBRAND_LOGIN (your cobrand login name), YODLEE_COBRAND_PASSWORD (your cobrand password), and YODLEE_BASE_URL (the appropriate base URL for your environment). For development, use the sandbox URL; for production deployments, switch to the production URL. You can set different values per Vercel environment scope — use the sandbox credentials for Preview and Development environments, and production credentials only for the Production scope. This prevents development testing from interfering with production Yodlee data. After adding all variables, trigger a redeployment. For local development, add all three variables to your .env.local file with the sandbox values. The Yodlee sandbox includes pre-configured test user accounts with sample financial data — check the Yodlee developer documentation for the sandbox test credentials.

1# .env.local (use sandbox credentials for development)
2YODLEE_COBRAND_LOGIN=your_cobrand_login_here
3YODLEE_COBRAND_PASSWORD=your_cobrand_password_here
4YODLEE_BASE_URL=https://sandbox.api.yodlee.com/ysl

Yodlee FastLink is the user-facing component that handles connecting bank accounts. It's a JavaScript widget that you embed in your page — it renders a search/selection interface for financial institutions, handles the login flow (including MFA), and returns a success callback when an account is successfully connected. FastLink requires a FastLink token, which is different from the API user token — it's a short-lived token specifically for the widget session. Generate this token in a Next.js API route using your cobrand credentials and the user's Yodlee login name. The FastLink token endpoint is POST /user/accessTokens with specific parameters. In your Next.js component, load the FastLink JavaScript from Yodlee's CDN and initialize it with the FastLink token and configuration options. The widget calls a callback function when the user successfully links an account (onSuccess), encounters an error (onError), or closes the widget (onClose). In your success callback, trigger a refresh of your account data by calling your /api/yodlee/accounts endpoint. FastLink can run in full-page mode or as a modal overlay. The modal approach integrates better with V0-generated single-page layouts — the user clicks 'Connect Account', the modal opens with FastLink, they complete the connection, and the modal closes and refreshes the account list without a full page reload. This provides a smooth, app-like user experience that matches what users expect from modern fintech apps.

1'use client';
2import { useEffect, useRef } from 'react';
3
4declare global {
5  interface Window {
6    fastlink: {
7      open: (config: Record<string, unknown>, containerId: string) => void;
8      close: () => void;
9    };
10  }
11}
12
13interface FastLinkProps {
14  fastLinkToken: string;
15  containerId: string;
16  onSuccess: () => void;
17  onClose: () => void;
18}
19
20export function FastLinkWidget({ fastLinkToken, containerId, onSuccess, onClose }: FastLinkProps) {
21  const scriptLoaded = useRef(false);
22
23  useEffect(() => {
24    if (scriptLoaded.current) return;
25
26    const script = document.createElement('script');
27    script.src = 'https://cdn.yodlee.com/fastlink/v4/optimize/login.bundle.min.js';
28    script.async = true;
29    script.onload = () => {
30      scriptLoaded.current = true;
31      window.fastlink.open(
32        {
33          fastLinkURL: 'https://fl4.sandbox.yodlee.com/authenticate/restserver',
34          accessToken: `Bearer ${fastLinkToken}`,
35          params: {
36            flow: 'Aggregation',
37            configName: 'Aggregation',
38          },
39          onSuccess: (data: unknown) => {
40            console.log('FastLink success:', data);
41            onSuccess();
42          },
43          onError: (data: unknown) => {
44            console.error('FastLink error:', data);
45          },
46          onClose: () => {
47            window.fastlink.close();
48            onClose();
49          },
50        },
51        containerId
52      );
53    };
54    document.head.appendChild(script);
55
56    return () => {
57      window.fastlink?.close();
58    };
59  }, [fastLinkToken, containerId, onSuccess, onClose]);
60
61  return <div id={containerId} className="w-full min-h-[500px]" />;
62}