Integrating Privy Authentication and Sending Transactions on the Conflux eSpace Testnet

#1

Web3 development often requires seamless authentication and blockchain interactions while ensuring data privacy. In this blog, we’ll learn how to use Privy for authentication and embedded wallet functionality, combined with Conflux eSpace Testnet, a high-performance blockchain for decentralized applications. By the end of this tutorial, you’ll be able to build a simple app with login and transaction features using Next.js and other essential tools.

Overview of the Stack

Here’s what we’ll be working with:

  • Privy: Privacy-preserving user authentication and embedded wallet management.
  • Conflux eSpace Testnet: An Ethereum-compatible blockchain for DApps.
  • Next.js: Our React-based framework for building the app.
  • ethers.js and Viem: Libraries for handling blockchain interactions.
  • Tailwind CSS: A utility-first CSS framework for designing our interface.

Cloning the Project

To get started quickly, we’ll use a preconfigured repository containing all the necessary boilerplate code for this project.

Step 1: Clone the Repository

Run the following command to clone the repository:

git clone https://github.com/Vikash-8090-Yadav/Conflux-Tutorial
cd conflux-privy

Step 2: Install Dependencies

Install the required dependencies for the project

npm install

Step 3: Set Up Environment Variables

Create a .env.local file in the project root and add the following environment variables:

NEXT_PUBLIC_PRIVY_APP_ID=YOUR_PRIVY_APP_ID
NEXT_PUBLIC_PRIVY_APP_SECRET=YOUR_PRIVY_APP_SECRET

Replace YOUR_PRIVY_APP_ID and YOUR_PRIVY_APP_SECRET with the credentials from your Privy dashboard.

Building the Application

1. Privy Integration

The project uses Privy for authentication and wallet management.

PrivyProvider Configuration

The _app.js file wraps the application with PrivyProvider, enabling authentication and blockchain interactions. The code is already included in the repository:

 <PrivyProvider
        appId={ "Your-App-Id"|| ""}
        config={{
        // Replace this with your desired default chain
        defaultChain: confluxESpaceTestnet ,
        // Replace this with a list of your desired supported chains
        supportedChains: [confluxESpaceTestnet],
          embeddedWallets: {
            createOnLogin: "all-users",
          },
        }}
      >
        <Component {...pageProps} />
      </PrivyProvider>

2. Login Page

The login page, located in pages/login.js, allows users to authenticate using Privy.


 const cookieAuthToken = req.cookies["privy-token"];

  // If no cookie is found, skip any further checks
  if (!cookieAuthToken) return { props: {} };

  const PRIVY_APP_ID = "YOURID";
  const PRIVY_APP_SECRET = "YOURSECRET";
  const client = new PrivyClient(PRIVY_APP_ID!, PRIVY_APP_SECRET!);

  try {
    const claims = await client.verifyAuthToken(cookieAuthToken);
    // Use this result to pass props to a page for server rendering or to drive redirects!
    // ref https://nextjs.org/docs/pages/api-reference/functions/get-server-side-props
    console.log({ claims });

    return {
      props: {},
      redirect: { destination: "/dashboard", permanent: false },
    };
  } catch (error) {
    return { props: {} };
  }

3. Dashboard Page

The dashboard page, located in pages/dashboard.js, enables authenticated users to send transactions on the Conflux eSpace Testnet.

   setIsLoading(true)
    setTxHash("")
    try {
      const provider = await getEthersProvider()
      const signer = provider.getSigner()

      const tx = {
        to: receiverAddress,
        value: ethers.utils.parseEther("1")
      }

      const transaction = await signer.sendTransaction(tx)
      const receipt = await transaction.wait()
      setTxHash(receipt.transactionHash)
    } catch (error) {
      console.error("Failed to execute transaction:", error)
    } finally {
      setIsLoading(false)
    }

Testing the Application

Testing the Application

Steps to Test:

  1. Start the development server:

       npm run dev

Testing the Application

Steps to Test:

  1. Open the app in your browser:
    Navigate to http://localhost:3000.

  2. Log in using Privy:
    Use the login page to authenticate with Privy.

  3. Test the dashboard:
    On the dashboard, send a transaction to a receiver address.

  4. View transaction details:
    Use the Conflux eSpace Testnet Explorer to verify the transaction details.

Screenshot%20from%202024-11-19%2012-10-00
Screenshot from 2024-11-19 12-10-00.jpg2149×1237 171 KB

Conclusion

We successfully integrated Privy for authentication and embedded wallets with the Conflux eSpace Testnet for blockchain transactions. This setup offers a foundation for building Web3 applications with privacy-first authentication and seamless blockchain interactions.

Stay tuned for more tutorials on Web3 development, and don’t forget to share your feedback!

Resources:

If you found this tutorial helpful, like and share it with your network!

#2