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
  ]}
/>

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!

---

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!