# Avegen Authenticator

![react-native version](https://img.shields.io/badge/react--native-0.57-green.svg?style=flat-square)
[![npm version](https://img.shields.io/npm/v/avegen-authenticator.svg?style=flat-square)](https://www.npmjs.com/package/avegen-authenticator)
[![npm downloads](https://img.shields.io/npm/dm/avegen-authenticator.svg?style=flat-square)](https://www.npmjs.com/package/avegen-authenticator)

Avegen Authenticator is a [React Native](http://facebook.github.io/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
```shell
npm i --save avegen-authenticator
```

## Linking

### Automatic

```shell
react-native link avegen-authenticator
```

#### Dependacies
```shell
npm i --save react-native-touch-id
npm install --save react-native-device-info
npm install react-native-vector-icons --save
```

#### Linking
```shell
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](http://facebook.github.io/react-native/docs/linking-libraries-ios.html#content).


## 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`:

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

In your `Info.plist`:

```xml
<key>NSFaceIDUsageDescription</key>
<string>Enabling Face ID allows you quick and secure access to your account.</string>
```
#### Requesting Device Authentication
```js
import DeviceLocks from 'avegen-authenticator';
```
#### getDeviceAuth()

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

**Examples**

```js
DeviceLocks.getDeviceAuth(function success(response) {
   Alert.alert('Authentication succeeded', JSON.stringify(response))
  }, function error(error) {
    Alert.alert('Authentication Failed', JSON.stringify(error))
})
```
![faceId](https://github.com/AishwaryaIn/avegen_authenticator/blob/master/images/faceid.JPG)
![passcode](https://github.com/AishwaryaIn/avegen_authenticator/blob/master/images/device_lock.JPG)

>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 

```javascript 
@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
```js
import { MobileLogin } from 'avegen-authenticator';
```
**Examples**

 ```javascript
  <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](https://github.com/AishwaryaIn/avegen_authenticator/blob/master/images/login_by_phone_patient_number.PNG)
![Phone number login](https://github.com/AishwaryaIn/avegen_authenticator/blob/master/images/login_by_phone_number.JPG)
![Patient number login](https://github.com/AishwaryaIn/avegen_authenticator/blob/master/images/login_by_patient_number.JPG)

### OTP verification

#### Requesting OTP verification
```js
import { OTPView } from 'avegen-authenticator';
```

**Examples**

```javascript
 <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](https://github.com/AishwaryaIn/avegen_authenticator/blob/master/images/otp.PNG)

### Email address authentication

#### Requesting Email address authentication
```js
import { EmailLogin } from 'avegen-authenticator';
```
**Examples**

```javascript
  <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](https://github.com/AishwaryaIn/avegen_authenticator/blob/master/images/login_by_email.PNG)

## Demo Example
[Example](https://github.com/Avegen/TestLibrary)