Get Started: React-Native Apps

'React-Native' Web3 apps can easily onboard users via social login by integrating with the Arcana Auth React-Native SDK!

Prerequisites

React-Native v0.71.8 or higher

1. Register & Configure

Log into the Arcana Developer Dashboard:

https://dashboard.arcana.network

In the Manage Apps dashboard screen, click the first card and create a new app entry to register app. Each app is assigned a unique Client ID at registration. The Client ID is required for integrating the app with the Arcana Auth SDK.

A default Testnet configuration profile is associated with the registered app. In the Manage Apps dashboard screen, select the registered app card and click 'Testnet' configuration settings. Choose Social Auth to configure user onboarding providers. Optionally enable gasless transactions in Arcana wallet to incentivize app users.

2. Install SDK

For 'React-Native' Web3 apps, install the auth-react-native package.

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.

Use latest SDKs

Use the latest Arcana Auth React-Native SDK release v0.0.4 available at npm.

3. Integrate

Use the unique client ID assigned to the app during registration to integrate with the 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

Call Auth functions and onboard users through the configured authentication providers.

Arcana JWT Token

Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the Arcana JWT Token. App developers can use this token to verify user login and subsequently generate another token for app use. Learn more about how to verify the Arcana JWT Token for apps deployed on Testnet and Mainnet.

LoginUser InfoEvent Handling

Google Login*

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

Logout

Add code to provide user log out option via the logout method or let authenticated users log out using the wallet UI logout option in the 'User Profile' tab.

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

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

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

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

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>
  );

Sign Transactions

The Arcana wallet supports various Web3 operations via JSON-RPC calls and EIP-1193 requests. Use authRef created during integration earlier to call Web3 wallet operations.

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

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

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

4. Deploy

Finally, deploy the app on Testnet (default). For Mainnet deployment, see Testnet > Mainnet Migration Guide.

That's all!

The 'React-Native' mobile Web3 app is now powered by the Arcana Auth React-Native SDK to onboard users via social login and allow authenticated users to sign blockchain transactions using the Arcana wallet.