React

This document explains how to integrate the Authentication flow from your React application

This document explains how to integrate the Authentication directly from your React application through our Javascript component to verify 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.

Install the NPM Package

Start by installing our component and its dependencies in your React project:

npm
yarn
npm
$ npm i --save @passbase/button@v3 react-dom styled-components
yarn
$ yarn add @passbase/button react-dom styled-components

Render the Component

Import the React component from the newly installed NPM package. The package supports UMD modules, the ES import method is presented below.

src/App.js
import 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.

apiKey

The Passbase API Key you obtained from the dashboard

onFinish: (identityAccessKey: string) => void

identityAccessKey: The UUID of the completed authentication

onError: (errorCode: string) => void

errorCode: The reason why the flow failed

onStart: () => void

src/App.js
function App() {
return (
<div className="App">
<VerifyButton
apiKey={"YOUR_API_KEY"}
onFinish={(identityAccessKey) => {}}
onError={(errorCode) => {}}
onStart={() => {}}
/>;
</div>
);
}

Make sure you're using a publishable API key for this client side integration

The button should now render as shown here:

Speed Up the Verification Flow

During the verification flow, your users will be asked to provide some information which you might already possess in your application. In this case, you should provide a prefillAttributes object containing the following information:

When the email gets prefilled we will check if the user is already verified on our platform. If yes the flow will enter the re-authentication mode. If not - the user enters the normal verification flow and has to provide all documents that were set in the customization options.

Value

prefillAttributes

email: Your user's email. This will enable skipping the email step.

country: You user's nationality. This will help to pre-select the language and ID origin of your user.

<VerifyButton
apiKey={"YOUR_API_KEY"}
onFinish={(identityAccessKey) => {}}
prefillAttributes={{
email: "user@email.de",
country: "de"
}}
/>

Customize the Aspect of the iframe

Our component currently supports a set of customization options which will influence the appearance of the modal. The feature set is bound to grow in the future, subscribe to our newsletter to receive immediate updates upon release.

theme

accentColor: The main color of the main UI components in the flow (button, progress bar)

font: The CSS font-family to customize all text fields present in the UI

fontURL: A URL where to fetch the specified font (if necessary)

buttonColor: Theme color of the "Verify me" button. Leave empty for default color.

<VerifyButton
apiKey={"YOUR_API_KEY"}
onFinish={(identityAccessKey) => {}}
theme={{
accentColor: "#27ae60",
font: "Oswald",
fontURL: "https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap",
buttonColor: "#2980b9"
}}
/>

The configuration above would have the following result:

color modified by buttonColor
style modified by accentColor and font properties

The modal also supports a darkMode attribute, which supersedes the effects of any other theme attribute

theme

darkMode: A boolean value indicating whether or not to enable the dark theme

systemDarkMode: A boolean value indicating whether the dark mode setting of the users OS should be applied (see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)

<VerifyButton
apiKey={"YOUR_API_KEY"}
onFinish={(identityAccessKey) => {}}
theme={{
darkMode: true,
systemDarkMode: true
}}
/>;

Reference Your Users

In order for your application to interoperate with Passbase, you need to add a reference to your users once the Authentication is completed.

For that you need keep track of the identityAccessKey returned by the onFinish callback and associate it in your backend with your users' id.

const userId = "SOME_USER_ID"
const onFinish = (identityAccessKey) => {
fetch(
'/new_authentication', // You have to provide a similar endpoint in your app
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
'identity_access_key': identityAccessKey,
'user_id': userId
})
}
)
}
return <VerifyButton apiKey={apiKey} onFinish={onFinish}/>

Wrap-up & Example

If you've followed this integration guide closely and you've chosen to fully customize your Passbase button, your code should resemble this code snippet:

import React from 'react';
import VerifyButton from "@passbase/button/react";
function App() {
return (
<div className="App">
<VerifyButton
apiKey={"YOUR_PUBLISHABLE_API_KEY"}
onFinish={(identityAccessKey) => {}}
onError={(errorCode) => {}}
onStart={() => {}}
prefillAttributes={{
email: "hans.meier@corp.de",
country: "de"
}}
theme={{
accentColor: "#27ae60",
font: "Oswald",
fontURL: "https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap",
buttonColor: "#2980b9"
}}
/>
</div>
);
}
export default App;

You can find this code inside a fully working React application in our Github repositories.

You have successfully completed the Passbase React Integration! 🎉