Social Login with Privy

Integrate Privy seamlessly for Login

Included in the SDK is a native integration with Privy. Privy offers many options for social login, including Google, Twitter, Email OTP, Passkeys, and much more, and now you can natively connect that with your Halliday Smart Account.

🚧

Contact Us to Receive Your Privy App ID!

If you do not already have a Privy App ID, please reach out to us at [email protected] to receive your Privy App ID, as well as your Halliday credentials! If you do, please reach out to us with your Privy App Id so we can support integrating your existing users into the Halliday ecosystem.

πŸ“˜

For the most up-to-date details about Privy, please visit their docs here


Getting Started with HallidayPrivyProvider

To get started, install @halliday-sdk/accounts, as well as react^18 and react-dom^18 from npm or yarn.

Then, wrap the HallidayPrivyProvider class around all components that need to access the hallidayClient and privy login. The HallidayPrivyProvider is a React Component that provides the necessary context to manage the user's authentication state and the HallidayClient. Therefore, this component must wrap any component that uses either the HallidayClient or Privy context. For this reason, we recommend rendering this component as close to the root of your application as possible:

import React from "react";
import { HallidayPrivyProvider } from "@halliday-sdk/accounts";
import type { PrivyProviderConfig, HallidayConfig, BlockchainType, HallidayPrivyProviderConfig } from "@halliday-sdk/accounts";


function App() {
  const hallidayConfig: HallidayConfig = {
    hallidayPublicApiKey: "YOUR_HALLIDAY_API_KEY",
    blockchainType: BlockchainType.SEPOLIA,
    useSandbox: true
  }; 
  
  // Please refer to https://docs.privy.io/reference/sdk/react-auth/interfaces/PrivyClientConfig to configure your privy CSS!
  const authConfig: PrivyProviderConfig = {
    privyAppId: "YOUR_PRIVY_APP_ID",  // contact [email protected] to get your Privy App Id!
    privyConfig: {
      appearance: {
        theme: "light",
        accentColor: "#676FFF",
        logo: "YOUR_LOGO_URL"
      },
      loginMethods: ["email", "wallet", "google", "twitter"],
    },
  };
  
  const config: HallidayPrivyProviderConfig = {
    hallidayConfig,
    authConfig,
  };
  
  return (
    <HallidayPrivyProvider config={config}>
    	<ChildComponent />
    </HallidayPrivyProvider>
  );
}

export default App;


Enabling Social Login

Privy enables a multitude of methods to login. Regardless of whether your user logs in with email, Google, even Metamask, they will be receive the same Halliday Smart Account for your application.

🚧

Restricted Login Methods

If your application requires login with the following social login providers, you will need to set up and publish your own developer app with them respectively to be compliant. Halliday currently disables logging in from these providers. If you have a client_id from these providers, please reach out to [email protected] and we can enable social login from these providers for you:

  • Apple
  • Facebook
  • LinkedIn
  • Spotify
  • Tiktok

To enable a social login method, simply list it under the loginMethods section of the authConfig. Please refer to the Privy Docs here to see the full list of supported login methods.

const authConfig: PrivyProviderConfig = {
    privyAppId: "YOUR_PRIVY_APP_ID",
    privyConfig: {
      appearance: {
        theme: "light",
        accentColor: "#676FFF",
        logo: "YOUR_LOGO_URL"
      },
      loginMethods: ["email", "wallet", "google", "twitter"], // List your enabled social login methods here!
    },
  };

Then, you can use the usePrivy() hook to create a button that open login and get user information:

import React, { useEffect, useState } from "react";
import { useHallidaySmartAccountWithPrivySigner, usePrivy } from "@halliday-sdk/accounts";

export default function Content() {
  const { ready, login, authenticated, logout } = usePrivy();
	const hallidayClient = useHallidaySmartAccountWithPrivySigner();
  
  // Return a button for login and log out
  if (!hallidayClient) {
    return ready ? (
      <div>
        <button disabled={authenticated} onClick={login}>
          Log In
        </button>
        <button disabled={!authenticated} onClick={logout}
          Log Out
        </button>
      </div>
    ) : (
      <div>
        Loading Halliday and Privy ... 
      </div>
    )
  }
}

Accessing and Using your Halliday Smart Account

After your user is authenticated, you can access your Halliday smart account with the useSmartAccount() hook in any component that is wrapped in HallidayPrivyProvider. In addition, you can access any Halliday context variables with the useHalliday() hook. With the Halliday Client, you can now interact with your Halliday Smart Account to sign and send transactions.

import React, { useEffect, useState } from "react";
import { useHalliday, useHallidaySmartAccountWithPrivySigner, CallContractRequest } from "@halliday-sdk/accounts";

export default function Content() {
  const { hallidayPublicApiKey, blockchainType, useSandbox } = useHalliday();
  const hallidayClient = useHallidaySmartAccountWithPrivySigner();
  
  // Return a button to send a transaction
  return (
    <button onClick={async () => {
      const targetAddress = "TARGET_CONTRACT_ADDRESS";
      const calldata = "calldata_for_smart_contract";    // Or "0x" if no calldata
      const transactionRequest: CallContractRequest = {
        targetAddress: targetAddress,
        valueInWei: "0",
        calldata: calldata,
        sponsorGas: true
      }
      // Submit the transaction, and get the transaction information
      const txInfo = await hallidayClient.callContract(transactionRequest);
      console.log("txInfo: ", txInfo);
     }}
    >
      Send Transaction
    </button>
  )
}


Customize Your Login CSS

Privy supports a multitude of CSS configurations for the login screen, which can be set in the authConfig.PrivyConfig parameter of the PrivyProviderConfig interface. Please refer to the Privy Documentation for more details on how to customize the CSS for the login popup.

To customize CSS for the login popup, simply configure the authConfig.privyConfig.appearance field, as shown below:

const authConfig: PrivyProviderConfig = {
    privyAppId: "YOUR_PRIVY_APP_ID",
    // Configure your privy CSS here. Refer to Privy Docs for more details!
    privyConfig: {
      appearance: {
        theme: "light",
        accentColor: "#676FFF",
        logo: "YOUR_LOGO_URL"
      },
      loginMethods: ["email", "wallet", "google", "twitter"],
    },
  };