5,066 reads

Launch A Decentralized Identity Application using the Developer Friendly uPort/React Truffle Box

by uPortMarch 9th, 2018

Too Long; Didn't Read

So… you’ve heard about this “blockchain” thing and you want to learn a little bit more, huh? We don’t blame you — it’s interesting stuff!

Companies Mentioned

Coins Mentioned

featured image - Launch A Decentralized Identity Application using the Developer Friendly uPort/React Truffle Box

The Perfect Developer Blockchain On-Ramp — uPort and Truffle.

So… you’ve heard about this “blockchain” thing and you want to learn a little bit more, huh? We don’t blame you — it’s interesting stuff!

Cryptocurrency has taken off in recent months. Decentralized applications are launching regularly. And Joe Lubin (ConsenSys) is on CNBC (also pretty regularly now) talking about the “The Promise of Blockchain Technology”.

Blockchain… What is it good for? Everything!

Ok… maybe not allll the things, but anything that requires a universal state management system. And that’s quite a number of things. Humans have been recording history, since well… the beginning of recorded history.

Humans are astute keepers of state. We’re busy cataloging the tree of life, human genome, and even the stars across the skies.

The “state” of the Universe is everywhere and we’re always busy trying to capture it, somehow, someway, with some sort of abstraction.

Today we’re going to start with just the basics.

Testing the boundaries of Decentralized Identity verification on a Blockchain.

The InterPlanetary File System (IPFS) will be name dropped on numerous occasions. If you’re not familiar with new file protocol (like HTTPS) to manage decentralized files, we recommend checking out this video and the website for a brief overview.

It’s Siraj Raval — introducing the interplanetary file system.

What’s possible using the Ethereum Blockchain and a decentralized file storage (IPFS) system? Let’s find out. We’re going to deploy a simple Decentralized Identity Application right now.

How is this possible? Isn’t blockchain and decentralized difficult?

Truffle the Ethereum Swiss Army Knife is a “must have” for Ethereum developers. Know the blockchain. Become the blockchain.

Whether you’re a junior Javascript developer or seasoned Solidity developer, Truffle adds to the developer workflow.

Everything from a portable solidity debugger to ready-to-go boilerplate code called Truffle Boxes, the Truffle Suite contains a delicious box of “goodies” for a variety of Ethereum situations.

A box of “goodies” — http://truffleframework.com/boxes/

What We’re Doing — Launching A Demo Application

First, let’s get started with the basics.

Both, uPort and Truffle, are ConsenSys spokes, steadfast on creating a simple and easy-to-use decentralized infrastructure. Truffle is focused on providing developers/engineers with the essential tools (portable solidity debugger) and resources (boilerplate boxes) to 10x the builder happiness and productivity (we love you guys!). uPort is Ethereum’s decentralized identity Platform providing a collection of cryptographic primitives and ready-to-deploy IdentityManager and Proxy smart contracts.

In addition to the Ethereum identity, uPort provides decentralized identity documents (DIDs) capabilities using the inter-planetary file system (IPFS).

Plus, we also have a pretty nifty transaction fueling station, called Sensui, to supercharge your blockchain transaction requests, but more on that in another article.

Follow ConsenSys, Truffle and uPort for the latest developers news!

we like to get #meshy here at uPort — check out our job postings.

Time to unleash “all that is decentralized” upon the world!

Unlock Your Blockchain Potential

The 'truffle’ CLI command is magic.

For the 🖥️ code wizards and 🍄 blockchain druids, you'll love it!

Rect/uPort Truffle Box Tutorial

Also, all the React developers in the crowd, you can think of ‘truffle unbox’ kind of like ‘create-react-app’, but wayyy better, because… blockchain.

http://truffleframework.com/

Why is truffle unbox better then create-react-app?

While... instead of a single boilerplate (and it doesn't even blockchain....pfff) we have easy access to all the Truffle Boxes — with just a simple CLI command.

truffle unbox react-uport

“Done. We can go home!” — Blockchain

Haha just kidding — we have work to do!

The Truffle Boxes are still in the early stages. That being said, they currently has a bunch of awesome boxes though… right now. But uPort predicts in the comings months and years Truffle Boxes will be plentiful, bountiful and delicious. Expect a growth of both trivial code examples and non-trivial demo applications available to You with just a few simple CLI commands.

Perhaps even a new Truffle Box from uPort… perhaps 🤔 we shall see!

The Truffle/uPort Powerpack

With that one simple command, we just saved a ton of time. Time better spent on crafting solutions and not tinkering with configuration. Round of applause for Truffle - bestowing upon us the one precious thing in life... time! for more blockchain that is — byzantine battalion charge!

A simple demonstration. Nothing more.

The react-upportbox is simply meant to demonstrate the basics of managing data within a decentralized application, using Redux for Browser state management and uPort for decentralized identity verification.

For developers (like yourself) it should provide inspiration.

An opportunity if you’re just starting to learn React or experiment with decentralized solutions, to see a primitive construction of a decentralized application.

For a non-trivial example, check out the Gluon project.

Gluon is an application built by Simonas (uPort Lead Developer) for exchanging tokens, publishing media to IPFS and managing a decentralized contact list (saved in the Browser).

Essentially Gluon is the foundation for a number of different use cases built atop decentralized solutions i.e. Ethereum, uPort, IPFS and Infura. If you want to review non-trivial code, uPort recommends starting with the Gluon codebase.

One potential (and interesting) use case for the Gluon codebase is starting a decentralized social network. A social network where tokens can represent likes, votes, rewards, etc… the “social tokens” could be stored on a public blockchain and therefore reducing the requirement for a centralized service to facilitate and maintain online identity relationships.

https://github.com/gluon-project/gluon-rxp

“Use the Open Source code Luke! “ — Yoda

Before we start building decentralized social networks, let’s start with something a little more manageable**.**

A minimal viable product (MVP) Dashboard with decentralized login to display self-sovereign identities name, email, phone and country.

That’s believable and achievable, right!

Starting With the Basics

Understanding First Principles — Decentralized Solutions

Before attempting to build complex decentralized applications it’s important we first understand the basics. Truffle Boxes is great because we can quickly start using the building blocks of blockchain solutions today… like right now. This very instant — no waiting.

Less configuration, more building.

Managing The Complexity

For a non-trivial decentralized application it’s likely more decoupling and modular code will be required, but for the time being we’re not concerned about scaling the react-uportTruffle Box codebase.

We just want to pass “state” from Smartphone/Ethereum/IPFS to the Browser.

Complex Examples

Interested in reactive DApp configurations and advanced smart contract deployment integrations? Be sure to also checkout the following list of other Truffle Box boilerplate code.

Exploring The Code — The Important Files/Folders

Let’s open our favorite Code Editor, shall we.

We’re going to start exploring the Truffle Box known only as react-uport

The boilerplate code demonstrates logging into a decentralized application, storing data in Redux and finally passing the props back into the DOM.

Like for example passing data into Profile and Dashboard components.

http://truffleframework.com/boxes/react-uport

In addition to Webpack and React, this box adds: react-router, redux and redux-auth-wrapper for authentication powered by UPort. The easiest way to get started with UPort.

In other words, we’re deploying simple React application, with a few basic components, a couple of external dependencies and also Webpack dev server to handle 🔥 hot-reloading 🔥

Everything a code slinging person, like yourself needs to get started.

*yeehaw*

The Perfect Starting Boilerplate

Modular Solutions — Unboxed With the Help of Truffle

By casting the truffle unbox react-uport CLI command, a ready-to-go uPort/React/Redux boilerplate codebase will be manifested.

Magic!

What does the ‘react-uport’ Truffle box do anyways?

Blockchain Applications with Decentralized Identity

Ready to start building a uPort Decentralized Application?

The uPort React Dashboard Demo showcases a Dashboard/Profile login system. Any person (with a uPort registered identity) can login to the Browser Application (after we insert a DApp signing key) simply by scanning a QR code via the uPort Smartphone Application.

Let’s quickly review the technology we’ll be using.

Of course we’ll need to utilize several uPort SDKs and Browser Applications. But, since this a Browser Application we’ll also be using React, Redux and Redux Router in the application to help manage the Browser DOM state.

Applications

Javascript Libraries

uport-connect | Browser Applications
uport-js | Server Side Applications
react
redux
react-router

Create A New Decentralized Application

To create a new decentralized application we must first create/register a decentralized identity.

Using a smartphone application with uPort’s Smartphone SDKs or via the uport-cli-client it’s easy to create a new decentralized identity.

In short, simply download the uPort Smartphone application from either Google Play Store or Apple App Store to create a new decentralized identity.

Once you’ve created a new decentralized identity, visit the uPort AppManager to register a new decentralized application.

Registered Decentralized Application in the uPort AppManager

The process for creating a new decentralized application is relatively simple. Most of the complicated parts are abstracted away in the deployment process and within the blockchain.

All you have to worry about is scanning a QR codes and uploading images.

Login with the uPort Smartphone App
Create A New DApp using uPort’s AppManager
Configure the Decentralized Application Settings
Save DApp Configuration by Signing Private Transaction
Copy/Paste the Boilerplate Code into uPort Project

Login to the AppManager Decentralized Application

Before we can begin creating new ÐApp, we must first login to uPort’s ÐAppManager, so we’re able dispatch requests from our ÐIdentity, which is responsible for managing the new ÐApps we create today.

It’s all very Ðecentralized and super-meta…

A New Decentralized Application Right Now

To create a new decentralized application we must first dispatch a request within the uPort AppManager using a ÐIdentity (decentralized ether identity).

To start the dispatch process Click the the “Create An App” — the blue button, at the bottom of the screen — you can’t miss it.

Click Button. Create ÐApp. Decentralize all the things!

Upon starting the dispatch process for a new ÐApp, first a QR code will prompt itself within the Browser.

Scan the QR code with a uPort Smartphone Application.

Upon scanning the AppManager QR code with a registered decentralized identity, a request will appear within the uPort smartphone application.

The request is asking you to Continue (or Cancel) the transaction responsible for creating the new ÐApp using your personal ÐIdentity.

We recommend pressing the Continue button, but you could also select the Cancel button too… but that would make us sad 😞

By clicking Confirm, a transaction request will be sent to the Ethereum Blockchain and IPFS — thank you Infura!

After the expected 20–40 second wait time (it’s blockchain — that’s normal) a newly minted decentralized application will become available within the uPort AppManager.

ÐApp created! Time to celebrate 🎉

⚠️🚨WARNING🚨⚠️

YOU MUST SAVE THE SIGNING KEY TO RETAIN OWNERSHIP OF THIS IDENTITY

⚠️🚨WARNING🚨⚠️

Save the DApp Signing Key — muy importante.

Let’s Start Building the ÐApp

You’ve cast the truffle-unbox command! Manifesting the react-uportbox into existence. Excellent job! You’ve also launched a new decentralized identity and Application. That’s pretty cool too 😊

The quest is not complete though…We must continue by exploring the react-uport Truffle Box and inserting our new ÐApp Signing Key

Since the react-uportTruffle Box is a standard Javascript stack: including several module dependencies, a Webpack build process (and development server) plus the truffle-config.js and truffle.js files… the project contains a total of 5 separate configuration files.

Each controlling the various build processes to a decentralized application.

Exploring The React Application

The src folder contains the React/Redux application.

To launch a new Decentralized Application, using uPort’s decentralized identity platform we’ll have to change the following files:

Important File Locations

src/util/connectors.js
src/user/ui/loginbutton/LoginButtonActions.js
src/user/layouts/profile/Profile.js
src/layouts/dashboard/Dashboard.js

Let’s get right to the heart of the application. We’re going to edit the above files to include decentralized technology within our boilerplate.Shall we begin?

Add DApp Signing Keys and Credentials
Request Specific Attestment Information
Identity Profile
Application Dashboard

Connectors — DApp Credentials

src/util/connectors.js -Add DApp Signing Keys and Credentials

The connectors.js to work properly, requires credentials obtained from the uPort AppManager, be added to the uPort Connect module object.

Original File

import { Connect } from 'uport-connect'export let uport = new Connect('TruffleBox')export const web3 = uport.getWeb3()

Updated File

import { Connect, SimpleSigner } from 'uport-connect'export let uport = new Connect('React Uport Truffle Boilerplate', {clientId: '2ohdRCCeNpUpJdPNtggqmSEaxnYmBUuJVkB',network: 'rinkeby',signer: SimpleSigner('SIGNING KEY')})export const web3 = uport.getWeb3()

WARNING: Including the SimpleSigner(‘SIGNING KEY’) in the Browser is only for demonstration purposes. DO NOT include the signing key in a production application.

All your base are belong to us, if you do!!!

A bad actor will come along, steal your SIGNING KEY, pretend to be you and trick your users into using a decentralized application, pretending to be you!

However, for demonstration purposes it’s all good.

LoginButtonActions

src/user/ui/loginbutton/LoginButtonActions.js

Original File — line 16

uport.requestCredentials().then((credentials) => {.......

uport.requestCredentials({requested: ['name', 'email', 'phone', 'country']}).then((credentials) => {.......

Profile

src/user/layouts/profile/Profile.js

Original File — Line 17

Name {this.props.authData.name}

Updated File

Name {this.props.authData.name}

Email {this.props.authData.email}

Phone {this.props.authData.phone}

Country {this.props.authData.country}

Dashboard Props

src/layouts/dashboard/Dashboard.js

The Dashboard Route (Redux Router) is passed props from the Browser State Management (Redux) which includes Identity data from the Universal State Management(Ethereum/IPFS).

Do you want a challenge?

Now that you’ve consumedan attestment data from a decentralized identity document (DID)… think you can generate an attestment for the decentralized network?

UPort Documentation_Primary object for frontend interactions with uPort. ConnectCore excludes some functionality found in Connect for a…_developer.uport.me

Attest Credentials. Store users private data within phones and request information in a future time or from another decentralized applications.

It’s one BIG mesh of state: Identity => Blockchain =>Browser =>DApp

In other words, when an identity (dapp user) authenticates (sends private data) to a decentralized application, that information is temporarily stored in the Browser. It’s only temporary. A page refresh clears the authentication information only stored in the Browsers DOM.

To persist an authenticated decentralized session you might use LocalStorage or a storage library like RxJS (with 🤗 streams)to manage data.

By persisting state within the Browser’s LocalStorage and/or using ServiceWorkers to fetch data the decentralized authentication verification information can still be accessed even after a page refresh.

For example if you have a website, which is NOT a single page application you probably fetch pages from a backend server one at a time (or maybe with async magic) and need to maintain the ability to pass DOM state from one HTML Document to the next.

LocalStorage is your friend.

Smart Contracts — Just An Option

W don’t use Truffle’s ability to easily compile and deploy smart contracts, but the folder structure is in place. In other words, if you want to experiment with uPort and also smart contract deployment, you totally can!

However, for this project we won’t have to worry about the contracts and migrations folder, because it’s not in the scope of the current project.

We don’t recommend deleting the files (for future reference) but if you feel the need to keep folder structure as minimal as possible, we understand completely.

/src/contracts <= Solidity ready to be compiled
/src/migrations <= Smart Contract deployment settings

The truffle.js and truffle-config.js files control the build and deployment process of Ethereum Smart Contracts. However, since we’re not reviewing smart contract development in this tutorial, these files can be left unaltered (or deleted for the sake of being meticulous).

The Webpack Configuration

Finally, the config folder contains the Webpack configuration files. The configfolder contains both the development and production Webpack configuration files.

If you ever want extend the boilerplate (or update to Webpack 4 for extra fast compiling times) starting by reviewing the existing Webpack configuration files.

/src/config/webpack.config.dev.js <= Webpack Development Server
/src/config/webpack.config.prod.js <= Webpack Build Process

The Package.json Settings

The standard package.json file contains both the production/development dependencies, plus the script commands (in case you forget ‘npm run start’).

It’s Time To Celebrate!

You just launched a decentralized application — Congratulations!

give yourself a high five — you deserve it!

It wasn’t easy (ok…it kind’of was, but that’s the point) but we learned a lot!

We learned how to utilize Truffle Boxes, register a new ÐApp with uPort’s AppManager and also consume verified attestations directly from a smartphone — without every having to query a “centralized” database.

Together we’ve successfully transferred “state” across a variety of technology stacks, pieces of hardware and global networks…

Tight!

The best part was the ability to include decentralized technology solutions using the public Ethereum Blockchain and emerging solutions like the interplanetary file system (IPFS).