@passbase/verify-in-browser

Passbase's Verify In-Browser

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

Prerequisites

1. Install the package

# NPM
npm install --save @passbase/verify-in-browser

# Yarn
yarn add @passbase/verify-in-browser

2. Get an API Key

See Retrieve your API Keys section in Documentation.

3. Generate JWT

Generate a JWT containing an end_user_id field with a unique identifier for the end user. [TO BE COMPLETED]

Render the button

The package provides two ways of rendering the Verify Button: with a render function or a React component.

With render function

Import as ES Module:

import Passbase from "@passbase/verify-in-browser";

or UMD Module:

<script defer src="https://unpkg.com/@passbase/verify-in-browser"></script>
<script>
  document.addEventListener("DOMContentLoaded", () => {
    // 'Passbase' is available as a global variable
  });
</script>

Invoke the button rendering function

renderButton(mountingElement, props);

Where the function's signature is:

type RenderButtonFunction = (
  mountingElement: HTMLElement, // The target element that Passbase Verify Button will be rendered
  props: VerificationButtonProps) // Required object, see full props list in the section below
 => void;

As a React component

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

# NPM
npm install --save react react-dom

# Yarn
yarn add react react-dom

You can now import and render the component as follows.

import VerifyButton from "@passbase/verify-in-browser/react";

<VerifyButton
  apiKey="YOUR_API_KEY"
  customerPayload="your.signed.jwt"
  onStart={() => {}}
  onError={(error, context) => {}}
  onFinish={() => {}}
  onSubmitted={() => {}}
/>;

Props

Name	Description	Signature	Required
apiKey	The Passbase API Key you obtained from the dashboard	string	Yes
customerPayload	The JWT containing the session's information	string	Yes
onStart	The callback triggered on verification flow start	OnStartCallback	No
onError	The callback triggered on verification flow error	OnErrorCallback	No
onFinish	The callback triggered on verification flow completion	OnFinishCallback	No
onSubmitted	The callback triggered on submission of the data	OnSubmittedCallback	No
prefillAttributes	An object with attributes used for form prefilling	PrefillAttributes	No
prefillAttributes['email']	User email	string	No

Error Handling

It is recommended to provide an onError callback. It will be invoked if the verification flow was cancelled by user or finished with error.

type OnErrorCallback = (error: ErrorCode, context: ErrorContext) => void;

By the error code you can detect the reason why verification flow failed:

enum ErrorCode {
  UserCancelled = "CANCELLED_BY_USER",
  FatalError = "FATAL_ERROR",
}

By the error context you can detect the step where the error occurred:

type ErrorContext = { step?: string };

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)