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 install --save @passbase/verify-in-browser
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", () => {
});
</script>
Invoke the button rendering function
renderButton(mountingElement, props);
Where the function's signature is:
type RenderButtonFunction = (
mountingElement: HTMLElement,
props: VerificationButtonProps)
=> 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 install --save react react-dom
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
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)