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
YARN
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'
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',
})
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()