Creating Aggregate Verifier on Web3Auth Dashboard

Developers can create an Aggregate Multiple Provider verifier from the Web3Auth Dashboard by combining multiple login methods. This enables them to create a verifier that retrieves the same address for their user, regardless of the login providers used. For example, developers can combine a Google and Email Passwordless login, or a Google and GitHub login via Auth0, to access the same address for their user. These login methods should share the same Verifier ID, such as email, which is unique to the user regardless of the login method used, resulting in the same address for the user.

note

Access to creating a verifier is gated. Therefore, creating an aggregate verifier requires a minimum Growth Plan.

You can utilize this feature for projects on sapphire_devnet network for free.

Set up an Aggregate Verifier

• Go to the Web3Auth dashboard and select your project. Click on the Custom Authentication tab, then click on the Create Verifier button to create a new verifier.

  

1. Give a unique name to your verifier in the Verifier Identifier field. e.g., web3auth-aggregate-verifier.

2. Select Aggregate Multiple Providers as the Login provider.

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

4. 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.

5. Next, create the second sub-verifier by clicking on the Add Sub Verifiers button.

6. This time, you can select Social Login Providers like Auth0 or Google, or Custom Providers from the dropdown list. We're selecting Auth0 in this example.

   

   Note: You can combine two or more Google logins as needed for web and mobile apps.

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

   

8. Next, 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.

9. Similarly, create a third sub-verifier for Email Passwordless. Click on Social Login Provider and then select Email Passwordless as the Login provider from the dropdown list

   

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

    It typically takes 5-10 minutes for the verifier to go live. Once deployed & live, you'll receive an email and the dashboard will display the 'Live' status for the verifier.

NOTE

You can aggregate two or more verifiers.

Example

import { Web3AuthNoModal } from "@web3auth/no-modal";
import { AuthAdapter } from "@web3auth/auth-adapter";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
import { CHAIN_NAMESPACES } from "@web3auth/base";

const clientId =
  "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ";
// get it from https://dashboard.web3auth.io by creating a Plug n Play project.

const chainConfig = {
  chainNamespace: CHAIN_NAMESPACES.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 authAdapter = new AuthAdapter({
  adapterSettings: {
    loginConfig: {
      // Google login
      google: {
        verifier: "aggregate-sapphire", // Pass the Verifier name here. eg. aggregate-sapphire
        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. aggregate-sapphire
        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
      email_passwordless: {
        verifier: "aggregate-sapphire", // Pass the Verifier name here. eg. aggregate-sapphire
        verifierSubIdentifier: "w3a-email-passwordless", // Pass the Sub-Verifier here. eg w3a-email-passwordless
        typeOfLogin: "email_passwordless", // Pass the type of login provider.
        clientId, // Pass the Web3Auth `Client ID` here.
      },
    },
  },
  privateKeyProvider,
});

web3auth.configureAdapter(authAdapter);

// Initialize
await web3auth.init();

// When user clicks Google button, use this to Login with Google
const web3authProvider = await web3auth.connectTo("auth", {
  loginProvider: "google",
});

// When user clicks Email Passwordless button, use this to Login with Email Passwordless via Auth0
const web3authProvider = await web3auth.connectTo("auth", {
  loginProvider: "email_passwordless",
  extraLoginOptions: {
    login_hint: email.trim(),
  },
});

// When user clicks GitHub button, use this to Login with GitHub via Auth0
const web3authProvider = await web3auth.connectTo("auth", {
  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.