React-Native Code Sample

Before integrating a React-Native Web3 app with the Arcana Auth SDK, address the pre-requisites first. Then install the auth-react-native package and integrate the SDK.

Prerequisites

Log in to the Arcana Developer Dashboard: https://dashboard.arcana.network. Then register and configure the required user onboarding options. For details, see how to configure authentication providers.

NextJS App config

By default, a Testnet configuration profile is created after the app is registered. A unique Client ID is assigned to the React-Native app. Note this value, it will be required later during app integration.

Client ID for the app

Install SDK

Install the latest version of the auth-react-native package.

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

Note

For a complete React-Native integration example, see Auth Examples GitHub Repository.

Integrate App

Refer to the React-Native sample code in the repository mentioned earlier. In the App.js file, the Auth component is imported and initialized using the Client ID assigned to the React-Native app during app registration.

sample-auth-react-native/App.js

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

...

  return (
    <>
      <View>
        <Button title="Hide" onPress={hide} />
        <Button title="Login with google" onPress={login} />
        <Button title="Login with google" onPress={login} />
        <Button title="Get balance" onPress={getBalance} />
        <Button title="Send transaction" onPress={sendTx} />

        <Button title="Get User Info" onPress={getUser} />
        <Button title="Get Account" onPress={getAccount} />
        <Button title="Show wallet" onPress={show} />
        <Button title="Logout" onPress={logout} />
        <Text>{JSON.stringify(result)}</Text>
      </View>
      <Auth
        clientId={"xar_dev_6919ba95cfd93b9eb23846dc748e082cb47d7f89"}
        ref={componentARef}
      />
    </>
  );

Onboard Users

Next, add code to onboard users. In this example, we use the custom login UI option and use loginWithSocial method of the Auth to onboard users via 'Google' as the social provider.

sample-auth-react-native/App.js

...
  const login = async () => {
    componentARef?.current.loginWithSocial("google");
  };
...

Once a user authenticates, the built-in Arcana wallet is displayed in the app's context and can be used for signing blockchain transactions. See Arcana wallet User Guide for more Web3 wallet operation details.

Use Web3 Wallet Operations

Developers can add code as required to programmatically call Web3 wallet operations for authenticated users. See Arcana wallet Developer's Guide and the Arcana Developer Dashboard User Guide for details on wallet configuration.

That's all!!!

The React-Native app is successfully integrated and ready to onboard Web3 users via social login, email using the configured providers. Authenticated users can instantly access the Arcana wallet to sign blockchain transactions.