How to Integrate Lovable with Google Search Console

Go to console.cloud.google.com and select or create a project. In the left sidebar, navigate to APIs & Services → Library and search for 'Google Search Console API'. Click Enable. Next, go to APIs & Services → Credentials and click Create Credentials → Service Account. Give it a name like 'Lovable GSC Reader' and click Create and Continue. For the role, select Basic → Viewer (the service account only needs read access). Click Done. You should now see your service account listed. Click on it, navigate to the Keys tab, and click Add Key → Create New Key. Choose JSON format and click Create. A JSON file will download to your computer — this is your service account key. Keep this file safe; you will paste its contents into Lovable Secrets. The JSON contains a private_key field which is a long RSA key used to sign JWT authentication requests.

The service account exists in Google Cloud, but it does not yet have access to your Search Console property data. You need to add it as a user in Search Console. Go to search.google.com/search-console, select your property, and click Settings in the left sidebar. Click Users and permissions. Click Add User. In the email field, paste the service account email address (it looks like service-account-name@your-project.iam.gserviceaccount.com — you can find it in the JSON key file under the client_email field). Set the permission to Full (or Restricted for read-only access — read-only is sufficient and more secure). Click Add. The service account can now read your Search Console data. Note: the Search Console API only works with verified properties, so make sure your site is properly verified before proceeding.

In your Lovable project, open the Cloud tab by clicking the plus (+) icon next to the preview window. Navigate to the Secrets section and click Add Secret. For the name, enter GOOGLE_SERVICE_ACCOUNT_JSON. For the value, open the JSON key file you downloaded, select all its contents, and paste it into the value field. The JSON is a single-line or multi-line object — paste it exactly as downloaded. Click Save. Lovable encrypts this value and makes it available only in Edge Functions via Deno.env.get('GOOGLE_SERVICE_ACCOUNT_JSON'). Never paste this JSON into Lovable's chat interface, as it contains a private cryptographic key. If you are concerned about security, Lovable holds SOC 2 Type II and ISO 27001:2022 certifications, and its security infrastructure actively blocks hardcoded secrets from appearing in application code.

Ask Lovable to create the Edge Function that authenticates with Google's OAuth2 server using a JWT signed with your service account private key, obtains an access token, and then calls the Search Analytics API. The function accepts POST requests with a JSON body containing siteUrl (your verified property URL, e.g. 'https://example.com/'), startDate, endDate, dimensions (an array like ['query', 'page']), and an optional rowLimit. The tricky part of Google service account authentication on Deno is signing a JWT with the RS256 algorithm using the private key from your JSON. Deno's Web Crypto API supports this natively. The function extracts the private key from the stored JSON, signs a JWT, exchanges it for an access token, and then uses that token to call the Google Search Analytics API endpoint. The code below shows the complete implementation.

1import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
2
3const corsHeaders = {
4  'Access-Control-Allow-Origin': '*',
5  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
6}
7
8async function getGoogleAccessToken(serviceAccountJson: any): Promise<string> {
9  const now = Math.floor(Date.now() / 1000)
10  const payload = {
11    iss: serviceAccountJson.client_email,
12    scope: 'https://www.googleapis.com/auth/webmasters.readonly',
13    aud: 'https://oauth2.googleapis.com/token',
14    exp: now + 3600,
15    iat: now,
16  }
17
18  const header = { alg: 'RS256', typ: 'JWT' }
19  const encodeBase64Url = (obj: object) =>
20    btoa(JSON.stringify(obj)).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '')
21
22  const signingInput = `${encodeBase64Url(header)}.${encodeBase64Url(payload)}`
23
24  // Import the private key for RS256 signing
25  const privateKeyPem = serviceAccountJson.private_key
26  const pemBody = privateKeyPem.replace(/-----[^-]+-----/g, '').replace(/\n/g, '')
27  const keyBuffer = Uint8Array.from(atob(pemBody), c => c.charCodeAt(0))
28
29  const key = await crypto.subtle.importKey(
30    'pkcs8', keyBuffer.buffer,
31    { name: 'RSASSA-PKCS1-v1_5', hash: 'SHA-256' },
32    false, ['sign']
33  )
34
35  const signature = await crypto.subtle.sign(
36    'RSASSA-PKCS1-v1_5', key,
37    new TextEncoder().encode(signingInput)
38  )
39
40  const jwt = `${signingInput}.${btoa(String.fromCharCode(...new Uint8Array(signature)))
41    .replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '')}`
42
43  const tokenResponse = await fetch('https://oauth2.googleapis.com/token', {
44    method: 'POST',
45    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
46    body: `grant_type=urn%3Aietf%3Aparams%3Aoauth%3Agrant-type%3Ajwt-bearer&assertion=${jwt}`,
47  })
48
49  const tokenData = await tokenResponse.json()
50  if (!tokenData.access_token) throw new Error(`Token error: ${JSON.stringify(tokenData)}`)
51  return tokenData.access_token
52}
53
54serve(async (req) => {
55  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders })
56
57  try {
58    const serviceAccountJson = JSON.parse(Deno.env.get('GOOGLE_SERVICE_ACCOUNT_JSON')!)
59    const { siteUrl, startDate, endDate, dimensions = ['query'], rowLimit = 1000 } = await req.json()
60
61    const accessToken = await getGoogleAccessToken(serviceAccountJson)
62
63    const apiUrl = `https://searchconsole.googleapis.com/webmasters/v3/sites/${encodeURIComponent(siteUrl)}/searchAnalytics/query`
64    const response = await fetch(apiUrl, {
65      method: 'POST',
66      headers: {
67        'Authorization': `Bearer ${accessToken}`,
68        'Content-Type': 'application/json',
69      },
70      body: JSON.stringify({ startDate, endDate, dimensions, rowLimit }),
71    })
72
73    const data = await response.json()
74    return new Response(JSON.stringify(data), {
75      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
76    })
77  } catch (error) {
78    return new Response(
79      JSON.stringify({ error: error.message }),
80      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
81    )
82  }
83})

With the Edge Function deployed, use Lovable's chat to build the dashboard UI. The core interaction is: user selects a date range and dimension (queries, pages, devices, or countries), the frontend calls the gsc-proxy Edge Function via a POST request with the appropriate parameters, and the results are displayed in a sortable table with metric cards for totals. Ask Lovable to create a dashboard page with a date range picker (using shadcn/ui's DatePicker or a simple two-input date range), dimension tabs (Queries, Pages, Devices, Countries), a summary bar with total clicks, impressions, average CTR, and average position, and a data table with sortable columns. The table rows come from the Search Analytics API response's rows array, where each row has keys (the dimension values) and clicks, impressions, ctr, and position fields. The siteUrl parameter should come from a configuration field or environment variable so the dashboard works for any verified property.