@msg91comm/react-native-sendotp/README.md

The SendOtp Verification SDK makes verifying phone numbers easy. SDK supports the verification of phone numbers via SMS & Calls.

# Send OTP React-Native Sdk!

**The SendOtp SDK makes verifying OTP easy. SDK supports the verification of email and phone numbers via SMS, Calls & Whatsapp.**


## Getting started

Login or create account at MSG91 to use sendOTP services.

**Get your widgetId and authToken:**

After login at MSG91, follow below steps to get your widgetId and authToken:
1. Select OTP option available on dashboard.
2. Create and configure your widget.
3. If you are first time user then generate new token and keep it enable.
4. The widgetId and authToken generated from the above steps will be required by [OTPVerification](#example) component.

## Installation

```shell 
npm install @msg91comm/react-native-sendotp
```
This library depends on [react-native-webview](https://www.npmjs.com/package/react-native-webview).

We also offer [Expose Methods](#exposemethods) to integrate the OTP widget within your own User Interface.

## Example

```jsx
import React, { useState } from 'react';
import { Modal, SafeAreaView, StyleSheet, Text, TouchableOpacity } from 'react-native';

import { OTPVerification } from '@msg91comm/react-native-sendotp';

const App = () => {
  const [isModalVisible, setModalVisible] = useState(false);

  return (
    <SafeAreaView style={styles.container}>
      <TouchableOpacity style={styles.button} onPress={() => setModalVisible(true)}>
        <Text>Login With OTP</Text>
      </TouchableOpacity>

      <Modal visible={isModalVisible}>
        <OTPVerification 
          onVisible={isModalVisible} 
          onCompletion={(data) => {
            console.log(data)                       // Get your response of success/failure.
            setModalVisible(false)
          }} 
          widgetId={'Paste your widgetId here'}     // Get widgetId from MSG91 OTP Widget Configuration
          authToken={'Paste your authToken here'}   // Get authToken from MSG91 OTP Tokens
        />
      </Modal>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center'
  },
  button: {
    backgroundColor: '#C0EDD2',
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 12,
    margin: 14
  },
});

export default App;
```

#### Properties

| Prop                         | Type              | value   | Description                                                           |
| ---------------------------- | ----------------- | ------- | --------------------------------------------------------------------- |
| onVisible                  | boolean (Required) | `true/false`      | To manage the visibility of the widget. |
| authToken                  | string (Required) | `'your authtoken'`    | Get your authtoken from the token list.      |
| widgetId               | string (Required)           | `'your widget id'` | Id of the widget you want to integrate.          |
| onCompletion                    | function (Required)          | `(data) => {}`    | Callback that is called when the widget receives any response. Response object is passed as an argument to the callback handler. To close the widget change your visibility state to false here. |
| identifier                    | string           | `'mobile number'/'email'`    | Unique value, mobile number with country code or email address to invoke the widget with pre-filled value.  |
| extraProps                    | object           | `{ key : value }`    | Object with unique keys and values, use when you have template variables.  |

<br>
<br>
<br>

# ExposeMethods

We provide expose methods, which helps you integrate the OTP verification within your own user interface.

## Usage

The [installation](#installation) process is same as above.

Import the `ExposeOTPVerification` component:

```jsx
import { ExposeOTPVerification } from '@msg91comm/react-native-sendotp';
```

Create a `ref`:

```jsx
const ExposeOTPVerificationRef = createRef<ExposeOTPVerification>();
```
Assign the ref to `ExposeOTPVerification` component and pass the `widgetId` and `authToken`:

```jsx
return(
  // Your screen code goes here...

  <ExposeOTPVerification
    ref={ExposeOTPVerificationRef}
    authToken={authToken}
    widgetId={widgetId}
    getWidgetData={(widgetData) => {             // You will receive the widget configuration data here
      console.log('Widget Data', widgetData)    // eg. OTP length, retry time, allowed retries etc.
    }}
  />
)
```
`getWidgetData` is an optional prop, this will receive the widget configuration data.
<br>
<br>

There are three methods `sendOtp`, `retryOtp` and `verifyOtp` for the otp verification process.

You can call these methods as follow:

### `sendOtp`

The sendOtp method is used to send an OTP to an identifier. The identifier can be an email or mobile number (it must contain the country code without +).
<br>
You can call this method on a button press.

```jsx
const handleSendOtp = async () => {
  const response = await ExposeOTPVerificationRef.current?.sendOtp('example@xyz.com');
  console.log(response);
}
```
**or**
```jsx
const handleSendOtp = async () => {
  const response = await ExposeOTPVerificationRef.current?.sendOtp('919999999999');
  console.log(response);
}
```

### `retryOtp`

The retryOtp method allows retrying the OTP on desired communication channel.
<br>
retryOtp method takes optional channel as `'SMS'`, `'VOICE'`, `'EMAIL'`, `'WHATSAPP'` for retrying otp.

*Note:* If the widget uses the default configuration, don't pass the channel as argument.

```jsx
const handleRetryOtp = async () => {
  const response = await ExposeOTPVerificationRef.current?.retryOtp('SMS');
  console.log(response);
}
```

### `verifyOtp`

The verifyOtp method is used to verify an OTP entered by the user.

```jsx
const handleVerifyOtp = async () => {
  const response = await ExposeOTPVerificationRef.current?.verifyOtp(123456);
  console.log(response);
}
```



<br>
<br>
<br>

## License

```
Copyright 2022 MSG91
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
```