[Archive] Facebook error when trying to sign in

Embedded Wallets (Web3Auth)
1

:classical_building: Archived Content from Web3Auth Community

This topic was originally posted by Romain on 9/14/2024.
This content has been migrated from our previous community forum to preserve valuable discussions.

When asking for help in this category, please make sure to provide the following details:

SDK Version:
“@web3auth/base”: “^7.3.1”,
“@web3auth/modal”: “^7.3.2”,
“@web3auth/no-modal”: “^8.0.1”,
“@web3auth/openlogin-adapter”: “^8.0.1”,

Platform: Vue3
Do I use Custom Authentication ? No

Hello, when I’m trying to activate Facebook login I have this error page on Facebook.

Capture d’écran 2024-09-14 à 11.49.30
Capture d’écran 2024-09-14 à 11.49.301228×1210 31.5 KB

I’m not using any custom authenticator.
Thank you very much for you help

    const openloginAdapter = new OpenloginAdapter({
      privateKeyProvider: privateKeyProvider,
      adapterSettings: {
        network: web3Network as "mainnet" | "testnet",
        uxMode: "redirect",
        whiteLabel: {
          appName: "****",
          defaultLanguage: "en",
          logoLight: "https://assets.***.***/logo-****-white.svg",
          logoDark: "https://assets.****.io/logo-***-dark.svg",
          useLogoLoader: true,
        },
        clientId,
      },
    });
    this.web3auth.configureAdapter(openloginAdapter);

this.web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, {
      loginProvider: "facebook",
      mfaLevel: "none",
      redirectUrl: `${document.location.origin}`,
    });
2

Hi Romain,

Thanks for reaching out and providing detailed information. Let’s summarize what we have:

Details

  • SDK: PnP Web SDK
  • SDK Versions:
    • @web3auth/base: ^7.3.1
    • @web3auth/modal: ^7.3.2
    • @web3auth/no-modal: ^8.0.1
    • @web3auth/openlogin-adapter: ^8.0.1
  • Platform: Vue3
  • Custom Authentication: No

Issue

You’re encountering an error when trying to activate Facebook login. The error page is shown on Facebook, suggesting that there might be an issue with the configuration of the Facebook app or the Web3Auth setup for Facebook login.

Provided Code Snippets

Initialization Code

const openloginAdapter = new OpenloginAdapter({
  privateKeyProvider: privateKeyProvider,
  adapterSettings: {
    network: web3Network as "mainnet" | "testnet",
    uxMode: "redirect",
    whiteLabel: {
      appName: "Fungiball",
      defaultLanguage: "en",
      logoLight: "https://assets.***.***/logo-****-white.svg",
      logoDark: "https://assets.****.io/logo-***-dark.svg",
      useLogoLoader: true,
    },
    clientId,
  },
});
this.web3auth.configureAdapter(openloginAdapter);

Login Code

this.web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, {
  loginProvider: "facebook",
  mfaLevel: "none",
  redirectUrl: `${document.location.origin}`,
});

Screenshot

You provided a screenshot, but it seems the image failed to upload correctly.

Possible Solution

This might be a configuration issue with the Facebook app or the redirected URL not being correctly set up. Please verify:

  1. Make sure your Facebook app’s OAuth settings allow the redirect URL you are using.
  2. Check if the clientId and other configuration parameters are correctly set.
  3. Ensure that Facebook login is enabled in the Web3Auth dashboard.

If everything seems fine, could you provide a working screenshot of the Facebook error page? It might help to pinpoint the issues more effectively.

This response was generated by the Web3Auth Bot, and a person from the Web3Auth team will come and give an answer to your query as well.

3

Hey @Romain ,

Could you please share the logs when this issue occurs? You can use a browser extension like Jam.dev to record the session, including network calls and console logs, and then share the recording. This will help us better understand the issue.