Login with MetaMask
This demo is published as part of the corresponding blog article: "One-Click Login with Blockchain: a MetaMask Tutorial".
❗Important note. The article was written in March 2018, and in between, MetaMask introduced a breaking change. The codebase has since then been updated to support the breaking change. As such, the snippets in the article might not be exactly the same as the updated code today. The login flow however is still exactly the same. If you want to see the original code, please visit the
The working app can be seen here: http://amaurymartiny.com/login-with-metamask-demo/.
The backend is hosted on Now by Zeit: https://login-with-metamask.now.sh/api/users
I use lerna to manage a monorepo of packages here. There are 2 packages: a
backend which is a REST API written in Express, and a
frontend which is a React single-page application. It's really a demo, so I tried to use as few libraries as possible, and the most popular ones when possible.
The simplest way to get started is to launch the demo using Docker Compose. Alternatively you could launch docker the containers manually, or run the node services using yarn.
Launch the demo using Docker Compose:
docker-compose up -d
This will leave a the bakcend listening on
localhost:8000 and the frontend on
Launching the demo using Docker:
Build and launch the backend:
cd backend docker build -t login-backend . docker run -d -p 8000:8000 login-backend
Build and launch the frontend:
cd frontend docker build -t login-front . docker run -d -p 3000:3000 login-frontend
You can then access the app on
Start the demo using Yarn:
From the root folder of this repo, run
yarn install # Install the dependencies yarn start # Will launch the frontend and the backend at the same time
The backend should be running on
localhost:8000, and the frontend on
Alternatively, you can start the frontend and the backend separately:
# Start the backend cd packages/backend yarn start # Start the frontend cd packages/frontend yarn start
Since this project is a demo, I haven't written any tests for it. Only code linting is performed, via prettier, which you can run using
If you liked this demo, I appreciate small donations. My Ethereum address is
This demo is published as part of the corresponding blog article at https://www.toptal.com/ethereum/one-click-login-flows-a-metamask-tutorial.