Avegen Authenticator

Avegen Authenticator is a React Native library for authenticating users. Authentication can have device authentication methods, various type of mobile authentications and email address and password authentication.

The package is both Android and iOS compatible.

Install

npm i --save avegen-authenticator

Linking

Automatic

react-native link avegen-authenticator

Dependacies

npm i --save react-native-touch-id
npm install --save react-native-device-info
npm install react-native-vector-icons --save

Linking

react-native link react-native-touch-id
react-native link react-native-device-info
react-native link react-native-vector-icons

Using native linking

There's excellent documentation on how to do this in the React Native Docs.

Usage

Device authentication method

This library is for authenticating users with biometric authentication methods like Face ID, Touch ID and Passcode fallback on iOS and Fingerprint, Password, PIN, Pattern on Android. For that, you need permissions which should be added in before accessing device locks for that follow the following steps.

App Permissions

Add the following permissions to their respective files:

In your AndroidManifest.xml:

<uses-permission android:name="android.permission.USE_FINGERPRINT" />

In your Info.plist:

<key>NSFaceIDUsageDescription</key>
<string>Enabling Face ID allows you quick and secure access to your account.</string>

Requesting Device Authentication

import DeviceLocks from 'avegen-authenticator';

getDeviceAuth()

This method populates the default device lock screen only if the device lock was set.

Examples

DeviceLocks.getDeviceAuth(function success(response) {
   Alert.alert('Authentication succeeded', JSON.stringify(response))
  }, function error(error) {
    Alert.alert('Authentication Failed', JSON.stringify(error))
})

faceId passcode

Note: While default device lock screen shows cancel button if click on it, it will unlock without app without any authentication so overcome this issue, we have add following code lines in app's MainActivity. Click on the cancel button will exit the app

@Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        if (resultCode == RESULT_CANCELED) {
            this.finish();
            System.exit(0);
        }
    }

Phone number authentication

This will return mobile login view and the view is configrable by updating config value. Refer following screenshots.

Requesting Phone number authentication

import { MobileLogin } from 'avegen-authenticator';

Examples

 <MobileLogin
     countrySelectorEditable={false} // Country selector editable. Default: false
     initialCountry={"in"}            // Initial country selected. Default: 'in'
     placeholderPhoneInput={'Enter Phone number'}      // Placeholder for phone input text 
     placeholderPatientNumber={'Enter Patient number'}    // Placeholder for patient number input text 
     loginButtonName={"Login"}    // Text for login button. Default: 'Login'
     config={"mobile_number"}      // Config login screen as per config value Default:[ 'mobile_number', 'mobile_number_and_patient_number', 'patient_number']. Default: 'mobile_number'
     onSelectCountry={(contactPhonePrefix, countryCode) => {         // Callback after country code change
         this.onSelectCountry(contactPhonePrefix, countryCode)   
     }}
     onPhoneTextChange={(text) => { this.onPhoneTextChange(text) }}    // Callback after phone input change
     onPatientNumberTextChange={(text) => { this.onPatientIdTextChange(text) }} // Callback after patient number input change
     onLoginPress={()=>{ this.loginPress() }} . // Callback after login button press
     phoneInputStyle={{ fontSize: 16, textAlign: "left"}}      // Customize any pre-defined styles
     countrySelectorStyle={{width: 90, height: 50}}       // Customize any pre-defined styles
     patientNumberInputStyle={{ fontSize: 17, textAlign: "left"}}   // Customize any pre-defined styles
     loginButtonStyle={{ alignSelf: "center",backgroundColor: "white"}}      // Customize any pre-defined styles
     loginButtonTextStyle={{ color: "black", fontSize: 15, textAlign: "left"}}  // Customize any pre-defined styles
  />

Phone number and Patient number login Phone number login

OTP verification

Requesting OTP verification

import { OTPView } from 'avegen-authenticator';

Examples

 <OTPView
    maxLength={6}   // OTP input length Default: 6
    verifyButtonName={'Verify OTP'}       // Text for verify button. Default: 'Verify OTP'
    disableSubmitButton={false}          //  Disable verify button. Default: false  
    onOTPTextChange={(text)=>{ this.onOTPTextChange(text) }}  // Callback after OTP input change
    onVerifyOTPPress={()=>{ this.verifyOTP() }}      // Callback after verify button press
    verifyButtonStyle={{ alignSelf: "center",backgroundColor: "white"}}    // Customize any pre-defined styles
    verifyButtonTextStyle={{ color: "black", fontSize: 16, textAlign: "left"}}    // Customize any pre-defined styles
    otpInputStyle={{ fontSize: 16, textAlign: "left"}}         // Customize any pre-defined styles
 />

OTP

Email address authentication

Requesting Email address authentication

import { EmailLogin } from 'avegen-authenticator';

Examples

  <EmailLogin
      placeholderEmailInput={'Enter Email address'}   // Placeholder for email address input text 
      placeholderPasswordInput={'Enter Password'}     // Placeholder for password input text 
      togglePasswordVisibility={true}       // Show toggle button for password visibility. Default: true
      loginButtonName={'Login'}          // Text for login button. Default: 'Login'
      onEmailTextChange={(text) => { this.emailTextChange(text) }}
      onPasswordTextChange={(text) => { this.passwordTextChange(text) }}
      onVerifyEmailPress={() => { this.verifyEmail() }}
      emailInputStyle={{ fontSize: 16, textAlign: "left"}}      // Customize any pre-defined styles
      passwordInputStyle={{ fontSize: 16, textAlign: "left"}}      // Customize any pre-defined styles
      loginButtonStyle={{ color: "black", fontSize: 15, textAlign: "left"}}  // Customize any pre-defined styles
      loginButtonTextStyle={{ color: "black", fontSize: 15, textAlign: "left"}}  // Customize any pre-defined styles
  />

EmailLogin

Demo Example

Example