How to Integrate Lovable with Moz

Log in to your Moz account at moz.com and navigate to the API section. Go to moz.com/products/api or find the API link in your account dashboard. On the API page, you will see your Access ID (a string that looks like 'mozscape-XXXXXXXX') and your Secret Key (a long alphanumeric string). If you do not see API credentials, you may need to activate API access from your account settings. The free Moz Community plan includes 10 API requests per month. For a production dashboard with regular data refreshes, you will need a Moz Pro subscription, which includes higher API limits. Copy both the Access ID and Secret Key — you will need both to authenticate. The Moz API uses HTTP Basic Auth where the username is your Access ID and the password is your Secret Key.

In your Lovable project, click the plus (+) icon next to the preview to open side panels, then click the Cloud tab. Scroll to the Secrets section and click Add Secret twice, once for each credential. Add MOZ_ACCESS_ID with your Access ID value (the string starting with 'mozscape-'). Add MOZ_SECRET_KEY with your Secret Key value. Click Save after each entry. Both values are now encrypted and accessible only from Edge Functions via Deno.env.get('MOZ_ACCESS_ID') and Deno.env.get('MOZ_SECRET_KEY'). The Edge Function will combine these to create a Basic Auth header by Base64-encoding the string 'AccessID:SecretKey'. Never hardcode these values in application code — Lovable's security system actively flags hardcoded API keys, and the Moz API would be accessible to anyone who obtained them.

Create the Edge Function that authenticates with the Moz API and fetches URL metrics. The Moz Link API v2 uses the endpoint https://lsapi.seomoz.com/v2/url_metrics with a POST body containing an array of URLs to analyze. The authentication is HTTP Basic Auth: Base64-encode the string 'AccessID:SecretKey' and pass it as the Authorization header. The response contains an array of objects with fields including domain_authority, page_authority, spam_score, root_domains_to_root_domain, and total_external_links. The function accepts a POST request from your frontend with a JSON body containing a urls array, builds the Basic Auth header from Cloud Secrets, calls the Moz API, and returns the metrics. The Moz API supports batch lookups of up to 50 URLs per request, making it efficient for competitor comparison dashboards.

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
8serve(async (req) => {
9  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders })
10
11  try {
12    const accessId = Deno.env.get('MOZ_ACCESS_ID')
13    const secretKey = Deno.env.get('MOZ_SECRET_KEY')
14
15    if (!accessId || !secretKey) {
16      return new Response(
17        JSON.stringify({ error: 'MOZ_ACCESS_ID or MOZ_SECRET_KEY not configured' }),
18        { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
19      )
20    }
21
22    const { urls } = await req.json()
23
24    if (!urls || !Array.isArray(urls) || urls.length === 0) {
25      return new Response(
26        JSON.stringify({ error: 'urls array is required' }),
27        { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
28      )
29    }
30
31    // Limit batch size to 50 (Moz API maximum)
32    const batch = urls.slice(0, 50)
33
34    // Create Basic Auth header
35    const credentials = btoa(`${accessId}:${secretKey}`)
36
37    const response = await fetch('https://lsapi.seomoz.com/v2/url_metrics', {
38      method: 'POST',
39      headers: {
40        'Authorization': `Basic ${credentials}`,
41        'Content-Type': 'application/json',
42      },
43      body: JSON.stringify({ targets: batch }),
44    })
45
46    if (!response.ok) {
47      const errorText = await response.text()
48      return new Response(
49        JSON.stringify({ error: 'Moz API error', status: response.status, details: errorText }),
50        { status: response.status, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
51      )
52    }
53
54    const data = await response.json()
55
56    // Map to friendly field names
57    const results = (data.results || []).map((item: any, i: number) => ({
58      url: batch[i],
59      domain_authority: Math.round(item.domain_authority || 0),
60      page_authority: Math.round(item.page_authority || 0),
61      spam_score: Math.round((item.spam_score || 0) * 100),
62      linking_root_domains: item.root_domains_to_root_domain || 0,
63      external_links: item.external_links || 0,
64    }))
65
66    return new Response(
67      JSON.stringify({ results }),
68      { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
69    )
70  } catch (error) {
71    return new Response(
72      JSON.stringify({ error: error.message }),
73      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
74    )
75  }
76})

Build the competitor comparison and monitoring dashboard in Lovable. The primary interface should have a domain input section where users can add domains to a watchlist, a comparison table showing all tracked domains with their current DA, PA, spam score, and linking root domain count, and a detail view for individual domains showing historical DA/PA data from Supabase. Ask Lovable to create a React page that: reads a domains watchlist from a Supabase table (create a simple table called moz_watchlist with domain and notes fields), calls the moz-proxy Edge Function on load to fetch current metrics for all watched domains, displays the results in a sortable table with color-coded quality indicators, stores DA snapshots in a moz_history table for trend tracking, and includes a manual refresh button to fetch updated metrics on demand.