Using social login

Social logins like Google, Facebook, X, Discord etc, can be used to create wallet for users and use the signer provided by them

There are services like Web3Auth and Particle Auth that provides the functionality of creating ethereum wallets using social login.

  1. Particle Auth

Particle Auth is dedicated to simplifying the transition of Web2 users into the Web3 environment by providing them with familiar login options. This means that users can access your dApp using well-known methods such as Google, Apple ID, Facebook, Twitter, and various other social platforms. Additionally, they have the option to log in using their email address or mobile number without the need for a password.

Step 1: Include Particle Network SDK Script

Download Particle Network SDK to your project via Yarn

yarn add @particle-network/auth

//if you need support evm-chains
yarn add @particle-network/provider

//if you need support solana chain
yarn add @particle-network/solana-wallet

browser

<script src="https://static.particle.network/sdks/web/auth/1.2.1/auth.min.js"></script>
<!-- Optional: Add EVM Chains suport -->
<script src="https://static.particle.network/sdks/web/provider/1.2.0/provider.min.js"></script>
<!-- Optional: Add Solana Chain suport -->
<script src="https://static.particle.network/sdks/web/solana-wallet/1.0.2/solana-wallet.min.js"></script>

Step 2: Setup Developer API Key

Before you can add Auth Service to your app, you need to create a Particle project to connect to your app. Visit Particle Dashboard to learn more about Particle projects and apps.

👉 Sign up/log in and create your project now

👉 chainId and chainName configs

import { ParticleNetwork, WalletEntryPosition } from "@particle-network/auth";
import { ParticleProvider } from "@particle-network/provider";
import { SolanaWallet } from "@particle-network/solana-wallet";
import { Ethereum } from "@particle-network/chains";
import Web3 from "web3";

const particle = new ParticleNetwork({
  projectId: "xx",
  clientKey: "xx",
  appId: "xx",
  chainName: Ethereum.name, //optional: current chain name, default Ethereum.
  chainId: Ethereum.id, //optional: current chain id, default 1.
  wallet: {   //optional: by default, the wallet entry is displayed in the bottom right corner of the webpage.
    displayWalletEntry: true,  //show wallet entry when connect particle.
    defaultWalletEntryPosition: WalletEntryPosition.BR, //wallet entry position
    uiMode: "dark",  //optional: light or dark, if not set, the default is the same as web auth.
    supportChains: [{ id: 1, name: "Ethereum"}, { id: 5, name: "Ethereum"}], // optional: web wallet support chains.
    customStyle: {}, //optional: custom wallet style
  },
  securityAccount: { //optional: particle security account config
    //prompt set payment password. 0: None, 1: Once(default), 2: Always
    promptSettingWhenSign: 1,
    //prompt set master password. 0: None(default), 1: Once, 2: Always
    promptMasterPasswordSettingWhenLogin: 1
  },
});

const particleProvider = new ParticleProvider(particle.auth);
//if you need support solana chain
const solanaWallet = new SolanaWallet(particle.auth);

//if you use web3.js
window.web3 = new Web3(particleProvider);
window.web3.currentProvider.isParticleNetwork // => true

//if you use ethers.js
import { ethers } from "ethers";
const ethersProvider = new ethers.providers.Web3Provider(particleProvider)

Use this ethersProvider while initalizaing the 0xGasless SDK. 

const address = await client.init(ethersProvider, options);

Then follow the same instructions as given in the other modules.

  1. Web3Auth

Similarly, Web3Auth simplifies the onboarding process for both mainstream and crypto-native users within minutes. It offers a seamless experience, supporting OAuth-based login systems, and works seamlessly on web and mobile platforms for your users.

1. Install Web3Auth​

Install the Web3Auth package in your React project.

npm install --save @web3auth/modal

2. Get your Client ID from the Web3Auth Dashboard​

Visit the Web3Auth Dashboard and create a new project. Use the Client ID of the project to start your integration.

3. Initialize Web3Auth for your preferred blockchain​

Web3Auth needs to be initialized as soon as your app loads up to enable the user to log in. Preferably done within a constructor, initialization is the step where you can pass on all the configurations for Web3Auth you want. A simple integration for some of the popular blockchains will look like this:

  • Ethereum

  • Polygon

  • Solana

  • Other Chains

import { Web3Auth } from "@web3auth/modal";

// Initialize within useEffect()
const web3auth = new Web3Auth({
  clientId: "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ", // Get your Client ID from the Web3Auth Dashboard
  web3AuthNetwork: "sapphire_mainnet", // Web3Auth Network
  chainConfig: {
    chainNamespace: "eip155",
    chainId: "0x1",
    rpcTarget: "https://rpc.ankr.com/eth",
    displayName: "Ethereum Mainnet",
    blockExplorer: "https://goerli.etherscan.io",
    ticker: "ETH",
    tickerName: "Ethereum",
  },
});

await web3auth.initModal();

4. Login your User​ and get the Provider

Once you're done initializing, just create a button that triggers to open the login modal for the user on their request. Logging in is as easy as:

 const web3authProvider  = await web3auth.connect();

//if you use ethers
import { ethers } from "ethers";
const ethersProvider = new ethers.providers.Web3Provider(web3authProvider)

After getting web3auth provider, initalize the 0xGasless SDK.

const address = await client.init(ethersProvider, options);

Then follow the steps to send transaction as per your requirement.

Last updated