@berlinsms/react-twofa-component is a TypeScript React Component to validate Phonenumbers or E-Mail Adresses using a Two Factor Authentification.

BerlinSMS

Install the package using

npm -i @berlinsms/react-twofa-component

Usage

The Mail and SMS verification are now located in the same Component. The Component will automaticly switch to the previously selected verificationmehtod (https://twofa.berlinsms.de/keygen).

import {TwoFA} from '@berlinsms/react-twofa-component';

// Minimal implementation:
<TwoFA
    bsmsSitekey = {"your sitekey"}
/>

// Complete implementation: 
<TwoFA
    ref={twoFARef}                    
    bsmsSitekey = {"your sitekey"}
    onError = {TwoFAonError}
    onVerify = {TwoFAonVerify}
    onExpire = {TwoFAonExpire}
/>

Parameters

To use this Component you have to configure your settings on https://twofa.berlinsms.de/keygen

By using the required bsmsSitekey Parameter your site will be validated and load all predefined settings. This Component will request your selected verification method and automaticly load the predefined configuration. Therefore it is not necessary to switch manualy between Mail-verification and SMS-verification. These settings also contain your captcha Type and Key.

The ref Parameter helps the user to keep track of the current object. By creating a reference additional informations can be gathers as for example the states. All of the state codes can be seen in the TwoFATypes.tsx file and are described below.

The onError function is called if an Error occures. This might be for example that component cant reach the API or the user has no more tries left. The function requires a error: string parameter, that describes the error.

The onVerify function is called when the user correctly entered the code and now your own webserver can validate the user request. The token (string) Parameter is required and is needed for the final verification. Optionally the inserted Two Factor Code can be requested: code?: string

The Language can be set by using the optional Parameter: bsmsLanguage. (bsmsLanguage?: "Eng" | "Ger";) This Parameter takes the values "Eng" or "Ger" (German). Default Language is German.

OnExpire is called when the time to fill out the component is run out. This function is still under development.

Status Codes

TwoFA Component

verificationType: verificationTypes; // gets the selected verification method (optin(sms) or optin(mail)
apiReady: boolean; // checks if the BerlinSMS API is reachable 
isAddressValid: boolean; // Checks whether an SMS/Mail can be sent to the phonenumber
codeReady: boolean; // The user clicked on send Code -> to send a code the user has to solve the captcha, which will send the code
codeSend: boolean; // The code was send via SMS to the entered Phonenumber
codeVerified: boolean; // This will be true if the inserted code is correct (onVerify will be called)
errorOccured: boolean; // This will be true if an error occured (onError will be called)
errorMessage: string; // This gives additional error feedback and shows it in the component
// internal status codes
renderstatus: renderStatusTypes; // states for the state machine to render the content
captchaSitekey: string; // The current captchaSitekey
captchaType: "reCaptcha" | "hCaptcha"; // what captchatype will be used
captchaToken: string; // Captchatoken when the captcha is solved
validationCode: string; // current userinput of the validation code
challengeToken: string; // challengeToken used for the BSMS TwoFA challenge
// internal variables
limitAttempts: number; // signals how many tries the user has left to solve the TwoFA Challenge
verificationAddress: string; // phonenumber/mailaddress the user has entered and send a code to