Para supports various OAuth methods to authenticate users across different platforms. Currently supported platforms include Google, Facebook, Discord, Twitter, and Apple.

Para automatically links wallets with a common email identifier to avoid creating duplicate wallets if users choose different methods in different sessions. Because of this, users must have an email associated with their login account of choice. Without an email linked to the account, authentication will fail and the user will see a prompt to either add email to their social account or try a different method.

​
Integrating Social Logins

You have two options when for using social logins with Para. You can use the Para Modal and simply pass in your desired OAuth methods, or you can use the SDK to manually control the OAuth process and create your own custom UI.

​
Para Modal

Social Logins can be easily integrated via the ParaModal component by passing the desired options as an array to the oAuthMethods property:

1

Configure OAuth Methods

import { ParaModal, OAuthMethod } from "@getpara/web-sdk";

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

<ParaModal
  para={para}
  appName="YourAppName"
  oAuthMethods={[
    OAuthMethod.GOOGLE,
    OAuthMethod.FACEBOOK,
    OAuthMethod.APPLE,
    OAuthMethod.TWITTER,
    OAuthMethod.DISCORD,
    OAuthMethod.FARCASTER,
  ]}
/>;
You can just use [Object.values(OAuthMethod)] to get all the available OAuth methods as an array.

​
Custom OAuth Implementation

For developers implementing their own authentication UI, Para provides methods to handle OAuth authentication and subsequent wallet creation.

1

Handle OAuth Authentication

import { OAuthMethod } from "@getpara/web-sdk";

const handleOAuthAuthentication = async (method: OAuthMethod) => {
  const oAuthURL = await para.getOAuthURL(method);
  window.open(oAuthURL, "oAuthPopup", "popup=true");

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

  const authUrl = userExists
    ? await para.initiateUserLogin({ email, useShortUrl: false })
    : await para.getSetUpBiometricsURL({ authType: "email", isForNewDevice: false });

  const popupWindow = window.open(authUrl, userExists ? "loginPopup" : "signUpPopup", "popup=true");

  const result = await (userExists ? para.waitForLoginAndSetup({ popupWindow }) : para.waitForPasskeyAndCreateWallet());

  if ("needsWallet" in result && result.needsWallet) {
    await para.createWallet({ skipDistribute: false });
  }
  if ("recoverySecret" in result) {
    const recoverySecret = result.recoverySecret;
    // Store or handle recovery secret as needed
  }
};

This implementation provides a complete OAuth flow, from initial authentication through wallet creation and recovery secret generation. For best practice and ease of use, you can split the code into separate functions for each new user creation flow, login flow, and wallet creation flow.

Beta Testing Email In the BETA Environment, you can use any email ending in @test.getpara.com (like dev@test.getpara.com). Any OTP code will work for verification with these test emails. These credentials are for beta testing only. You can delete test users anytime in the beta developer console to free up user slots.

2

Farcaster Authentication

Farcaster authentication follows a similar pattern but uses Farcaster-specific methods. Here’s how to implement a complete Farcaster authentication flow:

const handleFarcasterAuthentication = async () => {
  const connectUri = await para.getFarcasterConnectURL();
  window.open(connectUri, "farcasterConnectPopup", "popup=true");

  const { userExists, username } = await para.waitForFarcasterStatus();

  const authUrl = userExists
    ? await para.initiateUserLogin({ email: username, useShortUrl: false })
    : await para.getSetUpBiometricsURL({ authType: "farcaster", isForNewDevice: false });

  const popupWindow = window.open(authUrl, userExists ? "loginPopup" : "signUpPopup", "popup=true");

  await (userExists ? para.waitForLoginAndSetup({ popupWindow }) : para.waitForPasskeyAndCreateWallet());
};

​
Telegram OAuth Login

To implement your own Telegram authentication flow, please refer to the official documentation. Para uses the following bots to handle authentication requests:

EnvironmentUsernameBot ID
BETA@para_oauth_beta_bot7788006052
PROD@para_oauth_bot7643995807

When you receive an authentication payload, you can use para.verifyTelegram() to validate the payload hash and either find or create the Para user for that Telegram user ID, all in one step. As with Farcaster, these users will not have an associated email or phone number and will thereafter need to use Telegram to sign in to your app.

//  Example payload:
// {
//   id: 123456789,
//   first_name: 'John',
//   last_name: 'Doe',
//   username: 'johndoe',
//   photo_url: 'https://example.com/photo.jpg',
//   auth_date: Date.now(),
//   hash: '...',
// }

// Wait for the user to be authenticated via the OAuth method through Para.
const result = await para.verifyTelegram(payload);

if (!result.isValid) {
  // Handle auth failure
} else {
  const { telegramUserId, userId: paraUserId, isNewUser, supportedAuthMethods, biometricHints } = result;

  if (isNewUser || supportedAuthMethods.length === 0) {
    // Create sign-in methods for user if they don't have any
    const createPasskeyUrl = await para.getSetUpBiometricsURL({ authType: "telegram", isForNewDevice: false });
  } else if (supportedAuthMethods.includes(AuthMethod.PASSKEY)) {
    // Log in previously created user
    const loginUrl = await para.initiateUserLogin({ useShortUrl: false, email: telegramUserId });
  }
}

With these implementations, you can seamlessly integrate OAuth social logins into your application with your own custom UI.

​
Examples

For an example code implementation of the above custom OAuth methods check out this simple React + Next.js application:

GitHub Repository

View the code implementation of the Para Modal with Cosmos Wallets.

You’ll also find custom Phone and Email authentication examples in the same repository.

​
Next Steps

If you’re building your own custom UI you can also add a custom phone authentication and email authentication flow to your Para integration. Check out the guides below to learn more:

Phone Authentication

Learn how to authenticate users via phone number using the Para SDK.

Email Authentication

Learn how to authenticate users via email using the Para SDK.

Modal CustomizationPhone Number Logins