Expo

Expo is a framework built on React Native that provides many out-of-the-box features, similar to NextJS for web but designed for mobile development. Para provides a @getpara/react-native-wallet package that works seamlessly in both React Native bare and Expo workflows, utilizing the device’s Native Passkeys for secure wallet management.

​

Prerequisites

To use Para, you need an API key. This key authenticates your requests to Para services and is essential for integration.

​

Dependency Installation

Install the required dependencies:

npm install @getpara/react-native-wallet @react-native-async-storage/async-storage react-native-keychain react-native-modpow react-native-passkey react-native-quick-base64 @craftzdog/react-native-buffer react-native-quick-crypto

​

Project Setup

To use the @getpara/react-native-wallet package in your Expo project, you will need to do some initial project setup.

For passkeys to work correctly we have to setup the Relying Party ID for both iOS and Android. This ensures passkeys are bound to the domains they were created for.

{
  "expo": {
    "ios": {
      "bundleIdentifier": "your.app.bundleIdentifier",
      "associatedDomains": [
        "webcredentials:app.beta.usecapsule.com?mode=developer",
        "webcredentials:app.usecapsule.com"
      ]
    }
  }
}

{
  "expo": {
    "ios": {
      "bundleIdentifier": "your.app.bundleIdentifier",
      "associatedDomains": [
        "webcredentials:app.beta.usecapsule.com?mode=developer",
        "webcredentials:app.usecapsule.com"
      ]
    }
  }
}

{
  "expo": {
    "android": {
      "package": "com.getpara.example.expo" // For testing
      // or your actual package name for production
    }
  }
}

const { getDefaultConfig } = require("expo/metro-config");

const config = getDefaultConfig(__dirname);

config.resolver.extraNodeModules = {
  crypto: require.resolve("react-native-quick-crypto"),
  buffer: require.resolve("@craftzdog/react-native-buffer"),
};

module.exports = config;

import "@getpara/react-native-wallet/dist/shim";
// ... rest of your imports and layout code

npx expo prebuild
npx expo run:ios
npx expo run:android

​

Using the Para SDK

The @getpara/react-native-walletprovides two main authentication flows: creating a new user and logging in an existing user. Both flows utilize Native Passkeys for secure and seamless authentication.

​

Setup the Para Client

import { ParaMobile, Environment } from "@getpara/react-native-wallet";

export const para = new ParaMobile(Environment.BETA, YOUR_API_KEY);

import { para } from '../para';
import { useEffect } from 'react';

export default function Layout() {
  useEffect(() => {
    const initPara = async () => {
      await para.init();
    };
    
    initPara();
  }, []);
  // ... rest of your layout code
}

​

Create a New User

You have three options to create a new user:

​

Create a user with Email

const handleUserRegistration = async (email: string) => {
  const userExists = await para.checkIfUserExists({ email });
  if (userExists) {
    await para.login({ email });
    return true; // User logged in
  }
  await para.createUser({ email });
  return false; // Verification needed
};

const handleVerification = async (email: string, verificationCode: string) => {
  const biometricsId = await para.verifyEmailBiometricsId({ verificationCode });
  
  if (biometricsId) {
    await para.registerPasskey({ email, biometricsId });
    return true;
  }
  
  return false;
};

// Usage example:
const needsVerification = await handleUserRegistration("user@example.com");

if (!needsVerification) {
  await handleVerification("user@example.com", "123456");
}

​

Create a user with Phone Number

​

Create a user with OAuth

​

Login Existing User

This flow demonstrates how to authenticate an existing user using their email and passkey.

import { ParaMobile, Environment } from "@getpara/react-native-wallet";

const para = new ParaMobile(Environment.BETA, YOUR_API_KEY);

const handleLogin = async (email: string): Promise<void> => {
  try {
    const userExists = await para.checkIfUserExists({ email });
    if (userExists) {
      await para.login();
      console.log("User logged in successfully");
    } else {
      console.log("User does not exist. Please create a new account.");
    }
  } catch (error) {
    console.error("Login error:", error);
  }
};

By following these steps, you can implement a secure and user-friendly authentication system in your Expo application using the Para SDK.

​

Examples

For practical implementations of the Para SDK in Expo environments, check out our GitHub repository:

​

Next Steps

After integrating Para, you can explore other features and integrations to enhance your Para experience. Here are some resources to help you get started:

​

Ecosystems

Learn how to use Para with popular Web3 clients and wallet connectors. We’ll cover integration with key libraries for EVM, Solana, and Cosmos ecosystems.

If you’re ready to go live with your Para integration, make sure to review our go-live checklist:

​

Troubleshooting

If you encounter issues during the integration or usage of the Para SDK in your Expo application, here are some common problems and their solutions:

For a more comprehensive list of solutions, including Expo-specific issues, visit our troubleshooting guide:

​

Integration Support

If you’re experiencing issues that aren’t resolved by our troubleshooting resources, please contact our team for assistance. To help us resolve your issue quickly, please include the following information in your request:

1. 1

   A detailed description of the problem you’re encountering.

2. 2

   Any relevant error messages or logs.

3. 3

   Steps to reproduce the issue.

4. 4

   Details about your system or environment (e.g., device, operating system, software version).

Providing this information will enable our team to address your concerns more efficiently.