Cannot enable email/phone login method

[Devv]

• SDK Version: 7.3.1

• Platform: Web/React

• Browser Console Screenshots:
  

  

• If the issue is related to Custom Authentication, please include the following information (optional):

  • Verifier Name:
  • JWKS Endpoint:
  • Sample idToken (JWT):

The email/phone field is seem to be disabled no matter what config I do.

Is there a way to enable this? When I click on the input the field does not get active and I cannot type anything in it. I did disabled external wallets but not sure if it has any relation with that.

Code

static async getWeb3AuthClient() {
		const web3auth = new Web3Auth({
			web3AuthNetwork: ENV === 'development' ? 'testnet' : 'mainnet',
			clientId: TORUS_CLIENT_ID,
			chainConfig: {
				chainNamespace: CHAIN_NAMESPACES.OTHER,
				chainId: '0x1',
				rpcTarget: 'RPC_URL'
			},
			uiConfig: {
				appName: 'xxx',
				defaultLanguage: 'en',
				primaryButton: 'socialLogin',
				mode: 'dark',
				logoDark: '../logos/...-dark.svg',
				logoLight: '../logos/...-light.svg'
			}
		});

		await web3auth.initModal({
			modalConfig: {
				// Disable Wallet Connect V2
				[WALLET_ADAPTERS.WALLET_CONNECT_V2]: {
					label: 'wallet_connect',
					showOnModal: false
				},
				// Disable Metamask
				[WALLET_ADAPTERS.METAMASK]: {
					label: 'metamask',
					showOnModal: false
				},
				// Disable Torus
				[WALLET_ADAPTERS.TORUS_EVM]: {
					label: 'torus_evm',
					showOnModal: false
				}
			}
		});

		return web3auth;
	}

// somewhere else
const web3Auth = await getWeb3AuthClient();

web3Auth.loginModal.on('MODAL_VISIBILITY', (open: boolean) => {
	if (!open) {
		setLoadingWeb3Auth(false);
	}
});

const web3Provider = await web3Auth.connect();
...

[vjgee]

@Devv Welcome Aboard!

You need to enable Email Passwordless and SMS login to display them and disable the rest:

  await web3auth.initModal({
  modalConfig: {
    [WALLET_ADAPTERS.OPENLOGIN]: {
      label: "openlogin",
      loginMethods: {
        // Enable email_passwordless and sms_passwordless
        email_passwordless: {
          name: "email_passwordless",
          showOnModal: true,
        },
        sms_passwordless: {
          name: "sms_passwordless",
          showOnModal: true,
        },
      },
    },
  },
});