@arcana/auth-react-native NPM

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, plase 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

Initial set-up

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

export default function App() {
  const authRef = React.useRef(null);

  return (
    <View style={{ flex: 1 }}>
      <Auth clientId={"xar_test_xxx"} theme={"light"} ref={authRef} />
    </View>
  );
}

2. Add Auth component

<Auth clientId={"xar_test_xxx"} theme="dark" />

3. Functions

// For logging in
const loginWithGoogle = () => {
  if(authRef !== null){
    authRef.current.loginWithSocial().then(() => {
      // logged in
    }).catch(err => {
      // already logged in
      // or error during login
    }) 
  }
}
// For getting logged in user info
const getUserInfo = async () => {
  if(authRef !== null){
    return await authRef.current.getUserInfo();
  }
};

// For sending transaction
const sendTransaction = data => {
  if(authRef !== null){
    return await authRef.current.sendTransaction(data);
  }
};

// For getting current account
const getAccount = () => {
  if(authRef !== null){
    return await authRef.current.getAccount();
  }
};

// EIP 1193 request method
const request = (method, params) => {
  if(authRef !== null){
    return await authRef.current.request({ method, params });
  }
};

// Logout User from session
const logout = () => {
  if(authRef !== null){
    authRef.current.logout().then(() => {
      // on logout
    });
  }
};

// For showing wallet
const showWallet = () => {
  if(authRef !== null){
    authRef.current.showWallet();
  }
}

// For hiding wallet
const hideWallet = () => {
  if(authRef !== null){
    authRef.current.hideWallet();
  }
}

4. Implementation of events

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

        <Button
        title={"Send Request"}
        onPress={() =>{sendRequest( 'ID',"METHOD",'PARAMS')}}
      />
       <Button
        title={"log out"}
        onPress={() => logout()}
      />
      <Auth
          clientId={"xar_test_...."}
          theme="dark"
          ref={authRef}
      />
    </View>
  );