2.0.1 • Published 5 months ago

react-native-sendotp-test1 v2.0.1

Weekly downloads
-
License
ISC
Repository
github
Last release
5 months ago

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 component.

Installation

npm install @msg91comm/react-native-sendotp react-native-webview@^11.23.1

This library depends on react-native-webview.

Example

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;

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.