How do I make only the login methods I want appear?

[blockodyssey-bjkim]

How do I make only the login methods I want appear? I just want "Google", "Facebook", "Kakao", "email passwordless" login to appear.
It is currently hard-coded.

const methods = [
  'google',
  'facebook',
  'twitter',
  'reddit',
  'discord',
  'twitch',
  'apple',
  'line',
  'github',
  'kakao',
  'linkedin',
  'weibo',
  'wechatemail_passwordless',
  'wechat'
];
const web3AuthLoginMethods = {};
methods.forEach((method) =>
  Object.assign(web3AuthLoginMethods, {
      [method]: {
          name: `${method} login`,
          showOnModal: method === 'google' || method === 'facebook' || method === 'kakao' ? true : false
      }
  })
);

const web3AuthInstance = new Web3Auth({
    chainConfig: {
        chainNamespace: 'eip155',
        chainId: '0x13881', // hex of 80001, polygon testnet
        rpcTarget: 'https://rpc.ankr.com/polygon_mumbai',
        displayName: 'Mumbai testnet',
        blockExplorer: 'https://mumbai.polygonscan.com/',
        ticker: 'MATIC',
        tickerName: 'Matic'
    },
    clientId,
    uiConfig: {
        loginMethodsOrder: ['google', 'facebook', 'kakao'],
        appLogo: '/favicon.ico'
    },
    authMode: 'WALLET'
});
const openloginAdapter = new OpenloginAdapter({
    adapterSettings: {
        clientId,
        network: 'testnet',
        uxMode: 'popup'
    },
    loginSettings: {
        mfaLevel: 'none'
    }
});
web3AuthInstance.configureAdapter(openloginAdapter);
subscribeAuthEvents(web3AuthInstance);
setWeb3Auth(web3AuthInstance);
await web3AuthInstance.initModal({
    modalConfig: {
        [WALLET_ADAPTERS.OPENLOGIN]: {
            label: 'openlogin',
            loginMethods: web3AuthLoginMethods
        }
    }
});

[Saviour1001]

As you want to customize the modal per your needs, I suggest you look at the Whitelabel Docs for the modal. You can edit out a lot of things including the App Logo and such.

The below code snippet will help you change the social logins to showcase as per your choice.

await web3auth.initModal({
  modalConfig: {
    [WALLET_ADAPTERS.OPENLOGIN]: {
      label: "openlogin",
      loginMethods: {
        google: {
          name: "google login",
          logoDark: "url to your custom logo which will shown in dark mode",
        },
        facebook: {
          // it will hide the facebook option from the Web3Auth modal.
          showOnModal: false,
        },
      },
      // setting it to false will hide all social login methods from modal.
      showOnModal: true,
    },
  },
});

[blockodyssey-bjkim]

@Saviour1001
How do I set up only Facebook and Google?
Do I have to hardcode all other social login in loginMethod to set "showOnModal: false"?

[copostic]

@blockodyssey-bjkim Yes, sadly, you do...