uiConfig setup not work

[khiemjoker]

this is my setup for web3auth modal

const uiconfig = {
  loginMethodsOrder: ["google"],
  appName: "VKU certificate",
  logoLight:
    "https://drive.google.com/file/d/1pqhXZPPDwOPAuxVdNEufScnunKPdroQX/view",
  logoDark:
    "https://drive.google.com/file/d/1l9n_lMkpjXdnXGkVFYdUHJg2rapopoFQ/view",
};

const web3AuthOptions = {
  uiconfig,
  clientId,
  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
  privateKeyProvider,
};

const web3auth = new Web3Auth(web3AuthOptions);

But it doesn’t seem to work as expected. Am I missing or skipping any important steps?

The version of web3auth I use:
“@web3auth/base”: “^9.2.2”,
“@web3auth/default-evm-adapter”: “^9.2.2”,
“@web3auth/ethereum-provider”: “^9.2.2”,
“@web3auth/modal”: “^9.2.2”,
“@web3auth/modal-react-hooks”: “^9.2.2”,

[w3abot]

Hello Thai Khiem Huybh!

Thanks for reaching out with your issue regarding the uiConfig setup for Web3Auth. Let’s clarify the details you provided to help our support team assist you more effectively.

Issue Summary:

• SDK Details: Plug n Play
• SDK Version:
  • @web3auth/base: ^9.2.2
  • @web3auth/default-evm-adapter: ^9.2.2
  • @web3auth/ethereum-provider: ^9.2.2
  • @web3auth/modal: ^9.2.2
  • @web3auth/modal-react-hooks: ^9.2.2
• Platform: Not specified (please confirm if you are using a specific platform)
• Code Snippet:

  const uiconfig = {
    loginMethodsOrder: ["google"],
    appName: "VKU certificate",
    logoLight: "https://drive.google.com/file/d/1pqhXZPPDwOPAuxVdNEufScnunKPdroQX/view",
    logoDark: "https://drive.google.com/file/d/1l9n_lMkpjXdnXGkVFYdUHJg2rapopoFQ/view",
  };
  
  const web3AuthOptions = {
    uiconfig,
    clientId,
    web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
    privateKeyProvider,
  };
  
  const web3auth = new Web3Auth(web3AuthOptions);
  

Visual Reference:

Next Steps:

To assist you further, it would be great if you could provide the following details:

• Any error messages from the console when trying to open the Web3Auth modal.
• Confirmation of the platform you’re using (e.g., Web, React, etc.).
• Any additional logs or screenshots related to the issue.

In the meantime, double-check that the clientId and privateKeyProvider are correctly set up and that the URLs for logoLight and logoDark are accessible. Sometimes, issues can arise if the URLs are incorrect or point to restricted content.

Feel free to share any additional details, and I’ll be here to help!

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.

[maharshi]

Hey @khiemjoker

It looks like the issue might be due to a slight typo in the parameter name. The correct name is uiConfig (capital “C”), not uiconfig.

You can resolve this by either:

1. Changing the variable name to uiConfig:

   const uiConfig = {
     ...
   };
   

2. Or, updating web3AuthOptions directly:

   const web3AuthOptions = {
     uiConfig: uiconfig,
     clientId,
     web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
     privateKeyProvider,
   };
   

To prevent similar issues, try using the Web3AuthOptions type from the @web3auth/modal package. It will help catch such errors in advance.