Social Login using Etherspot SDK

Demonstrate how social login work with Etherspot SDK

Before we continue, please ensure that you have had a look at Social Logins to better understand how it works and our Supported Ethereum Chains, followed the steps in Install Etherspot SDK and how to Bootstrap Etherspot SDK. We're assuming that you have completed these steps before going forward.

In this article, we would take a look at how we can implement social logins using our Etherspot SDK to make use of both, the power of social login by creating a wallet with your social account sign-in and the power of Etherspot SDK to make that wallet, an Account Abstracted smart wallet

First, let us create a wallet using Web3Auth for Social Login. For this, we have to sign-up in https://dashboard.web3auth.io/ for creating an account to create a web3Auth ClientId which is available after you are signed into the dashboard and created a project under 'Plug and Play'. Copy the ClientId shown and keep it ready before continuing.

Install Web3Auth package

NPM

npm install --save @web3auth/modal

YARN

yarn add @web3auth/modal

Initialising Web3Auth for Social Login using the above created web3Auth ClientId

import { Web3AuthCore } from '@web3auth/core'

const web3AuthInstance = new Web3AuthCore({
  clientId: web3AuthClientId, // created in the Web3Auth Dashboard as described above
  chainConfig: {
    chainNamespace: CHAIN_NAMESPACES.EIP155,
    chainId: '0x1', // ChainID in hexadecimal
  },
  storageKey: 'local',
})

You can view a detailed steps on how to get started with Web3Auth here

Defining the Web3Auth openLogin Adapter which is reponsible for sign-in options. You can see the list of all sign-in options provided here.

const openLoginAdapter = new OpenloginAdapter({
  adapterSettings: {
    network: 'mainnet',
    clientId: web3AuthClientId,
  },
  loginSettings: {
    mfaLevel: 'none',
  },
})

web3AuthInstance.configureAdapter(openLoginAdapter)

// Listen to events emitted by the Web3Auth Adapter
web3AuthInstance.on(ADAPTER_EVENTS.CONNECTED, () => {
  if (!web3AuthInstance?.provider) {
    return
  }
})

web3AuthInstance.on(ADAPTER_EVENTS.ERRORED, (error) => {
  console.log(error)
})

// Initialise the web3Auth instance after setting up the Adapter Configuration
await web3AuthInstance.init()

Initialise the Etherspot SDK with the provider after connecting the web3Auth with valid credentials of any of the above supported social platforms listed.

For this Example, Let us take Google as the social platform that we are looking to sign-in

try {
    // login_hint is optional parameter which accepts any string and can be set to null
    const web3authProvider = await web3Auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, { 'google', login_hint })
}
catch (e) {
  console.log(`Failed to login! Reason: ${e instanceof Error && e?.message ? e.message : 'unknown'}.`)
  return
}

if (!web3authProvider) {
  console.log(`Failed to get the provider connected`)
  return
}
// Initialising web3Auth Provider as Web3 Injectable
const web3 = new Web3(web3authProvider as any)
const web3provider = new Web3WalletProvider(web3.currentProvider as any)
// Refresh the web3 Injectable to validate the provider
await web3provider.refresh()
// Initialise the Etherspot SDK
const etherspotSdk = new Sdk(web3provider, { networkName: NetworkNames.Mainnet, env: EnvNames.MainNets, omitWalletProviderNetworkCheck: true })
await etherspotSdk.computeContractAccount()