How to Integrate Lovable with Confluence

Navigate to account.atlassian.com in your browser and log in with the Atlassian account that has access to the Confluence content you want to integrate. In the account settings, go to Security → API tokens. Click 'Create API token', give it a descriptive label like 'Lovable Confluence Integration', and click 'Create'. Copy the generated token immediately — Atlassian only shows the full token once, and you cannot retrieve it after closing the dialog. If you lose it, you will need to revoke it and generate a new one. The API token authenticates requests using HTTP Basic authentication: the username is your Atlassian account email address and the password is the API token. This combination is Base64-encoded and included in the Authorization header as 'Basic {base64(email:token)}'. Your Edge Function will handle this encoding. The API token grants access to all Atlassian products accessible to your account, including Confluence and Jira — treat it with appropriate care. The token does not expire automatically, but you should rotate it periodically as a security best practice, especially if you think it may have been exposed. When used with Confluence's REST API, it respects all of the permissions and restrictions configured in your Confluence spaces — the integration can only access content the account can see.

In your Lovable project, open the Cloud tab by clicking '+' next to the Preview panel, then navigate to the Secrets section. Add three secrets for the Confluence integration. Add CONFLUENCE_EMAIL with your Atlassian account email address. Add CONFLUENCE_API_TOKEN with your Atlassian API token. Add CONFLUENCE_BASE_URL with your Confluence Cloud instance URL in the format https://your-org.atlassian.net (no trailing slash). These three values together provide everything the Edge Function needs to authenticate and construct API request URLs. Storing them separately rather than pre-computing the Base64 encoding makes each value individually replaceable — if the API token changes, you only update CONFLUENCE_API_TOKEN without touching the other values. Lovable's Cloud Secrets are encrypted at rest using SOC 2 Type II certified infrastructure, ensuring that the API token — which grants broad access to your Atlassian account — is never exposed in browser requests, GitHub repositories, or application logs. The platform's automated security layer catches approximately 1,200 hardcoded API keys per day from leaking into code — by using Cloud Secrets you leverage this protection automatically.

Ask Lovable to create a Supabase Edge Function called confluence-api that proxies requests to the Confluence REST API v2. The function reads the three secrets from Deno.env.get(), constructs the Base64-encoded Basic auth credentials by combining email:token, accepts a path and optional query parameters, and builds the full API URL using https://{baseUrl}/wiki/api/v2/{path}. The Confluence REST API v2 endpoints include GET /spaces for listing spaces, GET /spaces/{spaceId}/pages for pages in a space, GET /pages/{pageId} for a specific page, GET /pages/{pageId}/children for child pages, POST /wiki/rest/api/content/search for CQL search (note: CQL search uses the v1 endpoint path /wiki/rest/api/content, not v2), and GET /pages/{pageId}/body for page body content in a specific format. The page body endpoint accepts a body-format parameter that can be 'storage' (Atlassian's XML-like storage format), 'atlas_doc_format' (Atlassian Document Format JSON), or 'view' (HTML rendered for display). For displaying content in a web app, 'view' format returns clean HTML that can be rendered directly. For programmatic manipulation, 'atlas_doc_format' or 'storage' gives structured data. Support both GET and POST methods to handle CQL searches and page creation.

1import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
2import { encode as base64Encode } from "https://deno.land/std@0.168.0/encoding/base64.ts";
3
4const corsHeaders = {
5  "Access-Control-Allow-Origin": "*",
6  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
7};
8
9serve(async (req) => {
10  if (req.method === "OPTIONS") return new Response("ok", { headers: corsHeaders });
11
12  try {
13    const email = Deno.env.get("CONFLUENCE_EMAIL");
14    const token = Deno.env.get("CONFLUENCE_API_TOKEN");
15    const baseUrl = Deno.env.get("CONFLUENCE_BASE_URL");
16
17    if (!email || !token || !baseUrl) {
18      throw new Error("Confluence credentials not fully configured");
19    }
20
21    const credentials = base64Encode(`${email}:${token}`);
22    const { path, method = "GET", params, body: reqBody } = await req.json();
23    if (!path) throw new Error("path is required");
24
25    // CQL search uses v1 endpoint
26    const apiBase = path.startsWith("content") || path.startsWith("search")
27      ? `${baseUrl}/wiki/rest/api/`
28      : `${baseUrl}/wiki/api/v2/`;
29
30    const url = new URL(`${apiBase}${path}`);
31    if (params) {
32      Object.entries(params as Record<string, string>).forEach(([k, v]) => {
33        url.searchParams.set(k, v);
34      });
35    }
36
37    const fetchOptions: RequestInit = {
38      method,
39      headers: {
40        "Authorization": `Basic ${credentials}`,
41        "Content-Type": "application/json",
42        "Accept": "application/json",
43      },
44    };
45
46    if (reqBody && method !== "GET") {
47      fetchOptions.body = JSON.stringify(reqBody);
48    }
49
50    const response = await fetch(url.toString(), fetchOptions);
51    const data = await response.json();
52
53    if (!response.ok) {
54      throw new Error(data.message || JSON.stringify(data));
55    }
56
57    return new Response(JSON.stringify(data), {
58      headers: { ...corsHeaders, "Content-Type": "application/json" },
59    });
60  } catch (error) {
61    return new Response(
62      JSON.stringify({ error: error.message }),
63      { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
64    );
65  }
66});

With the Edge Function working, ask Lovable to build a knowledge base interface. Start with a space browser that lists all accessible Confluence spaces from the 'spaces' endpoint. Each space object includes an id, key, name, description, and URL. Display spaces as clickable cards. When a user selects a space, fetch pages from 'spaces/{spaceId}/pages' with a limit parameter and optional sort. Page objects include id, title, version, parentId, and URLs. Display pages as a hierarchical tree or flat list. For search, use the v1 content search endpoint with a CQL query. A basic keyword search CQL is: text ~ 'your query' ORDER BY lastModified DESC. You can filter by space: space.key = 'ENG' AND text ~ 'query'. Filter by label: label = 'runbook'. Filter by date: lastModified >= '2026-01-01'. The search returns content objects with a title, body excerpt, and metadata. For rendering page content, fetch the page body from 'pages/{pageId}' with body-format=view parameter, which returns the page content as HTML. Display this HTML in a sandboxed iframe or use dangerouslySetInnerHTML with appropriate sanitization. For a cleaner rendering, ask Lovable to render the HTML in a styled container that applies your app's typography and color scheme to override Confluence's default styles.