Firebase Custom Auth example redirecting back to the "Login" button view.

[obversepebble]

Hi, I am trying to run "firebase-react-core-example" from "custom-authentication" in examples. I changed the following to match my setup:

1. "firebaseConfig"
2. "clientId"
3. "verifier"
4. "rpcTarget" to point to my Ganache setup

I can log in with Google, and I see that both Firebase and web3auth is creating a user, but my app is showing the login button. Basically the following portion of the code:

await web3auth.init();
console.log("web3auth.provider:", web3auth.provider);
if (web3auth.provider) {
  setProvider(web3auth.provider);
}

is logging that web3auth.provider is null.

What might I be doing wrong? Help is greatly appreciated!

Here is my App.tsx:

import { useEffect, useState } from "react";
import { Web3AuthCore } from "@web3auth/core";
import {
  WALLET_ADAPTERS,
  CHAIN_NAMESPACES,
  SafeEventEmitterProvider,
} from "@web3auth/base";
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
import "./App.css";
// import RPC from "./evm.web3";
import RPC from "./evm.ethers";
import { initializeApp } from "firebase/app";
import {
  GoogleAuthProvider,
  getAuth,
  signInWithPopup,
  UserCredential,
} from "firebase/auth";

const clientId =
  "..."; // get from https://dashboard.web3auth.io

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "...",
  authDomain: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "...",
  appId: "...",
  measurementId: "..."
};

function App() {
  const [web3auth, setWeb3auth] = useState<Web3AuthCore | null>(null);
  const [provider, setProvider] = useState<SafeEventEmitterProvider | null>(
    null
  );

  useEffect(() => {
    const init = async () => {
      try {
        // const app = initializeApp(firebaseConfig);
        // const auth = getAuth(app);

        const web3auth = new Web3AuthCore({
          clientId,
          chainConfig: {
            chainNamespace: CHAIN_NAMESPACES.EIP155,
            chainId: "0x1",
            rpcTarget: "http://127.0.0.1:7545",
            blockExplorer: "https://etherscan.io/",
            ticker: "ETH",
            tickerName: "Ethereum",
          },
        });

        const openloginAdapter = new OpenloginAdapter({
          adapterSettings: {
            network: "testnet", // Changed
            uxMode: "redirect",
            loginConfig: {
              jwt: {
                name: "Custom Firebase Auth - Google Login",
                verifier: "...",
                typeOfLogin: "jwt",
                clientId,
              },
            },
          },
          loginSettings: {
            mfaLevel: "none",
          },
        });
        web3auth.configureAdapter(openloginAdapter);
        setWeb3auth(web3auth);
        console.log("web3auth:", web3auth);

        await web3auth.init();
        console.log("web3auth.provider:", web3auth.provider);
        if (web3auth.provider) {
          setProvider(web3auth.provider);
        }
      } catch (error) {
        console.error(error);
      }
    };

    init();
  }, []);

  const signInWithGoogle = async (): Promise<UserCredential> => {
    try {
      const app = initializeApp(firebaseConfig);
      const auth = getAuth(app);
      const googleProvider = new GoogleAuthProvider();
      const res = await signInWithPopup(auth, googleProvider);
      console.log("signIn");
      console.log(res);
      return res;
    } catch (err) {
      console.error(err);
      throw err;
    }
  };

  const login = async () => {
    if (!web3auth) {
      uiConsole("web3auth not initialized yet");
      return;
    }
    const loginRes = await signInWithGoogle();
    console.log("login details", loginRes);
    const idToken = await loginRes.user.getIdToken(true);
    console.log("idToken", idToken);

    const web3authProvider = await web3auth.connectTo(
      WALLET_ADAPTERS.OPENLOGIN,
      {
        loginProvider: "jwt",
        extraLoginOptions: {
          id_token: idToken,
          verifierIdField: "sub",
          response_type: "token",
          domain: "http://localhost:3000",
        },
      }
    );
    setProvider(web3authProvider);
    uiConsole('Logged in Successfully!');
  };

  const authenticateUser = async () => {
		if (!web3auth) {
			uiConsole('web3auth not initialized yet');
			return;
		}
		const idToken = await web3auth.authenticateUser();
		uiConsole(idToken);
	};

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

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

  const getAccounts = async () => {
    if (!provider) {
      uiConsole("provider not initialized yet");
      return;
    }
    const rpc = new RPC(provider);
    const userAccount = await rpc.getAccounts();
    uiConsole(userAccount);
  };

  const getBalance = async () => {
    if (!provider) {
      uiConsole("provider not initialized yet");
      return;
    }
    const rpc = new RPC(provider);
    const balance = await rpc.getBalance();
    uiConsole(balance);
  };

  const signMessage = async () => {
    if (!provider) {
      uiConsole("provider not initialized yet");
      return;
    }
    const rpc = new RPC(provider);
    const result = await rpc.signMessage();
    uiConsole(result);
  };

  const sendTransaction = async () => {
    if (!provider) {
      uiConsole("provider not initialized yet");
      return;
    }
    const rpc = new RPC(provider);
    const result = await rpc.signAndSendTransaction();
    uiConsole(result);
  };

  function uiConsole(...args: any[]): void {
    const el = document.querySelector("#console>p");
    if (el) {
      el.innerHTML = JSON.stringify(args || {}, null, 2);
    }
  }

  const loginView = (
    <>
      <div className="flex-container">
        <div>
          <button onClick={getUserInfo} className="card">
            Get User Info
          </button>
        </div>
        <div>
					<button onClick={authenticateUser} className='card'>
						Get ID Token
					</button>
				</div>
        <div>
          <button onClick={getAccounts} className="card">
            Get Accounts
          </button>
        </div>
        <div>
          <button onClick={getBalance} className="card">
            Get Balance
          </button>
        </div>
        <div>
          <button onClick={signMessage} className="card">
            Sign Message
          </button>
        </div>
        <div>
          <button onClick={sendTransaction} className="card">
            Send Transaction
          </button>
        </div>
        <div>
          <button onClick={logout} className="card">
            Log Out
          </button>
        </div>
      </div>

      <div id="console" style={{ whiteSpace: "pre-line" }}>
        <p style={{ whiteSpace: "pre-line" }}></p>
      </div>
    </>
  );

  const logoutView = (
    <button onClick={login} className="card">
      Login
    </button>
  );

  return (
    <div className="container">
      <h1 className="title">
        <a target="_blank" href="http://web3auth.io/" rel="noreferrer">
          Web3Auth
        </a>{" "}
        & Firebase React Example for Google Login
      </h1>

      <div className="grid">{provider ? loginView : logoutView}</div>

      <footer className="footer">
        <a
          href="https://github.com/Web3Auth/examples/tree/main/web-core-sdk/custom-authentication/firebase-react-core-example"
          target="_blank"
          rel="noopener noreferrer"
        >
          Source code
        </a>
      </footer>
    </div>
  );
}

export default App;

[shahbaz17]

Hey @obversepebble
Is this reproducible with a live rpcTarget? like rpcTarget: "https://rpc.ankr.com/eth"

Or have you tried http://localhost:7545 instead of http://127.0.0.1:7545

[obversepebble]

Thanks so much for your response. Using "https://rpc.ankr.com/eth" doesn't cause the same error. Both localhost and 127.0.01 cause the issue. "https://rpc.ankr.com/eth_goerli" isn't working either. While this works, is there a way I can configure this so I'm not spending real gas? I have Ganache running locally BTW. Thanks so much in advance!

[obversepebble]

I followed the Testnet instructions from here. So I'm using the following:

        const web3auth = new Web3AuthCore({
          clientId,
          chainConfig: {
            chainNamespace: CHAIN_NAMESPACES.EIP155,
            chainId: "Ox5",
            rpcTarget: "https://rpc.ankr.com/eth_goerli",
            displayName: "Goerli Testnet",
            blockExplorer: "https://goerli.etherscan.io",
            ticker: "ETH",
            tickerName: "Ethereum",
          },
        });

It still doesn't work. After choosing a Google account to log in with, I'm returned to the Login page and I find in console that web3auth.provider is showing null.

Thoughts? Help is much appreciated.