Vault JS

A vanilla JavaScript library to embed Apideck Vault in any web application.

Vault JS | React Vault | Vue Vault

Installation

$3

``sh
npm install @apideck/vault-js
`

$3

If you don't want to set up a build environment, you can get @apideck/vault-js from a CDN like unpkg.com and it will be globally available through the window.ApideckVault object.

`html

`

Prerequisites

Before opening the Vault modal with @apideck/vault-js, you need to create a Vault session from your backend using the Vault API or one of our SDKs. Find out more in the docs.

Usage

Pass the JWT you got from the Vault session to @apideck/vault-js:

`js
import { ApideckVault } from '@apideck/vault-js';

ApideckVault.open({
token: 'REPLACE_WITH_SESSION_TOKEN',
});
`

If you want to only show integrations for a single Unified API, you can do that by passing the unifiedApi option. If you want to open Vault for only a single integration, you can provide the serviceId option.

`js
import { ApideckVault } from '@apideck/vault-js';

ApideckVault.open({
token: 'REPLACE_WITH_SESSION_TOKEN',
unifiedApi: 'accounting',
serviceId: 'quickbooks',
});
`

If you want to get notified when the modal opens and closes, you can provide the onReady and onClose options.

`jsx
import { ApideckVault } from '@apideck/vault-js';

ApideckVault.open({
token: 'REPLACE_WITH_SESSION_TOKEN',
onClose: () => {
console.log('closed!');
},
onReady: () => {
console.log('ready!');
},
});
`

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

`js
import { ApideckVault } from '@apideck/vault-js';

ApideckVault.open({
token: 'REPLACE_WITH_SESSION_TOKEN',
unifiedApi: 'accounting',
serviceId: 'quickbooks',
initialView: 'custom-mapping',
});
`

If you want to open vault in a specific language you can pass a locale. The available locales are en (default), nl, de, fr, and es.

`js
import { ApideckVault } from '@apideck/vault-js';

ApideckVault.open({
token: 'REPLACE_WITH_SESSION_TOKEN',
locale: 'nl',
});
`

You can also show a language switch at the bottom of the modal by setting the showLanguageSwitch property.

`js
import { ApideckVault } from '@apideck/vault-js';

ApideckVault.open({
token: 'REPLACE_WITH_SESSION_TOKEN',
showLanguageSwitch: true,
});
`

If you want to use the button layout instead of the dropdown menu in the TopBar for connection actions, you can set the showButtonLayout property.

`js
import { ApideckVault } from '@apideck/vault-js';

ApideckVault.open({
token: 'REPLACE_WITH_SESSION_TOKEN',
showButtonLayout: true,
});
`

You can also close the modal programmatically by calling ApideckVault.close().

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

$3

| Property | Type | Required | Default | Description |
| ---------------------- | -------------------------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| token | string | true | - | The JSON Web Token returned from the Create Session API |
| showAttribution | boolean | false | true | Show "Powered by Apideck" in the backdrop of the modal backdrop |
| open | () => void | false | - | Function to open the Vault modal |
| close | () => void | false | - | Function to close the Vault modal |
| onReady | () => void | false | - | Function that gets called when the modal is opened |
| onClose | () => void | false | - | Function that gets called when the modal is closed |
| onConnectionChange | (connection: Connection) => void | false | - | Function that gets called when the user updates a connection. This can be linking their account, filling out settings or adding a new connection |
| onConnectionDelete | (connection: Connection) => void | false | - | Function that gets called when the user deletes a connection |
| unifiedApi | string | false | - | When unifiedApi is provided it will only show integrations from that API. |
| serviceId | string | false | - | When unifiedApi and serviceId are provided Vault opens a single integration |
| showConsumer | boolean | false | false | If true it shows the current consumer metadata at the bottom of the modal |
| initialView | ConnectionViewType | false | - | Open Vault in a specific view for a connection: "settings", "configurable-resources", or "custom-mapping" |
| locale | string | false | "en" | Open Vault in a specific language: "en", "nl", "de", "fr" or "es" |
| showLanguageSwitch | boolean | false | false | Show language switch at bottom |
| showButtonLayout | boolean | false | false | Use button layout instead of dropdown menu in TopBar for connection actions |
| autoStartAuthorization | boolean | false | false | If true it will automatically start the authorization process for the connection. |