2

I'm building a DApp with reactJS for the frontend and solidity for the backend. I want to build a solid authentication/authorization system possibly using some libraries but i can't find anything that could help. Do i have to create my own authentication/authorization system or there are existing libraries for ReactJS and Metamask to do it?

If you have any suggestion it would be very helpful

2
  • Did you checked web3auth? Jun 30, 2023 at 13:55
  • i never tried it
    – Shadq
    Jun 30, 2023 at 17:24

1 Answer 1

1

You can use web3 Auth API from Moralis to verify the users wallet address at backend. This helps to secure the backend while using any wallets or wallet connectors to connect on frontend.

Auth API provides two different API endpoint. This is how you can use it:

  1. 1st request a message from Auth API with required parmas values. Auth API follows Ethereum EIP-4361 standard for verification so it requires a set of parameters shown in the below code.
// Backend code
import Moralis from 'moralis';
try {
  await Moralis.start({
    apiKey: "Moralis_api_key"
  });
  
  const response = await Moralis.Auth.requestMessage({
    "domain": "website.com",
    "address": "0x...",
    "statement": "Please confirm to authenticate",
    "uri": "https://website.com/",
    "expirationTime": "2020-01-01T00:00:00.000Z",
    "notBefore": "2020-01-01T00:00:00.000Z",
    "timeout": 15,
    "chain": "0x1",
    "networkType": "evm"
  });
  console.log(response.raw);
} catch (e) {
  console.error(e);
}
  1. Once we have the message from the backend we pass it to frontend code to get a signature from wallet. If you are using a wallet connector like wagmi this is how the code looks
// frontend code
const { signMessageAsync } = useSignMessage();
const signature = await signMessageAsync({ message }); // message value is the response of request Message API endpoint

  1. Once the signature is received from the wallet we send it to the backend for verification using the Auth API verification endpoint.
// backend code
import Moralis from 'moralis';
try {
  await Moralis.start({
    apiKey: "Moralis_api_key"
  });
  
  const response = await Moralis.Auth.verify({
    message, // message from step 1
    signature // signature received from step 2
  });
  console.log(response.raw);
} catch (e) {
  console.error(e);
}

Once the user is successfully verified with verify API endpoint you will receive a unique Id of the user which you can save it on a database or use it an HTTP cookie to identify the user.

With these steps, you can easily verify your web3 wallet user on the backend. You can find a more detailed info on this Auth API docs

ps: I work at moralis

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.