How to Integrate Lovable with JFrog Artifactory

Log in to your Artifactory instance and navigate to your user profile by clicking your username in the top-right corner, then selecting 'Edit Profile' or 'User Settings'. In the Authentication Settings section, you will see either an 'API Key' field or an 'Identity Tokens' section depending on your Artifactory version. For Artifactory 7.x and JFrog Cloud, use Identity Tokens: click 'Generate Token', give it a descriptive name like 'lovable-integration', select an expiry period appropriate for your use case, and click 'Generate'. Copy the token immediately — Artifactory will not show it again after you close the dialog. For older Artifactory versions, click 'Generate API Key' in the Authentication Settings section and copy the displayed key. Note your Artifactory base URL from the browser address bar — it typically follows the pattern https://yourcompany.jfrog.io/artifactory for cloud instances or https://artifactory.yourcompany.com/artifactory for self-hosted. You will need both the token and the base URL in the next step. Also identify the repository key (short name) of the npm repository you want to query — find it on the Artifactory home page under 'Repositories'.

In your Lovable project, click the '+' icon next to the preview to open side panels, then select the Cloud tab. Scroll to the Secrets section and add two secrets. First, click 'Add Secret', set the Name to ARTIFACTORY_BASE_URL, and paste your full Artifactory base URL (e.g., https://yourcompany.jfrog.io/artifactory) as the Value — include the trailing /artifactory path segment but no trailing slash. Click 'Save'. Then click 'Add Secret' again, set the Name to ARTIFACTORY_TOKEN, and paste the API token or identity token you generated. Click 'Save'. Both secrets are now encrypted and stored in Lovable's red zone, accessible only from Edge Functions via Deno.env.get(). Never include these values in Lovable chat prompts, frontend components, or any file that is committed to your GitHub repository. Lovable's security layer blocks approximately 1,200 hardcoded credentials per day — storing credentials in secrets is both the secure and the operationally correct approach, as it allows you to rotate tokens without changing any code.

Prompt Lovable to create an Edge Function that calls the Artifactory REST API. For npm package metadata, the Artifactory API endpoint follows the pattern GET /api/npm/{repo-key}/{package-name} which returns version lists, dist-tags, and metadata in the standard npm registry format. Your Edge Function should accept a package name as a query parameter, construct the Artifactory URL from the secret base URL, call the API with the Bearer token authentication header, and return the relevant fields. Include CORS headers so your Lovable React frontend can call the function from the browser. Add error handling for 401 Unauthorized (token expired or missing), 404 Not Found (package does not exist in the repo), and network errors. The function should also handle the case where ARTIFACTORY_BASE_URL or ARTIFACTORY_TOKEN secrets are not configured and return a descriptive 500 error rather than crashing silently.

1// supabase/functions/artifactory-npm/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
9serve(async (req) => {
10  if (req.method === "OPTIONS") {
11    return new Response("ok", { headers: corsHeaders });
12  }
13
14  try {
15    const url = new URL(req.url);
16    const packageName = url.searchParams.get("package");
17    const repo = url.searchParams.get("repo") ?? "npm-local";
18
19    if (!packageName) {
20      return new Response(
21        JSON.stringify({ error: "package parameter is required" }),
22        { status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
23      );
24    }
25
26    const baseUrl = Deno.env.get("ARTIFACTORY_BASE_URL");
27    const token = Deno.env.get("ARTIFACTORY_TOKEN");
28
29    if (!baseUrl || !token) {
30      return new Response(
31        JSON.stringify({ error: "Artifactory secrets not configured" }),
32        { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
33      );
34    }
35
36    const artifactoryUrl = `${baseUrl}/api/npm/${repo}/${encodeURIComponent(packageName)}`;
37
38    const response = await fetch(artifactoryUrl, {
39      headers: {
40        "Authorization": `Bearer ${token}`,
41        "Accept": "application/json",
42      },
43    });
44
45    if (response.status === 401) {
46      return new Response(
47        JSON.stringify({ error: "Invalid Artifactory token — check ARTIFACTORY_TOKEN secret" }),
48        { status: 401, headers: { ...corsHeaders, "Content-Type": "application/json" } }
49      );
50    }
51
52    if (response.status === 404) {
53      return new Response(
54        JSON.stringify({ error: `Package '${packageName}' not found in repository '${repo}'` }),
55        { status: 404, headers: { ...corsHeaders, "Content-Type": "application/json" } }
56      );
57    }
58
59    if (!response.ok) {
60      return new Response(
61        JSON.stringify({ error: `Artifactory error: ${response.status}` }),
62        { status: response.status, headers: { ...corsHeaders, "Content-Type": "application/json" } }
63      );
64    }
65
66    const data = await response.json();
67    const versions = data.versions ? Object.keys(data.versions) : [];
68    const latest = data["dist-tags"]?.latest ?? versions[versions.length - 1] ?? null;
69
70    return new Response(
71      JSON.stringify({
72        name: data.name,
73        latest,
74        versions,
75        description: data.description ?? "",
76        modified: data.time?.modified ?? null,
77      }),
78      { headers: { ...corsHeaders, "Content-Type": "application/json" } }
79    );
80  } catch (error) {
81    return new Response(
82      JSON.stringify({ error: error.message }),
83      { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
84    );
85  }
86});

If you need to query generic artifact metadata (Docker images, Maven JARs, raw binaries) rather than npm packages, use Artifactory's storage API instead. The storage API endpoint GET /api/storage/{repo-key}/{path/to/artifact} returns file info including size, checksums, download URI, and last modified timestamp. For listing the contents of a directory, the same endpoint returns a children array when the path is a folder. This is useful for building release browser UIs where users can see all artifacts in a given directory and get download information. Adjust the Edge Function from Step 3 to accept a path parameter instead of a package name, and call the storage API endpoint. The authentication mechanism (Bearer token header) is identical across all Artifactory REST API endpoints, so only the URL path changes. If you need to actually serve file downloads (not just metadata), your Edge Function can fetch the artifact bytes using the downloadUri from the storage API response and stream them back as a binary response with appropriate Content-Disposition headers.

With the Edge Function deployed and tested, describe the UI you want to Lovable in a chat prompt. For a developer portal use case, you might want a search input, a package name autocomplete, a version list table, and a copy-to-clipboard button for the install command. For a release browser, a file tree with folder navigation and download buttons is more appropriate. Lovable will generate the React component that calls your Edge Function with the appropriate parameters. Make sure to specify how you want loading states, empty states (no results found), and error states displayed. If your Artifactory instance requires a specific repository key that users should not need to know about, hardcode it as the default in your Edge Function or pass it as a static prop from your component — do not expose internal repository names in your UI unless they are meaningful to users.