Facebook error with Web3auth

Help - Plug n Play PnP Web SDKs
1

I need help as Facebook and Instagram are causing issues for my app

Below is a screenshot of the error which occurs when a user attempts to log in using facebook for Oauth.

Web3Auth Initialisation below:

const web3AuthOptions: Web3AuthOptions = {
  clientId,
  web3AuthNetwork: WEB3AUTH_NETWORK.CYAN,
  uiConfig: {
    uxMode: "",
    appName: "*****",
    appUrl: "https://web3auth.io/",
    theme: {
      primary: "#7ed6df",
    },
    logoLight: "https://web3auth.io/images/web3authlogodark.png",
    logoDark: "https://web3auth.io/images/web3authlogodark.png",
    defaultLanguage: "en", // en, de, ja, ko, zh, es, fr, pt, nl, tr
    mode: "auto", // whether to enable dark mode. defaultValue: auto
    useLogoLoader: true,
  },
  privateKeyProvider,
  sessionTime: 86400, // 1 day
}


 this.web3auth = new Web3Auth(web3AuthOptions);
    this.openloginAdapter = new OpenloginAdapter({
      loginSettings: {
        mfaLevel: "none",
        extraLoginOptions: {
          flow_type: "link",
        },
      },
      adapterSettings: {
        uxMode: "redirect",
        whiteLabel: {
          appName: "*****",
          defaultLanguage: "en",
          mode: "dark",
          logoLight: "https://web3auth.io/images/web3authlogodark.png",
          logoDark: "https://web3auth.io/images/web3authlogodark.png",
        },
      },
    });
    this.web3auth.configureAdapter(this.openloginAdapter);
2

Hi Dean!
Thank you for reaching out. I see you’re experiencing an issue with Facebook login integration in your app using Web3Auth PnP Web SDK (v9.0.2) on a Chrome Macbook Pro.

The issue needs some more detailed inspection. Here are the key details you’ve provided and a few more pieces of information that could help us troubleshoot the problem effectively:

Key Details Provided:

  1. SDK Details: Web3Auth PnP Web SDK
  2. SDK Version: 9.0.2
  3. Platform: Chrome on Macbook Pro
  4. Issue: Facebook login error
  5. Initialization Code: Provided
  6. Browser Console Screenshot: Provided

Missing Information:

  1. Verifier Name if you’re using a custom authentication provider.
  2. Method of Login if it’s related to custom authentication.

Suggested Next Steps:

  1. Verifier Details:

    • If you’re using a custom verifier for Facebook, please share the verifier name.

  2. Method of Login:

    • Confirm if the issue is related to a particular method of login, especially if using custom authentication settings.

From a preliminary review of your initialization code, a couple of areas might need attention:

  • UX Mode Configuration:
    Your uiConfig has uxMode set as an empty string (""). You might want to set it to popup or redirect based on your preferred user flow.
const web3AuthOptions: Web3AuthOptions = {
  ...,
  uiConfig: {
    uxMode: "popup" // or "redirect"
  }
}

This response was generated by the Web3Auth Bot. A member of our support team will review your query and provide further assistance shortly.

3

Hey @dean.dev
Welcome aboard! As discussed during the Office Hours, please share your console logs and also can you please try once after removing the extraLoginOptions parameter ?

4

No logs are produced when i select via facebook and removing extraLoginOptions did not fix the issue either

5

Hey guys ! Any news on this ?

6

@maharshi any news on how to resolve it ? as removing extraLoginOptions didnt solve the problem.

7

Hey @dean.dev @JulienD,

I have been able to recreate the issue on the cyan network, though Facebook login is working fine on sapphire_devnet. If this is a blocker for you, I recommend trying with a project on sapphire_mainnet or sapphire_devnet for now. Meanwhile, I’ll work on getting this resolved for the cyan network.

8

Hi, thank you for your response. Unfortunately, we can’t migrate our project to another network. I appreciate your insights, and I was also wondering how long we might expect a resolution with the Cyan network.

9

Hey @dean.dev
Can you please verify once, we have implemented a fix for Facebook login?