How to Integrate Propertybase with V0

Open V0 at v0.dev and describe the specific real estate dashboard components you need. Real estate UIs have domain-specific design patterns: property cards with hero images, price formatting ($1,250,000 not 1250000), status badges with industry-standard colors (active = green, pending = yellow, sold = gray), and timeline views for transactions. Be specific about the Propertybase objects you want to display — Listings (MLS properties for sale), Properties (the physical address records), Contacts (buyers and sellers), and Transactions (deals in progress). V0 generates components that look professional with shadcn/ui Card, Badge, and Table components. For a listing search page, describe the filter sidebar options, card layout, and pagination behavior. For a transaction pipeline, describe the Kanban column names (matching Propertybase's stage picklist values in your org), card information density, and whether you want drag-and-drop. For an agent dashboard, describe the metrics that matter most for daily workflow. V0 works best with real estate UIs when you specify American vs. metric units, currency formatting, date formats (closing date in MM/DD/YYYY), and whether photos are shown. After generating, push to GitHub via V0's Git panel and check the Vercel preview to confirm the layout renders correctly on both desktop and mobile.

Create a reusable authentication module that handles the Salesforce OAuth2 Username-Password flow and caches the access token to avoid re-authenticating on every API request. The Salesforce OAuth2 token endpoint is https://login.salesforce.com/services/oauth2/token (or https://test.salesforce.com for sandbox orgs). The Username-Password flow sends a POST request with grant_type=password, client_id, client_secret, username, and password (password concatenated with the security token). The response includes an access_token and instance_url. Salesforce access tokens are valid for 2 hours by default, though this is configurable in your org. Since Next.js serverless functions are stateless, you can't cache the token in memory across requests. A simple approach is to re-request the token on each function invocation (adding ~100-200ms) or cache it in an external store like Upstash Redis. For internal dashboards with moderate traffic, re-requesting is simpler and sufficient. Store the instance_url from the token response — it's the base URL for all subsequent API calls and may differ from what you configured, especially in orgs that have been migrated.

1// lib/propertybase.ts
2interface SalesforceToken {
3  access_token: string;
4  instance_url: string;
5  token_type: string;
6}
7
8let cachedToken: SalesforceToken | null = null;
9let tokenExpiry: number = 0;
10
11export async function getSalesforceToken(): Promise<SalesforceToken> {
12  // Return cached token if still valid (with 5 min buffer)
13  if (cachedToken && Date.now() < tokenExpiry - 300_000) {
14    return cachedToken;
15  }
16
17  const params = new URLSearchParams({
18    grant_type: 'password',
19    client_id: process.env.SALESFORCE_CLIENT_ID!,
20    client_secret: process.env.SALESFORCE_CLIENT_SECRET!,
21    username: process.env.SALESFORCE_USERNAME!,
22    // Password + security token concatenated (no space)
23    password: process.env.SALESFORCE_PASSWORD! + process.env.SALESFORCE_SECURITY_TOKEN!,
24  });
25
26  const response = await fetch(
27    'https://login.salesforce.com/services/oauth2/token',
28    {
29      method: 'POST',
30      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
31      body: params.toString(),
32    }
33  );
34
35  if (!response.ok) {
36    const error = await response.text();
37    throw new Error(`Salesforce auth failed: ${error}`);
38  }
39
40  const token = await response.json() as SalesforceToken;
41  cachedToken = token;
42  tokenExpiry = Date.now() + 2 * 60 * 60 * 1000; // 2 hours
43
44  return token;
45}
46
47export async function querySalesforce<T = unknown>(
48  soql: string
49): Promise<T[]> {
50  const { access_token, instance_url } = await getSalesforceToken();
51
52  const encodedQuery = encodeURIComponent(soql);
53  const response = await fetch(
54    `${instance_url}/services/data/v59.0/query?q=${encodedQuery}`,
55    {
56      headers: {
57        Authorization: `Bearer ${access_token}`,
58        'Content-Type': 'application/json',
59      },
60    }
61  );
62
63  if (!response.ok) {
64    const error = await response.text();
65    throw new Error(`Salesforce query failed: ${error}`);
66  }
67
68  const data = await response.json();
69  return data.records as T[];
70}

Create the Next.js API routes that use the Salesforce helper to query Propertybase objects and return formatted data to your V0-generated dashboard. Propertybase adds custom objects to Salesforce — the exact API names depend on your org's configuration, but common objects include pb__Listing__c (listings), pb__Transaction__c (transactions), and standard Contact records for buyers and sellers. Use SOQL queries with SELECT statements to fetch the fields your dashboard needs. SOQL syntax is SQL-like: SELECT Id, Name, pb__List_Price__c, pb__Status__c, pb__Days_On_Market__c, pb__City__c, pb__State__c FROM pb__Listing__c WHERE pb__Status__c = 'Active' ORDER BY CreatedDate DESC LIMIT 50. Custom Salesforce fields end with __c (double underscore c) and you can find the API names for your org's fields in Setup → Object Manager → your object → Fields & Relationships. For the listings route, implement pagination using SOQL's LIMIT and OFFSET clauses and pass filter parameters from the query string. Return data in a shape that maps directly to your V0-generated component's props interface — transform Salesforce-style field names (pb__List_Price__c) into clean camelCase names (listPrice) in the API route to keep the frontend components clean.

1// app/api/propertybase/listings/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { querySalesforce } from '@/lib/propertybase';
4
5interface SFListing {
6  Id: string;
7  Name: string;
8  pb__List_Price__c: number;
9  pb__Status__c: string;
10  pb__Days_On_Market__c: number;
11  pb__City__c: string;
12  pb__State__c: string;
13  pb__Bedrooms__c: number;
14  pb__Bathrooms__c: number;
15  pb__Living_Area__c: number;
16  pb__Property_Type__c: string;
17  pb__MLS_Number__c: string;
18}
19
20export async function GET(request: NextRequest) {
21  const { searchParams } = new URL(request.url);
22  const status = searchParams.get('status') || 'Active';
23  const minPrice = searchParams.get('minPrice');
24  const maxPrice = searchParams.get('maxPrice');
25  const limit = Math.min(parseInt(searchParams.get('limit') || '50', 10), 100);
26
27  let whereClause = `pb__Status__c = '${status.replace(/'/g, "''")}' `;
28
29  if (minPrice) {
30    whereClause += `AND pb__List_Price__c >= ${parseFloat(minPrice)} `;
31  }
32  if (maxPrice) {
33    whereClause += `AND pb__List_Price__c <= ${parseFloat(maxPrice)} `;
34  }
35
36  const soql = `
37    SELECT Id, Name, pb__List_Price__c, pb__Status__c,
38           pb__Days_On_Market__c, pb__City__c, pb__State__c,
39           pb__Bedrooms__c, pb__Bathrooms__c, pb__Living_Area__c,
40           pb__Property_Type__c, pb__MLS_Number__c
41    FROM pb__Listing__c
42    WHERE ${whereClause}
43    ORDER BY pb__Days_On_Market__c DESC
44    LIMIT ${limit}
45  `;
46
47  try {
48    const records = await querySalesforce<SFListing>(soql);
49
50    const listings = records.map(r => ({
51      id: r.Id,
52      address: r.Name,
53      listPrice: r.pb__List_Price__c,
54      status: r.pb__Status__c,
55      daysOnMarket: r.pb__Days_On_Market__c || 0,
56      city: r.pb__City__c,
57      state: r.pb__State__c,
58      bedrooms: r.pb__Bedrooms__c,
59      bathrooms: r.pb__Bathrooms__c,
60      squareFeet: r.pb__Living_Area__c,
61      propertyType: r.pb__Property_Type__c,
62      mlsNumber: r.pb__MLS_Number__c,
63    }));
64
65    return NextResponse.json({ listings, count: listings.length });
66  } catch (error) {
67    const message = error instanceof Error ? error.message : 'Query failed';
68    console.error('Propertybase listings error:', message);
69    return NextResponse.json({ error: message }, { status: 500 });
70  }
71}

Open the Vercel Dashboard, navigate to your project, and go to Settings → Environment Variables. Add five variables for the Salesforce connection: SALESFORCE_CLIENT_ID with your Connected App's Consumer Key, SALESFORCE_CLIENT_SECRET with the Consumer Secret, SALESFORCE_USERNAME with the Salesforce user email that will make API calls, SALESFORCE_PASSWORD with that user's Salesforce password, and SALESFORCE_SECURITY_TOKEN with the user's security token (found or reset via user profile → Settings → Reset My Security Token in Salesforce). None of these should have the NEXT_PUBLIC_ prefix — all Propertybase API calls happen server-side. For a sandbox org, you'll also need to change the OAuth token URL from login.salesforce.com to test.salesforce.com in the lib/propertybase.ts helper. After saving all variables and redeploying, test the connection by calling /api/propertybase/listings from your browser. A successful response returns listing data; a failure returns a descriptive error message from Salesforce. Common issues at this stage are incorrect security token (the token changes when you reset your password), API access not enabled for the user's profile, or the Connected App not having the 'api' OAuth scope. For RapidDev teams building real estate brokerage tools, ensure your Propertybase admin has reviewed data access and enabled appropriate API permissions for the integration user.