Social Login by Using Particle

In this tutorial, we will guide you through the process of integrating Particle for social login and related Account Abstraction (AA) services. This will allow your users to log in using social media accounts and utilize advanced AA features seamlessly.

Prerequisites

Before you start, ensure you have the following:

1. Basic Knowledge: Familiarity with Ethereum and smart contracts.
2. Development Environment: Node.js and npm installed
3. Framework: React native
4. Particle Account: Register and create a project on Biconomy.

Step 1: Create a Project on Particle

1. Create a project on Particle and add an app.
2. Get your Project ID, Client Key and App ID from your Particle Dashboard.

Step 2: Create Social Login and AA React Native App Component

Import the following packages and setup the social login environment.

//App.tsx

import React, {useState, useEffect} from 'react';
import {
  useEthereum,
  useConnect,
  useAuthCore,
} from '@particle-network/auth-core-modal';
import {MantleSepoliaTestnet} from '@particle-network/chains';
import {
  AAWrapProvider,
  SendTransactionMode,
  SmartAccount,
} from '@particle-network/aa';
import {ethers} from 'ethers';
import {notification} from 'antd';

import './App.css';

// replace yours
// apply them from Paticle Dashboard: https://dashboard.particle.network/#/
const REACT_APP_PROJECT_ID = '';
const REACT_APP_CLIENT_KEY = '';
//get this by creating your app in `Particle Dashboard -> Your APPs`
const REACT_APP_APP_ID = '';

const App = () => {
  const {provider} = useEthereum();
  const {connect, disconnect} = useConnect();
  const {userInfo} = useAuthCore();

  const smartAccount = new SmartAccount(provider, {
    projectId: REACT_APP_PROJECT_ID,
    clientKey: REACT_APP_CLIENT_KEY,
    appId: REACT_APP_APP_ID,
    aaOptions: {
      accountContracts: {
        SIMPLE: [{chainIds: [MantleSepoliaTestnet.id], version: '1.0.0'}],
      },
    },
  });

  const customProvider = new ethers.providers.Web3Provider(
    new AAWrapProvider(smartAccount, SendTransactionMode.Gasless),
    'any',
  );
  const [balance, setBalance] = useState(null);

  useEffect(() => {
    if (userInfo) {
      fetchBalance();
    }
  }, [userInfo, smartAccount, customProvider]);

  const fetchBalance = async () => {
    const address = await smartAccount.getAddress();
    const balanceResponse = await customProvider.getBalance(address);
    setBalance(ethers.utils.formatEther(balanceResponse));
  };

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

  const executeUserOp = async () => {
    const signer = customProvider.getSigner();
    const tx = {
      to: '0x000000000000000000000000000000000000dEaD',
      value: ethers.utils.parseEther('1'),
    };
    const txResponse = await signer.sendTransaction(tx);
    const txReceipt = await txResponse.wait();
    notification.success({
      message: txReceipt.transactionHash,
    });
  };

  return (
    <div className="App">
      <div className="logo-section">
        <img
          src="https://i.imgur.com/EerK7MS.png"
          alt="Logo 1"
          className="logo logo-big"
        />
        <img
          src="https://i.imgur.com/xbvNnWD.png"
          alt="Logo 2"
          className="logo"
        />
      </div>
      {!userInfo ? (
        <div className="login-section">
          <button
            className="sign-button google-button"
            onClick={() => handleLogin('google')}>
            <img
              src="https://i.imgur.com/nIN9P4A.png"
              alt="Google"
              className="icon"
            />
            Sign in with Google
          </button>
          <button
            className="sign-button twitter-button"
            onClick={() => handleLogin('twitter')}>
            <img
              src="https://i.imgur.com/afIaQJC.png"
              alt="Twitter"
              className="icon"
            />
            Sign in with X
          </button>
        </div>
      ) : (
        <div className="profile-card">
          <h2>{userInfo.name}</h2>
          <div className="balance-section">
            <small>{balance} MNT</small>
            <button className="sign-message-button" onClick={executeUserOp}>
              Execute User Operation
            </button>
            <button className="disconnect-button" onClick={disconnect}>
              Logout
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default App;

info

Make sure your smart account has enough balance to transfer. If not, transfer some MNT to it.

Step 3: Use This Component

//index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import {MantleSepoliaTestnet} from '@particle-network/chains';
import {AuthCoreContextProvider} from '@particle-network/auth-core-modal';
import App from './App';

import('buffer').then(({Buffer}) => {
  window.Buffer = Buffer;
});

// replace yours
// apply them from Paticle Dashboard: https://dashboard.particle.network/#/
const REACT_APP_PROJECT_ID = '';
const REACT_APP_CLIENT_KEY = '';
//get this by creating your app in `Particle Dashboard -> Your APPs`
const REACT_APP_APP_ID = '';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <AuthCoreContextProvider
      options={{
        projectId: REACT_APP_PROJECT_ID,
        clientKey: REACT_APP_CLIENT_KEY,
        appId: REACT_APP_APP_ID,
        erc4337: {
          name: 'SIMPLE',
          version: '1.0.0',
        },
        wallet: {
          visible: true,
          customStyle: {
            supportChains: [MantleSepoliaTestnet],
          },
        },
      }}>
      <App />
    </AuthCoreContextProvider>
  </React.StrictMode>,
);

Step 4: Run the App

Run the app and sign in with your social media account. Then you can execute the User Operation.