​
Leap Social Login Integration

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.

​
Installation

First, install the necessary packages:

npm install @leapwallet/cosmos-social-login-provider-ui @leapwallet/cosmos-social-login-capsule-provider

​
Setting up the Capsule Provider

The Capsule Provider is the core component that handles the authentication process. Here’s how to set it up:

import { CapsuleProvider, Environment } from "@leapwallet/cosmos-social-login-capsule-provider";

const options = {
  env: Environment.PRODUCTION, // Use Environment.BETA for testing
  apiKey: "your-api-key-here",
  opts: {
    emailPrimaryColor: "#ff5733",
    homepageUrl: "https://yourapp.com",
    portalTheme: {
      backgroundColor: "#ffffff",
      foregroundColor: "#ff5733",
      borderRadius: "lg",
    },
  },
};

const capsuleProvider = new CapsuleProvider(options);

​
Creating the Custom Modal View

Next, you’ll need to create a component that uses the CustomCapsuleModalView:

import React, { useState } from "react";
import CustomCapsuleModalView from "@leapwallet/cosmos-social-login-provider-ui";
import { OAuthMethod } from "@leapwallet/cosmos-social-login-capsule-provider";

const LeapSocialLoginModal = ({ capsuleProvider }) => {
  const [showModal, setShowModal] = useState(false);

  const handleAfterLogin = async () => {
    try {
      const account = await capsuleProvider.getAccount("cosmos");
      console.log("Logged in account:", account);
      // Handle successful login
    } catch (error) {
      console.error("Error fetching account details:", error);
      // Handle login error
    }
  };

  const handleLoginFailure = () => {
    console.error("Login failed");
    // Handle login failure
  };

  return (
    <>
      <button onClick={() => setShowModal(true)}>Open Login Modal</button>
      <CustomCapsuleModalView
        oAuthMethods={[
          OAuthMethod.GOOGLE,
          OAuthMethod.TWITTER,
          OAuthMethod.FACEBOOK,
          OAuthMethod.DISCORD,
          OAuthMethod.APPLE,
        ]}
        capsule={capsuleProvider.getClient()}
        showCapsuleModal={showModal}
        setShowCapsuleModal={setShowModal}
        onAfterLoginSuccessful={handleAfterLogin}
        onLoginFailure={handleLoginFailure}
        theme="light" // or "dark"
      />
    </>
  );
};

​
Using the Social Login in Your App

Now you can use the LeapSocialLoginModal component in your app:

import React from "react";
import { CapsuleProvider } from "@leapwallet/cosmos-social-login-capsule-provider";
import LeapSocialLoginModal from "./LeapSocialLoginModal";

const App = () => {
  const capsuleProvider = new CapsuleProvider({
    env: Environment.PRODUCTION,
    apiKey: "your-api-key-here",
  });

  return (
    <div>
      <h1>My Cosmos App</h1>
      <LeapSocialLoginModal capsuleProvider={capsuleProvider} />
    </div>
  );
};

​
Handling Authentication

After successful login, you can use the Capsule Provider to interact with the authenticated user’s account:

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

// Get an offline signer for transaction signing
const offlineSigner = capsuleProvider.getOfflineSigner("cosmos");

// Sign a transaction
const signDoc = {
  // ... your transaction details
};
const signature = await capsuleProvider.signAmino("cosmos", account.address, signDoc);

​
Customization

You can customize the appearance of the login modal by adjusting the opts in the CapsuleProvider configuration:

const options = {
  // ... other options
  opts: {
    emailPrimaryColor: "#4a90e2",
    homepageUrl: "https://yourapp.com",
    portalTheme: {
      backgroundColor: "#f5f5f5",
      foregroundColor: "#4a90e2",
      borderRadius: "md",
    },
  },
};

By following this guide, you can integrate Leap’s Social Login directly into your Cosmos application without relying on a Wallet Adapter. This approach gives you more control over the authentication flow and user experience.

Was this page helpful?

Capsule Direct IntegrationCosmos Kit