Web5 in 5️⃣ minutes
Let's build a decentralized application on the Web5 platform - in under 5 minutes. You will learn how to:
✅ Create unique digital IDs for users known as Decentralized Identifiers (DIDs)
✅ Issue and manage digital proofs using Verifiable Credentials(VCs)
✅ Store and read data from your users' personal data store called a Decentralized Web Node (DWN)
Let’s go! 🚀
Installation
1. Create a directory
This will be the home of your new Web5 app. Run the following commands in your CLI:
mkdir web5-app
cd web5-app
2. Install Web5
Use NPM to initialize a package.json file:
npm init -y
Use NPM to install Web5:
npm install @web5/api@0.12.0
npm install @web5/credentials@1.1.1
These steps will create a package.json in the root of your project. Open the newly created package.json and add module as a type:
{
"dependencies": {},
"type": "module"
}
3. Create App File
Create an index.js file where you will write all of your application logic:
touch index.js
For Windows using PowerShell:
New-Item index.js -ItemType File
4. Import Web5
At the top of your index.js file, add these lines to import the Web5 package dependencies that you will use to build your application::
import { Web5 } from "@web5/api";
import { VerifiableCredential } from "@web5/credentials";
Additional import for Node 18
/*
Needs globalThis.crypto polyfill.
This is *not* the crypto you're thinking of.
It's the original crypto...CRYPTOGRAPHY.
*/
import { webcrypto } from "node:crypto";
// @ts-ignore
if (!globalThis.crypto) globalThis.crypto = webcrypto;
Now that you've installed the Web5 SDKs, you are ready to start building!
Create Web5 App
1. Instantiate Web5 and Create DID
In Web5 apps, a user’s unique identifier - like an email address - is called a Decentralized Identifier (DID). We are building a decentralized app, so your users are using identifiers that aren't tied to a centralized authority.
The Web5 class is an isolated API object for doing all things Web5. The connect() function creates an instance of Web5 and also creates a decentralized identifier or obtains connection to an existing one.
In index.js below the import statement, create a new instance of Web5:
This Web5 instance is what you'll use to access the other objects of Web5 such as dwn. Within the connect function we’re using dht as the DID method. Learn more DID methods.
Test your code
Wanna see the DID you just created?
In index.js, add the following line and save your file:
console.log(aliceDid);
Then from the terminal, run:
node index.js
You'll see the newly created DID.
Try it!
Your DID will appear here
2. Access Bearer DID
In the previous step, you generated what is known as a (DID), which appears as an alphanumeric string. It's more specifically referred to as a DID URI.
This DID URI is part of a broader JSON object, known as a Bearer DID, which contains metadata such as cryptographic keys that prove ownership of the DID and rules governing its usage, management, or modification. With a Bearer DID, the owner can securely sign and verify data, ensuring authenticity and integrity.
To access your Bearer DID, add the following lines of code to your index.js:
Test your code
Wanna see the Bearer DID?
In index.js, add the following line and save your file:
console.log(aliceBearerDid);
Then from the terminal, run:
node index.js
You'll see the Bearer DID.
Try it!
Your Bearer DID will appear here
3. Create a VC
Verifiable Credentials (VCs) are digital proofs used to confirm specific facts about individuals, organizations, or entities. In this step, you'll enable your users to create a self-signed VC -- allowing them to issue a Verifiable Credential that makes claims about themselves. For this example, the credential will state that the user has completed the Web5 Quickstart Guide.
In your index.js, create your Verifiable Credential:
Test your code
Wanna see the VC you just created?
In index.js, add the following line and save your file:
console.log(vc);
Then from the terminal, run:
node index.js
You'll see the newly created Verifiable Credential.
Enter a name in the input field and click "Run" to create a Verifiable Credential.
Try it!
Your VC will appear here
4. Sign VC
Now, your users can sign the VC with their Bearer DID to ensure its authenticity and integrity.
To allow users to sign a VC, add this line to your index.js:
When an issuer signs a VC, it attests that they are truly the one who issued it. This cryptographic process also converts the VC into a JSON Web Token (JWT), making the credential tamper-evident and verifiable by others.
Test your code
Wanna see the JWT version of your signed VC?
In index.js, add the following line and save your file:
console.log(signedVc);
Then from the terminal, run:
node index.js
You'll see the JWT-encoded version of your Verifiable Credential similar to the alphanumeric string below:
eyJ0eXAiOiJKV1QiLCJhbGciOiJFZERTQSIsImtpZCI6ImRpZDpkaHQ6cDNpeHo1MXp4azR1MW5uN29xcnhpaGJzc3o3amNnNXd4ZTVpeThwcGo4ZXVwOHF4OXB1eSMwIn0.eyJ2YyI6eyJAY29udGV4dCI6WyJodHRwczovL3d3dy53My5vcmcvMjAxOC9jcmVkZW50aWFscy92MSJdLCJ0eXBlIjpbIlZlcmlmaWFibGVDcmVkZW50aWFsIiwiV2ViNVF1aWNrc3RhcnRDb21wbGV0aW9uQ3JlZGVudGlhbCJdLCJpZCI6InVybjp1dWlkOmVkZDdmN2FhLTA2MDgtNDlmYi1iYzYwLWUyYWVkNTFhM2IxNSIsImlzc3VlciI6ImRpZDpkaHQ6cDNpeHo1MXp4azR1MW5uN29xcnhpaGJzc3o3amNnNXd4ZTVpeThwcGo4ZXVwOHF4OXB1eSIsImlzc3VhbmNlRGF0ZSI6IjIwMjQtMDUtMjJUMTk6NDQ6MjlaIiwiY3JlZGVudGlhbFN1YmplY3QiOnsiaWQiOiJkaWQ6ZGh0OnAzaXh6NTF6eGs0dTFubjdvcXJ4aWhic3N6N2pjZzV3eGU1aXk4cHBqOGV1cDhxeDlwdXkiLCJ1c2VybmFtZSI6IkBibGFja2dpcmxieXRlcyIsImNvbXBsZXRpb25EYXRlIjoiMjAyNC0wNS0yMiIsImV4cGVydGlzZUxldmVsIjoiQmVnaW5uZXIifSwiZXhwaXJhdGlvbkRhdGUiOiIyMDI2LTA5LTMwVDEyOjM0OjU2WiJ9LCJuYmYiOjE3MTY0MDcwNjksImp0aSI6InVybjp1dWlkOmVkZDdmN2FhLTA2MDgtNDlmYi1iYzYwLWUyYWVkNTFhM2IxNSIsImlzcyI6ImRpZDpkaHQ6cDNpeHo1MXp4azR1MW5uN29xcnhpaGJzc3o3amNnNXd4ZTVpeThwcGo4ZXVwOHF4OXB1eSIsInN1YiI6ImRpZDpkaHQ6cDNpeHo1MXp4azR1MW5uN29xcnhpaGJzc3o3amNnNXd4ZTVpeThwcGo4ZXVwOHF4OXB1eSIsImlhdCI6MTcxNjQwNzA4MCwiZXhwIjoxNzkwNzcxNjk2fQ.6R8jx0Z3xhab7X-Y-sGPVnZ2NdFL746ILcjJbGvSfCixUY1DBsd86CVJfnXXAwbfRm5KQv0xMS5XH4h7gKkZDA
Try it!
Your JWT will appear here
5. Store VC in DWN
Your users can now store the JWT form of their VC in a DWN (Decentralized Web Node).
A DWN is a personal data store - a platform for messages, pictures, videos, medical records, and just about any content a user may want to store.
Read more about DWNs
Your app should not store users' data in your centralized database. Instead, their data should be stored in their DWN. This is how the user retains ownership over their content. Through permissions, users can decide which apps can read, write, and delete content from their DWN.
The DWN exists in local storage. The DWN persists across browser sessions and can be synched across a user's devices.
A user can host their DWN in multiple locations. The Web5 SDK is both browser and Node.js compliant, meaning you can use the same APIs on both client side and serverside.
To store a VC in a DWN, add the following lines of code to your index.js:
Test your code
Let's see what was just written to the DWN.
In index.js, add the following line and save your file:
console.log("writeResult", record);
Then from the terminal, run:
node index.js
You'll see the record that was written to the user's DWN. It will resemble:
writeResult _Record {}
Try it!
Your written result will appear here
6. Read VC from DWN
If the user has given your app read permissions to their DWN, you can read their data by accessing it through the record property.
To read the JWT-encoded VC stored in your DWN, add the following to your index.js:
Test your code
To see the record that was read from the DWN, add the following to index.js:
console.log("readResult", readSignedVc);
Then from the terminal, run:
node index.js
You'll see the JWT-encoded version of your Verifiable Credential similar to the alphanumeric string below:
eyJ0eXAiOiJKV1QiLCJhbGciOiJFZERTQSIsImtpZCI6ImRpZDpkaHQ6cDNpeHo1MXp4azR1MW5uN29xcnhpaGJzc3o3amNnNXd4ZTVpeThwcGo4ZXVwOHF4OXB1eSMwIn0.eyJ2YyI6eyJAY29udGV4dCI6WyJodHRwczovL3d3dy53My5vcmcvMjAxOC9jcmVkZW50aWFscy92MSJdLCJ0eXBlIjpbIlZlcmlmaWFibGVDcmVkZW50aWFsIiwiV2ViNVF1aWNrc3RhcnRDb21wbGV0aW9uQ3JlZGVudGlhbCJdLCJpZCI6InVybjp1dWlkOmVkZDdmN2FhLTA2MDgtNDlmYi1iYzYwLWUyYWVkNTFhM2IxNSIsImlzc3VlciI6ImRpZDpkaHQ6cDNpeHo1MXp4azR1MW5uN29xcnhpaGJzc3o3amNnNXd4ZTVpeThwcGo4ZXVwOHF4OXB1eSIsImlzc3VhbmNlRGF0ZSI6IjIwMjQtMDUtMjJUMTk6NDQ6MjlaIiwiY3JlZGVudGlhbFN1YmplY3QiOnsiaWQiOiJkaWQ6ZGh0OnAzaXh6NTF6eGs0dTFubjdvcXJ4aWhic3N6N2pjZzV3eGU1aXk4cHBqOGV1cDhxeDlwdXkiLCJ1c2VybmFtZSI6IkBibGFja2dpcmxieXRlcyIsImNvbXBsZXRpb25EYXRlIjoiMjAyNC0wNS0yMiIsImV4cGVydGlzZUxldmVsIjoiQmVnaW5uZXIifSwiZXhwaXJhdGlvbkRhdGUiOiIyMDI2LTA5LTMwVDEyOjM0OjU2WiJ9LCJuYmYiOjE3MTY0MDcwNjksImp0aSI6InVybjp1dWlkOmVkZDdmN2FhLTA2MDgtNDlmYi1iYzYwLWUyYWVkNTFhM2IxNSIsImlzcyI6ImRpZDpkaHQ6cDNpeHo1MXp4azR1MW5uN29xcnhpaGJzc3o3amNnNXd4ZTVpeThwcGo4ZXVwOHF4OXB1eSIsInN1YiI6ImRpZDpkaHQ6cDNpeHo1MXp4azR1MW5uN29xcnhpaGJzc3o3amNnNXd4ZTVpeThwcGo4ZXVwOHF4OXB1eSIsImlhdCI6MTcxNjQwNzA4MCwiZXhwIjoxNzkwNzcxNjk2fQ.6R8jx0Z3xhab7X-Y-sGPVnZ2NdFL746ILcjJbGvSfCixUY1DBsd86CVJfnXXAwbfRm5KQv0xMS5XH4h7gKkZDA
Try it!
Your read result will appear here
7. Parse VC
Upon receiving a Verifiable Credential (VC) as a JSON Web Token (JWT), applications can convert it back to JSON format using the VerifiableCredential.parseJwt() method.
This allows you to inspect the contents of the VC in a readable format.
Add the following line to your index.js to parse the JWT-encoded VC:
Test your code
Wanna see the parsed JWT?
In index.js, add the following line and save your file:
console.log(parsedVc);
Then from the terminal, run:
node index.js
You will see a decoded version of the JWT!
Try it!
Your parsed VC will appear here
Summary
Congrats! You've successfully created an application with two key functionalities:
1️⃣ Issuing and cryptographically signing Verifiable Credentials, providing users with a reliable way to verify facts about individuals, organizations, or entities.
2️⃣ Creating a local Decentralized Web Node (DWN) as a personal data store for users. With their DID and appropriate permissions, your app can read, write, or delete data from the user's DWN, ensuring they have full control over their content.