React

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

TThis document explains how to integrate the Reauthentication from your web application through our Javascript component to authorize your users. This stage should be either at the login page of your application or wherever you want to verify, that this is still the person who originally verified his or her identity to you. This is useful for example if users start a job, approve high transactions or simply login to your app.

This guide assumes that you have previously integrated the authentication flow and users are tracked correctly as explained in the client integration section.

Render the Component in Your Login Page

Render the component by specifying integrationType as "login" in the additional options as explained below. All the customization options explained in the client section are supported as well.

<VerifyButton
apiKey={YOUR_PUBLISHABLE_API_KEY}
onFinished={onFinished}
integrationType={"login"}
/>;

Authorize Your Users

Upon completion of the Reauthentication you will receive a webhook with the result of the login attempt.

{
"authentication_key": "61c9eceb-cf83-44cd-bd5e-d346e55cdc5d",
"review_status": true,
"integration_type": "login",
"additional_attributes": {
"user_id": "72834678243"
}
}

The additional_attributes field in the request will return the user ID you passed to the original Authentication.

Make sure you are only allowing webhooks from Passbase as they can be forged!

Wrap-Up and Example

A full example of how an integration of the reauthentication button could look like is below:

import React from 'react';
import VerifyButton from "@passbase/button/react";
function App() {
return (
<div className="App">
<VerifyButton
apiKey={"YOUR_PUBLISHABLE_API_KEY"}
onFinished={(error, authKey, additionalAttributes) => {}}
integrationType={"login"}
additionalAttributes={{ }}
prefillAttributes={{ }}
theme={{ }}
/>;
</div>
);
}
export default App;

You have successfully completed the Passbase React Reauthentication Integration! 🎉