How to Integrate Basecamp with V0

Before writing any code, register your application with 37signals (the company behind Basecamp) at integrate.37signals.com. Click 'Register your application,' fill in your app name, your website URL, and your redirect URI. The redirect URI should be the URL of your Vercel deployment plus /api/basecamp/callback — for example, https://your-app.vercel.app/api/basecamp/callback. For local development, also add http://localhost:3000/api/basecamp/callback as an additional redirect URI. After registering, 37signals provides a Client ID and Client Secret — save both securely. Now open V0 and generate the dashboard UI. Describe the layout, the data you want to display, and the filters you need. Be specific about project cards, to-do list items, and navigation — V0 produces better results with detailed prompts. Push the generated code to GitHub via the V0 Git panel.

The Basecamp API uses OAuth2 with the authorization code flow. This requires two API routes: one that redirects users to Basecamp to authorize your app, and one callback route that exchanges the authorization code for an access token. The Basecamp OAuth endpoints are at launchpad.37signals.com. The authorization URL is https://launchpad.37signals.com/authorization/new and the token exchange endpoint is https://launchpad.37signals.com/authorization/token. After a successful token exchange, Basecamp returns an access token, a refresh token, and a list of the user's accounts (they may belong to multiple Basecamp organizations). Store the access token and refresh token in a secure cookie or server-side session — never in localStorage or a non-HttpOnly cookie. For production apps, use a database like Neon (Vercel Marketplace) to persist tokens across serverless function invocations.

1// app/api/basecamp/auth/route.ts — redirect to Basecamp for authorization
2import { NextResponse } from 'next/server';
3
4export async function GET() {
5  const clientId = process.env.BASECAMP_CLIENT_ID;
6  const redirectUri = process.env.BASECAMP_REDIRECT_URI; // e.g. https://yourapp.vercel.app/api/basecamp/callback
7
8  if (!clientId || !redirectUri) {
9    return NextResponse.json({ error: 'Basecamp OAuth not configured' }, { status: 500 });
10  }
11
12  const authUrl = new URL('https://launchpad.37signals.com/authorization/new');
13  authUrl.searchParams.set('type', 'web_server');
14  authUrl.searchParams.set('client_id', clientId);
15  authUrl.searchParams.set('redirect_uri', redirectUri);
16
17  return NextResponse.redirect(authUrl.toString());
18}

After the user authorizes your app on Basecamp's OAuth page, Basecamp redirects them back to your /api/basecamp/callback route with an authorization code. This callback route exchanges the code for an access token and stores it, then redirects the user to your dashboard. Once you have the access token, create a general Basecamp API proxy route that fetches projects, to-dos, messages, and other resources. All Basecamp API requests must include the Authorization: Bearer header with the access token and a User-Agent header identifying your app (required by 37signals). Add your Vercel environment variables: BASECAMP_CLIENT_ID, BASECAMP_CLIENT_SECRET, and BASECAMP_REDIRECT_URI. For a simpler personal integration, you can skip the full OAuth flow and use a personal access token from Basecamp's profile settings.

1// app/api/basecamp/callback/route.ts — exchange code for token
2import { NextRequest, NextResponse } from 'next/server';
3import { cookies } from 'next/headers';
4
5export async function GET(request: NextRequest) {
6  const { searchParams } = new URL(request.url);
7  const code = searchParams.get('code');
8
9  if (!code) {
10    return NextResponse.json({ error: 'No authorization code received' }, { status: 400 });
11  }
12
13  const tokenResponse = await fetch('https://launchpad.37signals.com/authorization/token', {
14    method: 'POST',
15    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
16    body: new URLSearchParams({
17      type: 'web_server',
18      client_id: process.env.BASECAMP_CLIENT_ID ?? '',
19      client_secret: process.env.BASECAMP_CLIENT_SECRET ?? '',
20      redirect_uri: process.env.BASECAMP_REDIRECT_URI ?? '',
21      code,
22    }),
23  });
24
25  if (!tokenResponse.ok) {
26    return NextResponse.json({ error: 'Token exchange failed' }, { status: 400 });
27  }
28
29  const tokenData = await tokenResponse.json();
30  const cookieStore = cookies();
31  cookieStore.set('basecamp_token', tokenData.access_token, {
32    httpOnly: true,
33    secure: process.env.NODE_ENV === 'production',
34    maxAge: 60 * 60 * 24 * 14, // 14 days
35    path: '/',
36  });
37
38  return NextResponse.redirect(new URL('/dashboard', request.url));
39}

Add all required environment variables to your Vercel project. Open Vercel Dashboard → your project → Settings → Environment Variables and add the following: BASECAMP_CLIENT_ID (from integrate.37signals.com), BASECAMP_CLIENT_SECRET (same source, keep this secret), and BASECAMP_REDIRECT_URI (your Vercel deployment URL + /api/basecamp/callback, e.g. https://your-app.vercel.app/api/basecamp/callback). If you are also adding this redirect URI for preview deployments, you can add a Preview-environment-specific BASECAMP_REDIRECT_URI that uses your Vercel preview URL pattern. After adding the variables, trigger a redeployment. Once deployed, click the 'Connect Basecamp' button (or navigate to /api/basecamp/auth) to test the full OAuth flow. After authorizing, your dashboard should fetch and display your real Basecamp projects and to-dos.

1# .env.local (do NOT commit)
2BASECAMP_CLIENT_ID=your_client_id_here
3BASECAMP_CLIENT_SECRET=your_client_secret_here
4BASECAMP_REDIRECT_URI=http://localhost:3000/api/basecamp/callback