[SOLVED] Moralis Firebase Wagmi in one project

#1

Hi,

On this page you showed how to wrap an app with Wagmi and authenticate through Metamask.

On this page you showed how to authenticate firebase through moralis extension again through Metamask by calling signInWithMoralis from ‘@moralisweb3/client-firebase-evm-auth’

Do you guys have a demo project where you use both moralis firebase extension and Wagmi? I’d like users to authenticate through Metamask only once, then he/she will be able to interact with both firebase and smart contract onwards.

Thank you,

#2

Hi @junkseeker

signInWithMoralis function accepts web3 provider in its second params object. You can get the provider from wagmi and pass it to this function as a param value. In that was you can use it with wagmi as well.

await signInWithMoralis(moralisAuth, {
  provider: web3provider    //here
});

Could you try this?

#3

Sorry, I’m not too sure how to get the provider from wagmi. I am reading about the library for the first time from your documentation. Some demo code is appreciated as I can imagine this is a common feature a lot of moralis users are going to use in their project. Thank you,

#4

This example is from the authentication with metamask wagmi docs for getting wagmi provider

import { configureChains, defaultChains } from 'wagmi';
import { publicProvider } from 'wagmi/providers/public';

const { provider } = configureChains(defaultChains, [publicProvider()]);

I don’t have the complete code for using with firebase extension now. I can try and share after some time.

#5

Thanks. That was in fact my first attempt, too. But typescript gave the following error message.

“Type ‘({ chainId }: { chainId?: number | undefined; }) => (FallbackProvider | ProviderWithFallbackConfig) & { …; }’ is not assignable to type ‘JsonRpcProvider | Web3Provider | undefined’.ts(2322)”

I didn’t figure out how to fix it.

If you’ve got a working solution, please share it around. Appreciate it!

#6

I tried using the wagmi public provider with firebase extension. Currently it sends a message request to firebase backend but it still throws an error saying FirebaseError: Address is required

This is how the code looks so far.

import { configureChains } from "wagmi";
import { Web3Provider } from "@ethersproject/providers";
import { chain } from "wagmi";
import { publicProvider } from "wagmi/providers/public";

//... 

const { provider } = configureChains(
      [chain.mainnet, chain.polygon],
      [publicProvider()],
    )

// provider with firebase auth function
await signInWithMoralis(moralisAuth, {
      provider: new Web3Provider(provider),
    });
#8

Hi @junkseeker, Here is the updated working version.
Instead of using a public provider I used useWebSocketProvider, which seems to provide the correct web3 provider object.

// signin.tsx file
import { initializeApp } from "@firebase/app";
import { getMoralisAuth } from "@moralisweb3/client-firebase-auth";
import { signInWithMoralis } from "@moralisweb3/client-firebase-evm-auth";
import { useWebSocketProvider } from "wagmi";

const app = initializeApp(firebaseConfig);

function SignIn() {
  const webSocketProvider = useWebSocketProvider({
    chainId: 1,
  });
  const handleAuth = async () => {
    const moralisAuth = getMoralisAuth(app);
    await signInWithMoralis(moralisAuth, {
      provider: webSocketProvider,
    });
  };

  return (
    <div>
      <h3>Web3 Authentication</h3>
      <button onClick={handleAuth}>Authenticate via Metamask</button>
    </div>
  );
}

export default SignIn;

I hope this helps.

2 Likes
#9