Web3Auth loginMethodsOrder not working

Moralis General
#1

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:

#2

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.

#3

Hi there,

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

#4

Looks like you could use loginMethods.

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

#5

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

#6

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

#7

Did you try using loginMethods?

#8

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

#9

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

How to get email when using Web3Auth?
Web3auth Provider with avalanche chainId?