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 install --save @web3auth/modal
yarn add @web3auth/modal
Initialising Web3Auth for Social Login using the above created web3Auth ClientId
import { Web3AuthCore } from'@web3auth/core'constweb3AuthInstance=newWeb3AuthCore({ 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.
constopenLoginAdapter=newOpenloginAdapter({ adapterSettings: { network:'mainnet', clientId: web3AuthClientId, }, loginSettings: { mfaLevel:'none', },})web3AuthInstance.configureAdapter(openLoginAdapter)// Listen to events emitted by the Web3Auth Adapterweb3AuthInstance.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 Configurationawaitweb3AuthInstance.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 nullconstweb3authProvider=awaitweb3Auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, { 'google', login_hint })}catch (e) {console.log(`Failed to login! Reason: ${e instanceofError&&e?.message ?e.message :'unknown'}.`)return}if (!web3authProvider) {console.log(`Failed to get the provider connected`)return}// Initialising web3Auth Provider as Web3 Injectableconstweb3=newWeb3(web3authProvider asany)constweb3provider=newWeb3WalletProvider(web3.currentProvider asany)// Refresh the web3 Injectable to validate the providerawaitweb3provider.refresh()// Initialise the Etherspot SDKconstetherspotSdk=newSdk(web3provider, { networkName:NetworkNames.Mainnet, env:EnvNames.MainNets, omitWalletProviderNetworkCheck:true })awaitetherspotSdk.computeContractAccount()