How to Integrate Lovable with Sinch

Sign in to app.sinch.com. Your Project ID is displayed in the top navigation bar or under 'Settings' — it is a UUID like 12345678-abcd-1234-ef56-789012345678. Navigate to 'Messaging' → 'Conversation API' in the left sidebar. If you do not have an App yet, click 'New App' and give it a name. Inside your App configuration, note the App ID (also a UUID). Go to the 'Channels' tab within the App and enable the channels you need. For SMS, link a Sinch number or Sender ID. For WhatsApp, you will need a WhatsApp Business Account approved through Meta — Sinch's support team can help with this setup. Next, create API credentials: go to 'Settings' → 'Access Keys' and click 'New Key'. Give the key a descriptive name and copy both the Key ID and Key Secret shown immediately after creation (the secret is only shown once). These are your OAuth2 client credentials. Store all four values — Project ID, App ID, Key ID, Key Secret — somewhere temporary before the next step where you will save them as Lovable Secrets.

Open the Cloud tab in your Lovable editor by clicking the '+' panel icon at the top right and selecting Cloud. Scroll to the Secrets section and add four secrets by clicking the '+' button for each. Create SINCH_PROJECT_ID with your Project ID (UUID format). Create SINCH_APP_ID with your Conversation API App ID (UUID format). Create SINCH_KEY_ID with the OAuth Key ID. Create SINCH_KEY_SECRET with the OAuth Key Secret. Optionally, create SINCH_SENDER with your phone number or Sender ID in E.164 format. The names must match exactly what your Edge Function calls with Deno.env.get(). All five values are sensitive — Sinch Key ID and Key Secret together can be used to send messages and incur charges on your account. Lovable's SOC 2 Type II certified infrastructure encrypts these at rest. Never paste these credentials into Lovable chat messages or into application code directly — the Secrets panel is the only safe place for them.

The Edge Function must: (1) obtain a Bearer token from Sinch's OAuth endpoint using Basic Auth with Key ID and Key Secret, then (2) call the Conversation API send message endpoint with the project ID, app ID, recipient contact, and message content. Sinch's token endpoint is https://auth.sinch.com/oauth2/token with grant_type=client_credentials. Use Basic Auth with the Key ID as username and Key Secret as password. The response contains access_token and expires_in. The Conversation API message endpoint is https://us.conversation.api.sinch.com/v1/projects/{projectId}/messages:send (use eu.conversation.api.sinch.com for European data residency). The request body specifies app_id, recipient (identified by phone number as a channel_identities entry), and message (with text_message.text). The API returns a message_id you can use to track delivery. Ask Lovable to generate this function with the full OAuth token flow and message send logic. Review the deployed code in the Code panel to verify the Deno.env.get() calls match your exact secret names.

1// supabase/functions/sinch-message/index.ts
2import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';
3
4const corsHeaders = {
5  'Access-Control-Allow-Origin': '*',
6  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
7};
8
9async function getSinchToken(): Promise<string> {
10  const keyId = Deno.env.get('SINCH_KEY_ID')!;
11  const keySecret = Deno.env.get('SINCH_KEY_SECRET')!;
12  const credentials = btoa(`${keyId}:${keySecret}`);
13
14  const res = await fetch('https://auth.sinch.com/oauth2/token', {
15    method: 'POST',
16    headers: {
17      'Authorization': `Basic ${credentials}`,
18      'Content-Type': 'application/x-www-form-urlencoded',
19    },
20    body: 'grant_type=client_credentials',
21  });
22
23  if (!res.ok) throw new Error(`Sinch auth error: ${await res.text()}`);
24  const data = await res.json();
25  return data.access_token;
26}
27
28serve(async (req) => {
29  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders });
30
31  try {
32    const projectId = Deno.env.get('SINCH_PROJECT_ID')!;
33    const appId = Deno.env.get('SINCH_APP_ID')!;
34    const sender = Deno.env.get('SINCH_SENDER')!;
35    const { to, text } = await req.json();
36
37    const token = await getSinchToken();
38
39    const msgRes = await fetch(
40      `https://us.conversation.api.sinch.com/v1/projects/${projectId}/messages:send`,
41      {
42        method: 'POST',
43        headers: {
44          'Authorization': `Bearer ${token}`,
45          'Content-Type': 'application/json',
46        },
47        body: JSON.stringify({
48          app_id: appId,
49          recipient: {
50            identified_by: {
51              channel_identities: [
52                { channel: 'SMS', identity: to },
53              ],
54            },
55          },
56          message: { text_message: { text } },
57        }),
58      }
59    );
60
61    const data = await msgRes.json();
62    if (!msgRes.ok) throw new Error(`Sinch send error: ${JSON.stringify(data)}`);
63
64    return new Response(
65      JSON.stringify({ messageId: data.message_id, status: 'sent' }),
66      { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
67    );
68  } catch (error) {
69    return new Response(
70      JSON.stringify({ error: error.message }),
71      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
72    );
73  }
74});

To receive replies and delivery status updates, configure a webhook callback URL in your Sinch Conversation API App. First, create a second Edge Function in Lovable to receive these callbacks. The function should parse the incoming JSON body, identify the trigger type (MESSAGE_INBOUND for incoming messages, MESSAGE_DELIVERY for delivery receipts), and store the data in your Supabase database. Sinch's callback body for inbound messages contains app_id, contact_id, conversation_id, and the message with its text and direction. For delivery receipts, the body contains message_id and delivery_status. Create a Supabase table with columns matching these fields. Once the Edge Function is deployed, copy its URL from Cloud → Edge Functions in the Lovable editor. Back in app.sinch.com, navigate to your Conversation API App → 'Webhooks' tab. Click 'Add Webhook' and paste the Edge Function URL. Select the triggers you want to receive — 'Message Inbound' and 'Message Delivery' are the most useful. Save the webhook. For complex webhook processing with multiple event types and conditional routing, RapidDev's team can help architect a robust handler.