How to Integrate Lovable with Looker

1// supabase/functions/looker-api/index.ts
2async function getLookerToken(host: string, clientId: string, clientSecret: string): Promise<string> {
3  const response = await fetch(`https://${host}/api/4.0/login`, {
4    method: 'POST',
5    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
6    body: new URLSearchParams({ client_id: clientId, client_secret: clientSecret }),
7  });
8  const data = await response.json();
9  if (!data.access_token) throw new Error(`Looker login failed: ${JSON.stringify(data)}`);
10  return data.access_token;
11}
12
13async function generateEmbedSSOUrl(
14  host: string,
15  embedSecret: string,
16  dashboardId: string,
17  userEmail: string,
18  userId: string,
19  permissions: string[],
20  filters: Record<string, string> = {}
21): Promise<string> {
22  const nonce = crypto.randomUUID();
23  const time = Math.floor(Date.now() / 1000);
24  const sessionLength = 3600; // 1 hour
25
26  const embedPath = `/embed/dashboards/${dashboardId}`;
27  const filterParams = Object.keys(filters).length > 0
28    ? '?' + new URLSearchParams(filters).toString()
29    : '';
30
31  const params = [
32    `nonce=${encodeURIComponent(JSON.stringify(nonce))}`,
33    `time=${time}`,
34    `session_length=${sessionLength}`,
35    `external_user_id=${encodeURIComponent(JSON.stringify(userId))}`,
36    `permissions=${encodeURIComponent(JSON.stringify(permissions))}`,
37    `models=${encodeURIComponent(JSON.stringify([]))}`,
38    `group_ids=${encodeURIComponent(JSON.stringify([]))}`,
39    `external_group_id=${encodeURIComponent(JSON.stringify(''))}`,
40    `user_attributes=${encodeURIComponent(JSON.stringify({}))}`,
41    `access_filters=${encodeURIComponent(JSON.stringify({}))}`,
42    `first_name=${encodeURIComponent(JSON.stringify(userEmail.split('@')[0]))}`,
43    `last_name=${encodeURIComponent(JSON.stringify(''))}`,
44    `user_timezone=null`,
45    `force_logout_login=true`,
46    `url=${encodeURIComponent(embedPath + filterParams)}`,
47  ];
48
49  const stringToSign = `${host}\n${embedPath}\n${params.join('\n')}`;
50
51  const key = await crypto.subtle.importKey(
52    'raw',
53    new TextEncoder().encode(embedSecret),
54    { name: 'HMAC', hash: 'SHA-256' },
55    false,
56    ['sign']
57  );
58  const signature = await crypto.subtle.sign('HMAC', key, new TextEncoder().encode(stringToSign));
59  const signatureHex = Array.from(new Uint8Array(signature)).map((b) => b.toString(16).padStart(2, '0')).join('');
60
61  return `https://${host}/login/embed/${encodeURIComponent(embedPath)}?${params.join('&')}&signature=${signatureHex}`;
62}
63
64Deno.serve(async (req) => {
65  if (req.method === 'OPTIONS') {
66    return new Response(null, {
67      headers: {
68        'Access-Control-Allow-Origin': '*',
69        'Access-Control-Allow-Methods': 'POST, OPTIONS',
70        'Access-Control-Allow-Headers': 'Content-Type, Authorization',
71      },
72    });
73  }
74
75  const clientId = Deno.env.get('LOOKER_CLIENT_ID')!;
76  const clientSecret = Deno.env.get('LOOKER_CLIENT_SECRET')!;
77  const embedSecret = Deno.env.get('LOOKER_EMBED_SECRET')!;
78  const host = Deno.env.get('LOOKER_HOST')!;
79
80  if (!clientId || !clientSecret || !host) {
81    return new Response(JSON.stringify({ error: 'Looker credentials not configured' }), {
82      status: 500,
83      headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
84    });
85  }
86
87  const { action, params } = await req.json();
88
89  try {
90    if (action === 'embed_url') {
91      const ssoUrl = await generateEmbedSSOUrl(
92        host, embedSecret,
93        params.dashboard_id,
94        params.user_email,
95        params.user_id,
96        params.permissions || ['access_data', 'see_user_dashboards'],
97        params.filters || {}
98      );
99      return new Response(JSON.stringify({ url: ssoUrl }), {
100        headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
101      });
102    }
103
104    const token = await getLookerToken(host, clientId, clientSecret);
105    const apiHeaders = { 'Authorization': `token ${token}`, 'Content-Type': 'application/json' };
106
107    let url: string;
108    if (action === 'dashboards') {
109      url = `https://${host}/api/4.0/dashboards`;
110    } else if (action === 'run_look') {
111      url = `https://${host}/api/4.0/looks/${params.look_id}/run/json`;
112    } else if (action === 'run_query') {
113      url = `https://${host}/api/4.0/queries/${params.query_id}/run/json`;
114    } else {
115      return new Response(JSON.stringify({ error: 'Invalid action' }), {
116        status: 400,
117        headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
118      });
119    }
120
121    const response = await fetch(url, { method: 'GET', headers: apiHeaders });
122    const data = await response.json();
123
124    return new Response(JSON.stringify(data), {
125      status: response.ok ? 200 : response.status,
126      headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
127    });
128  } catch (err) {
129    return new Response(JSON.stringify({ error: err.message }), {
130      status: 500,
131      headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
132    });
133  }
134});

1// src/components/LookerEmbed.tsx
2import { useState, useEffect } from 'react';
3import { supabase } from '@/lib/supabase';
4
5interface LookerEmbedProps {
6  dashboardId: string;
7  filters?: Record<string, string>;
8  height?: string;
9}
10
11export function LookerEmbed({ dashboardId, filters = {}, height = '80vh' }: LookerEmbedProps) {
12  const [embedUrl, setEmbedUrl] = useState<string | null>(null);
13  const [loading, setLoading] = useState(true);
14  const [error, setError] = useState<string | null>(null);
15
16  const generateUrl = async () => {
17    setLoading(true);
18    setError(null);
19    try {
20      const { data: { user } } = await supabase.auth.getUser();
21      if (!user) throw new Error('Not authenticated');
22
23      const { data, error: fnError } = await supabase.functions.invoke('looker-api', {
24        body: {
25          action: 'embed_url',
26          params: {
27            dashboard_id: dashboardId,
28            user_email: user.email,
29            user_id: user.id,
30            permissions: ['access_data', 'see_user_dashboards'],
31            filters,
32          },
33        },
34      });
35
36      if (fnError) throw fnError;
37      setEmbedUrl(data.url);
38    } catch (err) {
39      setError(err.message);
40    } finally {
41      setLoading(false);
42    }
43  };
44
45  useEffect(() => { generateUrl(); }, [dashboardId]);
46
47  if (loading) return <div className="flex items-center justify-center" style={{ height }}>Loading dashboard...</div>;
48  if (error) return <div className="text-red-500 p-4">Error: {error}</div>;
49
50  return (
51    <div className="w-full relative" style={{ height }}>
52      <iframe
53        src={embedUrl!}
54        className="w-full h-full border-0 rounded-lg"
55        allowFullScreen
56        title="Looker Dashboard"
57      />
58    </div>
59  );
60}