The File Picker arrived!Why Portman Helps with API Testing.

Search docs

React Vault

React Vault is an NPM package that allows you to embed Apideck Vault into your React application. You can easily let your users authorize and manage integration settings. It makes credential handling more secure and seamless.

This guide will get you up and running with the React Vault component. To get started, follow these 3 steps:

Step 1: Setup Apideck

Create an account

If you haven't already, head over to our Signup page and create an account. Choose an application name and a subdomain. Afterward, you will be redirected to the Apideck dashboard.

Enable Unified APIs and connectors

Go to the Unified APIs page in the Apideck dashboard. Choose one or more Unified APIs to enable. You'll see a list of the available connectors for each Unified API. Choose a couple of connectors to enable. The Unified APIs and connectors you select become available to your users in Vault.

Get your API key and Application ID

Go to the API Keys page in the Apideck dashboard. Copy your application ID and API key. If your API key ever gets compromised, you can regenerate it on this page.

API keys overview
API keys overview

Step 2: Create a session

Vault lets your users (called consumers in Apideck) easily connect and configure integrations. You can create a consumer through a Vault session through the following endpoint https://developers.apideck.com/apis/vault/reference#tag/Sessions.

Most of the time, this is an ID of your internal data model that represents a user or account in your system. E.g., account:12345. If the consumer doesn't exist yet, Vault will upsert a consumer based on your ID.

Use the API call below to create a session for a consumer. This will return a Vault URL that you forward to a consumer to connect integrations.

terminal
curl --request POST \
  --url 'https://unify.apideck.com/vault/sessions' \
  --header 'Authorization: Bearer {API_KEY}' \
  --header 'x-apideck-app-id: {APP_ID}' \
  --header 'x-apideck-consumer-id: {CONSUMER_ID}' \

You can also use our Node SDK to create a session.

terminal
yarn add @apideck/node

Below is an example of creating a Serverless Function to create a session inside a Next.js project:

/api/vault/sessions.ts
import { VercelRequest, VercelResponse } from '@vercel/node'
import { Apideck } from '@apideck/node'

const createSession = async (_: VercelRequest, res: VercelResponse) => {
  const apideck = new Apideck({
    apiKey: `${process.env.NEXT_PUBLIC_API_KEY}`,
    appId: `${process.env.NEXT_PUBLIC_APP_ID}`,
    consumerId: 'test-consumer'
  })
  const settings = {}
  const { data } = await apideck.vault.sessionsCreate(settings)

  res.json(data)
}

export default createSession

The returned data object will include the session_token that you can use pass as the jwt prop to the Vault component. It also includes a session_uri, which is a link to the Hosted Vault application. You can use this link if you don't want to use react-vault and redirect the user to the hosted solution.

Step 3: Add React Vault

React Vault lets your users authorize connectors and manage integration settings. It stores the credentials securely and lets you make authorized API calls on your consumers` (users) behalf. To get started, install the component using NPM or Yarn.

terminal
yarn add @apideck/react-vault

Next, pass the JSON Web Token to the Vault component.

MyComponent.js
import { Vault } from '@apideck/react-vault'
import '@apideck/react-vault/dist/styles.css' // If not using Tailwind CSS

const MyComponent = () => {
  return <Vault token="REPLACE_WITH_SESSION_TOKEN" trigger={<button>Open Vault</button>} />
}

If you want to scope the connection results to a single Unified API, you can do that by giving the unifiedApi prop. If you want to open Vault for only a single connector, you should also provide the serviceId.

SingleConnection.js
import { Vault } from '@apideck/react-vault'

const MyComponent = () => {
  return (
    <Vault
      token="REPLACE_WITH_SESSION_TOKEN"
      unifiedApi="accounting"
      serviceId="quickbooks"
      trigger={<button>Open Vault</button>}
    />
  )
}

export default MyComponent

If you want to manually control the opening and closing of the modal, you can provide the open and onClose props.

ProgramaticlyControl.js
import { Button } from '@apideck/components'
import { Vault } from '@apideck/react-vault'
import { useState } from 'react'

const VaultButton = ({ token }) => {
  const [openVault, setOpenVault] = useState(false)

  const toggleVault = () => {
    setOpenVault(!openVault)
  }

  return (
    <div className="flex items-center space-x-3">
      <Button text="Open Vault" onClick={toggleVault} />
      <Vault token={token} open={openVault} onClose={toggleVault} />
    </div>
  )
}

export default VaultButton

The Vault modal is styled using Tailwind CSS. If you were to use the Vault component in a project that also uses Tailwind CSS, you can omit the CSS file import, and include the package path in the config file. Doing this will tell Tailwind to scan the package and include the needed styles in your bundle and you won't have duplicates in your CSS.

tailwind.config.js
module.exports = {
  content: [
    './node_modules/@apideck/react-vault/**/*.js',
  ],
  ...
}

Demo

The code block below shows a quick demo on how you could use the Vault component. Click the button to execute the code that's shown below.

Loading

Properties

PropertyTypeRequiredDefaultDescription
tokenstringtrue-The JSON Web Token returned from the Create Session call
onCloseeventfalse-Function that gets called when the modal is closing
openbooleanfalsefalseOpens the Vault modal if set to true
unifiedApistringfalse-When unifiedApi is provided it will scope the connection results to that API. If also a serviceId is provided Vault opens for a single connection
serviceIdstringfalse-When unifiedApi and serviceId are provided Vault opens a single connection
triggerelementfalse-A component or element that should trigger the Vault modal on click