# @apideck/react-vault Latest version **0.23.1** (published 2026-09-17) · MIT license · 0 weekly downloads ## Install ```sh npm install @apideck/react-vault pnpm add @apideck/react-vault yarn add @apideck/react-vault bun add @apideck/react-vault ``` ## Health **Score 70/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score. Warnings: low downloads; pre 1.0. ## Facts | | | |---|---| | Version | 0.23.1 | | Published | 2026-09-17 | | First published | 2022-02-17 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Node | >=18 | | Dependencies | 10 | | Unpacked size | 5 MB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Jake Prins | | Maintainers | gdewilde, nicklloyd, ritiksingh7, samzani, mithgroth, gmenoiaa | | Keywords | react, vault, apideck, unify, unified-apis, integrations, oauth | ## Links - npm: https://www.npmjs.com/package/@apideck/react-vault - npm.io page: https://npm.io/package/@apideck/react-vault ## Dependencies (10) - [swr](https://npm.io/package/swr.md) ^1.0.1 - [formik](https://npm.io/package/formik.md) ^2.2.9 - [fuse.js](https://npm.io/package/fuse.js.md) ^6.5.3 - [i18next](https://npm.io/package/i18next.md) ^23.7.18 - [jwt-decode](https://npm.io/package/jwt-decode.md) ^3.1.2 - [react-select](https://npm.io/package/react-select.md) ^5.2.2 - [react-i18next](https://npm.io/package/react-i18next.md) ^14.0.1 - [markdown-to-jsx](https://npm.io/package/markdown-to-jsx.md) ^9.8.1 - [@apideck/wayfinder](https://npm.io/package/@apideck/wayfinder.md) ^0.2.6 - [@apideck/components](https://npm.io/package/@apideck/components.md) ^0.12.9 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.23.1 (latest) — 2026-09-17 - 0.23.0 — 2026-07-30 - 0.22.0 — 2026-07-29 - 0.20.6 — 2026-07-01 - 0.20.5 — 2026-06-22 - 0.20.4 — 2026-06-10 - 0.20.3 — 2026-06-10 - 0.20.2 — 2026-06-02 - 0.20.1 — 2026-05-26 - 0.19.1 — 2026-05-20 - 0.19.0 — 2026-05-07 - 0.18.3 — 2026-04-21 - 0.18.2 — 2026-04-07 - 0.18.1 — 2026-03-13 - 0.18.0 — 2026-03-13 - … 124 more at https://npm.io/package/@apideck/react-vault/versions ## README # Vault Core
**🚨 We recommend using the new [@apideck/vault-react](https://www.npmjs.com/package/@apideck/vault-react) or [@apideck/vault-js](https://github.com/apideck-libraries/vault-js) packages.**
--- A React component to embed [Apideck Vault](https://www.apideck.com/products/vault) in any React application. Go to the [developer docs](https://developers.apideck.com/guides/react-vault) for a step-by-step guide. **React Vault** | [Vault JS](https://github.com/apideck-libraries/vault-js) | [Vue Vault](https://github.com/apideck-libraries/vue-vault) ## Usage Install the packages ```sh npm install @apideck/react-vault ``` Create a [Vault session](https://developers.apideck.com/apis/vault/reference#operation/sessionsCreate) 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`: ```sh npm install @apideck/node ``` ```js 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: ```js import { Vault } from '@apideck/react-vault'; const MyComponent = () => { return ( Open Vault} /> ); }; export default MyComponent; ``` If you are NOT using [Tailwind CSS](https://tailwindcss.com/) in your project, make your to include the styles in your project: ```js import '@apideck/react-vault/dist/styles.css'; ``` If you are using [Tailwind CSS](https://tailwindcss.com/) you should include the package path in the content path of the `tailwind.config.js`. ```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`. ```js import { Vault } from '@apideck/react-vault'; const MyComponent = () => { return ( Open Vault} /> ); }; export default MyComponent; ``` If you want to manually control the opening and closing of the modal, you can provide the `open` and `onClose` props. ```jsx 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 (
); }; 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`. ```js import { Vault } from '@apideck/react-vault'; const MyComponent = () => { return ( Open Vault} /> ); }; 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](https://developers.apideck.com/apis/vault/reference#operation/sessionsCreate). ### Properties | Property | Type | Required | Default | Description | | ---------------------- | -------------------------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | token | string | true | - | The JSON Web Token returned from the Create Session call | | trigger | element | false | - | The component that should trigger the Vault modal on click | | showAttribution | boolean | false | true | Show "Powered by Apideck" in the backdrop of the modal backdrop | | open | boolean | false | false | Set the toggle to `true` to open the Vault modal, and set it to `false` to close the Vault modal | | 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 scope the connection results to that API. If also a serviceId is provided Vault opens for a single connection | | serviceId | string | false | - | When unifiedApi and serviceId are provided Vault opens a single connection | | showConsumer | boolean | false | false | Show the consumer metadata provided when creating a session | | initialView | ConnectionViewType | false | - | Open Vault in a specific view for a connection session | | locale | string | false | en | Open Vault in a specific language | | showLanguageSwitch | boolean | false | false | Show language switch at bottom | | showButtonLayout | boolean | false | false | Show button layout instead of dropdown menu in TopBar for connection actions | | autoStartAuthorization | boolean | false | false | Automatically start the authorization process. Applies Works only in the single connection mode | ## Deploy User `np` to publish to NPM (2FA required). After publishing of new version make sure to upgrade `@apideck/react-vault` package inside the `iframe-vault` project and deploy it. --- _Source: https://npm.io/package/@apideck/react-vault · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._