An Integration Guide for Next.js Apps

Intro

Building a single 3rd-party integration into your app is easy. Building, maintaining and scaling a dozen is not. This post will show you how you can build dozens of realtime, native integrations into your React app using IntegrationOS – a comprehensive integration management platform.

With IntegrationOS you can ship CRM, Accounting & ERP, eCommerce, generative AI and ticketing integrations. Our catalog is growing quickly and we’re looking to get feedback on which other apps/categories to support.

Disclaimer: I am one of the co-founders of IntegrationOS.

Last week, we soft launched two new products: AuthKit and Unified API. Also excited to share IntegrationOS supports individual developers and small teams to host an unlimited amount of integrations with up to 20 connected accounts for free (read more here).

The IntegrationOS core is built in Rust, which means reads and writes are super fast. Our average latency is 360ms at time of writing. Rust also makes it super cost efficient to run at scale.

In exchange we ask for product feedback – join our new community Discord.

You can also read more about IntegrationOS vs. Merge.

Watch a short demo (5 min)

Here’s a walkthrough showing how to use IntegrationOS with Next.js App Router.

https://www.youtube.com/watch?v=arfK4sjNfPc

Before getting started

To get the most out of this guide, you’ll need:

1. An IntegrationOS account
2. Your IntegrationOS API Key

Step 1: Backend – Create secure tokens

First, we’ll add an endpoint to our backend that’ll let us generate secure tokens for our frontend component.

Install the SDK
To make this easy, IntegrationOS offers native SDKs in several popular programming languages. This guide will use the popular AuthKit SDK for Node.js.

npm install @integrationos/authkit-node

Set Secrets
To make calls to IntegrationOS, provide your API key. Store these values as managed secrets and pass them to the SDKs either as environment variables or directly in your app’s configuration depending on your preferences.

INTEGRATIONOS_SANDBOX_API_KEY='sk_test_example_123456789'
INTEGRATIONOS_PRODUCTION_API_KEY='sk_live_example_123456789'

Create a token endpoint
Next, we’ll need to add the token endpoint which will exchange the authorization token (valid for 10 minutes) for an authenticated Connected Account.

import { AuthKitToken } from "@integrationos/authkit-node";

export async function POST(req: NextRequest) {
  const authKitToken = new AuthKitToken(process.env.INTEGRATIONOS_SANDBOX_API_KEY as string);

// Specifying how the token will be constructed  
  const token = await authKitToken.create({
    group: "org_123", // a meaningful identifier (i.e., organizationId)
    label: "Acme" // a human-friendly label (i.e., organizationName)
  });

  return NextResponse.json(token);

}

Step 2: Frontend – Make AuthKit appear

Next, we’ll add the AuthKit component to your frontend application.

Install the SDK
In the same fashion, IntegrationOS offers native frontend SDKs in several popular frameworks. This guide will use the popular AuthKit SDK for React.

npm install @integrationos/authkit-react

Use the AuthKit Component

import { useAuthKit } from "@integrationos/authkit-react";

const { open } = useAuthKit({
  token: {
    url: "https://api.your-company-name.com/authkit-token",
    headers: {},
  },
  onSuccess: (connections) => {},
  onError: (error) => {},
  onClose: () => {},
});

It returns an object with the open function. Calling the open function will launch the AuthKit modal, display the Consent Pane view and start the authentication flow for the user. Calling the close function will close the AuthKit modal.

Launch the AuthKit flow
With your client and server setup complete, you can now test the authentication flow by calling open().

<button onClick={open}>Add new integration</button>

This will open the AuthKit modal so your user can:

1. Select an integration to connect
2. Be guided through the authentication flow
3. Authorize data access

Once the flow is completed, AuthKit will return a Connection object to your onSuccess callback. Each connection object contains metadata about the connected account and can be used to make API requests.

Helpful Resources

Conclusion

In 2024, integrating 3rd-party tools to satisfy a growing user base should not be a hassle.

IntegrationOS is looking to remove the pain surrounding integrations so developers can get back to what’s important, instead of wasting time wrestling UI libraries, parsing through endless API docs and repeatedly building things like authentication.

Give it a try now and leave me your feedback in the comments

Happy coding