How to Integrate Lovable with Duo Security

Duo integrations are configured in the Duo Admin Panel (admin.duosecurity.com). Each application you protect gets its own integration key and secret key, allowing Duo to attribute MFA activity to specific applications and apply different policies per app. To create the Auth API application: Log in to the Duo Admin Panel. In the left navigation, click 'Applications'. Click 'Protect an Application'. Search for 'Auth API' in the application list. Click 'Protect' next to Auth API. The application is created immediately and you see the integration credentials page showing: 1. Integration key (ikey) — like DIXXXXXXXXXXXXXXXXXX 2. Secret key (skey) — 40-character hex string 3. API hostname — like api-XXXXXXXX.duosecurity.com Also optionally configure a name for the application (e.g., 'My Lovable App') and any Duo policies (which authentication methods to allow, device trust requirements, etc.). In Lovable, click '+' next to Preview to open the Cloud panel, then click 'Secrets'. Add: - DUO_IKEY — your Duo integration key - DUO_SKEY — your Duo secret key - DUO_API_HOST — your Duo API hostname (e.g., api-XXXXXXXX.duosecurity.com) Duo credentials grant the ability to trigger MFA for any enrolled user. Treat the secret key with the same care as a password — it allows calling Duo Auth API on behalf of your application. Lovable's security blocks approximately 1,200 hardcoded keys daily, and this is exactly the type of credential that must be in the Secrets panel, never in code.

Duo's Auth API uses a custom HMAC-SHA1 request signing scheme rather than simple API key headers. Every request to the Duo API must include an Authorization header containing an HMAC-SHA1 signature of the canonical request string, signed with the secret key. This signing scheme prevents replay attacks and verifies request integrity. The canonical request string is built from: timestamp, HTTP method (uppercase), API hostname (lowercase), API path, and sorted URL-encoded parameters — joined by newlines. The HMAC-SHA1 of this string (using skey as the key) is hex-encoded, then combined with the integration key in HTTP Basic Auth format (ikey as username, HMAC as password). Deno's Web Crypto API provides HMAC-SHA1 through crypto.subtle.sign(). The implementation below handles the signature calculation. This is the most complex part of the Duo integration — all API calls to Duo (preauth, auth, check) use this same signing logic.

1// supabase/functions/duo-auth/index.ts
2const corsHeaders = {
3  'Access-Control-Allow-Origin': '*',
4  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
5};
6
7async function hmacSha1(key: string, message: string): Promise<string> {
8  const encoder = new TextEncoder();
9  const cryptoKey = await crypto.subtle.importKey(
10    'raw', encoder.encode(key),
11    { name: 'HMAC', hash: 'SHA-1' },
12    false, ['sign']
13  );
14  const signature = await crypto.subtle.sign('HMAC', cryptoKey, encoder.encode(message));
15  return Array.from(new Uint8Array(signature)).map(b => b.toString(16).padStart(2, '0')).join('');
16}
17
18async function duoRequest(
19  method: string,
20  path: string,
21  params: Record<string, string>
22): Promise<unknown> {
23  const ikey = Deno.env.get('DUO_IKEY')!;
24  const skey = Deno.env.get('DUO_SKEY')!;
25  const apiHost = Deno.env.get('DUO_API_HOST')!;
26
27  const now = new Date().toUTCString();
28  const sortedParams = Object.keys(params).sort().map(k =>
29    `${encodeURIComponent(k)}=${encodeURIComponent(params[k])}`
30  ).join('&');
31
32  const canon = [now, method.toUpperCase(), apiHost.toLowerCase(), path, sortedParams].join('\n');
33  const sig = await hmacSha1(skey, canon);
34  const authHeader = 'Basic ' + btoa(`${ikey}:${sig}`);
35
36  const url = method === 'GET'
37    ? `https://${apiHost}${path}?${sortedParams}`
38    : `https://${apiHost}${path}`;
39
40  const fetchOptions: RequestInit = {
41    method,
42    headers: { 'Authorization': authHeader, 'Date': now, 'Content-Type': 'application/x-www-form-urlencoded' },
43  };
44  if (method === 'POST') fetchOptions.body = sortedParams;
45
46  const resp = await fetch(url, fetchOptions);
47  return resp.json();
48}
49
50Deno.serve(async (req) => {
51  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders });
52
53  try {
54    const { operation, username, factor, txid, passcode } = await req.json() as {
55      operation: string; username?: string; factor?: string; txid?: string; passcode?: string;
56    };
57
58    let result: unknown;
59
60    if (operation === 'preauth') {
61      result = await duoRequest('POST', '/auth/v2/preauth', { username: username! });
62    } else if (operation === 'auth') {
63      const params: Record<string, string> = { username: username!, factor: factor || 'push', device: 'auto' };
64      if (factor === 'passcode' && passcode) params.passcode = passcode;
65      result = await duoRequest('POST', '/auth/v2/auth', params);
66    } else if (operation === 'auth_status') {
67      result = await duoRequest('GET', '/auth/v2/auth_status', { txid: txid! });
68    } else {
69      return new Response(JSON.stringify({ error: 'Invalid operation. Use: preauth, auth, auth_status' }), {
70        status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
71      });
72    }
73
74    return new Response(JSON.stringify(result), {
75      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
76    });
77  } catch (error) {
78    console.error('duo-auth error:', error);
79    return new Response(JSON.stringify({ error: String(error) }), {
80      status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
81    });
82  }
83});

With the Duo Edge Function deployed, build the authentication flow in Lovable. The MFA flow happens after Supabase Auth primary login succeeds. The sequence is: 1. User completes Supabase Auth login (email/password or social) 2. Your app calls the duo-auth Edge Function with operation='preauth' to verify the user is enrolled 3. App calls duo-auth with operation='auth' and factor='push' — this sends a push to the user's phone 4. The Edge Function returns a txid (transaction ID) 5. The frontend polls duo-auth with operation='auth_status' and the txid every 2 seconds 6. When auth_status returns result='allow', set mfa_verified = true in the user's Supabase profile 7. Redirect to the protected route For SMS factor: call auth with factor='sms' to send an SMS code, then call auth again with factor='passcode' and the passcode value from the user's input to verify. The mfa_verified state in Supabase is a timestamp column in a user_security table. A separate RLS policy on sensitive tables checks that user_security.mfa_verified is within the last 12 hours (or whatever your session timeout is). This way, Supabase auth session and Duo MFA state are tracked independently. For organizations with complex Duo enrollment workflows, multi-device management, or Duo bypass codes for device recovery, RapidDev's team can help design a complete enterprise MFA architecture on Lovable.