Web3Auth loginMethodsOrder not working

Hi,

The web3auth integration documentation mentions that loginMethodsOrder

contains the social logins that you want to allow, and the order in which they show up.

https://docs.moralis.io/moralis-dapp/users/web3-login/web3auth#parameters

Unfortunately when I’m trying to only allow Twitter, other providers and email paswordless still appear in the web3 auth modal.
Here’s my code:

    await authenticate({
      provider: 'web3Auth',
      clientId: '***',
      loginMethodsOrder: ['twitter'],
      theme: 'light',
    });

Let me know If you can help :pray:

Looking at the Web3Auth docs, it says for loginMethodsOrder:

The list of login methods can also be reordered with this parameter. Those methods specified will be first on the list.

Have you tried other options like ['facebook', 'google'] to see if two work? Otherwise the Moralis description may be misleading.

Hi there,

So web3Auth does not provide a parameter to exclude specific services from the login box?

Looks like you could use loginMethods.

If that doesn’t work, you can ask on their Discord.

Ok I’ll go ask there thanks for the help!

@SachaH Did you figure this out? I am stuck on this problem too

Did you try using loginMethods?

@glad I’d like to try, but it is not obvious to me how the underlying web3Auth object can be accessed

@SachaH

loginMethods does hide the services. You can use a custom connector to change the underlying Web3Auth setup. This is a slight modification of the default Web3Auth connector.

Web3AuthConnector.js (loginMethods at web3auth.initModal)

import Moralis from 'moralis';
import { ethers } from 'ethers';
//import verifyChainId from '../utils/verifyChainId';
import { WALLET_ADAPTERS } from '@web3auth/base';

export default class Web3AuthConnector extends Moralis.AbstractWeb3Connector {
  type = 'web3Auth';

  connect = (web3auth) => {
    return new Promise((resolve, reject) => {
      const subscribeAuthEvents = (web3auth) => {
        web3auth.loginModal.on('MODAL_VISIBILITY', async (visibility) => {
          if (!visibility) {
            reject(new Error('Web3Auth: User closed login modal.'));
          }
        });
      };

      subscribeAuthEvents(web3auth);

      web3auth.connect().then(resolve).catch(reject);
    });
  };

  activate = async ({
    chainId = '0x1',
    clientId,
    theme,
    appLogo,
    loginMethodsOrder,
  } = {}) => {
    // Checking that all params are given
    if (!clientId) {
      throw new Error('"clientId" not provided, please provide clientId');
    }

    // Initalizing Web3Auth and getting constants
    let Web3Auth;
    try {
      Web3Auth = require('@web3auth/web3auth')?.Web3Auth;
    } catch {
      // Do Nothing Individual Checks are done below
    }

    // Check if user is using CDN to import
    if (!Web3Auth) {
      Web3Auth = window?.Web3auth?.Web3Auth;
    }

    // Error checking for if library is not installed
    if (!Web3Auth) {
      throw new Error('"@web3auth/web3auth" not installed, please install');
    }

    // Build config
    const ethChainConfig = {
      chainNamespace: 'eip155',
      chainId: chainId,
    };
    // Build Web3Auth
    let web3auth;
    try {
      web3auth = new Web3Auth({
        chainConfig: ethChainConfig,
        uiConfig: {
          theme: theme ?? 'dark',
          appLogo:
            appLogo ??
            'https://moralis.io/wp-content/uploads/2021/05/moralisWhiteLogo.svg',
          loginMethodsOrder,
        },
        clientId: clientId,
      });
    } catch {
      // Do Nothing error checked below
    }
    if (!web3auth) {
      throw new Error(
        'Could not connect via Web3Auth, error during initializing Web3Auth'
      );
    }

    // Authenticate
    await web3auth.initModal({
      modalConfig: {
        [WALLET_ADAPTERS.OPENLOGIN]: {
          loginMethods: {
            // change based on what you want to show
            google: {
              showOnModal: false,
            },
            facebook: {
              showOnModal: false,
            },
            twitter: {
              showOnModal: false,
            },
          },
          // setting it to false will hide all social login methods from modal.
          showOnModal: true,
        },
      },
    });
    let provider = null;
    provider = await this.connect(web3auth);

    if (!provider) {
      throw new Error(
        'Could not connect via Web3Auth, error in connecting to provider'
      );
    }

    // Gather User data
    try {
      const isSocialLogin = web3auth?.provider ? false : true;
      const ether = new ethers.providers.Web3Provider(
        web3auth?.provider ? web3auth.provider : web3auth
      );

      const signer = ether.getSigner();
      const values = await Promise.all([
        ether.getNetwork(),
        signer.getAddress(),
      ]);
      const providerChainId = values[0].chainId;

      this.account = values[1].toLocaleLowerCase();
      this.chainId = `0x${providerChainId.toString(16)}`;
      this.provider = isSocialLogin ? ether : web3auth?.provider;

      this.web3Instance = web3auth;
      this.subscribeToEvents(this.provider);
      return {
        chainId: this.chainId,
        account: this.account,
        provider: this.provider,
      };
    } catch {
      throw new Error(
        'Could not connect via Web3Auth, error while authenticating'
      );
    }
  };

  deactivate = async () => {
    this.unsubscribeToEvents(this.provider);
    if (this.web3Instance) {
      await this.web3Instance.logout();
    }
    this.account = null;
    this.chainId = null;
    this.provider = null;
  };
}

App.js (React demo)

import Web3AuthConnector from './Web3AuthConnector';

...

function App() {
  const { authenticate, isInitialized, account, Moralis, user } = useMoralis();

  async function login() {
    await authenticate({
      connector: Web3AuthConnector,
      chainId: '0x13881',
      clientId:
        'BKWeZfHoMaWDrKJaUK4saqgTlsWz8C0HiqbjjSyWY0d62lcdWLk5ga9ujG1zINRl7e5SKSkWlK-bbdpamttgae8',
      loginMethodsOrder: ['twitch', 'apple'],
    });
  }

  return <button onClick={login}>Login</button>;
}

After doing this, loginMethodsOrder will work to change the order of the providers set in loginMethods.