@arcana/auth-react-native

Arcana SDK

A well typed React Native library providing support for Crypto wallet Authentication on iOS and Android, including support for all currency variants.

Prerequisites to using this library

The @arcana/auth-react-native library will not work if you do not ensure the following:

• You are using React Native version 0.60 or higher.

• (iOS only) You have setup react-native iOS development environment on your machine (Will only work on Mac). If not, please follow the official React Native documentation for getting started: React Native getting started documentation.

• (iOS only) You are using Xcode version 11 or higher. This will allow you to develop using iOS version 13 and higher, when the APIs for Sign In with Apple became available.

• Once you're sure you've met the above, please add webview package npm i react-native-webview

Installation

npm i @arcana/auth-react-native
(cd ios && pod install)

You will not have to manually link this module as it supports React Native auto-linking.

Usage

1. Initial set-up

//A
import React, { useState } from "react";
import { Button, View } from "react-native";
import Apps from "@arcana/auth-react-native";

export default function App() {
  const componentARef = React.useRef(null);
  const [modalVisible, setModalVisible] = useState(false);

  const handleOpenModal = () => {
    setModalVisible(true);
  };

  const handleCloseModal = () => {
    setModalVisible(false);
  };

  return (
    <View style={{ flex: 1 }}>
      <Button title="Login" onPress={handleOpenModal} />
      <Apps
        ref={componentARef}
        visible={modalVisible}
        onClose={handleCloseModal}
      />
    </View>
  );
}

2. Implement the Auth process

       <Apps
          ref={componentARef}
          getUserInfoRes ={(ev) => {
            console.log('response', JSON.stringify(ev));
          }}
          sendDataRes = {(ev) => {
            console.log('response', JSON.stringify(ev));
          }}
          logOutRes ={(ev) => {
            console.log('response', JSON.stringify(ev));
          }}
          visible={modalVisible}
          onClose={handleOpenModal}
          clientid={'XXXXXXX'} 
        />

3. Events

// Returns 'user info'
  const getUserInfo = data => {
    if(componentARef!==null){
      componentARef?.current.getUserInfo(data);
    }
  };

// For 'initiating transaction'
  const sendTransaction = data => {
    if(componentARef!==null){
    componentARef?.current.sendTransaction(data);
    }
  };

// Returns 'account detail'
  const getAccount = data => {
    if(componentARef!==null){
    componentARef?.current.getAccount(data);
    }
  };

//Global Method To send any request type
  const sendRequest = (id,method,params) => {
    if(componentARef!==null){
    componentARef?.current.sendRequest(id,method,params);
    }
  };

  //Logout User from session
  const logOut = (id) => {
    if(componentARef!==null){
    componentARef?.current.logOut(id);
    }
  };

     

4. Implementation of events

 return (
    <View style={{flex: 1}}>
      <Button
        title={"Get User Info"}
        onPress={() =>
          getUserInfo('ID')
        }
      />
      <Button
        title={"Send Transaction"}
        onPress={() =>
          sendTransaction('ID',"KEY","KEY","KEY")
        }
      />
        <Button
        title={"Get Account"}
        onPress={() =>
          getAccount('ID')
        }
      />

        <Button
        title={"Send Request"}
        onPress={() =>{sendRequest( 'ID',"METHOD",'PARAMS')}}
      />
       <Button
        title={"log out"}
        onPress={() =>{logOut('ID')}}
      />
    {showWebView && (
        <Apps
          ref={componentARef}
          getUserInfoRes ={(ev) => {
            //USER INFO
          }}
          sendTransactionRes = {(ev) => {
                       //GET TRANSATION UPDATE

          }}
          getAccountRes = {(ev) => {
                        //GET ACCOUNT UPDATE

          }}
          sendDataRes = {(ev) => {
                       //GET RESPONSE OF ANY GLOBAL REQUEST 

          }}

          noNetwork={()=>{
            //NETWORK PING CALLBACK (BOOLEAN)
          }}
 
        />
        
      )}
      <Text>{textData}</Text>
    </View>
  );

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT

Keyword

oauth, social, authentication, passwordless, signup, login, web3, wallet, reactnative