# Vault React

[Vault React](https://www.npmjs.com/package/@apideck/vault-react) is an NPM package that allows you to embed [Apideck Vault](https://www.apideck.com/products/vault) into your React application.
You can easily let your users authorize and manage integration settings. It makes credential handling more secure and seamless.

This guide will get you up and running with the Vault React hook. To get started, follow these 3 steps:

- [Step 1: Setup Apideck](#step-1-setup-apideck)
- [Step 2: Create a session](#step-2-create-a-session)
- [Step 3: Add Vault React](#step-3-add-vault-react)

## Step 1: Setup Apideck

### Create an account

If you haven't already, head over to our [Signup page](https://www.apideck.com/signup?products=unify&source=docs-react-vault) and create an account. Choose an application name and a subdomain. Afterward, you will be redirected to the Apideck dashboard.

### Enable Unified APIs and connectors

Go to the [Unified APIs](https://platform.apideck.com) page in the Apideck dashboard. Choose one or more Unified APIs to enable. You'll see a list of the available connectors for each Unified API. Choose a couple of connectors to enable. The Unified APIs and connectors you select become available to your users in [Vault](https://developers.apideck.com/apis/vault/reference).

### Get your API key and Application ID

Go to the [API Keys](https://platform.apideck.com/configuration/api-keys) page in the Apideck dashboard. Copy your application ID and API key.
If your API key ever gets compromised, you can regenerate it on this page.

![API keys overview](/get-started/api-keys.png)

## Step 2: Create a session

Vault lets your users (called consumers in Apideck) easily connect and configure integrations. You can create a consumer through a Vault session through the following endpoint https://developers.apideck.com/apis/vault/reference#tag/Sessions.

Most of the time, this is an ID of your internal data model that represents a user or account in your system. E.g., account:12345. If the consumer doesn't exist yet, Vault will upsert a consumer based on your ID.

> **Note 🚨**
>
  Session creation should always happen server-side to prevent token leakage.

Use the API call below to create a session for a consumer. This will return a Vault URL that you forward to a consumer to connect integrations.

```sh meta=terminal
curl --request POST \
  --url 'https://unify.apideck.com/vault/sessions' \
  --header 'Authorization: Bearer {API_KEY}' \
  --header 'x-apideck-app-id: {APP_ID}' \
  --header 'x-apideck-consumer-id: {CONSUMER_ID}' \
```

You can also use our Node SDK to create a session.

```sh meta=terminal
yarn add @apideck/unify
```

Below is an example of creating a Serverless Function to create a session inside a Next.js project:

```ts meta=/api/vault/sessions.ts

const createSession = async (_: VercelRequest, res: VercelResponse) => {
  const apideck = new Apideck({
    apiKey: process.env.API_KEY ?? '',
    appId: process.env.APP_ID ?? '',
    consumerId: 'test-consumer'
  })
  const settings = {}
  const { data } = await apideck.vault.sessions.create({
    session: settings
  })

  res.json(data)
}

}

}

}
```

If you want to open Vault in a specific language you can add the `locale` prop. The available locales are `en` (default), `nl`, `de`, `fr`, and `es`.

```js

function App() {
  const { open, close } = useVault()

  return (
    <button
      onClick={() =>
        open({
          token: 'REPLACE_WITH_SESSION_TOKEN',
          locale: 'nl'
        })
      }
    >
      Open Vault
    </button>
  )
}
```

If you want to show the language switch at the bottom of Vault you can add the `showLanguageSwitch` prop.

```js

function App() {
  const { open, close } = useVault()

  return (
    <button
      onClick={() =>
        open({
          token: 'REPLACE_WITH_SESSION_TOKEN',
          locale: 'nl',
          showLanguageSwitch: true
        })
      }
    >
      Open Vault
    </button>
  )
}
```

### Demo

The code block below shows a quick demo on how you could use the Vault component. Click the button to execute the code that's shown below.

### Properties

| Property           | Type                             | Required | Default | Description                                                                                                                                      |
| ------------------ | -------------------------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| token              | string                           | true     | -       | The JSON Web Token returned from the [Create Session API](https://docs.apideck.com/apis/vault/reference#operation/sessionsCreate)                |
| showAttribution    | boolean                          | false    | true    | Show "Powered by Apideck" in the backdrop of the modal backdrop                                                                                  |
| onClose            | () => void                       | false    | -       | Function that gets called when the modal is closed                                                                                               |
| onReady            | () => void                       | false    | -       | Function that gets called when the modal is opened                                                                                               |
| 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                                                                      |
| showButtonLayout   | boolean                          | false    | false   | Use button layout instead of dropdown menu in TopBar for connection actions                                                                      |
| initialView        | ConnectionViewType               | false    | -       | Open Vault in a specific view for a connection session                                                                                           |
| 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                                                                                                                   |