How to show only Google login inside Modal

Help - Plug n Play
1 
"@web3auth/auth-adapter": "^9.4.0",
"@web3auth/base": "^9.4.0",
"@web3auth/default-solana-adapter": "^9.4.4",
"@web3auth/modal": "^9.4.1",
"@web3auth/solana-provider": "^9.4.0",

const web3AuthOptions: Web3AuthOptions = {
    clientId,
    web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
    uiConfig: {
        uxMode: "redirect",
        appName: "xxx",
        appUrl: "xxx",
        theme: {
            primary: "gray",
        },
        defaultLanguage: "en", // en, de, ja, ko, zh, es, fr, pt, nl, tr
        mode: "dark", // whether to enable dark mode. defaultValue: auto
        useLogoLoader: true,
    },
    privateKeyProvider: privateKeyProvider,
    sessionTime: 86400 * 7, // 7 days
};

const authAdapter = new AuthAdapter({
    loginSettings: {
        mfaLevel: "none",
        curve: "ed25519", // allowed values "secp256k1" (default, EVM) or "ed25519" (Solana)
    },
    adapterSettings: {
        uxMode: "redirect", 
    },
    privateKeyProvider: privateKeyProvider
});
web3auth.configureAdapter(authAdapter)

This will have all kinds of social login options inside the modal, but I only want to display Google login.

2

Hi Zhe Wang! Thanks for reaching out. It sounds like you’re looking to configure your Web3Auth modal to display only the Google login option.

Given the SDK details you provided, here’s a brief solution to help you achieve that:

To show only the Google login option in the modal, you can set the loginSettings property specifically for Google within your AuthAdapter. Here’s how to modify your existing AuthAdapter configuration:

const authAdapter = new AuthAdapter({
    loginSettings: {
        mfaLevel: "none",
        curve: "ed25519",
        // Add supported wallets with Google as the only option
        verifier: 'google',
        loginProviders: ['google'] // Here, specify only Google provider
    },
    adapterSettings: {
        uxMode: "redirect",
    },
    privateKeyProvider: privateKeyProvider
});

Additionally, ensure that your loginProviders includes only ‘google’, which should limit the options shown in the modal to just Google.

If you encounter any errors or need further adjustments, feel free to share more context or screenshots if available! Your SDK versions and platform details are noted, so we can assist you better if needed. Happy coding!

Note: This response was generated by an AI bot and may require further verification. The Web3Auth support team has tracked this issue and will be responding as soon as possible.

3

what if I want to support only Google AND Discord for login?

4

You can do so like this:

await web3auth.initModal({
          modalConfig: {
            [WALLET_ADAPTERS.AUTH]: {
              label: "auth",
              loginMethods: {
                google: {
                  name: "google",
                  showOnModal: true, // <<<--- This will be visible
                },
                discord: {
                  name: "discord",
                  showOnModal: true, // <<<--- This will be visible
                },
                // These will be hidden from the Web3Auth modal.
                facebook: {
                  name: "facebook",
                  showOnModal: false,
                },
                reddit: {
                  name: "reddit",
                  showOnModal: false,
                },
                twitch: {
                  name: "twitch",
                  showOnModal: false,
                },
                apple: {
                  name: "apple",
                  showOnModal: false,
                },
                line: {
                  name: "line",
                  showOnModal: false,
                },
                github: {
                  name: "github",
                  showOnModal: false,
                },
                kakao: {
                  name: "kakao",
                  showOnModal: false,
                },
                linkedin: {
                  name: "linkedin",
                  showOnModal: false,
                },
                twitter: {
                  name: "twitter",
                  showOnModal: false,
                },
                weibo: {
                  name: "weibo",
                  showOnModal: false,
                },
                wechat: {
                  name: "wechat",
                  showOnModal: false,
                },
                farcaster: {
                  name: "farcaster",
                  showOnModal: false,
                },
                email_passwordless: {
                  name: "email-passwordless",
                  showOnModal: false,
                },
                sms_passwordless: {
                  name: "sms-passwordless",
                  showOnModal: false,
                },
              },
            },
          },
        });

Screenshot 2024-11-26 at 9.19.26 AM

5

Thanks!

Do you know how to remove “We do not store any data related to your social logins.” from the popup modal?

6

This is part of our default modal; unfortunately, it cannot be removed or edited from the dApp’s side.

However, you can use our PnP NoModal SDK to offer a more customized login screen UI.

7

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.