Multi-Factor Authentication

The Multi-Factor Authentication (MFA) component enables seamless management of the MFA process for your customers. To use this component, you must generate a customer token with upgradable scopes. These scopes will be granted to the customer upon successful verification.

For instance, if your app includes an ACH debit component requiring the following scopes: customers accounts payments counterparties payments-write counterparties-write, you should issue a customer token with the customers accounts payments counterparties customer-token-write scopes while setting payments-write counterparties-write as upgradable scopes.

Implementation

Web Components

Add the Multi-Factor Authentication element to your app where you'd like it to be presented. Note this component will use unitVerifiedCustomerToken key in local storage. It's important to clean it when the user logs out from the app.

<unit-elements-multi-factor-authentication
    customer-token=""
    theme=""
    language=""
>
</unit-elements-multi-factor-authentication>

Inputs:

Name	Type	Required	Description
customer-token	string	Yes	Customer token created with upgradable scope.
theme	string	No	A URL that specifies the UI configuration.
language	string	No	A URL that specifies the language configuration.

Events:

Event Name	Description	Detail
unitMultiFactorAuthVerificationTokenCreated	Occurs on load of component and when clicking Resend code	Create Customer Token Verification
unitMultiFactorAuthFinished	Occurs when multi-factor authentication finished successfully, and customer token created	Create Customer Token

React Native SDK

UNMultiFactorAuthenticationComponent props:

Name	Type	Required	Description
customerToken	string	YES	A Unit Customer token
theme	string	NO	A URL that specifies the UI configuration.
language	string	NO	A URL that specifies the language configuration.
onLoad	(response: UNOnLoadResponse<undefined>) => void	NO	Callback for handling onload event, also usable for error handling.
onVerificationTokenCreated	(data: UNCustomerTokenVerification) => void	NO	Occurs on load of component and when clicking Resend code
onAuthenticationFinished	(data: UNMultiFactorAuthenticationFinished) => void	NO	Callback when multi-factor authentication finished successfully, and customer token created

Example:

import React from 'react';
import { UNMultiFactorAuthenticationComponent } from 'react-native-unit-components';

export default function YourComponent {
  return (
    <UNMultiFactorAuthenticationComponent
      customerToken={/*Customer token here*/}
      onLoad={(response: UNOnLoadResponse<undefined>) => console.log(response)}
      onVerificationTokenCreated={(data: UNCustomerTokenVerification) => console.log(`Verification token created: ${data}`)}
      onAuthenticationFinished={(data: UNMultiFactorAuthenticationFinished) => console.log(`Authentication finished: ${counterparty}`)}
    />
  );
};