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 original branch.

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.

docker-compose up -d

This will leave a the bakcend listening on localhost:8000 and the frontend on localhost:3000.

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 localhost:3000.

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 localhost:3000.

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 yarn lint.

If you liked this demo, I appreciate small donations. My Ethereum address is 0xa395447BF15f7525484C0378c76627D45ADE0B96.

This demo is published as part of the corresponding blog article at https://www.toptal.com/ethereum/one-click-login-flows-a-metamask-tutorial.