Para supports OAuth authentication in React Native and Expo applications, allowing users to sign in using popular providers like Google, Discord, and Farcaster. This guide explains how to implement OAuth login in your mobile app using Para’s React Native SDK.

The OAuth flow in mobile applications requires handling browser sessions and deeplinks to redirect users back to your app after successful authentication. Once the OAuth flow completes, Para uses the returned email to authenticate users through the standard email-based flow, creating or authenticating with a native passkey.

​
Prerequisites

Before implementing OAuth authentication, ensure you have completed the basic Para setup for your React Native or Expo application.

React Native Setup

React Native Setup

Complete the basic Para setup for React Native before implementing OAuth

Expo Setup

Expo Setup

Complete the basic Para setup for Expo before implementing OAuth

​
Implementation

​
Installation

Install the In-App Browser package to handle OAuth redirects securely:

npm install react-native-inappbrowser-reborn
# or
yarn add react-native-inappbrowser-reborn

For iOS, add the following to your Info.plist to define your URL scheme:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>your-app-scheme</string>
    </array>
  </dict>
</array>

For Android, add your URL scheme to AndroidManifest.xml:

<activity
    android:name=".MainActivity"
    android:launchMode="singleTask">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="your-app-scheme" />
    </intent-filter>
</activity>

Both react-native-inappbrowser-reborn and expo-web-browser use secure browser implementations that leverage the device’s native browser engine rather than a WebView. This provides stronger security protections, including shared security context with the device’s browser, protection against common web vulnerabilities, and support for modern authentication methods.

​
Implementing Authentication

import { para } from "../your-para-client";
import { OAuthMethod } from "@getpara/react-native-wallet";
import { InAppBrowser } from "react-native-inappbrowser-reborn";

const APP_SCHEME = "your-app-scheme";

async function handleOAuthLogin(provider: OAuthMethod) {
  if (provider === OAuthMethod.FARCASTER) {
    return handleFarcasterLogin();
  }

  const oauthUrl = await para.getOAuthURL({
    method: provider,
    deeplinkUrl: APP_SCHEME,
  });

  await InAppBrowser.openAuth(oauthUrl, APP_SCHEME, {
    ephemeralWebSession: false,
    showTitle: false,
    enableUrlBarHiding: true,
  });

  const { email, userExists } = await para.waitForOAuth();

  if (userExists) {
    await para.login({ email: email! });
    // Navigate to your authenticated screen
  } else {
    const biometricId = await para.getSetUpBiometricsURL({
      isForNewDevice: false,
      authType: "email",
    });

    if (biometricId) {
      await para.registerPasskey({ email: email!, biometricsId: biometricId });
      // Navigate to your authenticated screen
    }
  }
}

OAuth authentication with Para still requires creating a native passkey to secure the user’s wallets. After OAuth completes, Para associates a native passkey with the user’s account. For returning users, the native passkey is used for authentication. The passkey is associated on a per-app basis, making authentication streamlined, and users will only see passkey options they created for your specific app.

​
Examples

Explore our complete example implementations for OAuth authentication with Para:

React Native OAuth Example

React Native OAuth Example

Complete implementation of OAuth authentication in React Native

Expo OAuth Example

Expo OAuth Example

Complete implementation of OAuth authentication in Expo

​
Next Steps

After integrating Para, you can explore other features and integrations to enhance your Para experience.

EVM Integration

EVM Integration

Learn how to use Para with EVM-compatible libraries like ethers.js, viem, and wagmi.

Solana Integration

Solana Integration

Discover how to integrate Para with solana-web3.js.

Cosmos Integration

Cosmos Integration

Explore Para integration with Cosmos ecosystem using CosmJS, Cosmos Kit, and Graz.