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.
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.
See also
- 'React-Native' integration example:
sample-auth-react-native
submodule in Auth Examples - Arcana Developer Dashboard User Guide
- Configuring Arcana wallet visibility
- Developer's Guide for Arcana wallet
- Handling Arcana Auth SDK error messages
- Arcana Auth SDK Usage Guide
- Arcana Auth SDK Reference Guide
- Arcana Auth Wagmi SDK Reference Guide
- Arcana Auth Flutter SDK Reference Guide
- Enabling Gasless Operations in an App
- Arcana Gasless (Standalone) SDK Quick Start Guide
- Arcana Gasless (Standalone) SDK Usage Guide
- Gasless Error Messages
Arcana Auth React-Native SDK Quicklinks