Integrating OAuth & Social Logins

Overview

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

Capsule 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

Capsule Modal

Social Logins can be easily integrated via the CapsuleModal Component by passing the desired options as an array to the oAuthMethods property as follows.

React Web

import { CapsuleModal, OAuthMethod } from "@usecapsule/web-sdk";

const capsule = new Capsule(Environment.BETA, YOUR_API_KEY);

<CapsuleModal
  capsule={capsule}
  appName="YourAppName"
  oAuthMethods={[
    OAuthMethod.GOOGLE,
    OAuthMethod.FACEBOOK,
    OAuthMethod.APPLE,
    OAuthMethod.TWITTER,
    OAuthMethod.DISCORD,
    OAuthMethod.FARCASTER
  ]}
/>

Custom UI Entrypoint

For developers preferring manual control over launching an authentication process or leveraging a custom implementation, the following can be used to obtain OAuth URLs

Web Javascript

// Import the required modules from the Capsule Wallet SDK.
import { OAuthMethod } from "@usecapsule/web-sdk";

// Select your desired platform
const oAuthMethod = OAuthMethod.TWITTER; // Example for Twitter authentication

// Obtain the OAuth URL using the getOAuthURL method.
const oAuthURL = await capsule.getOAuthURL(oAuthMethod);

// Direct the user to the obtained oAuthURL for authentication
window.open(oAuthURL)    // can choose via redirect, popup, etc.

// Wait for the user to be authenticated via the OAuth method through Capsule.
const { email, userExists } = await capsule.waitForOAuth();

React Native

// Code Snippet Coming Soon!

Flutter

// Code Snippet Coming Soon!

Farcaster OAuth Login

Farcaster Login works very similarly to the other social logins, except that there is no email associated with the account. Rather, we will be using the farcaster username as the identifier for this user. This is important to keep in mind, as the functions used in the SDK will be different. Here is some example code for implementing farcaster login:

Web Javascript

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

const oAuthMethod = OAuthMethod.FARCASTER;

const oAuthURL = await capsule.getFarcasterConnectURL(); // Display this url in a QR Code

// Wait for the user to be authenticated via the OAuth method through Capsule.
const { username, userExists } = await capsule.waitForFarcasterStatus();

if (userExists) {
  const webAuthUrlForLogin = await capsule.initiateUserLogin(username, false, 'farcaster');
} else {
  const webAuthURLForCreate = await capsule.getSetUpBiometricsURL(false, 'farcaster');
}

React Native

// Code Snippet Coming Soon!

Flutter

// Code Snippet Coming Soon!

---

As always, if you need further help please feel free to reach out to us directly or get in touch at [e-mail]. We're always excited to hear feedback!