Package Exports

@berlinsms/react-twofa-component
@berlinsms/react-twofa-component/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@berlinsms/react-twofa-component) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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 -- SMS

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}
/>

Usage -- E-Mail (NOT WORKING STILL UNDER DEVELOPMENT)

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

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

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

Parameters

The Parameters are the same in the Mail and SMS Version.

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.

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 (SMS)

apiReady: boolean; // checks if the BerlinSMS API is reachable 
isPhoneValid: boolean; // Checks whether an SMS 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 in a string format.
// internal status codes
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
phone: string; // phonenumber the user has entered and send a code to

TwoFA_Mail Component (E-Mail)

apiReady: boolean; // checks if the BerlinSMS API is reachable 
isMailValid: boolean; // Checks whether an E-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 E-Mail to the entered E-Mail
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 in a string format.
// internal status codes
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
mail: string; // E-Mail the user has entered and send a code to