How to Integrate Bolt.new with AWeber

AWeber's REST API uses OAuth 2.0 for all authentication. Start by creating a developer app at labs.aweber.com/apps (you'll need to be logged in to your AWeber account). Click 'Create an App', fill in the app name and description, and enter your redirect URL. For development, you can use a placeholder redirect URL like https://your-app.netlify.app/api/aweber/callback — update it after deploying. Once the app is created, you'll receive a Client ID and Client Secret. Store these in your .env file as AWEBER_CLIENT_ID and AWEBER_CLIENT_SECRET. AWeber uses the Authorization Code OAuth 2.0 flow — your app redirects users to AWeber's authorization page, AWeber sends an authorization code to your callback URL, and your callback exchanges it for an access token and refresh token. For integrations where you're connecting your own AWeber account (not your users' accounts), you can manually complete the OAuth flow once and save the access token as AWEBER_ACCESS_TOKEN — this token can be refreshed automatically. AWeber's access tokens expire after one hour; refresh tokens are valid for much longer. Implement token refresh logic in your API routes: if an API call returns 401, use the refresh token to obtain a new access token before retrying. Your AWeber Account ID is visible in the AWeber Dashboard URL when logged in: app.aweber.com/accounts/{account_id}/. Your List ID is found in List Options → Settings for each list.

1// lib/aweber.ts
2interface TokenCache {
3  accessToken: string;
4  expiresAt: number;
5}
6
7let tokenCache: TokenCache | null = null;
8
9async function getAccessToken(): Promise<string> {
10  // Return cached token if still valid (with 5 min buffer)
11  if (tokenCache && Date.now() < tokenCache.expiresAt - 300000) {
12    return tokenCache.accessToken;
13  }
14
15  // Refresh the token
16  const params = new URLSearchParams({
17    grant_type: 'refresh_token',
18    refresh_token: process.env.AWEBER_REFRESH_TOKEN!,
19    client_id: process.env.AWEBER_CLIENT_ID!,
20    client_secret: process.env.AWEBER_CLIENT_SECRET!,
21  });
22
23  const res = await fetch('https://auth.aweber.com/oauth2/token', {
24    method: 'POST',
25    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
26    body: params.toString(),
27  });
28
29  if (!res.ok) {
30    throw new Error(`AWeber token refresh failed: ${res.statusText}`);
31  }
32
33  const data = await res.json();
34  tokenCache = {
35    accessToken: data.access_token,
36    expiresAt: Date.now() + data.expires_in * 1000,
37  };
38
39  return data.access_token;
40}
41
42export async function aweberRequest<T>(
43  path: string,
44  method: string = 'GET',
45  body?: Record<string, unknown>
46): Promise<T> {
47  const token = await getAccessToken();
48  const res = await fetch(`https://api.aweber.com/1.0/${path}`, {
49    method,
50    headers: {
51      Authorization: `Bearer ${token}`,
52      'Content-Type': 'application/json',
53      Accept: 'application/json',
54    },
55    ...(body ? { body: JSON.stringify(body) } : {}),
56  });
57
58  if (!res.ok) {
59    throw new Error(`AWeber API error ${res.status}: ${await res.text()}`);
60  }
61
62  return res.json();
63}
64
65export async function addSubscriber(email: string, name?: string, listId?: string) {
66  const accountId = process.env.AWEBER_ACCOUNT_ID;
67  const targetListId = listId || process.env.AWEBER_LIST_ID;
68  return aweberRequest(
69    `accounts/${accountId}/lists/${targetListId}/subscribers`,
70    'POST',
71    { email, name: name || '', ad_tracking: 'bolt-app', status: 'subscribed' }
72  );
73}

With AWeber authentication ready, build the email capture form and the API route that handles subscriptions. The form should be simple but effective — typically an email field, optional name field, and a clear call-to-action button. Add client-side validation for email format before submitting to the API. The API route calls AWeber's subscriber creation endpoint, which either creates a new subscriber or updates an existing one if the email is already in the list. AWeber handles the double opt-in confirmation email automatically based on your list's settings — if double opt-in is enabled (recommended for list quality), the subscriber receives a confirmation email and is only added to the active subscriber count after clicking the link. The API route should handle the common error cases gracefully: duplicate email (AWeber returns an error when the email already exists with the same status — handle this as a success since the subscriber is already on the list), invalid email format, and API authentication errors. Add a rate limiting consideration: if your signup form is on a high-traffic page, implement basic request rate limiting on the API route to prevent abuse. For the form UI, a common pattern is a simple inline form in the hero section (email input + button on the same line for desktop, stacked for mobile). After a successful subscription, update the button to show 'Subscribed!' with a checkmark and disable the form to prevent duplicate submissions. Track signup sources using AWeber's ad_tracking field — set it to a string identifying where the subscriber signed up (e.g., 'blog-header-form', 'homepage-footer', 'exit-intent-popup') so you can see which forms drive the most subscriptions in AWeber's analytics.

1// app/api/aweber/subscribe/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { addSubscriber } from '@/lib/aweber';
4
5export async function POST(request: NextRequest) {
6  const { email, first_name, source } = await request.json();
7
8  // Email validation
9  if (!email || !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) {
10    return NextResponse.json({ error: 'Please enter a valid email address' }, { status: 400 });
11  }
12
13  try {
14    await addSubscriber(
15      email,
16      first_name || '',
17      process.env.AWEBER_LIST_ID
18    );
19
20    return NextResponse.json({ success: true });
21  } catch (error) {
22    const errorMessage = String(error);
23
24    // Handle 'already subscribed' as success
25    if (errorMessage.includes('already subscribed') || errorMessage.includes('duplicate')) {
26      return NextResponse.json({ success: true });
27    }
28
29    console.error('AWeber subscribe error:', error);
30    return NextResponse.json(
31      { error: 'Failed to subscribe. Please try again.' },
32      { status: 500 }
33    );
34  }
35}

If you're building an app where users connect their own AWeber accounts (rather than using your own account credentials), you need to implement the full OAuth 2.0 web server flow with a browser redirect. This requires a deployed Bolt app with a stable callback URL — the WebContainer preview's dynamic URL cannot be registered as an OAuth redirect URI in AWeber's developer portal. Deploy to Netlify or Bolt Cloud first to get a stable URL (e.g., https://your-app.netlify.app), then update the redirect URL in your AWeber developer app settings to https://your-app.netlify.app/api/aweber/callback. The OAuth flow has three steps: your app redirects the user to AWeber's authorization URL (https://auth.aweber.com/oauth2/authorize) with your Client ID, requested scopes, and callback URL as query parameters. The user logs in to AWeber and grants your app permission to access their account. AWeber redirects back to your callback URL with an authorization code. Your callback exchanges the code for an access token and refresh token via POST to https://auth.aweber.com/oauth2/token. Store both tokens per user (in Supabase, associated with their account in your app). Include a CSRF protection state parameter in the authorization URL and verify it in the callback to prevent cross-site request forgery. AWeber's required scopes for list management are: subscriber.read, subscriber.write, list.read. Request the minimum scopes needed for your use case — users see the requested permissions on the authorization screen.

1// app/api/aweber/callback/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4export async function GET(request: NextRequest) {
5  const { searchParams } = new URL(request.url);
6  const code = searchParams.get('code');
7  const state = searchParams.get('state');
8  const stateCookie = request.cookies.get('aweber_oauth_state')?.value;
9
10  // CSRF protection: verify state matches
11  if (!state || state !== stateCookie) {
12    return NextResponse.redirect(new URL('/settings?error=invalid_state', request.url));
13  }
14
15  if (!code) {
16    return NextResponse.redirect(new URL('/settings?error=no_code', request.url));
17  }
18
19  const params = new URLSearchParams({
20    grant_type: 'authorization_code',
21    code,
22    client_id: process.env.AWEBER_CLIENT_ID!,
23    client_secret: process.env.AWEBER_CLIENT_SECRET!,
24    redirect_uri: `${process.env.APP_URL}/api/aweber/callback`,
25  });
26
27  const tokenRes = await fetch('https://auth.aweber.com/oauth2/token', {
28    method: 'POST',
29    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
30    body: params.toString(),
31  });
32
33  if (!tokenRes.ok) {
34    return NextResponse.redirect(new URL('/settings?error=token_failed', request.url));
35  }
36
37  const { access_token, refresh_token } = await tokenRes.json();
38  // Store tokens in your database or secure session
39
40  const response = NextResponse.redirect(new URL('/dashboard', request.url));
41  response.cookies.delete('aweber_oauth_state');
42  return response;
43}

Deploy your Bolt app to access AWeber's analytics endpoints and complete the OAuth setup with your deployed callback URL. Deploy using Bolt's Publish button (deploys to Bolt Cloud) or push to GitHub and connect to Netlify. Set all environment variables on the hosting platform: AWEBER_CLIENT_ID, AWEBER_CLIENT_SECRET, AWEBER_ACCESS_TOKEN, AWEBER_REFRESH_TOKEN, AWEBER_ACCOUNT_ID, and AWEBER_LIST_ID. Update your AWeber developer app's redirect URL to use your deployed domain. Build the analytics dashboard to show list performance: subscriber count over time, recent campaign metrics (open rate, click rate, bounces), and subscriber acquisition by source (using the ad_tracking field data). AWeber's API provides list analytics at /accounts/{account_id}/lists/{list_id} and broadcast (campaign) metrics at /accounts/{account_id}/lists/{list_id}/messages. The broadcast metrics endpoint returns per-email stats: total sent, opens, clicks, unsubscribes, bounces. Display these in a table or card format. For subscriber growth trends, you may need to store historical counts in Supabase since AWeber's API returns current subscriber counts, not historical time series data — record the count daily via a scheduled function or simply on each API call. Remember: AWeber API calls are outbound requests from your server-side routes and work in the WebContainer preview, but the OAuth callback (browser redirect) requires a deployed URL. You can build and test the analytics dashboard in the preview using a static AWEBER_ACCESS_TOKEN, then update the deployed app to use the OAuth-refreshed tokens.

1// app/api/aweber/lists/route.ts
2import { NextResponse } from 'next/server';
3import { aweberRequest } from '@/lib/aweber';
4
5export async function GET() {
6  const accountId = process.env.AWEBER_ACCOUNT_ID;
7
8  try {
9    const data = await aweberRequest<{ entries: unknown[] }>(
10      `accounts/${accountId}/lists`
11    );
12    return NextResponse.json(data);
13  } catch (error) {
14    console.error('AWeber lists fetch error:', error);
15    return NextResponse.json({ error: 'Failed to fetch lists' }, { status: 500 });
16  }
17}
18
19// app/api/aweber/campaigns/route.ts
20import { NextRequest, NextResponse } from 'next/server';
21import { aweberRequest } from '@/lib/aweber';
22
23export async function GET(request: NextRequest) {
24  const { searchParams } = new URL(request.url);
25  const listId = searchParams.get('list_id') || process.env.AWEBER_LIST_ID;
26  const accountId = process.env.AWEBER_ACCOUNT_ID;
27
28  try {
29    const data = await aweberRequest(
30      `accounts/${accountId}/lists/${listId}/messages?ws.size=10&ws.start=0`
31    );
32    return NextResponse.json(data);
33  } catch (error) {
34    return NextResponse.json({ error: 'Failed to fetch campaigns' }, { status: 500 });
35  }
36}