@passbase/verify-in-browser v1.2.0
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)