How to Integrate Bolt.new with Propertybase

To authenticate with the Salesforce REST API (and therefore Propertybase), you need a Connected App — a configuration in your Salesforce org that represents your external application and grants it API access. Connected Apps provide the client_id and client_secret used in OAuth flows. To create a Connected App: log into your Salesforce org (or Propertybase portal, which takes you to Salesforce). Navigate to Setup (gear icon top-right) → search 'App Manager' → click 'New Connected App' in the top-right. Fill in: Connected App Name (e.g., 'Bolt Property Portal'), API Name (auto-fills), Contact Email (your email). Under 'API (Enable OAuth Settings)', check 'Enable OAuth Settings'. For Callback URL, enter http://localhost:3000/api/auth/callback (you will update this after deployment). Under 'Selected OAuth Scopes', add: 'Access and manage your data (api)', 'Perform requests on your behalf at any time (refresh_token, offline_access)', and 'Full access (full)'. Save the Connected App. Salesforce takes 2-10 minutes to propagate the new Connected App. After propagation, click 'Manage Consumer Details' to retrieve your Consumer Key (this is your client_id) and Consumer Secret (this is your client_secret). Store these in your Bolt .env file — they grant full API access and must never appear in frontend code. For the server-to-server Username-Password OAuth flow used in this integration, you do not need to configure the callback URL to match exactly during development. The flow sends credentials directly to Salesforce's token endpoint and receives an access token without a browser redirect. However, for production apps where users log in with their own Salesforce accounts, you would implement the Web Server OAuth flow with proper redirect handling.

1# .env
2SALESFORCE_CLIENT_ID=your_consumer_key_from_connected_app
3SALESFORCE_CLIENT_SECRET=your_consumer_secret_from_connected_app
4SALESFORCE_USERNAME=admin@yourorg.com
5SALESFORCE_PASSWORD=yourpassword
6SALESFORCE_SECURITY_TOKEN=yourSecurityToken123
7# Security token is appended to password during OAuth flow
8# Get it from: Salesforce → Settings → Personal Information → Reset My Security Token

The Salesforce Username-Password OAuth 2.0 flow is the simplest path for server-to-server authentication. Your server posts credentials to Salesforce's token endpoint and receives an access_token and instance_url. The access_token is a short-lived JWT (typically valid for 1-2 hours, configurable in Salesforce), and the instance_url is your org's API base URL (e.g., https://yourcompany.my.salesforce.com). For a Next.js API route application, token caching is important. Without caching, every API request would make a token fetch call before the actual Salesforce API call — doubling your latency and consuming Salesforce API limits faster. Since Next.js serverless functions can run in multiple concurrent instances, a simple module-level variable is not perfect for distributed caching, but it works well enough for most applications. For high-traffic apps, cache tokens in Redis or a database. The combined password+security_token value is sent as the password parameter. Salesforce validates the credentials, checks the Connected App's OAuth scopes, and returns an access token. The token is used as a Bearer token in all subsequent API calls via the Authorization header. If your org is in a sandbox (for testing), use https://test.salesforce.com/services/oauth2/token as the login URL instead of https://login.salesforce.com. Important: during development in Bolt's WebContainer, this OAuth call goes outbound to Salesforce's servers over HTTPS — this works perfectly in WebContainers. You can test the authentication flow directly in the Bolt preview. Only incoming webhooks from Salesforce require a deployed URL.

1// lib/salesforce.ts
2interface SalesforceToken {
3  access_token: string;
4  instance_url: string;
5  expires_at: number;
6}
7
8interface SalesforceQueryResult<T> {
9  totalSize: number;
10  done: boolean;
11  records: T[];
12}
13
14let tokenCache: SalesforceToken | null = null;
15
16export async function getSalesforceToken(): Promise<SalesforceToken> {
17  if (tokenCache && Date.now() < tokenCache.expires_at) {
18    return tokenCache;
19  }
20
21  const params = new URLSearchParams({
22    grant_type: 'password',
23    client_id: process.env.SALESFORCE_CLIENT_ID!,
24    client_secret: process.env.SALESFORCE_CLIENT_SECRET!,
25    username: process.env.SALESFORCE_USERNAME!,
26    // Password + security token concatenated with no separator
27    password: process.env.SALESFORCE_PASSWORD! + process.env.SALESFORCE_SECURITY_TOKEN!,
28  });
29
30  const res = await fetch('https://login.salesforce.com/services/oauth2/token', {
31    method: 'POST',
32    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
33    body: params.toString(),
34  });
35
36  if (!res.ok) {
37    const err = await res.text();
38    throw new Error(`Salesforce OAuth failed: ${err}`);
39  }
40
41  const data = await res.json();
42  tokenCache = {
43    access_token: data.access_token,
44    instance_url: data.instance_url,
45    expires_at: Date.now() + 1.5 * 60 * 60 * 1000, // 1.5 hours
46  };
47  return tokenCache;
48}
49
50export async function soqlQuery<T>(
51  query: string
52): Promise<SalesforceQueryResult<T>> {
53  const { access_token, instance_url } = await getSalesforceToken();
54  const encoded = encodeURIComponent(query);
55  const res = await fetch(
56    `${instance_url}/services/data/v58.0/query?q=${encoded}`,
57    { headers: { Authorization: `Bearer ${access_token}` } }
58  );
59  if (!res.ok) {
60    const err = await res.text();
61    throw new Error(`SOQL query failed: ${err}`);
62  }
63  return res.json();
64}
65
66export async function salesforceUpdate(
67  objectType: string,
68  recordId: string,
69  fields: Record<string, unknown>
70): Promise<void> {
71  const { access_token, instance_url } = await getSalesforceToken();
72  const res = await fetch(
73    `${instance_url}/services/data/v58.0/sobjects/${objectType}/${recordId}`,
74    {
75      method: 'PATCH',
76      headers: {
77        Authorization: `Bearer ${access_token}`,
78        'Content-Type': 'application/json',
79      },
80      body: JSON.stringify(fields),
81    }
82  );
83  if (!res.ok) {
84    const err = await res.text();
85    throw new Error(`Salesforce update failed: ${err}`);
86  }
87}

Propertybase installs custom objects on top of Salesforce's standard objects. The exact object names depend on your Propertybase version and any customizations your team has made. Standard Salesforce objects (Contact, Lead, Account, Opportunity) are always available. Propertybase-specific objects typically have a namespace prefix (e.g., pb__ or propertybase__) and include objects like Property__c (listings), Transaction__c (deals), and Commission__c. To discover your org's Propertybase objects and their fields, use Salesforce's Schema API. In a browser, while logged into Salesforce, visit: YOUR_INSTANCE_URL/services/data/v58.0/sobjects/ — this lists all available objects. For a specific object's fields, visit /services/data/v58.0/sobjects/Property__c/describe/. This describe call returns every field name, type, label, and whether it is required or read-only. Use this to build accurate SOQL queries. SOQL (Salesforce Object Query Language) looks like SQL but has important differences: no SELECT *, no JOINs (use relationship queries instead), and WHERE clauses require exact field API names (not labels). A basic property query: SELECT Id, Name, pb__Price__c, pb__Bedrooms__c, pb__City__c, pb__Status__c FROM pb__Property__c WHERE pb__Status__c = 'Active' ORDER BY CreatedDate DESC LIMIT 50. Relationship queries traverse foreign keys: SELECT Id, Name, pb__Property__r.Name, pb__Agent__r.FirstName FROM pb__Transaction__c WHERE IsClosed = false. Create a separate Next.js API route for each resource type. Do not expose raw SOQL via a query parameter — that is a SOQL injection vulnerability. Build parameterized server-side queries where only safe values (validated from a known set) are interpolated into the SOQL string.

1// app/api/properties/route.ts
2import { NextResponse } from 'next/server';
3import { soqlQuery } from '@/lib/salesforce';
4
5interface Property {
6  Id: string;
7  Name: string;
8  pb__Price__c: number;
9  pb__Bedrooms__c: number;
10  pb__City__c: string;
11  pb__Status__c: string;
12  pb__PhotoUrl__c?: string;
13}
14
15export async function GET(request: Request) {
16  try {
17    const { searchParams } = new URL(request.url);
18    const conditions: string[] = ["pb__Status__c = 'Active'"];
19
20    const minPrice = Number(searchParams.get('minPrice'));
21    const maxPrice = Number(searchParams.get('maxPrice'));
22    const bedrooms = Number(searchParams.get('bedrooms'));
23    const city = searchParams.get('city')?.replace(/[^a-zA-Z\s]/g, '');
24
25    if (minPrice > 0) conditions.push(`pb__Price__c >= ${minPrice}`);
26    if (maxPrice > 0) conditions.push(`pb__Price__c <= ${maxPrice}`);
27    if (bedrooms > 0) conditions.push(`pb__Bedrooms__c = ${bedrooms}`);
28    if (city) conditions.push(`pb__City__c = '${city}'`);
29
30    const where = conditions.join(' AND ');
31    const soql = `SELECT Id, Name, pb__Price__c, pb__Bedrooms__c, pb__City__c, pb__Status__c, pb__PhotoUrl__c FROM pb__Property__c WHERE ${where} ORDER BY CreatedDate DESC LIMIT 100`;
32
33    const result = await soqlQuery<Property>(soql);
34    return NextResponse.json(result.records);
35  } catch (error: unknown) {
36    const e = error as { message: string };
37    return NextResponse.json({ error: e.message }, { status: 500 });
38  }
39}

With the API routes returning Propertybase data, prompt Bolt to build the React frontend components. The frontend should fetch from your own API routes (not directly from Salesforce), so the architecture remains: React component → your API route → Salesforce REST API → Propertybase data. The property listing UI typically includes: a search form with filters (price range slider, bedroom selector, city dropdown or text input), a results grid showing property cards, a detail view or modal for individual properties, and pagination or infinite scroll for large result sets. Use Bolt to scaffold all of these components and wire them to your API endpoints. For the agent dashboard portion — listing contacts, leads, and transactions — consider using a table layout with sortable columns, status badges (color-coded by Propertybase status values), and inline editing for quick updates. Inline edits should call your PATCH API routes that use salesforceUpdate(). State management for this type of data portal is straightforward: use React's useState and useEffect for data fetching, or a library like SWR or TanStack Query for automatic caching and revalidation. Bolt can scaffold either approach on request. For the Kanban pipeline view, prompt Bolt to build columns from the distinct StageName values returned by your SOQL query — these should match your org's opportunity stages exactly.

Deploy your Bolt project to Netlify or Vercel to get a stable public URL. Salesforce Outbound Messages and Platform Events — Propertybase's mechanisms for pushing real-time updates when records change — require a publicly accessible HTTPS endpoint. During Bolt WebContainer development, incoming connections are impossible since the WebContainer has no public network address. This is a fundamental limitation of the browser-based runtime: Salesforce cannot call back to a localhost URL inside your browser tab. To deploy to Netlify: in your Bolt project, open Settings → Applications → Netlify → Publish. After the first deploy, go to Netlify Dashboard → Site Settings → Environment Variables and add all five Salesforce credentials (SALESFORCE_CLIENT_ID, SALESFORCE_CLIENT_SECRET, SALESFORCE_USERNAME, SALESFORCE_PASSWORD, SALESFORCE_SECURITY_TOKEN). Trigger a redeploy. For Salesforce Outbound Messages: in Salesforce Setup, go to Workflow Rules (or Process Builder). Create a rule that fires when a Property__c status changes. Add an Outbound Message action pointing to https://your-netlify-domain.netlify.app/api/webhooks/salesforce. Create a POST handler at that route that parses the SOAP XML Salesforce sends, processes the update, and returns a standard acknowledgment response. For simpler event handling, use Salesforce Change Data Capture (CDC) via Platform Events — this is available on Developer Edition and Enterprise+ orgs. CDC pushes events to a Pub/Sub API endpoint. However, for most Propertybase integrations, polling the SOQL API every 30-60 seconds is sufficient and avoids the webhook complexity entirely.

1# netlify.toml
2[build]
3  command = "npm run build"
4  publish = ".next"
5
6[build.environment]
7  NODE_VERSION = "20"
8
9[[plugins]]
10  package = "@netlify/plugin-nextjs"