react-native-siarashield

Siarashield

To authenticate using siarashield

Prerequisites

These steps are to dynamically get public and private keys.

Installation

$ npm install react-native-dotenv

If you are using Yarn:

$ yarn add react-native-dotenv

This Package Url : Follow for more instruction more instruction.

Basic Setups : Add this code in your babel.config file.

{
  "plugins": [
    [
      "module:react-native-dotenv",
      {
        "moduleName": "@env",
        "path": ".env",
        "safe": false,
        "allowUndefined": true
      }
    ]
  ]
}

Configuration : Create a file on your root folder which name is ".env" .

Note: Use public key "TEST-CYBERSIARA" for staging/development.

Note : Open this link you can generate your public and private key open link.

.env

PUBLIC_KEY = TEST-CYBERSIARA      <!-- In that place you can put your public and private key   -->
PRIVATE_KEY = TEST-CYBERSIARA

Configuration This .env File into your project : Create a Folder on Your Project (src/Config) and after then Create a file which name is "envs.js"

// Paste this code into your "envs.js" file
import { PUBLIC_KEY, PRIVATE_KEY } from "@env";

const PUBLIC_KEYS = {
  PUBLIC_KEY,
};

const PRIVATE_KEYS = {
  PRIVATE_KEY,
};

export default { PUBLIC_KEYS, PRIVATE_KEYS };

Note : First complete above steps after then follow below steps.

Installation

Using npm:

npm install --save react-native-siarashield

or using yarn:

yarn add react-native-siarashield

Permissions

To get the Device Ip,

1. On Android you must get Device Ip permission:

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

Properties

| Prop | Description | Default | Required | | ---------------------- | ----------------------------------------------------------------------------- | ------- | -------- | | title | The name of the button displayed to the user. | Login | No | | PUBLIC_KEY | Set the public key, Which get from the mycybersiara.com site | - | Yes | | PRIVATE_KEY | Set the private key, Which get from the mycybersiara.com site | - | Yes | | onPress | Button press event, Set your custom logic for button press events | Method | Yes | | verifyIconName | Include a GIF or images that you want to display upon successful verification | GIF | No | | titleStyle | Modify title text styles | - | No | | buttonStyles | Modify button styles | - | No | | isShowVerifyIcon | Show verification icon on button, while completed verification. | true | No |

Usage

import CyberSiaraCaptcha from "react-native-siarashield";

// Import this file for geting data from that file
import envs from "../Config/envs";

const Login = () => {
  // You can change isLogin Props value using this Method.
  const onSubmitHandler = () => {
    // You can set your business logic here
    // like. Validation user form, APIs calling
  };

  return (
    // You can change props value by state variable.
    <CyberSiaraCaptcha
      PUBLIC_KEY={envs.PUBLIC_KEYS.PUBLIC_KEY}
      PRIVATE_KEY={envs.PRIVATE_KEYS.PRIVATE_KEY}
      onPress={onSubmitHandler}
    />
  );
};