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.

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@alpha";
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:

Next Steps

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