[SOLVED] How to sign a transaction after logging it with Web3Auth?

Moralis General
#1

Hello,
I integrated web3auth and I can sign in using web2 socials and I get a working address that accepts matic. But how can I withdraw the balance?

In other words, how can users who created their accounts using web3auth sign transactions to interact with my dapp? Or maybe there is a way to make the signing automatic?

Here is the transfer function that I implemented, but it works only if metamask is installed, and it references the address in the metamask, not the address provided by web3auth.

    const options = {
      type: "native",
      amount: Moralis.Units.ETH("0.01"),
      receiver: `${receiverAddress}`,
    };

    let result = await Moralis.transfer(options);

Thank you.

#2

If you authenticate using web3Auth as the provider using Moralis.authenticate, this will get the transfer done using the authenticated account ( with web3Auth ) with no extra setup.

#3

Ok. This is how I currently authenticate. How should I change it?

const handleLogin = async () => {
    const clientId = `${clientId}`
    try {
      await authenticate({
        provider: "web3Auth",
        clientId,
        loginMethodsOrder: [
          "google",
          "twitter",
          "facebook",
          "reddit",
          "discord",
          "twitch",
          "github",
          "linkedin",
          "weibo",
          "wechat",
          "email_passwordless",
        ],
        appLogo: logo,
        theme: "light",
      });
    } catch (err) {
      console.log(err);
    }
  };
#4

And I’m still not getting how are my users going to sign the transaction if they don’t have metamask? What is going to pop up on their screen?

#5

it may not pop up anything, the transfer may work like that without any pop up

#6

I tried again with react and plain js.

This code just didn’t work. No errors, no action.

const { fetch, error, isFetching } = useWeb3Transfer({
    type: "native",
    amount: Moralis.Units.ETH(0.01),
    receiver: "0xbe36D926f37F2e59e81793808F09836B9463b7D3",
  });

And this code works only if the metamask is installed, and it prompts to sign the message via metamask even though metamask is for a different account. If I delete metamask it also stops working.

  const options = {
      type: "native",
      amount: Moralis.Units.ETH("0.01"),
      receiver: "0xbe36D926f37F2e59e81793808F09836B9463b7D3",
    };
    let result = await Moralis.transfer(options);

I also noticed that when it asks to sign the transaction in metamask it prompts to switch to the mainnet.
This could be the reason why it’s not working, because I’m on testnet atm. But I’ve read in web3auth documentation that they support polygon testnet transactions as well.

In both cases, the logged user is shown correctly and I can get the balance using the getNativeBalance() function. But the transfer doesn’t work.

I think I will try to implement it using the native web3auth plugin and ethersjs. But if you can suggest how to do it with Moralis, I’ll be happy to know.

#7

The action is done in the background as cryptokid said, “no popup”. You can log result to know if the transaction went through. You should also wrap your code in try...catch block to check for any possible error

2 Likes
#8 
const { fetch, error, isFetching } = useWeb3Transfer({
    type: "native",
    amount: Moralis.Units.ETH(0.01),
    receiver: "0xbe36D926f37F2e59e81793808F09836B9463b7D3",
  });

  async function handleWithdraw() {
    if (withdrawAmount > maticBalance || withdrawAmount < 0) return;
      try {
        const result = await fetch();
        console.log(user.attributes.ethAddress)
        console.log(result);
      } catch (err) {
        console.log(err)
      }
  }

image

The result of fetch is undefined. I don’t think it’s my mistake because I took the code from the documentation. Nevermind I’ll try doing it with ethersjs. Thank you.

#9

Hoped you’re connected to the proper network which the chain id should be set in the authenticate function options

#10

I added the chainId: 0x13881 but it didn’t help. Now it just doesn’t ask to switch to the mainnet, but the behavior is the same - react code doesn’t work, and the plain js code sends the transaction to itself via metamask.

#11

I just noticed that it works when I run it inside useEffect on load, but when I set it to onClick it gives undefined. Not sure why.

#12

Now it just doesn’t ask to switch to the mainnet

Are you still trying to use Web3Auth? It’s not going to try and use Ethereum mainnet if you’ve specified a chain in your authenticate options (unless you’ve connected an external wallet).

So it’s working now? Any Moralis.transfer or executeFunction code that works for a regular Moralis.authenticate() will work the same way when using Web3Auth.

2 Likes
#13

You can find a code example here with the demo.

2 Likes
#14

I followed your code and it worked. Thank you, I was getting desperate.

#15

Yes, it’s working now. I referenced the code provided. Thank you.