How to Integrate Lovable with MongoDB Atlas

The Atlas Data API is MongoDB's REST-based interface for reading and writing documents in Atlas-hosted clusters. Unlike the traditional MongoDB driver, it uses plain HTTPS requests with JSON payloads — which means your Deno Edge Functions can call it using the built-in fetch API without installing any npm packages or MongoDB drivers. To enable it, log in to your MongoDB Atlas account at cloud.mongodb.com. In the left sidebar, click 'Data API' (listed under the Services section, or accessible from your cluster overview). Click 'Enable the Data API'. Atlas will display your App ID — a string that looks like 'data-abcdef'. Copy this and keep it accessible. Next, create a Data API key. On the Data API page, click 'Create API Key'. Give it a name like 'lovable-app-key'. Atlas displays the key once — copy it immediately to a secure location before closing the modal. This key grants write access to your cluster through the Data API, so treat it like a database password. Note your base URL format: it will be https://data.mongodb-api.com/app/{your-app-id}/endpoint/data/v1. You will use this URL in your Edge Functions. Also note your exact database name and the collection names you plan to query — you will need these when writing the Edge Function request bodies. If you have IP access restrictions enabled on your Atlas cluster, make sure to allow access from 0.0.0.0/0 (all IPs) or from Supabase's Edge Function IP ranges. Edge Functions run from distributed Deno Deploy infrastructure, so a single fixed IP is not available — the most practical approach is allowing all IPs at the Atlas network access level while relying on the API key for authentication security.

With your Atlas Data API credentials ready, the next step is storing them securely in Lovable's Cloud Secrets panel. Secrets are encrypted environment variables accessible only from Edge Functions — they are never exposed to the browser, never stored in your GitHub repository, and never visible in Lovable's chat history. Lovable's security infrastructure blocks approximately 1,200 hardcoded API keys per day, but the safest approach is to always use Secrets from the start. To access the Secrets panel in Lovable, click the '+' icon at the top of the editor next to the Preview label. This opens the Cloud panel. Click the 'Secrets' tab. You will see any existing secrets listed with masked values. Click 'Add new secret' and add the following secrets one at a time: - Name: MONGODB_DATA_API_URL — Value: your full Data API base URL (e.g., https://data.mongodb-api.com/app/data-abcdef/endpoint/data/v1) - Name: MONGODB_API_KEY — Value: your Data API key (the long string you copied when creating the key) - Name: MONGODB_DATABASE — Value: your database name (e.g., 'production' or 'myapp') Click 'Save' after adding each secret. The secrets will appear in the list with their values masked. In your Edge Function code, you will access these via Deno.env.get('MONGODB_API_KEY') and similar calls. Do not add your cluster name or collection names as secrets — those are not sensitive values and can be hardcoded in your Edge Function logic or passed as parameters from the frontend. Only credentials that would grant unauthorized database access belong in Secrets.

Now you can write the Edge Function that proxies read requests from your Lovable frontend to the MongoDB Atlas Data API. Open the Lovable chat panel in the bottom-left of the editor and ask Lovable to create an Edge Function, or write it directly using the code below as a template. The Atlas Data API uses a REST endpoint pattern where you POST a JSON body containing the collection name, filter criteria, and projection fields. The Content-Type must be application/json and the authentication header is api-key with your key value. The Edge Function below implements a general-purpose document query handler. It reads the collection name and optional filter from the incoming request body, calls the Atlas Data API's findMany endpoint, and returns the results. For production use, add input validation and restrict which collections the frontend can query. Paste the following code into Lovable's chat alongside a prompt like: 'Create a new Edge Function at supabase/functions/mongodb-query/index.ts with this code, deploy it, and show me how to call it from the frontend.'

1// supabase/functions/mongodb-query/index.ts
2const corsHeaders = {
3  'Access-Control-Allow-Origin': '*',
4  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
5};
6
7Deno.serve(async (req) => {
8  if (req.method === 'OPTIONS') {
9    return new Response('ok', { headers: corsHeaders });
10  }
11
12  try {
13    const { collection, filter = {}, projection = {}, limit = 20 } = await req.json();
14
15    if (!collection) {
16      return new Response(JSON.stringify({ error: 'collection is required' }), {
17        status: 400,
18        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
19      });
20    }
21
22    const apiUrl = Deno.env.get('MONGODB_DATA_API_URL')!;
23    const apiKey = Deno.env.get('MONGODB_API_KEY')!;
24    const database = Deno.env.get('MONGODB_DATABASE')!;
25
26    const response = await fetch(`${apiUrl}/action/find`, {
27      method: 'POST',
28      headers: {
29        'Content-Type': 'application/json',
30        'api-key': apiKey,
31      },
32      body: JSON.stringify({
33        collection,
34        database,
35        dataSource: 'Cluster0',
36        filter,
37        projection,
38        limit,
39      }),
40    });
41
42    if (!response.ok) {
43      const errorText = await response.text();
44      console.error('Atlas Data API error:', errorText);
45      return new Response(JSON.stringify({ error: 'Database query failed', details: errorText }), {
46        status: response.status,
47        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
48      });
49    }
50
51    const data = await response.json();
52    return new Response(JSON.stringify({ documents: data.documents }), {
53      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
54    });
55  } catch (error) {
56    console.error('Edge Function error:', error);
57    return new Response(JSON.stringify({ error: 'Internal server error' }), {
58      status: 500,
59      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
60    });
61  }
62});

Read operations are only half the story — most Lovable applications also need to create, update, and delete documents. The Atlas Data API provides separate action endpoints for each operation: insertOne for creating a document, updateOne for updating a specific document by filter, deleteOne for removing a document, and insertMany for bulk inserts. The safest approach is to create separate Edge Functions for different operation types, or a single Edge Function that routes by operation type after validating the request. Separating read and write functions gives you clear audit separation and lets you apply different authorization logic — for example, read functions might allow unauthenticated access for public data, while write functions require a valid Supabase JWT to confirm the user is authenticated. The write Edge Function below accepts an operation parameter ('insertOne', 'updateOne', 'deleteOne'), the collection name, and the relevant document or filter data. It validates the Supabase JWT from the Authorization header before executing the write, ensuring only authenticated users can modify data. In Lovable's chat, describe this as: 'Create an Edge Function at supabase/functions/mongodb-write/index.ts that handles MongoDB Atlas write operations. Verify the Supabase JWT before executing any write. Accept operation type, collection, and document/filter in the request body.'

1// supabase/functions/mongodb-write/index.ts
2import { createClient } from 'https://esm.sh/@supabase/supabase-js@2';
3
4const corsHeaders = {
5  'Access-Control-Allow-Origin': '*',
6  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
7};
8
9Deno.serve(async (req) => {
10  if (req.method === 'OPTIONS') {
11    return new Response('ok', { headers: corsHeaders });
12  }
13
14  // Verify Supabase JWT
15  const authHeader = req.headers.get('Authorization');
16  if (!authHeader) {
17    return new Response(JSON.stringify({ error: 'Missing authorization header' }), {
18      status: 401,
19      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
20    });
21  }
22
23  const supabase = createClient(
24    Deno.env.get('SUPABASE_URL')!,
25    Deno.env.get('SUPABASE_ANON_KEY')!,
26    { global: { headers: { Authorization: authHeader } } }
27  );
28
29  const { data: { user }, error: authError } = await supabase.auth.getUser();
30  if (authError || !user) {
31    return new Response(JSON.stringify({ error: 'Unauthorized' }), {
32      status: 401,
33      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
34    });
35  }
36
37  try {
38    const { operation, collection, document, filter, update } = await req.json();
39    const apiUrl = Deno.env.get('MONGODB_DATA_API_URL')!;
40    const apiKey = Deno.env.get('MONGODB_API_KEY')!;
41    const database = Deno.env.get('MONGODB_DATABASE')!;
42
43    const allowedOperations = ['insertOne', 'updateOne', 'deleteOne'];
44    if (!allowedOperations.includes(operation)) {
45      return new Response(JSON.stringify({ error: 'Invalid operation' }), {
46        status: 400,
47        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
48      });
49    }
50
51    const bodyMap: Record<string, unknown> = { collection, database, dataSource: 'Cluster0' };
52    if (operation === 'insertOne') bodyMap.document = { ...document, createdBy: user.id };
53    if (operation === 'updateOne') { bodyMap.filter = filter; bodyMap.update = update; }
54    if (operation === 'deleteOne') bodyMap.filter = filter;
55
56    const response = await fetch(`${apiUrl}/action/${operation}`, {
57      method: 'POST',
58      headers: { 'Content-Type': 'application/json', 'api-key': apiKey },
59      body: JSON.stringify(bodyMap),
60    });
61
62    const result = await response.json();
63    return new Response(JSON.stringify(result), {
64      status: response.ok ? 200 : response.status,
65      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
66    });
67  } catch (error) {
68    console.error('Write error:', error);
69    return new Response(JSON.stringify({ error: 'Write operation failed' }), {
70      status: 500,
71      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
72    });
73  }
74});

With both Edge Functions deployed, you can now call them from your Lovable React frontend. The cleanest pattern is to create a utility file that wraps the Edge Function calls, handles the Supabase session for Authorization headers, and exports typed functions your components can import. Lovable's AI can generate this utility and the calling components for you. Open the chat panel and describe the data you want to display: 'Create a React hook called useMongoDB that calls the mongodb-query Edge Function to fetch documents from a given collection. Include loading and error states. Then create a product listing page component that uses this hook to display products from the products collection.' The key detail to include in your prompt is that the Edge Function requires the user's Supabase session token in the Authorization header for write operations. For read operations, you can choose to make them unauthenticated (remove the JWT check from the read function) or authenticated depending on whether the data is public. For complex data dashboards connecting multiple MongoDB collections, RapidDev's team can help design the Edge Function architecture and optimize query performance for production traffic. The pattern described here is well-suited for up to a few hundred requests per minute — higher throughput may require connection pooling strategies.

1// src/hooks/useMongoDB.ts
2import { useState, useEffect } from 'react';
3import { supabase } from '@/integrations/supabase/client';
4
5interface UseMongoDBOptions {
6  collection: string;
7  filter?: Record<string, unknown>;
8  limit?: number;
9}
10
11export function useMongoDB<T = Record<string, unknown>>({ collection, filter = {}, limit = 20 }: UseMongoDBOptions) {
12  const [data, setData] = useState<T[]>([]);
13  const [loading, setLoading] = useState(true);
14  const [error, setError] = useState<string | null>(null);
15
16  useEffect(() => {
17    const fetchData = async () => {
18      setLoading(true);
19      setError(null);
20      try {
21        const { data: result, error: fnError } = await supabase.functions.invoke('mongodb-query', {
22          body: { collection, filter, limit },
23        });
24        if (fnError) throw fnError;
25        setData(result.documents ?? []);
26      } catch (err: unknown) {
27        setError(err instanceof Error ? err.message : 'Failed to fetch data');
28      } finally {
29        setLoading(false);
30      }
31    };
32    fetchData();
33  }, [collection, JSON.stringify(filter), limit]);
34
35  return { data, loading, error };
36}

With the Edge Functions deployed and the frontend hook wired up, test the full integration in Lovable's preview panel. Click through your product listing or data display page — you should see documents loading from your MongoDB Atlas cluster within 1-2 seconds. If documents do not appear, the most productive place to debug is Cloud → Logs. Click the '+' icon next to the Preview label, select the 'Cloud' tab, then click 'Logs'. You will see real-time execution output from your Edge Functions. Common errors to look for: - 'MONGODB_API_KEY not found' — the secret name in your code does not exactly match the name in Cloud → Secrets. Both are case-sensitive. - 'Atlas Data API 401' — your API key is invalid or was regenerated in the Atlas dashboard without being updated in Secrets. - 'Network request failed' — your Atlas cluster's network access list is blocking the Edge Function IP. Add 0.0.0.0/0 to the Atlas network access list. - 'dataSource not found' — your cluster name in the code (defaulted to 'Cluster0') does not match your actual Atlas cluster name. Check the Data API configuration in Atlas to find the correct dataSource value. For security verification: open your browser's developer tools on the preview page and look at the network requests. You should see calls to your Supabase Edge Function URL (functions/v1/mongodb-query) and the response should contain document data — but you should not see any MongoDB API keys, Data API URLs, or database names in the browser-visible request or response. All sensitive values stay server-side in the Edge Function. This confirms the security boundary is working correctly.