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 Para 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 { CustomParaModalView } from "@leapwallet/cosmos-social-login-para-provider-ui";
// Required import for Leap Social Login UI styles
import "@leapwallet/cosmos-social-login-para-provider-ui/styles.css";
import { OAuthMethod } from "@getpara/web-sdk";
import { ParaProvider, Environment } from "@leapwallet/cosmos-social-login-para-provider";

​
2. Initialize Para Provider

You have two options for initializing the provider:

​
Option 1: Use existing Para client

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

import { para } from "./para";
// Your para will be used directly in the CustomParaModalView

​
Option 2: Create a new Leap Provider

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

const paraProvider = new ParaProvider({
  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 { CustomParaModalView } from "@leapwallet/cosmos-social-login-para-provider-ui";
import "@leapwallet/cosmos-social-login-para-provider-ui/styles.css";
import { OAuthMethod } from "@getpara/web-sdk";
import { para } from "./para"; // Option 1: Using existing client

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

  const handleLoginSuccess = async () => {
    try {
      const account = await para.getAccount({ network: "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>

      <CustomParaModalView
        para={para}
        showParaModal={showModal}
        setShowParaModal={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 para.getAccount({ network: "cosmos" });

  // Get an offline signer for transactions
  const offlineSigner = para.getOfflineSigner({ network: "cosmos" });

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

For alternative integration options, check out:

CosmJSCosmos Kit