WalletLoginError: Failed to connect with wallet. Failed to login with openlogin

[bolisteward]

Hello, I'm developing a little project with web3auth using jwt with firebase and I have problems with the login, please I need your help.
I got error WalletLoginError: Failed to connect with wallet. Failed to login with openlogin.
I thought that it could happened by the jwt configuration in the dashboard but it is ok.

`
export function Web3Auth({ children, web3Network, chain }: IWeb3AuthProps) {
const [web3Auth, setWeb3Auth] = useState<Web3AuthCore | null>(null);
const [firebaseApp, setfirebaseApp] = useState<FirebaseApp | undefined>(undefined);
const [user, setUser] = useState<unknown | null>(null);
const [provider, setProvider] = useState<IWalletProvider | null>(null);
const [isLoading, setIsLoading] = useState(false);

const setWalletProvider = useCallback(
(web3authProvider: SafeEventEmitterProvider) => {
const walletProvider = getWalletProvider(chain, web3authProvider);
setProvider(walletProvider);
},
[chain]
);

useEffect(() => {

const subscribeAuthEvents = (web3auth: Web3AuthCore) => {
  // Can subscribe to all ADAPTER_EVENTS and LOGIN_MODAL_EVENTS
  web3auth.on(ADAPTER_EVENTS.CONNECTED, (data: unknown) => {
    console.log("Yeah!, you are successfully logged in", data);
    setUser(data);
    setWalletProvider(web3auth.provider!);
  });

  web3auth.on(ADAPTER_EVENTS.CONNECTING, () => {
    console.log("connecting");
  });

  web3auth.on(ADAPTER_EVENTS.DISCONNECTED, () => {
    console.log("disconnected");
    setUser(null);
  });

  web3auth.on(ADAPTER_EVENTS.ERRORED, (error: unknown) => {
    console.error("some error or user has cancelled login request", error);
  });
};

const currentChainConfig = CHAIN_CONFIG[chain];


async function init() {
  try {
    setIsLoading(true);

    const web3AuthInstance = new Web3AuthCore({
      clientId: process.env.WEB3AUTH_CLIENT_ID ?? '',
      web3AuthNetwork: web3Network,
      chainConfig: currentChainConfig,
    });

    subscribeAuthEvents(web3AuthInstance);

    const openloginAdapter = new OpenloginAdapter({
      adapterSettings: {
        uxMode: "popup",
        loginConfig: {
          jwt: {
            name: "verifier",
            verifier: "login-verifier",
            typeOfLogin: "jwt",
            clientId: process.env.WEB3AUTH_CLIENT_ID,
          },
        },
      },
    });

    const networkUi = new NetworkSwitch()

    const wcAdapter = new WalletConnectV1Adapter({
      //adapterSettings: { bridge: "https://bridge.walletconnect.org", },
      adapterSettings: { qrcodeModal: QRCodeModal, networkSwitchModal: networkUi },
      chainConfig: currentChainConfig,
      sessionTime: 86400,
    })

    const metamaskAdapter = new MetamaskAdapter({
      sessionTime: 3600, // 1 hour in seconds
      chainConfig: currentChainConfig,
    });

    //web3AuthInstance.configureAdapter(wcAdapter);
    //web3AuthInstance.configureAdapter(metamaskAdapter);
    web3AuthInstance.configureAdapter(openloginAdapter);

    await web3AuthInstance.init();

    setWeb3Auth(web3AuthInstance);

    const app = initializeApp({
      apiKey: process.env.FIREBASE_API_KEY,
      authDomain: process.env.FIREBASE_AUTH_DOMAIN,
      projectId: process.env.FIREBASE_PROJECT_ID,
      storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
      messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
      appId: process.env.FIREBASE_APP_ID,
      measurementId: process.env.FIREBASE_MEASUREMENT_ID,
    });


    setfirebaseApp(app);

  } catch (error) {
    console.log(error);
  } finally {
    setIsLoading(false);
  }

}

init();

}, [chain, setWalletProvider, setWalletProvider]);

const signInWithGoogle = async (): Promise => {
try {
const auth = getAuth(firebaseApp);
const googleProvider = new GoogleAuthProvider();
const res = await signInWithPopup(auth, googleProvider);
return res;

} catch (err) {
  console.error(err);
  throw err;
}

}

const signInWithFacebook = async (): Promise => {
try {

  const auth = getAuth(firebaseApp);
  const facebookProvider = new FacebookAuthProvider();
  const res = await signInWithPopup(auth, facebookProvider);
  return res;

} catch (err) {
  console.error(err);
  throw err;
}

}

const signInWithTwitter = async (): Promise => {
try {

  const auth = getAuth(firebaseApp);
  const twitterProvider = new TwitterAuthProvider();
  const res = await signInWithPopup(auth, twitterProvider);
  return res;

} catch (err) {
  console.error(err);
  throw err;
}

}

async function login(TypeLogin: LOGIN_PROVIDER_TYPE, email?: string, password?: string) {
try {
setIsLoading(true);
if (!web3Auth) {
console.log("web3auth not initialized yet");
return;
}

  let loginRes = undefined;

  switch (TypeLogin) {
    case "google":
      loginRes = await signInWithGoogle();
      break;
    case "facebook":
      loginRes = await signInWithFacebook();
      break;
    case "twitter":
      loginRes = await signInWithTwitter();
      break;
    default:
      console.log(`Sorry, incorrect type of login.`);
  }

  const idToken = await loginRes?.user.getIdToken(true); // this idToken will be passed to web3auth
       
  const localProvider = await web3Auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, {
    loginProvider: "jwt",
    extraLoginOptions: {
      id_token: idToken,
      verifierIdField: "sub", // same as your JWT Verifier ID
      domain: "http://localhost:3000",  //"https://YOUR-APPLICATION-DOMAIN" || 
      response_type: "token",
    }
  });

  setWalletProvider(localProvider!);

} catch (error) {
  console.log("error login with google");
  console.log("error", error);
} finally {
  setIsLoading(false);
}

}

const loginWithWalletConnect = async () => {
try {
setIsLoading(true);
if (!web3Auth) {
console.log("web3auth not initialized yet");
return;
}
const localProvider = await web3Auth.connectTo(WALLET_ADAPTERS.WALLET_CONNECT_V1, {});
setWalletProvider(localProvider!);
} catch (error) {
console.log("error", error);
} finally {
setIsLoading(false)
}
};

const loginWithMetamask = async () => {
try {
setIsLoading(true);
if (!web3Auth) {
console.log("web3auth not initialized yet");
return;
}
console.log("web3auth initialized");
const localProvider = await web3Auth.connectTo(WALLET_ADAPTERS.METAMASK, {});
setWalletProvider(localProvider!);
} catch (error) {
console.log("error", error);
} finally {
setIsLoading(false)
}
};

const logout = async () => {
if (!web3Auth) {
console.log("web3auth not initialized yet");
return;
}
await web3Auth.logout();
setProvider(null);
};

const getUserInfo = async () => {
if (!web3Auth) {
console.log("web3auth not initialized yet");
return;
}
const user = await web3Auth.getUserInfo();
console.log(user);
};

const getAccounts = async () => {
if (!provider) {
console.log("provider not initialized yet");
return;
}
provider.getAccounts();
};

const getBalance = async () => {
if (!provider) {
console.log("provider not initialized yet");
return;
}
provider.getBalance();
};

const signMessage = async () => {
if (!provider) {
console.log("provider not initialized yet");
return;
}
provider.signMessage();
};

//init();

const contextProvider = {
web3Auth,
provider,
user,
isLoading,
login,
loginWithWalletConnect,
loginWithMetamask,
logout,
getUserInfo,
getAccounts,
getBalance,
signMessage,
};

return (
<>

</>

)
}`