Setting Up Social Login
Social Login is a pluggable auth infrastructure built on Web3Auth for dApp developers who want to integrate social login without hassle. Developers don't have to create clients or go to any dashboard to whitelist URLs.
- Install and import the web3-auth package from the Biconomy SDK
yarn add @biconomy/web3-auth
npm install @biconomy/web3-auth
import SocialLogin from "@biconomy/web3-auth";
By installing this package you might get an error like
"Module not found:
Error: Can't resolve 'crypto'."
These are polyfills errors that can be resolved by configuring the webpack properly. As mentioned here.
If you're using a biconomy/web3-auth package version below 0.0.4 then you don't need to
import the CSS in the project root.
If you check the SocialLogin class you will find different methods which we've got to help you integrate social login
init()- is required after initializing. It makes important calls and makes the web3auth ready for you.
showWallet()- it will show the widget in your UI.
hideWallet()- it will hide the wallet widget from the UI.
logout()- Logs out of the wallet, also clears the cache.
getUserInfo()- This method returns the object of email, name, profileImage, and idToken.
whitelistUrl()- If you are deploying your site, you must whitelist your deployment URL. It returns signatures that you can pass to init functions. You can also pass the array of URLs to signatures. The signature in init is not required for localhost.
Initialize the social login SDK
// create an instance of SocialLogin
const socialLogin = new SocialLogin()
// init social login SDK, all params are optional
// pops up the UI widget
For whitelisting your domain, please use the following code snippet. When deploying on prod it is required to whitelist your domain. In init, you can pass the domain and signature.
// get signature that corresponds to your website domains
const signature1 = await socialLogin.whitelistUrl('https://yourdomain1.com');
const signature2 = await socialLogin.whitelistUrl('https://yourdomain2.com');
// pass the signatures, you can pass one or many signatures you want to whitelist
- Access to web3Auth provider after the wallet is connected
if (!socialLogin?.provider) return;
// create a provider from the social login provider that
// will be used by the smart account package of the Biconomy SDK
const provider = new ethers.providers.Web3Provider(
// get a list of accounts available with the provider
const accounts = await provider.listAccounts();
console.log("EOA address", accounts)