Quick Start: React-Native Apps

Follow these steps to begin using the Arcana Auth product:

1. Use the Arcana Developer Dashboard and register the app; obtain a unique Client ID.
2. Set up social providers that will be enabled for onboarding app users.
3. Install the SDK and integrate the app with the Arcana Auth Flutter SDK. Use the Client ID to create a new AuthProvider and use either the built-in plug-and-play login UI or custom UI to onboard users.
4. Allow authenticated users to instantly access the Arcana wallet.
5. Add code in the app for programmatically accessing Web3 wallet operations supported by the Arcana wallet.

Register & Configure

First, register and then configure the app using the Arcana Developer Dashboard. As part of the app registration, a unique value, Client ID, is assigned to each app. This is required for integrating the app with the Arcana Auth React-Native SDK.

During app configuration, developers can enable configure one or more authentication providers to onboard app users.

Install Auth SDK

You need to install the auth-react-native package to integrate the app with the Arcana Auth React-Native SDK.

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

Note: You are not required to manually link this module as it supports React Native auto-linking.

Integrate Arcana Auth React-Native SDK

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 >
      <Auth clientId="xar_test_xxx" theme="light" ref={authRef} />
    </View>
  );
}

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

Onboard Users

Use the Auth functions for onboarding users in the app via the configured social providers such as Google.

// For logging in
const loginWithGoogle = () => {
  if(authRef !== null){
    authRef.current.loginWithSocial().then(() => {
      // logged in
    }).catch(err => {
      // already logged in
      // or error during login
    }) 
  }
}

Show/Hide Wallet

Once the user logs into the app, they can instantly access the Arcana wallet. Developers can choose to show and hide the wallet as required by the app.

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

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

Logout

Add code to enable users to log out of the wallet. Note that the wallet UI also provides a way for the user's to log out using the 'User Profile' tab.

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

Sign Blockchain Transactions

The Arcana wallet supports various Web3 operations via JSON-RPC calls and EIP-1193 requests. Use the following methods to get information about the logged-in user, the account details and issue send transaction requests programmatically via the app. When a blockchain transaction is triggered, a transaction notification is displayed in the app context. Users can choose to approve or reject the request.

// For getting logged in user info
const getUserInfo = async () => {
  if(authRef !== null){
    return authRef.current.getUser();
  }
};

// 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();
  }
};

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

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

Event Handling

Refer to the following sample code to understand how to handle events in the React-Native app related to the Web3 operations initiated by the Arcana wallet.

return (
    <View >
      <Button
        title={"Get User Info"}
        onPress={() =>
          getUserInfo()
        }
      />
      <Button
        title={"Send Transaction"}
        onPress={() =>
          sendTransaction({ to: '', value: '', data: '' })
        }
      />
        <Button
        title={"Get Account"}
        onPress={() =>
          getAccount()
        }
      />

        <Button
        title={"Send Request"}
        onPress={() =>{
          sendRequest({ method:"", params:[] })
        }}
      />
       <Button
        title={"log out"}
        onPress={() => logout()}
      />
      <Auth
          clientId="xar_test_...."
          theme="dark"
          ref={authRef}
      />
    </View>
  );

After integrating the React-Native app with the Arcana Auth React-Native SDK and adding code to onboard users via 'Google', you can deploy the app. Depending upon the environment selected during the Auth SDK initialization earlier, the app will be deployed on the Arcana Testnet or Mainnet.

Deploy App

An app integrated with the Arcana Auth React-Native SDK can be deployed for use only after the developer has completed these steps:

• Register and configure the app via the Arcana Developer Dashboard
• Integrate the app with the Arcana Auth React-Native SDK
• Add code to onboard users
• Add code to allow authenticated users to sign the blockchain transactions

Developers can choose to deploy one instance of the app (say, under active development) on the Arcana Testnet while simultaneously deploying a stable version of their app (say, one validated on Testnet and ready for users) on the Arcana Mainnet.

By default, when an app is registered, a 'Testnet' configuration profile is associated with the app, and a unique Client ID is assigned to this 'Testnet' profile. To deploy your app on the Arcana Mainnet, you need to create a corresponding 'Mainnet' configuration profile and update the Arcana Auth React-Native SDK integration code to use the new Client ID assigned to the app's 'Mainnet' configuration profile. For details on how to deploy your app on the Arcana Testnet / Mainnet, see App Deployment Guide.

That is all!

The React-Native mobile app is now ready to onboard users. Once the user logs in, the Arcana wallet will be instantly accessible for Web3 wallet operations through the UI. Developers can also add code in the React-Native mobile app and call wallet functions programmatically to trigger blockchain transactions. When a user action or programmatically invoked wallet operation triggers a blockchain transaction, a transaction notification will pop up in the React-Native mobile app context, asking the user to review the transaction and accept or reject the blockchain request.

See also

• User Authentication
• Video Tutorials
• Sample React-Native App Integration