How to Integrate Lovable with Clockify

Clockify API keys are personal credentials tied to your user account — they provide access to all workspaces you're a member of. To generate one, log into Clockify at clockify.me and click your profile photo in the top-right corner. Select 'Profile Settings', then scroll to the 'API' section at the bottom of the page. Click 'Generate' to create an API key (or 'Regenerate' if one already exists). Copy the key — it won't be shown again after you navigate away, though you can regenerate if needed. You also need your workspace ID. The easiest way to find it is from your browser URL when using Clockify — it's the long string in clockify.me/workspaces/WORKSPACE_ID/. Alternatively, you can retrieve it via the API after setting up your credentials. In your Lovable project, open the Cloud tab by clicking '+' at the top of the screen, navigate to Secrets, and click 'Add secret'. Add two secrets: CLOCKIFY_API_KEY with your API key, and CLOCKIFY_WORKSPACE_ID with your workspace ID. Like Everhour, Clockify uses a custom X-Api-Key header rather than Bearer token — your Edge Function will set this header on every request. Clockify is notably one of the only major time tracking platforms with a fully functional API on the free tier.

Clockify's API v1 is hosted at api.clockify.me/api/v1 and follows RESTful patterns with workspace-scoped endpoints. All project and time entry operations require the workspace ID in the path. The timer is managed via the /workspaces/{workspaceId}/user/{userId}/time-entries endpoint — to start a timer, POST a new time entry without an end time; to stop it, PATCH the current running entry with an end time. The Edge Function below implements an action-based router covering the most common Clockify operations. Note the time entry endpoint structure: listing time entries uses GET /workspaces/{workspaceId}/user/{userId}/time-entries (user-scoped), while creating a timer uses POST to the same endpoint, and the reports endpoint uses a different base URL (reports.api.clockify.me) for detailed aggregated reporting. The function handles both API bases.

1// supabase/functions/clockify-proxy/index.ts
2import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
3
4const BASE = "https://api.clockify.me/api/v1";
5const corsHeaders = {
6  "Access-Control-Allow-Origin": "*",
7  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
8};
9
10serve(async (req) => {
11  if (req.method === "OPTIONS") {
12    return new Response("ok", { headers: corsHeaders });
13  }
14  const apiKey = Deno.env.get("CLOCKIFY_API_KEY");
15  const workspaceId = Deno.env.get("CLOCKIFY_WORKSPACE_ID");
16  if (!apiKey || !workspaceId) {
17    return new Response(JSON.stringify({ error: "Clockify credentials not configured" }), {
18      status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" },
19    });
20  }
21  const authHeaders = { "X-Api-Key": apiKey, "Content-Type": "application/json" };
22  const ws = workspaceId;
23  const { action, params = {} } = await req.json();
24  let resp;
25  const now = new Date().toISOString();
26
27  switch (action) {
28    case "get_workspace":
29      resp = await fetch(`${BASE}/workspaces/${ws}`, { headers: authHeaders });
30      break;
31    case "list_projects": {
32      const q = new URLSearchParams({ archived: String(params.archived ?? false) });
33      resp = await fetch(`${BASE}/workspaces/${ws}/projects?${q}`, { headers: authHeaders });
34      break;
35    }
36    case "list_users":
37      resp = await fetch(`${BASE}/workspaces/${ws}/users`, { headers: authHeaders });
38      break;
39    case "list_time_entries": {
40      const q = new URLSearchParams();
41      if (params.start) q.set("start", params.start);
42      if (params.end) q.set("end", params.end);
43      q.set("page-size", String(params.pageSize || 100));
44      resp = await fetch(`${BASE}/workspaces/${ws}/user/${params.userId}/time-entries?${q}`, { headers: authHeaders });
45      break;
46    }
47    case "get_current_timer":
48      resp = await fetch(`${BASE}/workspaces/${ws}/user/${params.userId}/time-entries?in-progress=true`, { headers: authHeaders });
49      break;
50    case "start_timer":
51      resp = await fetch(`${BASE}/workspaces/${ws}/time-entries`, {
52        method: "POST", headers: authHeaders,
53        body: JSON.stringify({
54          start: now,
55          projectId: params.projectId,
56          description: params.description || "",
57          billable: params.billable ?? true,
58        }),
59      });
60      break;
61    case "stop_timer":
62      resp = await fetch(`${BASE}/workspaces/${ws}/user/${params.userId}/time-entries`, {
63        method: "PATCH", headers: authHeaders,
64        body: JSON.stringify({ end: now }),
65      });
66      break;
67    case "add_time_entry":
68      resp = await fetch(`${BASE}/workspaces/${ws}/time-entries`, {
69        method: "POST", headers: authHeaders,
70        body: JSON.stringify({
71          start: params.start, end: params.end,
72          projectId: params.projectId,
73          description: params.description || "",
74          billable: params.billable ?? true,
75        }),
76      });
77      break;
78    default:
79      return new Response(JSON.stringify({ error: `Unknown action: ${action}` }), {
80        status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" },
81      });
82  }
83
84  const data = await resp.json();
85  return new Response(JSON.stringify(data), {
86    status: resp.status, headers: { ...corsHeaders, "Content-Type": "application/json" },
87  });
88});

The timer component is the centerpiece of most Clockify integrations — it allows users to start and stop time tracking without leaving your Lovable app. The key UI elements are: a running timer display (showing elapsed time), a project selector, and start/stop controls. The elapsed time is calculated client-side from the timer's start time rather than making API calls every second, keeping the API call count low while maintaining accuracy. On component mount, call get_current_timer to check if a timer is already running. If one is, display it immediately with the elapsed time counted from its start time. This handles the case where a user started tracking in Clockify's native app or another interface and now opens your Lovable app — the integration stays synchronized. Below the timer, a time entries list shows the day's logged entries with project names, descriptions, and durations.

Beyond personal timer control, Clockify shines for team timesheet management. Fetching time entries for all workspace users across a date range gives you the raw data to build any aggregated view: weekly timesheets, project hour summaries, billable vs non-billable breakdowns, and utilization reports. The time entries include a billable boolean, project ID, task ID, and duration in ISO 8601 duration format (e.g., PT2H30M for 2 hours 30 minutes). For larger teams or longer date ranges, consider caching time entry data in Supabase to avoid re-fetching on every page load. Store a daily snapshot at end-of-day and use the cached data for historical views, only fetching live data for the current day. RapidDev's team can help design this caching layer for teams with complex reporting requirements across many projects and users.