How to Integrate Lovable with Todoist

Todoist provides a single API token per account rather than requiring OAuth app registration for personal use. This makes it easy to get started — no app creation, no redirect flow, just find your token and store it. To find your API token, log into Todoist in a browser, click your avatar in the top-right corner, select 'Settings', then click 'Integrations' in the left sidebar. Scroll to the 'Developer' section and you'll see your API token — it's a 40-character alphanumeric string. Click 'Copy to clipboard'. In your Lovable project, click the '+' button to open panels and select the Cloud tab. Navigate to the Secrets section and click 'Add secret'. Enter TODOIST_API_TOKEN as the name and paste your token as the value. Click Save. This token provides full read and write access to your Todoist account — it doesn't expire and doesn't rotate unless you manually regenerate it from the same Settings → Integrations → Developer page. Lovable's security infrastructure ensures this token stays encrypted and is only accessible from your Edge Functions, never from any code running in the browser.

The Todoist REST API v2 is one of the most approachable project management APIs available. All endpoints use standard HTTP verbs at api.todoist.com/rest/v2/, with Bearer token authentication and JSON request/response bodies. The most important endpoints are /projects (list all projects), /tasks (list and create tasks with flexible filtering), /labels (list labels), and /tasks/{taskId}/close (mark a task complete). The natural language due date support in Todoist's API is a standout feature: you can pass due_string='every Monday at 10am' or 'next Friday' or 'in 3 days' to the task creation endpoint and Todoist's server handles the parsing — no date manipulation code required. The Edge Function below handles all common operations through an action-based router, including the sync endpoint which provides completed task history for activity tracking.

1// supabase/functions/todoist-proxy/index.ts
2import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
3
4const REST_BASE = "https://api.todoist.com/rest/v2";
5const SYNC_BASE = "https://api.todoist.com/sync/v9";
6const corsHeaders = {
7  "Access-Control-Allow-Origin": "*",
8  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
9};
10
11serve(async (req) => {
12  if (req.method === "OPTIONS") {
13    return new Response("ok", { headers: corsHeaders });
14  }
15  const token = Deno.env.get("TODOIST_API_TOKEN");
16  if (!token) {
17    return new Response(JSON.stringify({ error: "TODOIST_API_TOKEN not set" }), {
18      status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" },
19    });
20  }
21  const auth = { Authorization: `Bearer ${token}`, "Content-Type": "application/json" };
22  const { action, params = {} } = await req.json();
23  let resp;
24
25  switch (action) {
26    case "list_projects":
27      resp = await fetch(`${REST_BASE}/projects`, { headers: auth });
28      break;
29    case "get_project":
30      resp = await fetch(`${REST_BASE}/projects/${params.projectId}`, { headers: auth });
31      break;
32    case "list_tasks": {
33      const q = new URLSearchParams();
34      if (params.projectId) q.set("project_id", params.projectId);
35      if (params.filter) q.set("filter", params.filter);
36      if (params.labelId) q.set("label_id", params.labelId);
37      const qs = q.toString() ? `?${q}` : "";
38      resp = await fetch(`${REST_BASE}/tasks${qs}`, { headers: auth });
39      break;
40    }
41    case "get_task":
42      resp = await fetch(`${REST_BASE}/tasks/${params.taskId}`, { headers: auth });
43      break;
44    case "create_task":
45      resp = await fetch(`${REST_BASE}/tasks`, {
46        method: "POST", headers: auth,
47        body: JSON.stringify({
48          content: params.content,
49          ...(params.description && { description: params.description }),
50          ...(params.projectId && { project_id: params.projectId }),
51          ...(params.dueString && { due_string: params.dueString }),
52          ...(params.priority && { priority: params.priority }),
53          ...(params.labels && { labels: params.labels }),
54        }),
55      });
56      break;
57    case "update_task":
58      resp = await fetch(`${REST_BASE}/tasks/${params.taskId}`, {
59        method: "POST", headers: auth,
60        body: JSON.stringify(params.updates),
61      });
62      break;
63    case "complete_task":
64      resp = await fetch(`${REST_BASE}/tasks/${params.taskId}/close`, {
65        method: "POST", headers: auth,
66      });
67      break;
68    case "list_labels":
69      resp = await fetch(`${REST_BASE}/labels`, { headers: auth });
70      break;
71    case "get_completed": {
72      const q = new URLSearchParams({ limit: String(params.limit || 30) });
73      if (params.since) q.set("since", params.since);
74      resp = await fetch(`${SYNC_BASE}/items/completed/get_all?${q}`, { headers: auth });
75      break;
76    }
77    default:
78      return new Response(JSON.stringify({ error: `Unknown action: ${action}` }), {
79        status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" },
80      });
81  }
82
83  const data = await resp.json();
84  return new Response(JSON.stringify(data), {
85    status: resp.status, headers: { ...corsHeaders, "Content-Type": "application/json" },
86  });
87});

The most immediately useful Todoist-Lovable integration is a personal dashboard that surfaces the right tasks at the right time. Todoist's filter API is particularly powerful here — the filter='today | overdue' query returns exactly the tasks you need to see for your daily review, sorted by priority. Combining this with project counts and label summaries gives a complete daily overview. The following Lovable prompt generates a task dashboard with three sections: a task list with completion checkboxes, a project summary showing open task counts per project, and a quick-add form that uses natural language for due dates. The component uses React Query for data fetching with automatic background refetching every 5 minutes, keeping the dashboard current without manual refreshes.

Todoist labels are powerful organizational tools — users can tag tasks with labels like 'urgent', 'waiting', 'deep-work', or 'quick-win' to create cross-project filtered views. Your integration can expose these label-based views as focused work modes: a 'Deep Work' view showing only tasks tagged with a focus label, a 'Waiting' view showing tasks that are blocked pending someone else's action, or a 'Quick Wins' view for 5-minute tasks. For productivity tracking, the Todoist Sync API (v9) provides access to completed task history — the get_completed action in your Edge Function fetches tasks completed in a date range. This enables streak tracking, daily completion counts, and week-over-week productivity comparisons. RapidDev's team can help build more sophisticated productivity analytics, such as comparing estimated vs actual task completion rates using Todoist's time-tracking integrations.