This guide will walk you through the process of integrating Leap’s Social Login SDK directly into your application, without using a Wallet Adapter. This approach provides more flexibility and control over the authentication flow.

​
Prerequisites

Before you begin, ensure you have:

If you haven’t set up Capsule authentication yet, complete one of our authentication tutorials first and return to this guide when you’re ready to implement Leap Social Login.

​
Installation

Install the required packages using your preferred package manager:

​
Setup

​
1. Import Required Dependencies

First, import the necessary components and types:

import { CustomCapsuleModalView } from "@leapwallet/cosmos-social-login-capsule-provider-ui";
// Required import for Leap Social Login UI styles
import "@leapwallet/cosmos-social-login-capsule-provider-ui/styles.css";
import { OAuthMethod } from "@usecapsule/web-sdk";
import { CapsuleProvider, Environment } from "@leapwallet/cosmos-social-login-capsule-provider";

​
2. Initialize Capsule Provider

You have two options for initializing the provider:

​
Option 1: Use existing Capsule client

If you’ve already set up Capsule client following the Getting Started guides:

import { capsuleClient } from "./capsuleClient";
// Your capsuleClient will be used directly in the CustomCapsuleModalView

​
Option 2: Create a new Leap Provider

If you want to initialize a new provider specifically for Leap:

const capsuleProvider = new CapsuleProvider({
  env: Environment.PRODUCTION, // Use Environment.BETA for testing
  apiKey: "your-api-key-here",
});

​
Implementation

Here’s a complete example of implementing the Leap Social Login modal:

import React, { useState } from "react";
import { CustomCapsuleModalView } from "@leapwallet/cosmos-social-login-capsule-provider-ui";
import "@leapwallet/cosmos-social-login-capsule-provider-ui/styles.css";
import { OAuthMethod } from "@usecapsule/web-sdk";
import { capsuleClient } from "./capsuleClient"; // Option 1: Using existing client

const LeapSocialLogin: React.FC = () => {
  const [showModal, setShowModal] = useState(false);

  const handleLoginSuccess = async () => {
    try {
      const account = await capsuleClient.getAccount("cosmos");
      console.log("Login successful:", account);
      setShowModal(false);
    } catch (error) {
      console.error("Error getting account:", error);
    }
  };

  const handleLoginFailure = (error: Error) => {
    console.error("Login failed:", error);
    setShowModal(false);
  };

  return (
    // The 'leap-ui' class is required for proper styling
    <div className="leap-ui">
      <button onClick={() => setShowModal(true)}>Login with Leap</button>

      <CustomCapsuleModalView
        capsule={capsuleClient}
        showCapsuleModal={showModal}
        setShowCapsuleModal={setShowModal}
        theme="light" // or "dark"
        onAfterLoginSuccessful={handleLoginSuccess}
        onLoginFailure={handleLoginFailure}
        oAuthMethods={Object.values(OAuthMethod)}
      />
    </div>
  );
};

export default LeapSocialLogin;

​
Important Implementation Notes

​
Working with the Authenticated User

After successful authentication, you can interact with the user’s account:

try {
  // Get the user's account details
  const account = await capsuleClient.getAccount("cosmos");

  // Get an offline signer for transactions
  const offlineSigner = capsuleClient.getOfflineSigner("cosmos");

  // Check login status
  const isLoggedIn = await capsuleClient.isFullyLoggedIn();
} catch (error) {
  console.error("Error accessing account:", error);
}

For alternative integration options, check out:

Was this page helpful?

CosmJSCosmos Kit