Vault Core

🚨 We recommend using the new @apideck/vault-react package.

A React component to embed Apideck Vault in any React application.

Go to the developer docs for a step-by-step guide.

React Vault | Vault JS | Vue Vault

Usage

Install the packages

npm install @apideck/react-vault

Create a Vault session inside your application to get a JSON Web Token. It's recommended to do this server-side, so you don't expose your API key.

With @apideck/node:

npm install @apideck/node

import { Apideck } from '@apideck/node';

const apideck = new Apideck({
  apiKey: 'REPLACE_WITH_API_KEY',
  appId: 'REPLACE_WITH_APP_ID',
  consumerId: 'REPLACE_WITH_CONSUMER_ID',
});

const { data } = await apideck.vault.sessionsCreate({});

console.log('Token:', data.session_token);

Pass the JSON Web Token to the Vault component:

import { Vault } from '@apideck/react-vault';

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

export default MyComponent;

If you are NOT using Tailwind CSS in your project, make your to include the styles in your project:

import '@apideck/react-vault/dist/styles.css';

If you are using Tailwind CSS you should include the package path in the content path of the tailwind.config.js.

// tailwind.config.js

module.exports = {
  content: ['./node_modules/@apideck/react-vault/**/*.js'],
  plugins: [require('@tailwindcss/forms')]
  ...
}

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.

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.

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;

If you want to open a specific view you can pass the initialView prop. The available views are settings, configurable-resources, and custom-mapping.

import { Vault } from '@apideck/react-vault';

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

export default MyComponent;

If you want to provide a custom logo on top of the modal, you can set the logo property on the theme you can provide through the session. View Vault API documentation.

Properties