Create Mobile App and Integrate Meta Account Authentication

This guide walks you through how to integrate Meta Account authentication into your mobile app using the @burnt-labs/abstraxion-react-native package. With Meta Accounts, users can easily sign in using familiar login methods such as email or social accounts, eliminating the need for wallets or seed phrases. This simplifies the onboarding experience and lowers the barrier for mainstream adoption by providing a secure, traditional style authentication flow within a blockchain application.

Prerequisites

Before getting started, ensure you have the following installed:

• Node.js (v16 or later)

• A code editor like VS Code

What Are Meta Accounts?

Meta Accounts are smart contract accounts created and managed by XION’s Abstraxion system. They abstract away traditional blockchain complexity and provide:

• An oAuth2 style login mechanism (no wallet required) that allows for login via email, social accounts, passkeys and crypto wallets

• Instant execution of pre-approved smart contract calls

• Gasless transactions which allows for easy user onboarding

Create a New Expo Project

In your terminal, run the following commands which will create an Expo app with minimum required npm dependencies without configuring navigation due to the use of the blank template:

npx create-expo-app my-xion-app --template blank-typescript
cd my-xion-app

Install Required Dependencies

Install the Abstraxion React Native package and storage utility:

npm install @burnt-labs/abstraxion-react-native @react-native-async-storage/async-storage@2.1.2 react-native-get-random-values react-native-libsodium react-native-quick-crypto expo-dev-client

Set Up Environment Variables

Environment variables are key-value pairs configured outside your source code that allow your app to behave differently depending on the environment. The Expo CLI will automatically load environment variables with an EXPO_PUBLIC_ prefix from .env files for use within your code.

To interact with your deployed contracts, you’ll set a few environment variables:

Create a .env.local file in the root of your project and add the following where we've added an example contract with a treasury contract that's configured to work along with it:

EXPO_PUBLIC_USER_MAP_CONTRACT_ADDRESS="xion1xlsdw7en2a45v9z7stmfrml3f88zj6lrxcq5uk7vv4xy4wyhjdqqlgwqa8"
EXPO_PUBLIC_TREASURY_CONTRACT_ADDRESS="xion1hcuf8dv4n2h6gffez3e0y70gjm20g72mtmcl3qf7t4q0laz5ef0shfm50z"
EXPO_PUBLIC_RPC_ENDPOINT="https://rpc.xion-testnet-2.burnt.com:443"
EXPO_PUBLIC_REST_ENDPOINT="https://api.xion-testnet-2.burnt.com"

• EXPO_PUBLIC_CONTRACT_ADDRESS - The address of the smart contract your app will interact with.

• EXPO_PUBLIC_TREASURY_CONTRACT_ADDRESS - The treasury contract associated with the above contract. It enables gasless transactions using fee grants and handles authorization permissions, allowing your app to execute transactions on behalf of the Meta Account holder—delivering a seamless user experience.

• EXPO_PUBLIC_RPC_ENDPOINT - The RPC endpoint used to communicate with the XION blockchain.

• EXPO_PUBLIC_REST_ENDPOINT - The REST endpoint for querying chain state via HTTP.

You can access these values in your code using process.env.. For example:

const contractAddress = process.env.EXPO_PUBLIC_CONTRACT_ADDRESS;

Set Up "AbstraxionProvider"

The AbstraxionProvider gives your app access to authentication and wallet state globally.

Update "app.json"

There are some important items here that have to be set for your app to run on either android and ios. Expo uses a scheme to know which app to redirect back to and this must be unique to your app. Also for Android a package name must be set and for iOS a bundleIdentifier must be set.

Update your app.json file with the following;

{
  "expo": {
    "name": "my-xion-app",
    "slug": "my-xion-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "newArchEnabled": true,
    "scheme": "abstraxion-expo-demo",
    "splash": {
      "image": "./assets/splash-icon.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.anonymous.myxionapp"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "edgeToEdgeEnabled": true,
      "package": "com.anonymous.myxionapp"
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

Update "App.tsx"

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { AbstraxionProvider } from "@burnt-labs/abstraxion-react-native";

const treasuryConfig = {
  treasury: EXPO_PUBLIC_TREASURY_CONTRACT_ADDRESS,
  gasPrice: "0.001uxion",
  rpcUrl: EXPO_PUBLIC_RPC_ENDPOINT,
  restUrl: EXPO_PUBLIC_REST_ENDPOINT,
  callbackUrl: "abstraxion-expo-demo://", // This comes from app.json and should be unique to your app
};

export default function App() {
  return (
    <AbstraxionProvider config={treasuryConfig}>
      <View style={styles.container}>
        <Text>Open up App.tsx to start working on your app!</Text>
        <StatusBar style="auto" />
      </View>
    </AbstraxionProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

This wraps your entire app and ensures all child components can access authentication state and methods.

Authentication Flows

Once wrapped in the provider, you can use the useAbstraxion() hook to access login methods, wallet state, and logout. Let's implement login and logout buttons to see authentication in action. Let's update App.tsx with the following:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { useAbstraxionAccount, useAbstraxionSigningClient, AbstraxionProvider } from '@burnt-labs/abstraxion-react-native';
import { useState } from 'react';

const treasuryConfig = {
  treasury: process.env.EXPO_PUBLIC_TREASURY_CONTRACT_ADDRESS,
  gasPrice: "0.001uxion",
  rpcUrl: process.env.EXPO_PUBLIC_RPC_ENDPOINT,
  restUrl: process.env.EXPO_PUBLIC_REST_ENDPOINT,
  callbackUrl: "abstraxion-expo-demo://", // This comes from app.json and should be unique to your app
};

function AppContent() {
  const account = useAbstraxionAccount();
  const { client: signingClient } = useAbstraxionSigningClient();
  const [isConnecting, setIsConnecting] = useState(false);

  const handleLogin = async () => {
    try {
      setIsConnecting(true);
      await signingClient?.signIn();
    } catch (error) {
      console.error('Login error:', error);
    } finally {
      setIsConnecting(false);
    }
  };

  const handleLogout = async () => {
    try {
      await signingClient?.signOut();
    } catch (error) {
      console.error('Logout error:', error);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Xion Abstraxion Demo</Text>
      
      {account ? (
        <View style={styles.userInfo}>
          <Text style={styles.welcomeText}>Welcome!</Text>
          <Text style={styles.addressText}>Address: {account.publicKey}</Text>
          <TouchableOpacity 
            style={styles.button} 
            onPress={handleLogout}
            disabled={isConnecting}
          >
            <Text style={styles.buttonText}>
              {isConnecting ? 'Logging out...' : 'Logout'}
            </Text>
          </TouchableOpacity>
        </View>
      ) : (
        <TouchableOpacity 
          style={styles.button} 
          onPress={handleLogin}
          disabled={isConnecting}
        >
          <Text style={styles.buttonText}>
            {isConnecting ? 'Connecting...' : 'Login with Xion'}
          </Text>
        </TouchableOpacity>
      )}
      
      <StatusBar style="auto" />
    </View>
  );
}

export default function App() {
  return (
    <AbstraxionProvider config={treasuryConfig}>
      <AppContent />
    </AbstraxionProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 30,
  },
  userInfo: {
    alignItems: 'center',
    gap: 10,
  },
  welcomeText: {
    fontSize: 20,
    fontWeight: '600',
    marginBottom: 10,
  },
  addressText: {
    fontSize: 14,
    color: '#666',
    marginBottom: 20,
  },
  button: {
    backgroundColor: '#007AFF',
    paddingHorizontal: 20,
    paddingVertical: 12,
    borderRadius: 8,
    minWidth: 200,
    alignItems: 'center',
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
  },
});

Here's what has been added:

Login Functionality

• A “Login with Xion” button appears when the user is not logged in.

• Utilizes the useAbstraxionSigningClient hook to handle authentication.

• Displays a loading state while connecting.

Logout Functionality

• A “Logout” button appears when the user is logged in.

• Uses the disconnect method from the signing client to log out.

• Displays a loading state while logging out.

User Information Display

• The user’s address is shown once logged in.

• Clean, modern UI with appropriate styling.

Error Handling

• Proper error catching implemented for both login and logout operations.

• Loading states prevent repeated clicks and improve UX.

---

How to Test It

1. Run your app.

For Android

npx expo run:android

For iOS

npx expo run:ios

1. Click the “Login with Xion” button.

2. Complete the Xion Abstraxion authentication flow.

3. Upon success, your address should appear along with a “Logout” button.

4. Click “Logout” to disconnect the session.

What’s Next?

Now that your app is authenticated with Meta Accounts, you're ready to start interacting with the blockchain.

Depending on your goals, here are two paths you can take next:

Launch a Mobile app in 5 Minutes

If you're looking to get something up and running quickly, follow our streamlined quick-start guide: Launch a Mobile dApp in 5 Minutes.

This guide walks you through:

• Using our one-click launcher to deploy a contract and frontend

• Setting up a mobile app using a prebuilt template

• Authenticating users and saving their data to the blockchain

It’s the fastest way to see the full app lifecycle in action.

Deep Dive: How the Mobile app is built

If you want to understand how the mobile app works under the hood, explore this step-by-step tutorial: Building a React Native Mobile App with Abstraxion (Xion.js).

This guide breaks down:

• Smart contract integration using the Abstraxion package

• Transaction execution with Meta Accounts

• Querying and updating on-chain data

• Structuring your app for production use

It's ideal if you're building custom flows, want to extend contract functionality, or are preparing for a real-world deployment.