DEV Community

Cover image for Build a Web3 Dapp in React & Login with MetaMask

Build a Web3 Dapp in React & Login with MetaMask

Jacob E. Dawson on July 14, 2021

Today we're going to build a simple React / Web3 Dapp that replicates a small portion of the Uniswap v2 interface - specifically, we are building t...
Collapse
 
ropstens profile image
Metro station

I understand that no one ever checks the correctness of writing in training articles, but still I am one of those who study and find some mistakes.

yarn install
Enter fullscreen mode Exit fullscreen mode
yarn add
Enter fullscreen mode Exit fullscreen mode

@framer-motion
Enter fullscreen mode Exit fullscreen mode
framer-motion
Enter fullscreen mode Exit fullscreen mode
Collapse
 
magicthomas profile image
magic-thomas

agree totally . the writer did not review his article.

Collapse
 
jacobedawson profile image
Jacob E. Dawson

Thanks magic thomas, you're wrong though - I did review it multiple times, but sorry that a few mistakes slipped through the cracks :)

Collapse
 
jacobedawson profile image
Jacob E. Dawson

Thanks for pointing those out, must have missed those when typing out the tutorial, the repo includes the correct packages.

Collapse
 
ediskandarov profile image
Eduard Iskandarov

This article covers only the first step in auth pipeline.

In case of simple wallet activation - there's nothing we can use to authenticate on the backend.

Ethereum address can be spoofed.

What should be done is an additional signature check.

Collapse
 
thewritingdev profile image
Akash Joshi

I only wanted to check frontend-only login for Metamask and this is a good start. You can create the following resources for backend auth :D

Collapse
 
alex_pascual_e501c179df9d profile image
Alex Pascual

amazing stuff Akash, thank you! just curious, what are some of the resources we would need to incorporate some sort of backend auth?

also, is there any way to make a screen/window/button visible when a user has successfully connected to metamask?

thanks again for everything - i really appreciate it.

Thread Thread
 
thewritingdev profile image
Akash Joshi

what are some of the resources we would need to incorporate some sort of backend auth?

Could look here: dev.to/dabit3/the-complete-guide-t... or here: m1guelpf.blog/VBlaOTPAxQNFHjl5n-C3...

also, is there any way to make a screen/window/button visible when a user has successfully connected to metamask?

Look at Conditinal Rendering in React.

Cheers!

Collapse
 
mrinalasth profile image
Mrinal Asthana • Edited

Great tutorial, was fun to follow! Currently, one can connect to metamask and read/access eth amount in the wallet. Have you seen an example of how I could leverage this code with another package/application to also access assets on other chains such as Polygon(MATIC) and NFTs on other chains as well?

Collapse
 
jacobedawson profile image
Jacob E. Dawson

Hi Mrinal, thanks :)

Yes you could alter / add some variables like the chainId and RPC in order to interact with other EVM-compatible chains - here's another repo & accompanying tutorial that uses the same pattern to connect with the Moonriver network:

github.com/jacobedawson/moonriver-...
medium.com/truefieng/using-usedapp...

Collapse
 
dolz profile image
Ramiro Dutto Luquez

I'm starting with Dapp programming. One thing that I do not understand is when you talk about backend side authentication.

It is assumed that in a Dapp we have the business logic in the smart contract and on the other hand we have the frontend that performs the communication directly with the smart contract. Is it like this? or do we also have to develop a backend server?

Collapse
 
jacobedawson profile image
Jacob E. Dawson

Hi Ramiro - you're exactly right - you can think of a smart contract as replacing a traditional backend server, so the smart contract includes the state & functions as opposed to, say, a NodeJS + MongoDB backend.

Having said that, it's also possible (and even necessary, depending on complexity) to employ state that is retrieved from "off-chain" sources, such as TheGraph subgraphs, since for some types of data & complex queries it's not feasible to store & read everything from a smart contract.

Collapse
 
thanhdeveloper profile image
Nguyen Tam Thanh

How to connect with BSC network ?

Collapse
 
zilenzer profile image
Pe Ter • Edited

Can i use javascript?

Collapse
 
jacobedawson profile image
Jacob E. Dawson

yes you don't have to use TypeScript (although I recommend you just get used to using TypeScript, since it's industry-standard)