Social Login With 9.7.0

Help - Plug n Play PnP Web SDKs
1

I’m upgrading all packages from v7.3.0 to v9.7.0
In v7 the modal login was working flawlessly with this configuration:

await web3auth.initModal({
    modalConfig: {
      openlogin: {
        label: "openlogin",
        loginMethods: {
          google: {
            name: "google",
            mainOption: true,
          },
          facebook: {
            name: "facebook",
            mainOption: true,
          },
          email_passwordless: {
            name: "email_passwordless",
            showOnModal: false,
          },
          phone_passwordless: {
            name: "phone_passwordless",
            showOnModal: false,
          },
          ...
          },
        },

Since v9.7.0 it looks like openlogin is no longer working.
I’m trying to replicate the react-modal-playground demo found https://pnp-modal-playground.vercel.app/
but I don’t understand how I’m supposed to initialize my modal since I don’t use the context and those react hooks.

I’m getting the following error:

Uncaught (in promise) WalletInitializationError: Invalid params passed in, Invalid wallet connect project id. Please configure it on the dashboard
at WalletInitializationError.fromCode (index.js:73:12)
at WalletInitializationError.invalidParams (index.js:108:38)
at eval (modalManager.js:256:567)
at Array.map ()
at Web3Auth.initModal (modalManager.js:106:54)
at async Object.initWeb3Auth

And this is the code I’m using:

const clientId = process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID!;
  const chainId = process.env.NEXT_PUBLIC_IS_DEVELOPMENT ? 0x13882 : 0x89; // Mumbai or Polygon Mainnet

  const chainConfig = getEvmChainConfig(chainId, clientId)!;
  const privateKeyProvider = new EthereumPrivateKeyProvider({
    config: { chainConfig },
  });

  const web3AuthOptions: Web3AuthOptions = {
    clientId,
    web3AuthNetwork: process.env.NEXT_PUBLIC_IS_DEVELOPMENT
      ? 'sapphire_devnet'
      : 'sapphire_mainnet',
    privateKeyProvider,
  };
  const authAdapter = new AuthAdapter({
    loginSettings: {
      mfaLevel: MFA_LEVELS.OPTIONAL,
    },
    adapterSettings: {
      uxMode: "redirect"
    },
  });

  const walletServicesPlugin = new WalletServicesPlugin({
    wsEmbedOpts: {},
    walletInitOptions: {
      whiteLabel: { showWidgetButton: true, buttonPosition: BUTTON_POSITION.BOTTOM_RIGHT },
      confirmationStrategy: CONFIRMATION_STRATEGY.MODAL,
    },
  });

  web3auth = new Web3Auth(web3AuthOptions);

  // Configure default adapters
  const adapters = getDefaultExternalAdapters({ options: web3AuthOptions });
  [...adapters, authAdapter].forEach((adapter: IAdapter<unknown>) => {
    web3auth.configureAdapter(adapter);
  });

  web3auth.addPlugin(walletServicesPlugin);

  await web3auth.initModal({
    modalConfig: {
      openlogin: {
        label: "openlogin",
        loginMethods: {
          google: {
            name: "google",
            mainOption: true,
          },
          facebook: {
            name: "facebook",
            mainOption: true,
          },
          email_passwordless: {
            name: "email_passwordless",
            showOnModal: false,
          },
          phone_passwordless: {
            name: "phone_passwordless",
            showOnModal: false,
          },
          twitter: {
            name: "twitter",
            showOnModal: false,
          },
          reddit: {
            name: "reddit",
            showOnModal: false,
          },
          discord: {
            name: "discord",
            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,
          },
          weibo: {
            name: "weibo",
            showOnModal: false,
          },
          wechat: {
            name: "wechat",
            showOnModal: false,
          },
        },
        showOnModal: true,
      },
    },
  });
  • SDK Version(package.json):9.7.0
  • Platform: NextJS

Also, kindly provide the Web3Auth initialization and login code snippet below. This will help us better understand your issue and provide you with the necessary assistance.

2

Thanks for providing detailed information, Aaron! Here’s a summary for the support team and some guidance for you:

Issue Summary

  • SDK: Web3Auth Plug and Play (PnP) Web SDK
  • SDK Version: 9.7.0
  • Platform: NextJS
  • Issue: After upgrading from v7.3.0 to v9.7.0, social login via the modal (specifically with openlogin) is not working. You are seeing the error:

Uncaught (in promise) WalletInitializationError: Invalid params passed in, Invalid wallet connect project id. Please configure it on the dashboard

Key Details for Support

  • Web3Auth Initialization & Login Code: Provided above
  • Error Message: Invalid wallet connect project id
  • Custom Authentication: No custom verifier or JWKS mentioned

Possible Cause & Solution

The error message:

Invalid wallet connect project id. Please configure it on the dashboard

suggests that in v9.x, the Web3Auth modal now requires a valid WalletConnect Project ID for the WalletConnect adapter, which was not mandatory in earlier versions.

What you should do:

  1. Get a WalletConnect Project ID:

  2. Pass the Project ID in your Web3Auth configuration:

    • You need to add the walletConnectV2ProjectId in your Web3AuthOptions.
    • Example:
      const web3AuthOptions: Web3AuthOptions = {
  clientId,
  web3AuthNetwork: process.env.NEXT_PUBLIC_IS_DEVELOPMENT
    ? 'sapphire_devnet'
    : 'sapphire_mainnet',
  privateKeyProvider,
  walletConnectV2ProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID, // <-- Add this line
};

  3. Update your .env file (or however you manage environment variables) with your new WalletConnect Project ID.

Reference Docs

Next Steps

  • Add the WalletConnect Project ID as described above.
  • If the issue persists after this change, please provide a screenshot of your browser console and any additional error messages.

Let me know if you need help with the exact code changes or run into any more issues!

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.

Additionally, we would recommend you to join our biweekly Office Hours to get this resolved even faster. Web3Auth Developer Office Hours

3

Suggested code is not working

4

Hey @aaron2
We’ve renamed openlogin adapter to Auth adapter. Please have a look at the latest example and migration guide. Since you’ve already implemented it to your app. Sharing the migration guide as it would be more useful. Please have a look here at PnP Modal SDK - v8 to v9 | Documentation | Web3Auth.