How to Integrate Bolt.new with Salesforce

Every integration with Salesforce requires a Connected App — this is how Salesforce issues OAuth credentials to external applications. Log in to your Salesforce org, then navigate to Setup by clicking the gear icon in the top-right corner and selecting Setup. In the Quick Find search box, type 'App Manager' and click it in the results. Click the 'New Connected App' button in the top-right corner of the App Manager page. Fill in the required fields: Connected App Name (e.g., 'Bolt Dashboard'), API Name (auto-fills), and Contact Email. In the API (Enable OAuth Settings) section, check the 'Enable OAuth Settings' checkbox. This reveals the OAuth configuration fields. For the Callback URL, you'll need your deployed Bolt app URL — enter a placeholder like 'https://your-app.netlify.app/api/salesforce/callback' for now and update it after deploying. Under Selected OAuth Scopes, add: 'Access and manage your data (api)', 'Perform requests at any time (refresh_token, offline_access)', and 'Full access (full)'. If you plan to use the client credentials flow (server-to-server, no user login), also check 'Enable Client Credentials Flow' in the OAuth settings. Click Save. Salesforce takes 2-10 minutes to activate the new Connected App. Once saved, navigate back to the app and click 'Manage Consumer Details' to retrieve your Consumer Key (Client ID) and Consumer Secret (Client Secret). Store these values — you'll need them in your .env file.

With your Salesforce credentials ready, add them to your Bolt project's .env file and then prompt Bolt to generate the API routes. Create or open the .env file in your Bolt project root and add the following variables: SALESFORCE_CLIENT_ID (your Consumer Key), SALESFORCE_CLIENT_SECRET (your Consumer Secret), SALESFORCE_INSTANCE_URL (your Salesforce org URL, e.g., https://yourcompany.my.salesforce.com), and SALESFORCE_API_VERSION (e.g., v59.0). In a Next.js project, prefix these with nothing — they'll be used server-side only. In a Vite project, you'll need to proxy requests through a server-side handler since these credentials must never reach the client. The client credentials OAuth flow is the most practical approach for development: your API route exchanges the Client ID and Secret directly for an access token without requiring a user browser redirect. This works in Bolt's WebContainer preview during development, unlike the web server flow which requires a deployed callback URL. Prompt Bolt to generate the authentication helper and SOQL query routes. The generated code will handle token caching (access tokens are valid for 1-2 hours) so you're not making authentication requests on every API call.

1// lib/salesforce.ts
2interface SalesforceTokenResponse {
3  access_token: string;
4  instance_url: string;
5  token_type: string;
6}
7
8let cachedToken: { token: string; expiresAt: number } | null = null;
9
10async function getSalesforceToken(): Promise<string> {
11  if (cachedToken && Date.now() < cachedToken.expiresAt) {
12    return cachedToken.token;
13  }
14
15  const params = new URLSearchParams({
16    grant_type: 'client_credentials',
17    client_id: process.env.SALESFORCE_CLIENT_ID!,
18    client_secret: process.env.SALESFORCE_CLIENT_SECRET!,
19  });
20
21  const response = await fetch(
22    `${process.env.SALESFORCE_INSTANCE_URL}/services/oauth2/token`,
23    {
24      method: 'POST',
25      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
26      body: params.toString(),
27    }
28  );
29
30  if (!response.ok) {
31    throw new Error(`Salesforce auth failed: ${response.statusText}`);
32  }
33
34  const data: SalesforceTokenResponse = await response.json();
35  // Cache for 1 hour (tokens last ~2 hours, refresh early)
36  cachedToken = { token: data.access_token, expiresAt: Date.now() + 3600000 };
37  return data.access_token;
38}
39
40export async function salesforceQuery(soql: string) {
41  const token = await getSalesforceToken();
42  const encoded = encodeURIComponent(soql);
43  const apiVersion = process.env.SALESFORCE_API_VERSION || 'v59.0';
44
45  const response = await fetch(
46    `${process.env.SALESFORCE_INSTANCE_URL}/services/data/${apiVersion}/query?q=${encoded}`,
47    { headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' } }
48  );
49
50  if (!response.ok) {
51    throw new Error(`Salesforce query failed: ${response.statusText}`);
52  }
53
54  return response.json();
55}
56
57export async function salesforceCreate(objectType: string, data: Record<string, unknown>) {
58  const token = await getSalesforceToken();
59  const apiVersion = process.env.SALESFORCE_API_VERSION || 'v59.0';
60
61  const response = await fetch(
62    `${process.env.SALESFORCE_INSTANCE_URL}/services/data/${apiVersion}/sobjects/${objectType}`,
63    {
64      method: 'POST',
65      headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
66      body: JSON.stringify(data),
67    }
68  );
69
70  return response.json();
71}

Salesforce's REST API uses SOQL (Salesforce Object Query Language) to query records. SOQL is similar to SQL but designed for Salesforce's object model — you query specific objects (Lead, Contact, Opportunity, Account) and select the fields you need. Build dedicated API routes for each data type your dashboard needs. For a pipeline dashboard, you typically need Opportunities (open deals), Leads (new inquiries), and Contacts (people associated with accounts). Each route should accept query parameters for filtering — for example, stage name or date range for opportunities. The Salesforce REST API returns paginated results — the response includes a totalSize, a done flag, and a records array. If done is false, a nextRecordsUrl provides the URL for the next page of results. For most dashboard use cases with LIMIT clauses you won't hit pagination, but building in support is good practice. The API also supports relationship queries using dot notation — for example, Account.Name in a Contact query returns the contact's associated account name without a separate request. Important for performance: always include LIMIT in your SOQL queries. Unbounded queries can time out, trigger governor limits, and consume a large fraction of your daily API call quota. A well-designed dashboard typically needs 3-5 targeted SOQL queries on page load rather than one large query fetching everything.

1// app/api/salesforce/opportunities/route.ts
2import { NextResponse } from 'next/server';
3import { salesforceQuery } from '@/lib/salesforce';
4
5export async function GET(request: Request) {
6  const { searchParams } = new URL(request.url);
7  const stage = searchParams.get('stage');
8
9  let soql = `SELECT Id, Name, StageName, Amount, CloseDate, Account.Name 
10              FROM Opportunity 
11              WHERE IsClosed = false`;
12
13  if (stage) {
14    soql += ` AND StageName = '${stage.replace(/'/g, "\\'")}'`;
15  }
16
17  soql += ' ORDER BY CloseDate ASC LIMIT 100';
18
19  try {
20    const data = await salesforceQuery(soql);
21    return NextResponse.json(data);
22  } catch (error) {
23    console.error('Salesforce opportunity query failed:', error);
24    return NextResponse.json({ error: 'Failed to fetch opportunities' }, { status: 500 });
25  }
26}
27
28// app/api/salesforce/leads/route.ts
29import { NextRequest, NextResponse } from 'next/server';
30import { salesforceQuery, salesforceCreate } from '@/lib/salesforce';
31
32export async function GET() {
33  const soql = `SELECT Id, FirstName, LastName, Email, Company, Status, CreatedDate 
34                FROM Lead 
35                WHERE IsConverted = false 
36                ORDER BY CreatedDate DESC LIMIT 50`;
37  try {
38    const data = await salesforceQuery(soql);
39    return NextResponse.json(data);
40  } catch (error) {
41    return NextResponse.json({ error: 'Failed to fetch leads' }, { status: 500 });
42  }
43}
44
45export async function POST(request: NextRequest) {
46  const body = await request.json();
47  try {
48    const result = await salesforceCreate('Lead', body);
49    return NextResponse.json(result);
50  } catch (error) {
51    return NextResponse.json({ error: 'Failed to create lead' }, { status: 500 });
52  }
53}

If your app needs to access Salesforce data on behalf of individual users (not just via a service account), you'll need the full OAuth 2.0 web server flow where users log in with their own Salesforce credentials. This flow requires a deployed callback URL — the WebContainer preview's dynamic URL (e.g., https://[hash].local.webcontainer-api.io/) cannot be registered in Salesforce as a stable redirect URI. Deploy your app to Netlify or Bolt Cloud first to get a stable URL. Once deployed, go to your Salesforce Connected App: Setup → App Manager → find your app → Edit. Update the Callback URL to your deployed URL: https://your-app.netlify.app/api/salesforce/callback. Save the change. On your hosting platform, add the same environment variables from your .env file: SALESFORCE_CLIENT_ID, SALESFORCE_CLIENT_SECRET, SALESFORCE_INSTANCE_URL, and SALESFORCE_API_VERSION. For Netlify: Site Configuration → Environment Variables → Add Variable. The OAuth web server flow redirects users to Salesforce's login page, authenticates them, then sends an authorization code to your callback URL. The callback exchanges this code for an access token and refresh token, which you store in the user's session. Salesforce refresh tokens have configurable expiry — set it to 'token is valid until revoked' in the Connected App's OAuth policies for the best user experience.

1// app/api/salesforce/callback/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4export async function GET(request: NextRequest) {
5  const { searchParams } = new URL(request.url);
6  const code = searchParams.get('code');
7
8  if (!code) {
9    return NextResponse.redirect(new URL('/error?msg=no_code', request.url));
10  }
11
12  const params = new URLSearchParams({
13    grant_type: 'authorization_code',
14    client_id: process.env.SALESFORCE_CLIENT_ID!,
15    client_secret: process.env.SALESFORCE_CLIENT_SECRET!,
16    redirect_uri: `${process.env.APP_URL}/api/salesforce/callback`,
17    code,
18  });
19
20  const tokenResponse = await fetch(
21    `${process.env.SALESFORCE_INSTANCE_URL}/services/oauth2/token`,
22    {
23      method: 'POST',
24      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
25      body: params.toString(),
26    }
27  );
28
29  const tokens = await tokenResponse.json();
30  // Store tokens in session (implement session storage per your auth setup)
31  // tokens.access_token, tokens.refresh_token, tokens.instance_url
32
33  return NextResponse.redirect(new URL('/dashboard', request.url));
34}