metamask-login-react v1.0.1

MetaMask Login React

The React Component for Login and Sign Up with MetaMask.

This is an unnoficial implementation using web3 library

Getting Started

You can start using this project by installing it with npm with the following command:

npm i metamask-login-react

Of course, you need to have a React project already set up.

How it works

This project is based on this medium post by Amaury Martiny.

But, this works in this way. The Sign Up button will give you the public address of the user (hopefully more info in the future) so you can store it on your database or handle it in some way, is required that you have a field for a nonce (you can check more about this in the medium post). The Login button will ask you the nonce of the user and it will open MetaMask and ask the user if to sign it, once it is signed it will return the signed nonce to you.

How to use

Sign Up Button

The Sign Up button requires you to pass as props the following:

About how you should use this button is pretty simple, create function that receives a string (publicAddress) and inside this function you should handle the public address. Here is an example:

import {SignUpButton} from "metamask-login-react"
import { useState } from 'react';

function App() {
  let [publicAddress, setPublicAddress] = useState("")

  return (
    <div className="App">
        <p>Public Address: {publicAddress}</p>
        <SignUpButton setPublicAddress={setPublicAddress} language="eng" isDarkTheme={true}/>
    </div>
  );
}
export default App;

If you need a customized style for the sign up button, you can do it by:

<SignUpButton setPublicAddress={setPublicAddress} language="eng" isDarkTheme={true}>
    <p>Click Me</p>
</SignUpButton>

This will remove the standard style and replace it by what you put in the children of the Sign Up Button. 0 As a reminder, if MetaMask is not installed in the browser, the button will throw an error. So, remember to handle it properly. Also if a required props is not set it will throw an error too.

Login Button

The Login button requires you to pass as props the following:

The flow of this button is pretty simple, first it will trigger MetaMask to open, the getNonce function will pass the nonce to Metamask, after that it will ask the user if he wants to sign the nonce, finally if the user sign the nonce, this nonce will be pass as parameter to the setSigned function so you can handle it. Here is an example:

import {LoginButton} from "metamask-login-react"
import { useState } from 'react';

function App() {
  let [signed, setSigned] = useState("")

  // This function could be a request to the server or something else
  let getNonce = ()=> "7561575343"

  return (
    <div className="App">
        <p>Nonce: {getNonce()}</p>
        <p>Signed Nonce: {signed}</p>
        <LoginButton setSigned={setSigned} getNonce={getNonce} language="eng" isDarkTheme={true}/>
    </div>
  );
}

export default App;

Of course as the sign up button, if you want a customized example you can do it like this:

<LoginButton setSigned={setSigned} getNonce={getNonce} language="eng" isDarkTheme={true}>
    <p>Click Me</p>
</LoginButton>;

Error Table

Here is the list of errors that the button can throw and log.

Supported Languages

If you're using the default styles of the buttons, here are the supported languages and the code to use it. If you want to contribute, you can add the transalations to this file src/assets/json/languages.json