An Integration Guide for Next.js Apps
Tags: nextjs, react, programming, javascript
Published: 2024-03-13 21:32:47

## 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](https://www.integrationos.com/) - a comprehensive integration management platform. 

![Logos of many CRM apps](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iyk6m2zf6pqhnlo4mdt6.png)

With IntegrationOS you can ship CRM, Accounting & ERP, eCommerce, generative AI and ticketing integrations. Our [catalog](https://www.integrationos.com/integrations) 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](https://docs.integrationos.com/docs/authkit) and [Unified API](https://docs.integrationos.com/reference/overview). 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](https://www.integrationos.com/blog/introducing-authkit)).

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](https://discord.gg/c5rcPSukgP).

You can also read more about [IntegrationOS vs. Merge](https://www.integrationos.com/blog/announcing-our-new-brand). 

## Watch a short demo (5 min)

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

{% embed https://youtu.be/arfK4sjNfPc %}

## Before getting started
To get the most out of this guide, you'll need:

1. An [IntegrationOS account](https://www.integrationos.com/)
2. Your IntegrationOS [API Key](https://app.integrationos.com/api-keys)

## 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.

```shell
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.

```shell
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.

```javascript
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.

```shell
npm install @integrationos/authkit-react
```
**Use the AuthKit Component**

```react
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().

```react
<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**
- [Full code for Demo App](https://replit.com/@daniel370/Nextjs-App-Router-Demo?v=1)
- [Developer Docs](https://docs.integrationos.com/docs/quickstart)

**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 🔥