npm package: @passbase/button
Description: Passbase customer login button
Author: Passbase
Latest version: 4.4.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Passbase

To integrate the Passbase SDK, follow this guide and use your
own API Key which you can obtain from the developer dashboard.

The integration of the Passbase Web SDK follows a few simple steps:

1. Install the SDK through NPM / Yarn
2. Get an API Key
3. Render a Passbase verification button and handle the result

Additionally, a non package manager dependant solution, based on HTML script tag, can be found at [Passbase doc website](https://docs.passbase.com/).

# 1. Install the SDK

```bash
# NPM
npm install --save @passbase/button

# Yarn
yarn add @passbase/button
```

# 2. Get an API Key

Passbase uses API keys to allow access to the API and route it back to your dashboard.

You need to register on our website to create a new Passbase API key here: [Developer Dashboard](https://app.passbase.com).

# 3. Render the verification button

**Import the Passbase SDK**

```javascript
import Passbase from "@passbase/button";
```

The SDK supports UMD modules, we present here the ES import method.

**Handling Verifications**

Verification is an asynchronous process that gives you a callback based result.

The callback method give you the ability to react on if a user verification is finished. e.g. bring the user to another screen.

Also, you can use callbacks for checking if a verification was complete or cancelled. Inside the callback method, you get back the authKey. This key is helpful if you want to ping our API for what the status of a verification is e.g. if it was approved or rejected. It might take a few minutes until a verification is fully processed and of course depend if you approve or reject it in your dashboard.

## A. With a function

**Invoke the button rendering function**

```javascript
renderButton(
  mountingElement,
  apiKey,
  (options = {
    onFinish,
  }),
);
```

**mountingElement**: The DOM element you want to mount the button on

**apiKey**: The Passbase API Key you obtained from the dashboard.

**options**: _not required_

&nbsp;&nbsp;**onStart**: The callback which will be called on start, () => void

&nbsp;&nbsp;**onError**: The callback which will be called on error, (error: string) => void

&nbsp;&nbsp;**onFinish**: _recommended_ The callback which will be called on completion, (identityAccessKey: string) => void

&nbsp;&nbsp;**onSubmitted**: The callback which will be called on submission of the data, (identityAccessKey: string) => void

&nbsp;&nbsp;**metaData**: An encrypted JSON represented as an ASCII-armored string which will be associated with the identity access

&nbsp;&nbsp;**prefillAttributes**: an object containing attributes used for form prefilling on the button

&nbsp;&nbsp;&nbsp;&nbsp;**email**: a string defining the user email

&nbsp;&nbsp;&nbsp;&nbsp;**country**: a string defining the two-letters country code

&nbsp;&nbsp;**theme**: _not required_ - an object containing attributes used for the button's theme

&nbsp;&nbsp;&nbsp;&nbsp;**accentColor**: a string defining color

&nbsp;&nbsp;&nbsp;&nbsp;**darkMode**: enables the dark theme

## B. With a React Component

In order to render the component provided by the Passbase SDK, you must install the peer dependencies which the component is leveraging.

```bash
npm install --save react-dom
```

You can now import and render the component as follows.

```javascript
import VerifyButton from "@passbase/button/react";

<VerifyButton
  apiKey={apiKey}
  onStart={() => {}}
  onError={(error, context) => {}}
  onFinish={identityAccessKey => {}}
  onSubmitted={identityAccessKey => {}}
  metaData="YOUR_ENCRYPTED_CONTENT"
  prefillAttributes={{
    email: "user@email.com",
    country: "de",
  }}
  theme={{
    accentColor: "#ff0000",
    fonts: {
      primary: "Exo",
      secondary: "Lato",
      cta: "Open sans",
    },
    darkMode: false,
  }}
/>;
```

| Name              | Description                                                                                                                                                                                                                                                                                 | Signature           | Required |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | -------- |
| apiKey            | The Passbase API Key you obtained from the dashboard                                                                                                                                                                                                                                        | string              | Yes      |
| onStart           | The callback which will be called on start                                                                                                                                                                                                                                                  | OnStartCallback     | No       |
| onError           | The callback which will be called on error                                                                                                                                                                                                                                                  | OnErrorCallback     | No       |
| onFinish          | The callback which will be called on completion                                                                                                                                                                                                                                             | OnFinishCallback    | No       |
| onSubmitted       | The callback which will be called on submission of the data                                                                                                                                                                                                                                 | OnSubmittedCallback | No       |
| metaData          | An encrypted JSON represented as an ASCII-armored string which will be associated with the identity access                                                                                                                                                                                  | string              | No       |
| prefillAttributes | An object containing attributes used for form prefilling on the button:<br />`email` - a string defining the user email<br />`country` - a string defining the two-letters country code                                                                                                     | PrefillAttributes   | No       |
| theme             | An object containing attributes used for the button's theme<br />`accentColor` - HEX string defining accent color<br />`fonts` - an object containing `primary`, `secondary`, `cta` font family names found in customization section in dashboard <br />`darkMode` - enables the dark theme | Theme               | No       |

## Troubleshooting

### ReferenceError: window is not defined

You're likely trying to render the component server side, which is not supported yet.
You should disable SSR in your rendering framework of choice (i.e. NextJS: https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr)