Building Web3 Decentralized Applications (dApps)

danger

TODO: Do something more interesting with on-chain. Also, not tested; assume nothing works

Introduction

In this tutorial, we will guide you through building a decentralized application (dApp) that utilizes Veramo for identity management. We will cover the basics of dApp development and how to integrate Veramo into your project.

Steps

Prerequisites

Before you begin, follow the prerequisites for installation and configuration instructions.

1. Set Up a New dApp Project

Initialize a new dApp project using a framework like React:

npx create-react-app my-dapp
cd my-dapp

Install Veramo and necessary plugins:

npm install @veramo/core @veramo/credential-w3c @veramo/data-store @veramo/did-jwt @veramo/key-manager @veramo/did-comm

2. Configure Veramo Agent

Create a veramo-agent.js file to configure the Veramo agent:

import { createAgent } from "@veramo/core";
import { KeyManager } from "@veramo/key-manager";
import { DIDManager } from "@veramo/did-manager";
import { DIDResolverPlugin } from "@veramo/did-resolver";
import { CredentialIssuer } from "@veramo/credential-w3c";
import { DataStore, DataStoreORM } from "@veramo/data-store";
import { DIDComm } from "@veramo/did-comm";

export const agent = createAgent({
  plugins: [
    new KeyManager(),
    new DIDManager(),
    new DIDResolverPlugin(),
    new CredentialIssuer(),
    new DataStore(),
    new DataStoreORM(),
    new DIDComm(),
  ],
});

3. Create and Manage DIDs in Your dApp

Add functionality to create and manage DIDs in your React components:

import React, { useState } from "react";
import { agent } from "./veramo-agent";

function App() {
  const [did, setDid] = useState(null);

  const createDid = async () => {
    const newDid = await agent.didManagerCreate({ alias: "my-did" });
    setDid(newDid);
  };

  return (
    <div>
      <h1>My dApp</h1>
      <button onClick={createDid}>Create DID</button>
      {did && <p>Your DID: {did.did}</p>}
    </div>
  );
}

export default App;

4. Issue and Verify Credentials

Add functionality to issue and verify credentials:

function App() {
  const [did, setDid] = useState(null);
  const [credential, setCredential] = useState(null);
  const [verificationResult, setVerificationResult] = useState(null);

  const createDid = async () => {
    const newDid = await agent.didManagerCreate({ alias: "my-did" });
    setDid(newDid);
  };

  const issueCredential = async () => {
    const newCredential = await agent.createVerifiableCredential({
      credential: {
        issuer: { id: did.did },
        credentialSubject: { id: did.did, name: "Alice" },
        type: ["VerifiableCredential"],
        "@context": ["https://www.w3.org/2018/credentials/v1"],
      },
      proofFormat: "jwt",
    });
    setCredential(newCredential);
  };

  const verifyCredential = async () => {
    const result = await agent.verifyCredential({ credential });
    setVerificationResult(result);
  };

  return (
    <div>
      <h1>My dApp</h1>
      <button onClick={createDid}>Create DID</button>
      {did && <p>Your DID: {did.did}</p>}
      <button onClick={issueCredential}>Issue Credential</button>
      {credential && <p>Credential: {JSON.stringify(credential)}</p>}
      <button onClick={verifyCredential}>Verify Credential</button>
      {verificationResult && (
        <p>Verification Result: {JSON.stringify(verificationResult)}</p>
      )}
    </div>
  );
}

export default App;