How to Integrate Lovable with Sprout Social

Navigate to Sprout Social's developer portal at developers.sproutsocial.com and log in with your Sprout Social credentials. If you do not have a developer account, apply for API access from the portal — Sprout Social restricts API access to Advanced and Enterprise plan customers, and you may need to contact your account manager to have developer access enabled on your account. Once in the developer portal, click 'Create Application' and fill in your application name, description, and website URL. Set the OAuth redirect URI to your Lovable app's Edge Function URL — use a placeholder like https://your-project.supabase.co/functions/v1/sprout-oauth-callback for now, and update it after your project is created. After saving, you will see your client ID and client secret on the application detail page. Note both values carefully, as the client secret is only shown once. Sprout Social uses OAuth 2.0 with the authorization code flow, meaning each user (or your service account) must go through a browser-based consent screen before API access is granted. For a single-tenant dashboard serving just your team, you will complete this flow once and store the resulting tokens. The scopes you request determine what your application can do — for analytics and publishing you will need read and write scopes.

In your Lovable project, open the Cloud tab by clicking '+' next to the Preview, then navigate to the Secrets section. You will need to store several values for the Sprout Social integration. Add SPROUT_CLIENT_ID with your OAuth2 client ID from the Sprout Social developer portal. Add SPROUT_CLIENT_SECRET with your OAuth2 client secret. After completing the OAuth2 authorization flow (described in the next step), you will also add SPROUT_ACCESS_TOKEN with the access token and SPROUT_REFRESH_TOKEN with the refresh token. The access token is what authorizes API calls, and the refresh token allows your Edge Function to obtain a new access token when the current one expires — Sprout Social access tokens expire every 24 hours by default. If your application serves multiple Sprout Social users (a multi-tenant scenario), you would store tokens per user in your Supabase database rather than as a single secret, but for a single-team dashboard, static secrets are the simpler approach. Lovable's Cloud Secrets are encrypted at rest and protected by SOC 2 Type II and ISO 27001:2022 certifications, ensuring your enterprise API credentials are safely isolated from client-side code. Lovable's security layer actively blocks approximately 1,200 hardcoded API keys per day — always use the Secrets panel rather than pasting credentials anywhere in the chat or codebase.

Ask Lovable to create two Edge Functions: one to initiate the OAuth2 authorization flow by redirecting the user to Sprout Social's authorization URL, and one to handle the callback and exchange the authorization code for tokens. The authorization URL for Sprout Social is https://api.sproutsocial.com/oauth2/authorize and the token exchange endpoint is https://api.sproutsocial.com/oauth2/token. The callback Edge Function receives the authorization code from the query parameter, POSTs it to the token endpoint along with your client credentials and redirect URI, receives access and refresh tokens in the response, and should store them securely. For a single-tenant setup, you can display the tokens to copy into Cloud Secrets manually. The callback function must handle the state parameter to prevent CSRF attacks — generate a random state value in the authorization redirect and verify it matches in the callback. Once you have the initial tokens, the refresh flow is straightforward: POST to the same token endpoint with grant_type=refresh_token and your current refresh token to get a new access token. The Edge Function that proxies Sprout Social API calls should implement this refresh logic automatically when it receives a 401 response.

1import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
2
3const corsHeaders = {
4  "Access-Control-Allow-Origin": "*",
5  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
6};
7
8serve(async (req) => {
9  if (req.method === "OPTIONS") {
10    return new Response("ok", { headers: corsHeaders });
11  }
12
13  const url = new URL(req.url);
14  const code = url.searchParams.get("code");
15
16  if (!code) {
17    return new Response(JSON.stringify({ error: "No authorization code" }), {
18      status: 400,
19      headers: { ...corsHeaders, "Content-Type": "application/json" },
20    });
21  }
22
23  const tokenResponse = await fetch("https://api.sproutsocial.com/oauth2/token", {
24    method: "POST",
25    headers: { "Content-Type": "application/x-www-form-urlencoded" },
26    body: new URLSearchParams({
27      grant_type: "authorization_code",
28      code,
29      client_id: Deno.env.get("SPROUT_CLIENT_ID")!,
30      client_secret: Deno.env.get("SPROUT_CLIENT_SECRET")!,
31      redirect_uri: `${url.origin}/functions/v1/sprout-oauth-callback`,
32    }),
33  });
34
35  const tokens = await tokenResponse.json();
36
37  return new Response(
38    JSON.stringify({
39      message: "Copy these tokens to Cloud Secrets",
40      access_token: tokens.access_token,
41      refresh_token: tokens.refresh_token,
42      expires_in: tokens.expires_in,
43    }),
44    { headers: { ...corsHeaders, "Content-Type": "application/json" } }
45  );
46});

With valid tokens in Cloud Secrets, ask Lovable to create a main proxy Edge Function that handles all Sprout Social API calls from your dashboard. This function should read the access token from Deno.env.get('SPROUT_ACCESS_TOKEN'), accept a path and optional parameters in the request body, forward the request to https://api.sproutsocial.com/v1/ with a Bearer authorization header, and return the API response. The Sprout Social API organizes data around customer IDs — you will need your Sprout Social customer ID, which you can find by making a GET request to /v1/metadata/client. Key endpoints for analytics include /v1/{customer_id}/analytics/profiles for per-profile metrics and /v1/{customer_id}/analytics/tags for tag-based reporting. The analytics endpoints require passing metric names and date ranges as query parameters. Common metric names are impressions, engagements, followers.net, and link.clicks. Date parameters use YYYY-MM-DD format. The function should implement automatic token refresh: if a call returns 401 Unauthorized, exchange the refresh token for a new access token, update the stored token (or return the new token in the response for manual updating), and retry the original request. For production deployments handling many users, consider storing tokens in the Supabase database with per-user rows rather than environment secrets.

1import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
2
3const corsHeaders = {
4  "Access-Control-Allow-Origin": "*",
5  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
6};
7
8async function refreshAccessToken(): Promise<string> {
9  const response = await fetch("https://api.sproutsocial.com/oauth2/token", {
10    method: "POST",
11    headers: { "Content-Type": "application/x-www-form-urlencoded" },
12    body: new URLSearchParams({
13      grant_type: "refresh_token",
14      refresh_token: Deno.env.get("SPROUT_REFRESH_TOKEN")!,
15      client_id: Deno.env.get("SPROUT_CLIENT_ID")!,
16      client_secret: Deno.env.get("SPROUT_CLIENT_SECRET")!,
17    }),
18  });
19  const data = await response.json();
20  if (!data.access_token) throw new Error("Token refresh failed");
21  return data.access_token;
22}
23
24async function callSproutAPI(path: string, accessToken: string, params?: Record<string, string>) {
25  const url = new URL(`https://api.sproutsocial.com/v1/${path}`);
26  if (params) {
27    Object.entries(params).forEach(([k, v]) => url.searchParams.set(k, v));
28  }
29  return fetch(url.toString(), {
30    headers: { "Authorization": `Bearer ${accessToken}`, "Content-Type": "application/json" },
31  });
32}
33
34serve(async (req) => {
35  if (req.method === "OPTIONS") return new Response("ok", { headers: corsHeaders });
36
37  try {
38    const { path, params } = await req.json();
39    if (!path) throw new Error("path is required");
40
41    let accessToken = Deno.env.get("SPROUT_ACCESS_TOKEN")!;
42    let response = await callSproutAPI(path, accessToken, params);
43
44    if (response.status === 401) {
45      accessToken = await refreshAccessToken();
46      response = await callSproutAPI(path, accessToken, params);
47    }
48
49    const data = await response.json();
50    if (!response.ok) throw new Error(JSON.stringify(data));
51
52    return new Response(JSON.stringify(data), {
53      headers: { ...corsHeaders, "Content-Type": "application/json" },
54    });
55  } catch (error) {
56    return new Response(
57      JSON.stringify({ error: error.message }),
58      { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
59    );
60  }
61});

With the Edge Function deployed, ask Lovable to build your analytics dashboard. You will need your Sprout Social customer ID to pass to the analytics endpoints — retrieve it first by calling your Edge Function with path set to 'metadata/client', which returns your customer profile including the numeric customer ID. Pass this customer ID in subsequent analytics calls. For profile-level analytics, the endpoint path is '{customerId}/analytics/profiles' and the key query parameters are metrics[] (comma-separated list of metric names like impressions, engagements, followers.net), start (YYYY-MM-DD), end (YYYY-MM-DD), and fields[] for the profile IDs you want to filter by. Sprout Social returns analytics as a time-series data structure with a data array containing dates and a metrics object. Your React dashboard should transform this into chart-friendly data using a library like Recharts (built into Lovable's default stack via shadcn). Build summary cards for total impressions, total engagements, and average engagement rate across the date range, then a line chart showing the daily trend for each metric. Add profile filter checkboxes so users can focus on specific social profiles. For the best experience, let Lovable auto-generate the component structure based on the API response shape you describe in your prompt.