How to Integrate QuickBooks with V0

Before writing any code, you need to register your application in the Intuit Developer Portal to get OAuth 2.0 credentials. This is a required first step — without these credentials, you cannot authenticate with QuickBooks at all. Go to developer.intuit.com and sign in with your Intuit account (the same account you use for QuickBooks, or create a new one). Click Dashboard in the top navigation, then click Create an App. Select QuickBooks Online and Payments as the platform. Give your app a name (this is internal — QuickBooks users will see it during authorization), and select the development environment. Once created, your app's Keys and Credentials page shows your Client ID and Client Secret. The Client ID is a public identifier (safe to use in redirect URLs), but the Client Secret is a server-side secret that must never be exposed in browser code. Copy both values. Next, configure your OAuth 2.0 redirect URI. In your Intuit app settings, find the Redirect URIs section and add your Vercel deployment URL followed by the callback path: https://your-project.vercel.app/api/quickbooks/callback. Also add http://localhost:3000/api/quickbooks/callback for local development. QuickBooks will only redirect to URLs on this allowlist after authorization — any other callback URL will be rejected with an error.

With your OAuth credentials ready, prompt V0 to generate the front-end components for your accounting feature. The UI should include the dashboard displays, forms for creating invoices or expenses, and data tables that will show QuickBooks data once the OAuth connection is established. V0 is excellent at generating professional financial dashboards with KPI cards, charts using recharts, and clean data tables. The key is specifying the API endpoints your components should call so V0 wires up the data fetching correctly. For data that requires authentication, your components need to check whether the QuickBooks connection is active and show a Connect QuickBooks button if not. Design your V0 UI around two states: unauthenticated (show a connect button) and authenticated (show the actual data). The connect button should link to your API route that initiates the QuickBooks OAuth flow. Once the user completes authorization, they return to your app with the OAuth tokens stored, and the data tables populate with real QuickBooks information. For the Connect QuickBooks button, it should redirect to /api/quickbooks/auth — your API route that generates the QuickBooks authorization URL and redirects the user. This is a simple GET request, so a standard anchor tag or router.push() works. After the OAuth flow completes, the user is redirected back to your app at /api/quickbooks/callback, which stores the tokens and redirects to the dashboard.

QuickBooks requires a multi-step OAuth 2.0 flow before any API calls. You need three API routes: one to initiate the authorization (redirects to Intuit), one to handle the callback (exchanges code for tokens), and one to check connection status. Install the required packages: intuit-oauth for the OAuth 2.0 flow and node-quickbooks for API calls. Add both to your package.json dependencies. Create app/api/quickbooks/auth/route.ts — this route generates the QuickBooks authorization URL and redirects the user to Intuit's login page. The URL includes your Client ID, requested scopes (com.intuit.quickbooks.accounting for full accounting access), and your callback URL. Create app/api/quickbooks/callback/route.ts — after the user authorizes your app, Intuit redirects to this route with an authorization code and realm ID (the QuickBooks company ID). Exchange the code for an access token and refresh token using your Client Secret. Store these tokens — along with the realm ID and token expiration timestamp — in your database or in Vercel environment variables. For a single-user app (connecting your own QuickBooks), environment variables work. For a multi-user SaaS where multiple customers connect their QuickBooks, use a database. The access token expires every 60 minutes and must be refreshed using the refresh token. The refresh token itself expires after 100 days of inactivity. Build token refresh logic into your API routes — before each QuickBooks API call, check if the access token is expired and refresh it if needed.

1// app/api/quickbooks/auth/route.ts
2import OAuthClient from 'intuit-oauth';
3import { NextResponse } from 'next/server';
4
5const oauthClient = new OAuthClient({
6  clientId: process.env.QUICKBOOKS_CLIENT_ID!,
7  clientSecret: process.env.QUICKBOOKS_CLIENT_SECRET!,
8  environment: process.env.QUICKBOOKS_ENVIRONMENT || 'sandbox', // 'sandbox' or 'production'
9  redirectUri: process.env.QUICKBOOKS_REDIRECT_URI!,
10});
11
12export async function GET() {
13  const authUri = oauthClient.authorizeUri({
14    scope: [OAuthClient.scopes.Accounting, OAuthClient.scopes.OpenId],
15    state: 'v0-quickbooks-auth',
16  });
17
18  return NextResponse.redirect(authUri);
19}
20
21// app/api/quickbooks/callback/route.ts
22// (separate file)
23import OAuthClient from 'intuit-oauth';
24import { NextRequest, NextResponse } from 'next/server';
25
26export async function GET(request: NextRequest) {
27  const url = request.url;
28
29  const oauthClient = new OAuthClient({
30    clientId: process.env.QUICKBOOKS_CLIENT_ID!,
31    clientSecret: process.env.QUICKBOOKS_CLIENT_SECRET!,
32    environment: process.env.QUICKBOOKS_ENVIRONMENT || 'sandbox',
33    redirectUri: process.env.QUICKBOOKS_REDIRECT_URI!,
34  });
35
36  try {
37    const authResponse = await oauthClient.createToken(url);
38    const token = authResponse.getJson();
39
40    // Store tokens — for production, save to database
41    // For single-user: store in session or encrypted cookie
42    console.log('QB Access Token:', token.access_token ? 'received' : 'missing');
43    console.log('QB Realm ID:', token.realmId);
44
45    // Redirect to dashboard after successful auth
46    return NextResponse.redirect(
47      new URL('/dashboard', process.env.NEXT_PUBLIC_BASE_URL)
48    );
49  } catch (error) {
50    console.error('QuickBooks OAuth error:', error);
51    return NextResponse.redirect(
52      new URL('/dashboard?error=qb_auth_failed', process.env.NEXT_PUBLIC_BASE_URL)
53    );
54  }
55}

With OAuth tokens stored, create the API routes that fetch and manipulate QuickBooks data. The node-quickbooks package provides methods for every QuickBooks entity: createInvoice, getInvoice, findCustomers, createCustomer, getCompanyInfo, and more. Create app/api/quickbooks/invoices/route.ts to handle invoice operations. The GET method fetches recent invoices from QuickBooks using the query API (QuickBooks uses a SQL-like query language called IQL). The POST method creates a new invoice. The node-quickbooks client requires the realm ID (your QuickBooks company ID from the OAuth callback), the access token, and whether to use the sandbox environment. Initialize the client at the start of each API call using the stored credentials. For fetching invoices, the QuickBooks query API lets you filter, sort, and paginate: SELECT * FROM Invoice WHERE TxnDate >= '2024-01-01' ORDER BY TxnDate DESC MAXRESULTS 50. This returns an array of Invoice objects with all fields including customer reference, line items, amounts, and status. For creating an invoice, the minimum required fields are CustomerRef (a reference to an existing Customer entity), Line items with SalesItemLineDetail, and an optional DueDate. The API returns the created invoice with its QuickBooks ID, which you can use to generate a public invoice URL or track payment status. For complex multi-entity QuickBooks integrations with custom field mapping, automated sync logic, and error recovery, RapidDev's team can help architect a production-ready solution.

1import QuickBooks from 'node-quickbooks';
2import { NextRequest, NextResponse } from 'next/server';
3
4function getQBClient() {
5  return new QuickBooks(
6    process.env.QUICKBOOKS_CLIENT_ID!,
7    process.env.QUICKBOOKS_CLIENT_SECRET!,
8    process.env.QUICKBOOKS_ACCESS_TOKEN!,
9    false, // no token secret for OAuth 2.0
10    process.env.QUICKBOOKS_REALM_ID!,
11    process.env.QUICKBOOKS_ENVIRONMENT === 'sandbox',
12    false, // no debug
13    null, // minorversion
14    '2.0', // OAuth version
15    process.env.QUICKBOOKS_REFRESH_TOKEN!
16  );
17}
18
19export async function GET() {
20  try {
21    const qbo = getQBClient();
22
23    return new Promise<NextResponse>((resolve) => {
24      qbo.findInvoices(
25        [
26          { field: 'fetchAll', value: false },
27          { field: 'desc', value: 'MetaData.LastUpdatedTime' },
28          { field: 'limit', value: 20 },
29        ],
30        (err: any, invoices: any) => {
31          if (err) {
32            console.error('QuickBooks invoice fetch error:', err);
33            resolve(NextResponse.json({ error: 'Failed to fetch invoices' }, { status: 500 }));
34            return;
35          }
36          resolve(NextResponse.json(invoices?.QueryResponse?.Invoice || []));
37        }
38      );
39    });
40  } catch (error) {
41    return NextResponse.json({ error: 'QuickBooks client error' }, { status: 500 });
42  }
43}
44
45export async function POST(request: NextRequest) {
46  try {
47    const { customerId, lineItems, dueDate } = await request.json();
48    const qbo = getQBClient();
49
50    const invoice = {
51      CustomerRef: { value: customerId },
52      DueDate: dueDate,
53      Line: lineItems.map((item: any) => ({
54        Amount: item.quantity * item.unitPrice,
55        DetailType: 'SalesItemLineDetail',
56        SalesItemLineDetail: {
57          ItemRef: { value: '1', name: 'Services' },
58          UnitPrice: item.unitPrice,
59          Qty: item.quantity,
60        },
61        Description: item.description,
62      })),
63    };
64
65    return new Promise<NextResponse>((resolve) => {
66      qbo.createInvoice(invoice, (err: any, created: any) => {
67        if (err) {
68          resolve(NextResponse.json({ error: 'Failed to create invoice' }, { status: 500 }));
69          return;
70        }
71        resolve(NextResponse.json(created));
72      });
73    });
74  } catch (error) {
75    return NextResponse.json({ error: 'QuickBooks client error' }, { status: 500 });
76  }
77}

Your QuickBooks integration requires several environment variables. Add all of them to Vercel Dashboard → Settings → Environment Variables before deploying. Required variables: QUICKBOOKS_CLIENT_ID and QUICKBOOKS_CLIENT_SECRET from your Intuit Developer app credentials page. QUICKBOOKS_REDIRECT_URI set to your full callback URL (https://your-project.vercel.app/api/quickbooks/callback). QUICKBOOKS_ENVIRONMENT set to either sandbox for development or production for live QuickBooks data. NEXT_PUBLIC_BASE_URL set to your Vercel deployment URL. After the OAuth flow completes (step 3), you also need to store the tokens. For a simple single-user integration, add: QUICKBOOKS_ACCESS_TOKEN, QUICKBOOKS_REFRESH_TOKEN, and QUICKBOOKS_REALM_ID. Update these via the Vercel Dashboard whenever the tokens are refreshed. For a production application with multiple users, use a database to store per-user tokens instead of environment variables — this requires a more complex architecture but is necessary for any app serving real customers. After adding all variables in Vercel, click Save and trigger a new deployment by pushing a commit to GitHub. Test the full OAuth flow on your deployed Vercel URL (not localhost) to verify the redirect URI matches exactly what is configured in the Intuit Developer Portal. Even one character difference in the redirect URI causes the OAuth callback to fail.