How to Integrate Lovable with AWeber

AWeber uses OAuth2 for API authentication. For a server-side Lovable integration, you need to register an application and generate an access token that your Edge Function will use as a Bearer token. Step 1 — Register an application: go to labs.aweber.com and log in with your AWeber account. Click 'Get API Access' or navigate to My Apps. Click 'Create a New App'. Fill in the application name (e.g., 'Lovable Integration'), description, and website URL. For the OAuth callback URL, enter any valid URL (e.g., https://localhost:3000) — you won't use the callback flow for this server-side integration. Submit the form. AWeber shows you your Consumer Key (Client ID) and Consumer Secret. Step 2 — Generate an authorization token: in the AWeber developer labs, find the OAuth 2.0 Authorization section. AWeber provides a way to generate an access token directly. The easiest approach is to use AWeber's authorization endpoint with your credentials to get an access token. Note that AWeber's OAuth2 tokens expire after 3600 seconds (1 hour) by default, but you receive a refresh token that can be used to get new access tokens. For a Lovable integration, you should store both the access token and refresh token, and implement token refresh in your Edge Function. Step 3 — Find your Account ID and List ID: once logged in to AWeber, the Account ID appears in the URL when you navigate to your account settings or can be retrieved via GET https://api.aweber.com/1.0/accounts. The List ID appears in your list management URL. Note both values — they are numeric strings. Storing the refresh token alongside the access token in secrets is important for a production integration, as access tokens expire hourly. The Edge Function can use the refresh token to get a new access token when the current one expires.

Store your AWeber credentials in Lovable's Cloud Secrets panel. In your Lovable project, click the '+' icon at the top of the editor to open the Cloud panel. Click the 'Secrets' tab and add the following secrets. First secret — Name: AWEBER_ACCESS_TOKEN, Value: your current OAuth2 access token. This is a Bearer token used in the Authorization header. Second secret — Name: AWEBER_REFRESH_TOKEN, Value: your OAuth2 refresh token. Used to generate new access tokens when the current one expires (every hour). Third secret — Name: AWEBER_CLIENT_ID, Value: your AWeber application's Consumer Key. Used in the token refresh request. Fourth secret — Name: AWEBER_CLIENT_SECRET, Value: your AWeber application's Consumer Secret. Used in the token refresh request. Fifth secret — Name: AWEBER_ACCOUNT_ID, Value: your numeric AWeber account ID. Used in the API endpoint URL path. Sixth secret — Name: AWEBER_LIST_ID, Value: your AWeber list ID (numeric). Used in the subscriber endpoint URL. AWeber's OAuth2 architecture is more complex than API key authentication, but the additional complexity of refresh tokens is necessary for a robust production integration. The Edge Function in the next step handles token refresh automatically when it encounters a 401 response.

Create the Edge Function that adds subscribers to AWeber with automatic access token refresh. The AWeber API v1 subscriber endpoint is POST https://api.aweber.com/1.0/accounts/{accountId}/lists/{listId}/subscribers. The subscriber payload requires email and can include name (full name as a single string, or first_name and last_name separately), tags (a comma-separated string in AWeber's format or an array depending on the API version), and any custom fields you have configured on your AWeber list. AWeber custom fields are configured in the AWeber interface under List Settings → Custom Fields before they can be passed via the API. Token refresh logic: when AWeber returns 401, the Edge Function calls the AWeber token endpoint (POST https://auth.aweber.com/oauth2/token) with the grant_type=refresh_token, the stored refresh token, and the client credentials. The response contains a new access token to use for the retry. In production, you would also update the stored access token in Cloud → Secrets — however, since Edge Functions cannot write back to secrets, a practical approach is to store the refresh token and perform refresh on every request rather than caching the access token between calls. This is slightly inefficient but reliable. AWeber returns 201 Created for successful subscriber additions and handles duplicate emails by updating the existing subscriber record.

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 refreshAWeberToken(clientId: string, clientSecret: string, refreshToken: string): Promise<string> {
9  const res = await fetch('https://auth.aweber.com/oauth2/token', {
10    method: 'POST',
11    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
12    body: new URLSearchParams({
13      grant_type: 'refresh_token',
14      refresh_token: refreshToken,
15      client_id: clientId,
16      client_secret: clientSecret,
17    }),
18  })
19  if (!res.ok) {
20    const err = await res.json().catch(() => ({}))
21    throw new Error(`AWeber token refresh failed: ${JSON.stringify(err)}`)
22  }
23  const data = await res.json()
24  return data.access_token
25}
26
27async function addSubscriber(accountId: string, listId: string, accessToken: string, payload: Record<string, unknown>) {
28  return fetch(
29    `https://api.aweber.com/1.0/accounts/${accountId}/lists/${listId}/subscribers`,
30    {
31      method: 'POST',
32      headers: {
33        Authorization: `Bearer ${accessToken}`,
34        'Content-Type': 'application/x-www-form-urlencoded',
35      },
36      body: new URLSearchParams(payload as Record<string, string>),
37    }
38  )
39}
40
41serve(async (req) => {
42  if (req.method === 'OPTIONS') {
43    return new Response('ok', { headers: corsHeaders })
44  }
45
46  try {
47    const { email, name = '', tags = [] } = await req.json()
48
49    const accessToken = Deno.env.get('AWEBER_ACCESS_TOKEN')
50    const refreshToken = Deno.env.get('AWEBER_REFRESH_TOKEN')
51    const clientId = Deno.env.get('AWEBER_CLIENT_ID')
52    const clientSecret = Deno.env.get('AWEBER_CLIENT_SECRET')
53    const accountId = Deno.env.get('AWEBER_ACCOUNT_ID')
54    const listId = Deno.env.get('AWEBER_LIST_ID')
55
56    if (!accessToken || !refreshToken || !clientId || !clientSecret || !accountId || !listId) {
57      throw new Error('Missing AWeber secrets — check all 6 required secrets in Cloud → Secrets')
58    }
59    if (!email) throw new Error('email is required')
60
61    const payload: Record<string, string> = {
62      email,
63      name,
64    }
65    if (tags.length > 0) payload.tags = tags.join(',')
66
67    let res = await addSubscriber(accountId, listId, accessToken, payload)
68
69    // If 401, try refreshing the token once
70    if (res.status === 401) {
71      const newToken = await refreshAWeberToken(clientId, clientSecret, refreshToken)
72      res = await addSubscriber(accountId, listId, newToken, payload)
73    }
74
75    if (!res.ok) {
76      const errorData = await res.json().catch(() => ({}))
77      throw new Error(`AWeber API error ${res.status}: ${JSON.stringify(errorData)}`)
78    }
79
80    return new Response(
81      JSON.stringify({ success: true, message: 'Subscriber added to AWeber list' }),
82      { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
83    )
84  } catch (error) {
85    return new Response(
86      JSON.stringify({ error: error.message }),
87      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
88    )
89  }
90})

With the Edge Function deployed, connect your Lovable frontend to AWeber using supabase.functions.invoke(). AWeber is commonly used for newsletter and content marketing list building, so the form should be simple and focused on capturing email and name. Tag-based segmentation is AWeber's primary way to organize subscribers who come from different sources or express different interests. When building forms for multiple use cases — a general newsletter form, a free download opt-in, a waitlist form — pass different tags from each form to segment subscribers from the start. In AWeber, you can then create segments based on tags and send targeted broadcasts to each segment. The form success state should set clear expectations about what the subscriber will receive. For autoresponder sequences, mention when the first email will arrive ('Check your inbox for a welcome email within the next few minutes'). For broadcast-only lists, mention the sending frequency ('We send one newsletter per week'). For compliance, include a brief description of what subscribers are opting in to receive, and optionally a link to your privacy policy. AWeber handles unsubscribe links in all emails automatically, but the opt-in form should also communicate the unsubscribe option.

1import { useState } from 'react'
2import { supabase } from '@/lib/supabase'
3import { Button } from '@/components/ui/button'
4import { Input } from '@/components/ui/input'
5import { Label } from '@/components/ui/label'
6import { toast } from '@/components/ui/use-toast'
7
8export const AWeberSignup = () => {
9  const [email, setEmail] = useState('')
10  const [name, setName] = useState('')
11  const [loading, setLoading] = useState(false)
12  const [success, setSuccess] = useState(false)
13
14  const handleSubmit = async (e: React.FormEvent) => {
15    e.preventDefault()
16    setLoading(true)
17    try {
18      const { error } = await supabase.functions.invoke('aweber-subscribe', {
19        body: { email, name, tags: ['homepage-signup'] },
20      })
21      if (error) throw error
22      setSuccess(true)
23    } catch (err) {
24      toast({
25        title: 'Could not subscribe right now',
26        description: 'Please try again or email us directly.',
27        variant: 'destructive',
28      })
29    } finally {
30      setLoading(false)
31    }
32  }
33
34  if (success) {
35    return (
36      <div className="py-6 text-center space-y-2">
37        <p className="font-semibold">Welcome to the list!</p>
38        <p className="text-muted-foreground text-sm">Check your inbox for your first email.</p>
39      </div>
40    )
41  }
42
43  return (
44    <form onSubmit={handleSubmit} className="space-y-3 max-w-sm">
45      <div>
46        <Label htmlFor="name">Name</Label>
47        <Input id="name" value={name} onChange={(e) => setName(e.target.value)} placeholder="Your name" />
48      </div>
49      <div>
50        <Label htmlFor="email">Email *</Label>
51        <Input id="email" type="email" required value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@example.com" />
52      </div>
53      <Button type="submit" disabled={loading} className="w-full">
54        {loading ? 'Signing up...' : 'Subscribe'}
55      </Button>
56      <p className="text-xs text-muted-foreground">We respect your privacy. Unsubscribe anytime.</p>
57    </form>
58  )
59}