{"id":18375835,"url":"https://github.com/apideck-libraries/vault-core","last_synced_at":"2025-04-06T20:31:15.175Z","repository":{"id":38197334,"uuid":"451469531","full_name":"apideck-libraries/vault-core","owner":"apideck-libraries","description":"Apideck Vault Modal component for React","archived":false,"fork":false,"pushed_at":"2025-01-20T12:46:51.000Z","size":986,"stargazers_count":7,"open_issues_count":18,"forks_count":1,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-03-22T06:27:06.036Z","etag":null,"topics":["apideck","integrations","react","vault"],"latest_commit_sha":null,"homepage":"https://www.apideck.com/products/vault","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/apideck-libraries.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-01-24T13:12:12.000Z","updated_at":"2025-01-20T12:46:53.000Z","dependencies_parsed_at":"2023-08-24T16:28:47.154Z","dependency_job_id":"3a86e46c-5b10-4078-a540-8b8042713670","html_url":"https://github.com/apideck-libraries/vault-core","commit_stats":null,"previous_names":["apideck-libraries/vault-core"],"tags_count":96,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apideck-libraries%2Fvault-core","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apideck-libraries%2Fvault-core/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apideck-libraries%2Fvault-core/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apideck-libraries%2Fvault-core/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/apideck-libraries","download_url":"https://codeload.github.com/apideck-libraries/vault-core/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247547331,"owners_count":20956537,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apideck","integrations","react","vault"],"created_at":"2024-11-06T00:20:38.335Z","updated_at":"2025-04-06T20:31:14.495Z","avatar_url":"https://github.com/apideck-libraries.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vault Core\n\n\u003cbr /\u003e\n\n**🚨 We recommend using the new [@apideck/vault-react](https://www.npmjs.com/package/@apideck/vault-react) package.**\n\n\u003cbr /\u003e\n\n---\n\nA React component to embed [Apideck Vault](https://www.apideck.com/products/vault) in any React application.\n\nGo to the [developer docs](https://developers.apideck.com/guides/react-vault) for a step-by-step guide.\n\n\u003cimg src=\"https://user-images.githubusercontent.com/8850410/208065819-716c6e02-98c9-4df5-b687-e5acd1e3c4e5.png\" width=\"100%\" /\u003e\n\n**React Vault** | [Vault JS](https://github.com/apideck-libraries/vault-js) | [Vue Vault](https://github.com/apideck-libraries/vue-vault)\n\n## Usage\n\nInstall the packages\n\n```sh\nnpm install @apideck/react-vault\n```\n\nCreate a [Vault session](https://developers.apideck.com/apis/vault/reference#operation/sessionsCreate) inside your application to get a JSON Web Token.\nIt's recommended to do this server-side, so you don't expose your API key.\n\nWith `@apideck/node`:\n\n```sh\nnpm install @apideck/node\n```\n\n```js\nimport { Apideck } from '@apideck/node';\n\nconst apideck = new Apideck({\n  apiKey: 'REPLACE_WITH_API_KEY',\n  appId: 'REPLACE_WITH_APP_ID',\n  consumerId: 'REPLACE_WITH_CONSUMER_ID',\n});\n\nconst { data } = await apideck.vault.sessionsCreate({});\n\nconsole.log('Token:', data.session_token);\n```\n\nPass the JSON Web Token to the Vault component:\n\n```js\nimport { Vault } from '@apideck/react-vault';\n\nconst MyComponent = () =\u003e {\n  return (\n    \u003cVault\n      token=\"REPLACE_WITH_SESSION_TOKEN\"\n      trigger={\u003cbutton\u003eOpen Vault\u003c/button\u003e}\n    /\u003e\n  );\n};\n\nexport default MyComponent;\n```\n\nIf you are NOT using [Tailwind CSS](https://tailwindcss.com/) in your project, make your to include the styles in your project:\n\n```js\nimport '@apideck/react-vault/dist/styles.css';\n```\n\nIf you are using [Tailwind CSS](https://tailwindcss.com/) you should include the package path in the content path of the `tailwind.config.js`.\n\n```js\n// tailwind.config.js\n\nmodule.exports = {\n  content: ['./node_modules/@apideck/react-vault/**/*.js'],\n  plugins: [require('@tailwindcss/forms')]\n  ...\n}\n```\n\nIf 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`.\n\n```js\nimport { Vault } from '@apideck/react-vault';\n\nconst MyComponent = () =\u003e {\n  return (\n    \u003cVault\n      token=\"REPLACE_WITH_SESSION_TOKEN\"\n      unifiedApi=\"accounting\"\n      serviceId=\"quickbooks\"\n      trigger={\u003cbutton\u003eOpen Vault\u003c/button\u003e}\n    /\u003e\n  );\n};\n\nexport default MyComponent;\n```\n\nIf you want to manually control the opening and closing of the modal, you can provide the `open` and `onClose` props.\n\n```jsx\nimport { Button } from '@apideck/components';\nimport { Vault } from '@apideck/react-vault';\nimport { useState } from 'react';\n\nconst VaultButton = ({ token }) =\u003e {\n  const [openVault, setOpenVault] = useState(false);\n\n  const toggleVault = () =\u003e {\n    setOpenVault(!openVault);\n  };\n\n  return (\n    \u003cdiv className=\"flex items-center space-x-3\"\u003e\n      \u003cButton text=\"Open Vault\" onClick={toggleVault} /\u003e\n      \u003cVault token={token} open={openVault} onClose={toggleVault} /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default VaultButton;\n```\n\nIf you want to open a specific view you can pass the `initialView` prop. The available views are `settings`, `configurable-resources`, and `custom-mapping`.\n\n```js\nimport { Vault } from '@apideck/react-vault';\n\nconst MyComponent = () =\u003e {\n  return (\n    \u003cVault\n      token=\"REPLACE_WITH_SESSION_TOKEN\"\n      unifiedApi=\"accounting\"\n      serviceId=\"quickbooks\"\n      initialView=\"custom-mapping\"\n      trigger={\u003cbutton\u003eOpen Vault\u003c/button\u003e}\n    /\u003e\n  );\n};\n\nexport default MyComponent;\n```\n\nIf 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).\n\n### Properties\n\n| Property           | Type                             | Required | Default | Description                                                                                                                                       |\n| ------------------ | -------------------------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |\n| token              | string                           | true     | -       | The JSON Web Token returned from the Create Session call                                                                                          |\n| trigger            | element                          | false    | -       | The component that should trigger the Vault modal on click                                                                                        |\n| showAttribution    | boolean                          | false    | true    | Show \"Powered by Apideck\" in the backdrop of the modal backdrop                                                                                   |\n| open               | boolean                          | false    | false   | Set the toggle to `true` to open the Vault modal, and set it to `false` to close the Vault modal                                                  |\n| onClose            | () =\u003e void                       | false    | -       | Function that gets called when the modal is closed                                                                                                |\n| onConnectionChange | (connection: Connection) =\u003e 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  |\n| onConnectionDelete | (connection: Connection) =\u003e void | false    | -       | Function that gets called when the user deletes a connection                                                                                      |\n| 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 |\n| serviceId          | string                           | false    | -       | When unifiedApi and serviceId are provided Vault opens a single connection                                                                        |\n| showConsumer       | boolean                          | false    | false   | Show the consumer metadata provided when creating a session                                                                                       |\n| initialView        | ConnectionViewType               | false    | -       | Open Vault in a specific view for a connection session                                                                                            |\n| locale             | string                           | false    | en      | Open Vault in a specific language                                                                                                                 |\n| showLanguageSwitch | boolean                          | false    | false   | Show language switch at bottom                                                                                                                    |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapideck-libraries%2Fvault-core","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapideck-libraries%2Fvault-core","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapideck-libraries%2Fvault-core/lists"}