This document explains how to integrate the verification flow directly from your React application through our Javascript component to verify the identity of your users. This stage might be at the signup page of your application, or at a later point to enrich the profiles of your users. The guide assumes the preliminary steps have already been completed as explained in the initial setup section of the documentation.
We suggest you follow our best practice how to integrate Passbase in your wider system in the overview section.
You can either follow the integration guide below or also watch the video below that shows an integration. Please be aware that some property or function names might have slightly changed. Just compare to the latest code snippets here in the documentation.
Start by installing our component and its dependencies in your React project:
$ npm i --save @passbase/button
$ yarn add @passbase/button
Import the React component from the newly installed npm package. The package supports UMD modules, the ES import method is presented below.
src/App.jsimport VerifyButton from "@passbase/button/react";
In order for the button to render correctly, you'll need to pass your previously generated apiKey as argument to the rendering function. Optionally you can also pass in handler functions like onFinish, onStart and onError to control the states of the button flow.
Property | Description |
| The API key that you obtained from the developer dashboard |
|
|
|
The step where the error occurred, can be one of the following
|
| Method that is being called once a user starts the verification flow |
src/App.jsfunction App() {return (<div className="App"><VerifyButtonapiKey={"YOUR_API_KEY"}onFinish={(identityAccessKey) => {}}onError={(errorCode) => {}}onStart={() => {}}/>;</div>);}
Make sure you're using the publishable API key for this client side integration
The button should now render as shown here:
During the verification flow, your users will be asked to provide some information which you might already have in your application e.g. the user's email. In this case, you can use the prefillAttributes object to skip the email step.
When the email gets prefilled we will check if the user is already verified on our platform. If yes the flow will enter the Reauthentication mode. If not - the user enters the normal verification flow and has to provide all documents that were set in the customization options.
Property | Value |
|
|
|
|
<VerifyButtonapiKey={"YOUR_API_KEY"}onFinish={(identityAccessKey) => {}}prefillAttributes={{email: "[email protected]",country: "de"}}/>
In order for your application to interoperate with Passbase, you need to add a reference to your users once the Verification is completed.
For that, you need to keep track of the identityAccessKey returned by the onFinish callback and associate it in your backend with your users' id. We recommend to either save this key after the onFinish method to your user's model, or listen for incoming webhooks and then link back the user via their email.
import React from 'react';import VerifyButton from "@passbase/button/react";function App() {const referenceUserWithKey = (key) => {console.log(key)// Make request to your backend/db and save the key to the user's profile}return (<div className="App"><VerifyButtonapiKey={"YOUR_PUBLISHABLE_API_KEY"}onFinish={(identityAccessKey) => {referenceUserWithKey(identityAccessKey)}}onError={(errorCode) => {}}onStart={() => {}}prefillAttributes={{email: "[email protected]"}}/></div>);}export default App;
Our component currently supports a set of customization options which will influence the appearance of the modal, once opened. The preferred way to customize this is via your developer dashboard's customization section.
Here you can choose amongst a variety of colors, fonts, accepted countries & much more.
The modal also supports a darkMode
attribute, which supersedes the effects of any customization selected within the developer dashboard. This is especially useful if your App has a dark UI or you simply want to spare your users' eyes at night. You can activate the darkmode via the theme
attribute.
Property | Value |
|
|
|
|
<VerifyButtonapiKey={"YOUR_API_KEY"}onFinish={(identityAccessKey) => {}}theme={{darkMode: true,systemDarkMode: true}}/>;
We support a variety of different languages for the verification flow. As of this writing more than 10 including (English, Spanish, German & many more). If one is missing and you want us to add support for it, please reach out to our customer support.
The Verification flow automatically detects the language of the user's browser settings. If we support the language, the verification flow will be set to it. Otherwise the default is English.
If you've followed this integration guide, you have successfully integrated Passbase in your Website. You can also check out the code below that shows a working example and compare it with your own solution. To run the code press the Open Sandbox button in the lower right corner.
The demo needs to be in an window in order for the Javascript to work & render the Passbase verification flow. Hence open the Sandbox and then click the Open in New Window button in the top right corner to open the rendered page in a new tab.
You can also find a fully working React application in our Github repositories.
You have successfully completed the Passbase React Integration! 🎉