How to build authentication using Particle Network for conflux Network

#1

In this blog, we will build a template that allows anyone to integrate Particle Network authentication with the Conflux Network.

Screenshot%20from%202024-08-24%2019-16-23
Screenshot from 2024-08-24 19-16-23.png2153×1167 157 KB

What is Particle Network?

Particle Network is a platform that offers decentralized identity solutions, providing developers with the tools needed to implement secure and user-friendly authentication mechanisms. By integrating Particle Network, you can enhance the security of your dApp on the Conflux Network while ensuring a smooth user experience.

Why Choose Conflux Network?

Conflux Network is a high-performance blockchain platform designed to bridge the gap between decentralized applications and mass adoption. Its unique Tree-Graph consensus algorithm enables high throughput and low transaction costs, making it an ideal choice for developers looking to build scalable and efficient dApps.

Prerequisites

Before we begin, make sure you have the following tools and knowledge:

  • Node.js installed on your machine.
  • Basic understanding of JavaScript and React.js.
  • Familiarity with Conflux Network and its ecosystem.
  • A basic understanding of web3.js or ethers.js (we will use web3.js in this guide).

Step 1: Clone the repo

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

Step 2: Move to the correct directory

cd Conflu+Particle/Frontend

Step 4: Install the library

npm install

Step 5: Run the project

npm start

Open any browser and type localhost:3000 and hit enter …

Integrating Particle Network

Under component folder move to the Hooks folder and you will find one coneection.jsx file . All the connection parts are present in this file.

 const smartAccount = new SmartAccount(provider, {
    projectId: "Your Project id",
    clientKey: "Your clinet key",
    appId: "Your App id",
    aaOptions: {
      accountContracts: {
        SIMPLE: [{ chainIds: [ConfluxeSpaceTestnet.id], version: '1.0.0' }] // Or BICONOMY, LIGHT, CYBERCONNECT
      }
    }
  });

The above code wil create the Smart Account for any social login. Please note we have explictally set the Network as ConfluxeSpaceTestnet.

PLease refer this Particle Network website to know more about the ProjectId, ClientId and appId

  const handleLogin = async (authType) => {
    setLoading(true);
    if (!userInfo) {
      await connect({
        socialType: authType,
        chain: ConfluxeSpaceTestnet,
      });
    }
    setLoading(false);
  };

The above code shows that the current user is not login, If anyone clicks on the Login Button then this function will automatically call and check if the user is already login or not, if not then It will create the smart Account on the top of the social Login.

Note: The taransaction is not sponsoered, you have to deposit CFX testnet in your Samrt Account address to make any sucessfull taransaction.

Please refer to this youtube tutorial for better understanding.

Resources

Particle Network Docs: https://developers.particle.network/landing/introduction

Conflux network Docs: https://doc.confluxnetwork.org/

GitHub repo: https://github.com/Vikash-8090-Yadav/Conflux-Tutorial.git

1 Like