Nango: When Integrations Become Your Product's Superpower

Integrating the World, Without the Pain

If you've built any SaaS product, you know the drill: your users inevitably demand integrations with the other tools in their stack. Salesforce, HubSpot, Slack, Stripe – the list goes on. Each integration is a mini-project in itself: OAuth flows, token refresh, dealing with rate limits, inconsistent APIs, and the perpetual fear of breaking changes. It's a massive drain on engineering resources, and often, you're just rebuilding the same plumbing over and over.

This isn't just about making users happy; it's about product stickiness and data liquidity. When your product plays well with others, it becomes central to your users' workflows. But the cost of entry is high. Nango aims to completely flip this script, providing a universal API layer that handles the messy parts of third-party integrations, letting you focus on the actual value you provide.

Why Nango is More Than Just an SDK

You might be thinking, "another SDK?" But Nango is different. It's an integration platform designed to be embedded directly into your product. It doesn't just give you helper functions; it provides a hosted service that manages the entire lifecycle of an integration:

1. Authentication: Handling OAuth, API keys, and all the various ways services authenticate users.
2. API Normalization: Providing a consistent interface to interact with different services, even if their underlying APIs are wildly different.
3. Data Sync: Managing the fetching and synchronization of data, including handling pagination, rate limits, and webhooks.
4. Security & Reliability: Storing credentials securely and ensuring your integrations stay up and running.

This isn't a replacement for writing your own API client; it's a replacement for writing your own integration platform. The key insight here is that the boilerplate for connecting to external services is remarkably similar across different integrations, even if the data models are unique. Nango abstracts that common plumbing.

Getting Started: The Nango Flow

Let's walk through how you'd integrate Nango into a typical Next.js application to connect to, say, HubSpot. The goal is to allow your users to authorize your application to access their HubSpot data, and then for your backend to make API calls to HubSpot through Nango.

First, you need to set up a new integration in the Nango dashboard. This involves giving it a name (e.g., hubspot), selecting the authentication method (usually OAuth2), and providing the client ID, client secret, and redirect URI from your HubSpot developer account. Nango gives you a NANGO_PUBLIC_KEY and NANGO_SECRET_KEY for your application, which you'll use in your frontend and backend respectively.

Frontend: Initiating the OAuth Flow

On the frontend, when a user wants to connect their HubSpot account, you'll use Nango's client-side SDK to initiate the OAuth flow. This SDK provides a Nango.auth() method that redirects the user to the third-party service's authorization page.

// app/connect-hubspot/page.tsx
'use client';

import { useEffect } from 'react';
import Nango from '@nangohq/frontend';

const nango = new Nango({
  publicKey: process.env.NEXT_PUBLIC_NANGO_PUBLIC_KEY as string,
});

export default function ConnectHubspotPage() {
  useEffect(() => {
    // The 'hubspot' string here refers to the integration ID you configured in Nango dashboard
    // The 'USER_ID_IN_YOUR_APP' is how Nango links this integration instance to your user.
    // Make sure this is a stable, unique ID for your user.
    nango.auth('hubspot', 'USER_ID_IN_YOUR_APP', {
      // Optional: Redirect to a specific URL after successful authorization
      // Nango will append success/error parameters to this URL.
      redirectUri: window.location.origin + '/integrations/hubspot/callback',
    });
  }, []);

  return (
    <div className="flex items-center justify-center min-h-screen">
      <p>Redirecting to HubSpot for authorization...</p>
    </div>
  );
}

After the user authorizes your app on HubSpot's side, Nango handles the callback, exchanges the authorization code for access and refresh tokens, and securely stores them. It then redirects the user back to your specified redirectUri.

Backend: Making API Calls

Now, on your backend, you can make API calls to HubSpot using Nango. The beauty here is that you don't need to worry about managing tokens, refreshing them, or even knowing the specifics of HubSpot's API authentication. You just tell Nango which integration instance to use (identified by your USER_ID_IN_YOUR_APP and the integrationId like hubspot), and Nango takes care of the rest.

// app/api/hubspot/contacts/route.ts
import { NextResponse } from 'next/server';
import Nango from '@nangohq/node';

export async function GET() {
  // In a real app, you'd get the current user's ID from a session or JWT
  const currentUserId = 'USER_ID_IN_YOUR_APP'; // Replace with dynamic user ID

  const nango = new Nango({
    secretKey: process.env.NANGO_SECRET_KEY as string,
  });

  try {
    // Make an API call to HubSpot through Nango.
    // Nango automatically uses the stored credentials for 'currentUserId' and 'hubspot' integration.
    // The 'path' corresponds to the HubSpot API endpoint, e.g., /crm/v3/objects/contacts
    const response = await nango.get({
      integration: 'hubspot', // The integration ID from Nango dashboard
      instanceId: currentUserId, // The unique ID for this user's integration instance
      path: '/crm/v3/objects/contacts',
      query: { limit: 10 }, // Query parameters for the HubSpot API call
    });

    return NextResponse.json(response.data);
  } catch (error) {
    console.error('Error fetching HubSpot contacts:', error);
    return NextResponse.json({ error: 'Failed to fetch contacts' }, { status: 500 });
  }
}

Notice how clean this is. Your backend code doesn't touch any sensitive API keys or refresh tokens directly. It delegates all that complexity to Nango. If HubSpot changes their OAuth flow, Nango's team updates their platform, not yours. This is a huge win for maintainability and security.

The Real Power: Data Sync and Webhooks

Beyond simple proxying, Nango shines with its data synchronization capabilities. For many integrations, you don't just want to make one-off calls; you want a continuous flow of data. Nango allows you to define syncs that pull data from third-party services on a schedule or via webhooks, and then push that data to your own database or a webhook endpoint you control.

Imagine you want to keep your internal CRM updated with new contacts from HubSpot. You can configure a Nango sync to poll HubSpot's contacts endpoint, detect changes, and then send a webhook to your application whenever a new contact is created or updated. This is where Nango moves from being a simple proxy to a full-fledged data pipeline enabler.

// In your Nango dashboard, you'd configure a sync for 'hubspot'
// - Source: HubSpot API (e.g., /crm/v3/objects/contacts)
// - Trigger: Polling every 5 minutes OR a HubSpot webhook
// - Destination: Your application's webhook endpoint (e.g., https://your-app.com/api/webhooks/hubspot)

// Your application's webhook handler (e.g., app/api/webhooks/hubspot/route.ts)
import { NextResponse } from 'next/server';

export async function POST(request: Request) {
  const payload = await request.json();

  // Nango sends a structured payload with 'event', 'integrationId', 'instanceId', 'data', etc.
  const { event, integrationId, instanceId, data } = payload;

  if (event === 'sync.completed' && integrationId === 'hubspot') {
    for (const record of data.newRecords) {
      console.log(`New HubSpot contact for instance ${instanceId}:`, record.properties.email);
      // Process the new contact, save to your database, trigger workflows, etc.
    }
    for (const record of data.updatedRecords) {
      console.log(`Updated HubSpot contact for instance ${instanceId}:`, record.properties.email);
      // Process the updated contact
    }
  }

  return NextResponse.json({ status: 'ok' });
}

This dramatically reduces the complexity of building robust, real-time data flows between your product and dozens of external services. You configure it once in Nango, and it just works.

Trade-offs and Considerations

No tool is a silver bullet. While Nango solves a huge problem, it introduces its own set of considerations:

1. Vendor Lock-in: You're relying on Nango as a critical piece of your infrastructure. Migrating off it for all your integrations would be a significant effort. Evaluate their roadmap and stability carefully.
2. Cost: While Nango offers a generous free tier, as your usage scales, the costs will increase. You need to factor this into your product's economics.
3. Flexibility for Deep Customization: For extremely niche integrations with very specific, non-standard requirements, Nango's abstraction might occasionally get in the way. However, for the vast majority of common SaaS integrations, it provides more than enough flexibility.
4. Learning Curve: While simpler than building from scratch, there's still a learning curve to understand Nango's concepts (integrations, instances, syncs) and how they map to your product's architecture.

For most product teams, the benefits of offloading integration complexity far outweigh these trade-offs. The speed of development and the reliability gains are immense.

Wrapping up

Building integrations isn't just a technical challenge; it's a strategic one. Products that integrate well tend to win. Nango changes the game by treating integrations as a first-class, managed capability rather than a never-ending series of bespoke engineering projects. It frees your team to focus on your core product, while still offering the rich connectivity your users demand.

If you're building a SaaS product that needs to connect to other services, I strongly recommend checking out Nango. Go to NangoHQ.com and try setting up a free account. Pick one of the common integrations like Salesforce or HubSpot, follow their quickstart guide, and see how quickly you can get an OAuth flow and an API call working. You'll be surprised how much boilerplate simply vanishes.