Skip to main content
Tutorial
Intermediate

Creating Metatransactions with Web3Auth and Starton

WHAT IS WEB3AUTH?

Web3auth is an open-source authentication library for web3 applications. It allows users to authenticate with wallets using a social login flow. Similarly, Web3auth offers a solution of wallet address from social login, allowing users to discover Web3 while using a login system they are most likely used to.

This tutorial will cover how to create meta transactions with Starton and Web3auth. Meta transactions are a useful way to onboard users to the Web3 ecosystem by allowing them to use their familiar social login system, and execute transactions without having to pay gas fees or have Ether in their wallets.

By using two routes on Starton, you can create meta transactions. This use case is handy when you want to onboard users to web3.

PREREQUISITES

You will need :

  • A smart contract that implements ERC20 interface. Starton Smart contract templates support Metatransactions. To deploy an ERC20 with Starton, go to How to create your own crypto currency.
  • A Starton API key

Installing the project

The project has been set up using a client-side and a server-side so that your API key is not exposed on client. You can also use the server-side to connect a database for metrics.

Creating Starton Project

  1. Clone the project from Starton Metatransactions GitHub.

Setting up the server side

Here we would like to enter the data needed to request funds and set up your metatransactions as well as entering your API, so that you can authenticate safely to the API.

  1. In server, add your Starton API key in .env.
  2. In src > config > startonconfig.ts, set the following parameters:
    • the route to interact with your smart contract call URL (ex: /smart-contract/avalanche-fuji/0xcEB17Bf0E3d198ec985370f456332f10f373CdB3/call)
    • the speed of your transaction (ex: low, average, fast, fastest)
    • the signer wallet
    • the amount of requested funds

Let’s continue with our config files in client.

Setting up our client side

On the client side, we will set up all the information of your smart contract to connect your project to Web3Auth.

  1. Install the client side.

  2. In client, add the port where your server is running in .env.

  3. In src > config >smart-contract go to smartContract.config.ts and set the following parameters:

    • the version of your smart contract
    • the name of your smart contract
    • the chainId of the network on which you deployed your contract
    • the address of your smart contract

    USING FUNCTIONS TO RETRIEVE YOUR SMART CONTRACT INFORMATION

    You can retrieve all of this information using the Interact tab of your smart contract. Learn more

  4. In src>config > smart-contractABI.config.ts, enter the ABI of your contract.

  5. In starton, go to starton.config.ts, enter the value of the meta transaction.

  6. In src > services> ethersRPC.ts, enter the wallet from which to transfer.

  7. In src > hooks> useWeb3AuthInit.ts:

    1. In chainId, replace the value in Number(43113) with the chainId of your network.
    2. In rpcTarget, enter the address of your node, such as 'https://api.avax-test.network/ext/bc/C/rpc'.

    info

    You can find public nodes on https://chainlist.org/

Now that we’re all set, let’s run our project.

Running the project

To run your project, you will need to run commands both on server and client side.

  1. In server, run the command npm run build

  2. Then, run npm run start

  3. In client, run the command npm run build

  4. Then, run npm run start

    Visit http://localhost:3000 to test your project.

Now that you have used our project, visit this guide to learn more about the project How did we build a Meta-Transaction Site with Web3Auth and Starton.

Loubna Benzaama

Lead technical writer


Created:

April 3, 2024

Reading time:

4 min


Content
  • Installing the project
  • Running the project