Creating Aggregate Verifier on the Web3Auth Dashboard

Developers can create Aggregate Multiple Provider from the Web3Auth Dashboard by combining multiple login methods to create a verifier to get the same address for their user regardless of their login providers. For example, combining a Google and Email Passwordless login or Google and GitHub via Auth0 to access the same address 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

1. Create an aggregate verifier for your application by selecting Aggregate Multiple Providers as the Login provider from the login providers.

2. Click on Add Sub Verifiers to add a new sub-verifier.

3. 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 the Client ID field and click on Add Sub Verifiers.

4. Next, create the second sub-verifier. Click on Add Sub Verifiers to add a new sub-verifier.

5. Select Auth0 on the dropdown or choose Custom Providers from the radio buttons. We're selecting Auth0 in this example.

6. Select the Authentication Type based on your application need on the dropdown. We're selecting GitHub in this example.

7. Select Email as the JWT Verifier ID and enter the Auth0 Client ID and Auth0 Domain from your Auth0 application. See how to create a new Auth0 application here.

   

   NOTE

   1. Add the GitHub Social Connection to your Auth0 application.
   2. One has to request an email from the user while setting up the GitHub Social Connection on the Auth0 Dashboard.

8. Similarly, create a third sub-verifier for Email Passwordless via Auth0. Follow the above steps from 5 to 8, and select Email Passwordless in place of GitHub.

9. Finally, click on Create to deploy the verifier.

NOTE

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",
  blockExplorerUrl: "https://etherscan.io",
  ticker: "ETH",
  tickerName: "Ethereum",
  logo: "https://images.toruswallet.io/ethereum.svg",
};

const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });

const web3auth = new Web3AuthNoModal({
  clientId,
  web3AuthNetwork: "sapphire_mainnet",
  privateKeyProvider: privateKeyProvider,
});

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,
  },
});

Example app

Check out the full example on GitHub.