At Pica, we dogfood our own products. AuthKit powers the connection experience in Pica’s dashboard. Create a free account, navigate to the Connected Integrations tab, click the “Add Connection” button, and voilà - you’ll see AuthKit in action!

​
Overview

Think of AuthKit as the “Plaid for integrations”. Implementing authentication flows that handle every possible error state and edge case across multiple integrations can be a daunting task. AuthKit makes this easy by providing a hosted, pre-built, customizable authentication UI with automatic handling of:
  • Secure authentication via OAuth and API Keys
  • Automatic handling of authentication and refresh tokens
  • Self-hosted OAuth apps (using your Client ID and Client Secret)
  • Customizable branding and white labeling

​
Setup

1

Install the AuthKit token generator package

npm install @picahq/authkit-node
2

Set your Pica API key as an environment variable

Navigate to the Pica API keys tab, and create a new API key and set the PICA_SECRET_KEY environment variable to the value of the API key.
3

Create an API endpoint to generate a token

For this example, we’ll use Next.js and create an API endpoint at api/authkit.
import { NextRequest, NextResponse } from "next/server";
import { AuthKitToken } from "@picahq/authkit-node";

const corsHeaders = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "POST, GET, PUT, DELETE, OPTIONS",
  "Access-Control-Allow-Headers": "Content-Type",
};

export async function OPTIONS(req: NextRequest) {
  return NextResponse.json({}, { headers: corsHeaders });
}

export async function POST(req: NextRequest) {
  const authKitToken = new AuthKitToken(process.env.PICA_SECRET_KEY!);
  
  const token = await authKitToken.create({
    identity: "userId", // a meaningful identifier (i.e., userId, teamId or organizationId)
    identityType: "user" // can be either user, team or organization
  });

  // Add CORS headers to the response
  return NextResponse.json(token, {
    headers: corsHeaders,
  });
}
ParameterTypeDescription
identitystringA meaningful identifier for the user, team, or organization that will own the connection (e.g. userId, teamId, organizationId). This label is how you will identify and filter connections.
identityType"user" | "team" | "organization" | "project"Specifies whether the identity represents a user, team, organization, or project
4

Install the AuthKit client package

npm install @picahq/authkit
5

Create a button to open the AuthKit modal

import { useAuthKit } from "@picahq/authkit";

export function AuthKitButton() {
  const { open } = useAuthKit({
    token: {
      url: "http://localhost:3000/api/authkit",
      headers: {},
    },
    onSuccess: (connection) => {
      console.log("Sucessfully created connection: ", connection);
    },
    onError: (error) => {
      console.error("Error creating connection:", error);
    },
    onClose: () => {
      console.log("AuthKit modal closed");
    },
  });

  return (
    <Button onClick={open}>
      Connect Tools
    </Button>
  );
}
6

Enable the integrations you want visible

Navigate to the AuthKit tab, and toggle the integrations you want to enable in the AuthKit modal. For OAuth integrations, you’ll need to provide the Client ID and Client Secret for your app.

Demo

Check out our example Next.js app using AuthKit

​
Making requests to authenticated endpoints

Once you’ve created a connection, you can make requests to the authenticated endpoints of the integration using the Passthrough API or the OneTool SDK based on the connection key.
Need help? Email us at support@picaos.com and we’ll be happy to help you out.