How to Integrate Lovable with Toggl Track

Before writing any code, gather the two pieces of information you need to authenticate with Toggl: your personal API token and your workspace ID. Log in to Toggl Track at toggl.com/track and click your avatar in the top-left corner to open the profile menu. Select 'Profile Settings' from the dropdown. Scroll to the very bottom of the Profile Settings page where you'll find a section labeled 'API Token'. Click 'Click to reveal' to display your token — it looks like a 32-character hexadecimal string. Copy it to a safe temporary location like a password manager note. Next, find your workspace ID. Navigate to toggl.com/app/workspaces in your browser while logged in. The URL will change to something like toggl.com/app/workspaces/1234567/settings — the number in the URL is your workspace ID. You can also find it by going to any time entry view: the workspace ID appears in API response payloads as the 'wid' field. Write down both values because you'll need them in the next step. The Toggl API v9 base URL is https://api.track.toggl.com/api/v9 and the reports API lives at https://api.track.toggl.com/reports/api/v3. Both use the same API token for authentication via HTTP Basic auth, where the username is your API token and the password is the literal string 'api_token'.

With your API token and workspace ID in hand, you need to store them as encrypted secrets that your Edge Function can access at runtime. In Lovable, look at the top of the editor and click the '+' icon next to the Preview panel — this opens the Cloud tab. In the Cloud tab, find the 'Secrets' section in the left sidebar and click it to open the Secrets panel. Click 'Add new secret'. In the Name field type TOGGL_API_TOKEN exactly as written (all caps, underscore). In the Value field paste your 32-character API token. Click Save. Now add a second secret: click 'Add new secret' again. Name it TOGGL_WORKSPACE_ID and paste your numeric workspace ID as the value. Click Save. These secrets are now encrypted and stored server-side. They will be automatically injected into every Edge Function in your project as environment variables. Your Edge Function code will access them with Deno.env.get('TOGGL_API_TOKEN') and Deno.env.get('TOGGL_WORKSPACE_ID'). Lovable's security infrastructure — which blocks approximately 1,200 hardcoded API keys per day — will flag any attempt to use these values in frontend code, ensuring your Toggl credentials stay in the red zone where only Edge Functions can reach them.

Now ask Lovable to create the Edge Function that will authenticate with Toggl and proxy API requests from your frontend. This function handles the Base64 encoding of your API token for HTTP Basic auth, routes different actions (get projects, list time entries, start timer, stop timer, get reports) to the correct Toggl API endpoints, and returns structured JSON responses. Paste the following prompt into Lovable's chat interface. Lovable will generate the Edge Function code, create the file at supabase/functions/toggl-proxy/index.ts, and deploy it to your Cloud project automatically.

1// supabase/functions/toggl-proxy/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 apiToken = Deno.env.get('TOGGL_API_TOKEN');
16    const workspaceId = Deno.env.get('TOGGL_WORKSPACE_ID');
17
18    if (!apiToken || !workspaceId) {
19      return new Response(
20        JSON.stringify({ error: 'Toggl credentials not configured' }),
21        { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
22      );
23    }
24
25    const authHeader = 'Basic ' + btoa(apiToken + ':api_token');
26    const togglBase = 'https://api.track.toggl.com/api/v9';
27    const reportsBase = 'https://api.track.toggl.com/reports/api/v3';
28
29    const { action, payload = {} } = await req.json();
30
31    let togglUrl = '';
32    let method = 'GET';
33    let body: string | undefined;
34
35    switch (action) {
36      case 'get_projects':
37        togglUrl = `${togglBase}/workspaces/${workspaceId}/projects`;
38        break;
39      case 'get_current_entry':
40        togglUrl = `${togglBase}/me/time_entries/current`;
41        break;
42      case 'get_time_entries': {
43        const params = new URLSearchParams();
44        if (payload.start_date) params.set('start_date', payload.start_date);
45        if (payload.end_date) params.set('end_date', payload.end_date);
46        togglUrl = `${togglBase}/me/time_entries?${params.toString()}`;
47        break;
48      }
49      case 'start_timer':
50        togglUrl = `${togglBase}/workspaces/${workspaceId}/time_entries`;
51        method = 'POST';
52        body = JSON.stringify({
53          description: payload.description || '',
54          project_id: payload.project_id || null,
55          start: new Date().toISOString(),
56          duration: -1,
57          created_with: 'lovable-app',
58          workspace_id: parseInt(workspaceId),
59        });
60        break;
61      case 'stop_timer':
62        togglUrl = `${togglBase}/workspaces/${workspaceId}/time_entries/${payload.time_entry_id}/stop`;
63        method = 'PATCH';
64        break;
65      case 'get_weekly_report':
66        togglUrl = `${reportsBase}/workspace/${workspaceId}/summary`;
67        method = 'POST';
68        body = JSON.stringify({
69          start_date: payload.start_date,
70          end_date: payload.end_date,
71          grouping: 'projects',
72        });
73        break;
74      default:
75        return new Response(
76          JSON.stringify({ error: `Unknown action: ${action}` }),
77          { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
78        );
79    }
80
81    const togglRes = await fetch(togglUrl, {
82      method,
83      headers: {
84        Authorization: authHeader,
85        'Content-Type': 'application/json',
86      },
87      body,
88    });
89
90    const data = await togglRes.json();
91
92    return new Response(JSON.stringify(data), {
93      status: togglRes.status,
94      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
95    });
96  } catch (err) {
97    return new Response(
98      JSON.stringify({ error: err.message }),
99      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
100    );
101  }
102});

With the Edge Function deployed, ask Lovable to build the frontend timer interface. This includes a project selector populated from your Toggl projects, a description input field, a start/stop button, and a live elapsed time counter that updates every second while a timer is running. The frontend calls the Edge Function for all Toggl operations — it never communicates with the Toggl API directly. The UI should handle three states: idle (no timer running, showing Start button), running (timer active, showing elapsed time and Stop button), and loading (API call in progress). The running timer display should poll the 'get_current_entry' action every 30 seconds to stay in sync with any external Toggl clients the user might also have open.

Extend the app with a reports page that displays weekly time summaries pulled from the Toggl Reports API. This gives you a management-level view of where time is being spent without requiring anyone to log into Toggl directly. The reports endpoint returns aggregated totals by project, which you can display as a bar chart and a sortable summary table. Ask Lovable to create a separate route for the reports dashboard. The page should default to the current week (Monday to Sunday) and allow navigation to previous weeks using back/forward arrows. The summary data from the Toggl Reports API groups hours by project and includes sub-groupings by time entry description, giving you granular insight into task-level time allocation.