How to Integrate Lovable with Ahrefs

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') {
10    return new Response('ok', { headers: corsHeaders })
11  }
12
13  try {
14    const apiToken = Deno.env.get('AHREFS_API_TOKEN')
15    if (!apiToken) {
16      return new Response(
17        JSON.stringify({ error: 'AHREFS_API_TOKEN secret not configured' }),
18        { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
19      )
20    }
21
22    const url = new URL(req.url)
23    const target = url.searchParams.get('target')
24    const endpoint = url.searchParams.get('endpoint')
25
26    if (!target || !endpoint) {
27      return new Response(
28        JSON.stringify({ error: 'target and endpoint query parameters are required' }),
29        { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
30      )
31    }
32
33    // Build Ahrefs API URL, forwarding all query params except 'endpoint'
34    const ahrefsUrl = new URL(`https://api.ahrefs.com/v3/${endpoint}`)
35    url.searchParams.forEach((value, key) => {
36      if (key !== 'endpoint') {
37        ahrefsUrl.searchParams.set(key, value)
38      }
39    })
40
41    const response = await fetch(ahrefsUrl.toString(), {
42      headers: {
43        'Authorization': `Bearer ${apiToken}`,
44        'Content-Type': 'application/json',
45      },
46    })
47
48    const data = await response.json()
49
50    if (!response.ok) {
51      return new Response(
52        JSON.stringify({ error: 'Ahrefs API error', details: data }),
53        { status: response.status, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
54      )
55    }
56
57    return new Response(
58      JSON.stringify(data),
59      { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
60    )
61  } catch (error) {
62    return new Response(
63      JSON.stringify({ error: 'Internal server error', message: error.message }),
64      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
65    )
66  }
67})

1import { useState } from 'react'
2import { supabase } from '@/integrations/supabase/client'
3import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
4import { Input } from '@/components/ui/input'
5import { Button } from '@/components/ui/button'
6import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
7
8export default function AhrefsDashboard() {
9  const [domain, setDomain] = useState('')
10  const [loading, setLoading] = useState(false)
11  const [data, setData] = useState<any>(null)
12  const [error, setError] = useState<string | null>(null)
13
14  const fetchBacklinks = async () => {
15    if (!domain) return
16    setLoading(true)
17    setError(null)
18    try {
19      const { data: result, error: fnError } = await supabase.functions.invoke('ahrefs-proxy', {
20        body: null,
21        headers: {},
22      })
23      // Use fetch directly with query params
24      const response = await fetch(
25        `/functions/v1/ahrefs-proxy?endpoint=site-explorer%2Freferring-domains&target=${encodeURIComponent(domain)}&limit=50&select=domain,domain_rating,backlinks,first_seen`
26      )
27      if (!response.ok) throw new Error('Failed to fetch Ahrefs data')
28      const json = await response.json()
29      setData(json)
30    } catch (err: any) {
31      setError(err.message)
32    } finally {
33      setLoading(false)
34    }
35  }
36
37  return (
38    <div className="p-6 max-w-4xl mx-auto">
39      <h1 className="text-2xl font-bold mb-6">Backlink Monitor</h1>
40      <div className="flex gap-2 mb-6">
41        <Input
42          placeholder="Enter domain (e.g. example.com)"
43          value={domain}
44          onChange={(e) => setDomain(e.target.value)}
45          onKeyDown={(e) => e.key === 'Enter' && fetchBacklinks()}
46        />
47        <Button onClick={fetchBacklinks} disabled={loading}>
48          {loading ? 'Loading...' : 'Analyze'}
49        </Button>
50      </div>
51      {error && <p className="text-red-500 mb-4">{error}</p>}
52      {data && (
53        <Card>
54          <CardHeader>
55            <CardTitle>Referring Domains for {domain}</CardTitle>
56          </CardHeader>
57          <CardContent>
58            <Table>
59              <TableHeader>
60                <TableRow>
61                  <TableHead>Domain</TableHead>
62                  <TableHead>DR</TableHead>
63                  <TableHead>Backlinks</TableHead>
64                </TableRow>
65              </TableHeader>
66              <TableBody>
67                {(data.refdomains || []).map((row: any) => (
68                  <TableRow key={row.domain}>
69                    <TableCell>{row.domain}</TableCell>
70                    <TableCell>{row.domain_rating}</TableCell>
71                    <TableCell>{row.backlinks}</TableCell>
72                  </TableRow>
73                ))}
74              </TableBody>
75            </Table>
76          </CardContent>
77        </Card>
78      )}
79    </div>
80  )
81}

1import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
2import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'
3
4const corsHeaders = {
5  'Access-Control-Allow-Origin': '*',
6  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
7}
8
9serve(async (req) => {
10  if (req.method === 'OPTIONS') {
11    return new Response('ok', { headers: corsHeaders })
12  }
13
14  const apiToken = Deno.env.get('AHREFS_API_TOKEN')
15  const supabaseUrl = Deno.env.get('SUPABASE_URL')!
16  const supabaseKey = Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!
17  const supabase = createClient(supabaseUrl, supabaseKey)
18
19  const url = new URL(req.url)
20  const target = url.searchParams.get('target')
21  const endpoint = url.searchParams.get('endpoint')
22
23  if (!target || !endpoint || !apiToken) {
24    return new Response(
25      JSON.stringify({ error: 'Missing required parameters or secrets' }),
26      { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
27    )
28  }
29
30  // Check cache (24-hour TTL)
31  const { data: cached } = await supabase
32    .from('ahrefs_cache')
33    .select('data')
34    .eq('domain', target)
35    .eq('endpoint', endpoint)
36    .gt('created_at', new Date(Date.now() - 86400000).toISOString())
37    .single()
38
39  if (cached) {
40    return new Response(
41      JSON.stringify({ ...cached.data, _cached: true }),
42      { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
43    )
44  }
45
46  // Cache miss — call Ahrefs API
47  const ahrefsUrl = new URL(`https://api.ahrefs.com/v3/${endpoint}`)
48  url.searchParams.forEach((value, key) => {
49    if (key !== 'endpoint') ahrefsUrl.searchParams.set(key, value)
50  })
51
52  const response = await fetch(ahrefsUrl.toString(), {
53    headers: { 'Authorization': `Bearer ${apiToken}` },
54  })
55  const data = await response.json()
56
57  // Store in cache
58  await supabase.from('ahrefs_cache').upsert({
59    domain: target,
60    endpoint,
61    data,
62    created_at: new Date().toISOString(),
63  }, { onConflict: 'domain,endpoint' })
64
65  return new Response(
66    JSON.stringify(data),
67    { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
68  )
69})