Skip to main content

React Setup & Resolver

Veramo core runs natively in the browser. The plugins you use also need to be browser compatible. This guide will set up a DID resolver to work in a standard Create React App setup. It is possible to add your own identity, key management, and storage plugins that are browser compatible.


A finished example of this tutorial can be found on github at

Initialize app

Initialize a new CRA project

npx create-react-app veramo-react-app --template typescript
cd veramo-react-app

Install veramo core, DIDResolver plugin and dependencies

yarn add @veramo/core @veramo/did-resolver ethr-did-resolver web-did-resolver did-resolver

Create a setup file in src/veramo/setup.ts and add the following code, replacing the INFURA_PROJECT_ID with your own.

import { createAgent, IResolver } from '@veramo/core'

import { DIDResolverPlugin } from '@veramo/did-resolver'
import { Resolver } from 'did-resolver'
import { getResolver as ethrDidResolver } from 'ethr-did-resolver'
import { getResolver as webDidResolver } from 'web-did-resolver'

// You will need to get a project ID from infura
const INFURA_PROJECT_ID = '<your PROJECT_ID here>'

export const agent = createAgent<IResolver>({
plugins: [
new DIDResolverPlugin({
resolver: new Resolver({
...ethrDidResolver({ infuraProjectId: INFURA_PROJECT_ID }),

Open src/App.css and add the following styles to the top of the file:

pre {
font-family: monospace;
white-space: pre;

#result {
text-align: left;
width: 900px;
background-color: #24232d;
color: #25c2a0;
padding: 15px;
overflow: scroll;

Open src/App.tsx and replace with the following code:

import React, { useEffect, useState } from 'react'
import './App.css'

import { agent } from './veramo/setup'

function App() {
const [didDoc, setDidDoc] = useState<any>()

const resolve = async () => {
const doc = await agent.resolveDid({
didUrl: 'did:ethr:goerli:0x6acf3bb1ef0ee84559de2bc2bd9d91532062a730',


useEffect(() => {
}, [])

return (
<div className="App">
<header className="App-header">
<pre id="result">{didDoc && JSON.stringify(didDoc, null, 2)}</pre>

export default App

And that's it! When you yarn start you should see a DID document being resolved instead of the default landing page.


If after running create-react-app, you see the following message:

A template was not provided. This is likely because you're using an outdated version of create-react-app.
Please note that global installs of create-react-app are no longer supported.
You can fix this by running npm uninstall -g create-react-app or yarn global remove create-react-app before using create-react-app again.

Be sure to follow the instructions in that message, and then run the npx command again. If you still the message, this answer may help .