MetaMask Authentication

mkzi301 commented 1 month ago

Parents: #4

MetaMask authentication into https://exosystems.net, providing our team members with a seamless login experience using their MetaMask wallet. Additionally, we will integrate Decentralized Identifiers (DIDs) based on the W3C DID Core specification to enhance our members' identity management and security.

1. Install MetaMask: (refer to the following draft issue)

Ensure that the MetaMask browser plugin is installed in the user's browser or that the MetaMask app is installed on the local device.
Provide 5 platform guides to install MetaMask technology if needed.

2. Initialize Web3: The web3 module, or web3.js, is a JavaScript library for interacting with the Ethereum blockchain, enabling the development of decentralized applications (dApps). It offers functionalities for blockchain interaction (connecting to nodes, querying data), smart contract interaction (deploying and calling contracts), account management (creating accounts, signing transactions), transaction handling (sending Ether, estimating gas), and utility functions (unit conversion, cryptographic hashing).

Key components include:

web3.eth: Interacts with the blockchain, manages accounts, sends transactions.
web3.utils: Provides utility functions for data conversion and cryptography.
web3.bzz: Swarm protocol for decentralized file storage.

npm install web3

The following code is offered as an example of how this technology can be integrated and used. It will be removed once implemented.

Initialize a Web3 instance and connect it to MetaMask.

import Web3 from 'web3';

if (window.ethereum) {
  window.web3 = new Web3(window.ethereum);
  try {
    await window.ethereum.enable();
  } catch (error) {
    console.error("User denied account access");
  }
} else if (window.web3) {
  window.web3 = new Web3(window.web3.currentProvider);
} else {
  console.log('Non-Ethereum browser detected. You should consider trying MetaMask!');
}

3. Authenticate User:

Prompt the user to connect their MetaMask wallet.
Retrieve the user's account address.

const getAccount = async () => {
  const accounts = await window.web3.eth.getAccounts();
  const account = accounts[0];
  return account;
};

4.Integrate DID Support:

Follow the W3C DID Core specification to create and manage DIDs.
Use libraries like did-jwt and did-resolver to handle DID authentication.

npm install did-jwt did-resolver

import { Resolver } from 'did-resolver';
import { getResolver } from 'ethr-did-resolver';

const providerConfig = {
  rpcUrl: 'https://mainnet.infura.io/v3/YOUR_INFURA_PROJECT_ID',
};

const resolver = new Resolver(getResolver(providerConfig));

5.Generate and Verify DID:

Generate a DID for the authenticated user.
Use the DID to verify the user's identity in your application.

import { createVerifiableCredentialJwt, verifyCredential } from 'did-jwt-vc';

const createDID = (account) => {
  // Create and return DID for the account
};

const verifyDID = async (did) => {
  const verified = await resolver.resolve(did);
  return verified;
};

6.Update Backend and Frontend:

Ensure your backend supports and stores DIDs for authenticated users.
Modify your authentication flow to use MetaMask and DID verification.
Add UI elements to handle MetaMask connection and DID generation.
Display user's DID and related information upon successful authentication.

exonomyapp commented 1 month ago

Please create the appropriate draft issues to handle all the tasks you can find in my description above. Modify my description so that all of the draft issues you've created are linked in my description where their respective task is described. The draft issue will be reviewed and if it passes review it will be matured into a repo issue and it will be assigned to developers.

exonomyapp commented 1 month ago

MetaMask now complies with the newest standard for developers to write code for managing multiple wallets within their app. ExonomyApp will also support multiple wallets so we will support this new EIP-6963 standard