Creating Aggregate Verifier on the Web3Auth Dashboard
Developers can create Aggregate Verifiers
from the Web3Auth Dashboard. Combining multiple login methods to create a verifier to get the same address
for your user regardless of their login providers is possible while creating a verifier, for example, combining a Google
and Email Passwordless
login or Google
and GitHub
via Auth0 to access the same key for your user. These login methods should share the same Verifier ID, e.g., email
;
such verifiers are called Single ID Verifiers
.
Set up an Aggregate Verifier
Create an aggregate verifier for your application by selecting
Aggregate Multiple Providers
as the Login provider from the login providers.Click on
Add Sub Verifiers
to add a new sub-verifier.Select any social login provider from the list to start with. Here we're selecting
Google
. Paste the Client ID from the Google App to theClient ID
field and click onAdd Sub Verifiers
.Next, create the second sub-verifier. Click on
Add Sub Verifiers
to add a new sub-verifier.Select
Auth0
on the dropdown or chooseCustom Providers
from the radio buttons. We're selectingAuth0
in this example.Select the
Authentication Type
based on your application need on the dropdown. We're selectingGithub
in this example.Select
Email
as the JWT Verifier ID and enter theAuth0 Client ID
andAuth0 Domain
from your Auth0 application. See how to create a new Auth0 application here.NOTE- Add the GitHub Social Connection to your Auth0 application.
- One has to request an email from the user while setting up the GitHub Social Connection on the Auth0 Dashboard.
Similarly, create a third sub-verifier for
Email Passwordless
via Auth0. Follow the above steps from 5 to 8, and selectEmail Passwordless
in place ofGithub
.Finally, click on
Create
to deploy the verifier.
You can aggregate two or more verifiers.
Example
import { Web3AuthNoModal } from "@web3auth/no-modal";
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ";
// get it from https://dashboard.web3auth.io by creating a Plug n Play project.
const chainConfig = {
chainNamespace: "eip155",
chainId: "0x1",
rpcTarget: "https://rpc.ankr.com/eth",
displayName: "Ethereum Mainnet",
blockExplorer: "https://goerli.etherscan.io",
ticker: "ETH",
tickerName: "Ethereum",
};
const web3auth = new Web3AuthNoModal({
clientId,
chainConfig,
web3AuthNetwork: "sapphire_mainnet",
});
const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });
const openloginAdapter = new OpenloginAdapter({
adapterSettings: {
loginConfig: {
// Google login
google: {
verifier: "aggregate-sapphire", // Pass the Verifier name here. eg. w3a-agg-example
verifierSubIdentifier: "w3a-google", // Pass the Sub-Verifier here. eg w3a-google
typeOfLogin: "google", // Pass the type of login provider.
clientId: "519228911939-cri01h55lsjbsia1k7ll6qpalrus75ps.apps.googleusercontent.com", // Pass the Google `Client ID` here.
},
// GitHub Login via Auth0
github: {
verifier: "aggregate-sapphire", // Pass the Verifier name here. eg. w3a-agg-example
verifierSubIdentifier: "w3a-a0-github", // Pass the Sub-Verifier here. eg w3a-a0-github
typeOfLogin: "jwt", // Pass the type of login provider. For Auth0, it's jwt and not Auth0.
clientId: "hiLqaop0amgzCC0AXo4w0rrG9abuJTdu", // Pass the Auth0 `Client ID` here.
},
// Email Password Login via Auth0
emailpasswordless: {
verifier: "aggregate-sapphire", // Pass the Verifier name here. eg. w3a-agg-example
verifierSubIdentifier: "w3a-a0-email-passwordless", // Pass the Sub-Verifier here. eg w3a-a0-email-passwordless
typeOfLogin: "jwt", // Pass the type of login provider. For Auth0, it's jwt and not Auth0.
clientId: "QiEf8qZ9IoasbZsbHvjKZku4LdnRC1Ct", // Pass the `Client ID` of your Auth0 Application.
},
},
},
privateKeyProvider,
});
web3auth.configureAdapter(openloginAdapter);
// Initialize
await web3auth.init();
// When user clicks Google button, use this to Login with Google
const web3authProvider = await web3auth.connectTo("openlogin", {
loginProvider: "google",
});
// When user clicks Email Passwordless button, use this to Login with Email Passwordless via Auth0
const web3authProvider = await web3auth.connectTo("openlogin", {
loginProvider: "emailpasswordless",
extraLoginOptions: {
domain: "https://web3auth.au.auth0.com", // Pass the Auth0 Domain here, eg. https://web3auth.au.auth0.com
// This corresponds to the field inside jwt which must be used to uniquely identify the user.
verifierIdField: "email", // This is mapped b/w google and github logins.
isVerifierIdCaseSensitive: false,
},
});
// When user clicks GitHub button, use this to Login with GitHub via Auth0
const web3authProvider = await web3auth.connectTo("openlogin", {
loginProvider: "github",
extraLoginOptions: {
domain: "https://web3auth.au.auth0.com", // Pass the Auth0 Domain here, eg. https://web3auth.au.auth0.com
// This corresponds to the field inside jwt which must be used to uniquely identify the user.
verifierIdField: "email", // This is mapped b/w google and github logins.
isVerifierIdCaseSensitive: false,
},
});
Check out the full example on Github.