feat: #1255 Add Web3 Authentication for Crypto-Newbies

[nya-elimu]

PR for 🏆 0xHack Adoption Bounty on Gitcoin

Best crypto-newbie friendly app

Work plan 📆

We will introduce a crypto-newbie to the concept of Web3 by adding the option to sign-in via an Ethereum account to our existing Web2 webapp.

Chosen Persona 👩🏽

Sung, 23, South Korea
A philosophy student. She can't imagine a life without modern technology but has never tried anything related to crypto. She finally got convinced to try out your application by a fellow university student.

Video 🎥

Submission video: https://youtu.be/cpjhEMrjkas

MVP 📱

The MVP has been made available for testing at http://hin.elimu.ai/sign-on

Before the hackathon, we only had two authentication options; Google & GitHub.

During the hackathon, we added a third authentication option: "Web3".

Code 👩‍💻

This Git branch has already been merged a few times during the hackathon in order to deploy the changes to a TEST/PROD server so that anyone can change test a live version of the MVP. The code changes can be seen here:

• PR merge Initial commit #1: Feat #1255 add web3 authentication for crypto newbies #1300
• PR merge Update README.md #2: feat: #1255 Add Web3 Authentication for Crypto-Newbies #1301
• PR merge Branch sign on #3: merge pending (this PR)

The most interesting code can be seen in these files:

• https://github.com/elimu-ai/webapp/blob/master/src/main/webapp/WEB-INF/jsp/sign-on-web3.jsp
  • Front-end for Web3 sign-on.
• https://github.com/elimu-ai/webapp/blob/master/src/main/java/ai/elimu/web/SignOnControllerWeb3.java
  • Back-end for Web3 sign-on.
  • Signature-verification and cryptography-related code can be seen in the isSignatureValid method: https://github.com/elimu-ai/webapp/blob/master/src/main/java/ai/elimu/web/SignOnControllerWeb3.java#L107

Summarized

1. Innovation
   The innovative part of this solution, is that it's a very smooth transition into the world of cryptocurrencies for people who are new to Web3/Ethereum. It's an example of not using Ethereum for financial reasons, but rather as a way of identifying oneself for signing onto an existing Web2 website. It's a way to draw more people into the Web3 ecosystem, and it might trigger people's interest to learn more about Web3.

2. Added value
   One type of value added to the user with this method, is increased privacy. By using only an Ethereum address as the identifier of a person, we do not need to collect their e-mail address or name, which protects the user's privacy.
   The only thing other people on the website will see, is the user's Ethereum address:
   

3. Technical
   The code works (see live MVP at http://hin.elimu.ai/sign-on). During the hackathon, we focused mainly on MetaMask, and in the future we will add support for other Web3 browsers as well. For code developed during the hackathon, see the "Code" section above.

We think presenting Web3 as a user authentication option side-by-side with existing centralized identity providers (like Google), is a user-friendly way to introduce crypto-newbies to Web3 technologies. Signing onto website via 3rd-party identity providers has been a common practice on Web2 websites for over a decade now, so this user-flow is already well known by most people on the Internet.

[jo-elimu]

Suggested change

	some of the core features of Web3! Take a look at this short video to learn more.
	some of the core features of Web3! Take a look at this short video to learn more: