https://github.com/apideck-libraries/vault-core
Apideck Vault Modal component for React
https://github.com/apideck-libraries/vault-core
apideck integrations react vault
Last synced: 3 months ago
JSON representation
Apideck Vault Modal component for React
- Host: GitHub
- URL: https://github.com/apideck-libraries/vault-core
- Owner: apideck-libraries
- License: mit
- Created: 2022-01-24T13:12:12.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-01-20T12:46:51.000Z (5 months ago)
- Last Synced: 2025-03-22T06:27:06.036Z (3 months ago)
- Topics: apideck, integrations, react, vault
- Language: TypeScript
- Homepage: https://www.apideck.com/products/vault
- Size: 963 KB
- Stars: 7
- Watchers: 7
- Forks: 1
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vault Core
**🚨 We recommend using the new [@apideck/vault-react](https://www.npmjs.com/package/@apideck/vault-react) package.**
---
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 |