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 ( ) is on CNBC ( ) talking about the “The Promise of Blockchain Technology”. ConsenSys also pretty regularly now Blockchain… What is it good for? Everything! , but anything that requires a . And that’s quite a number of things. Humans have been recording history, since well… the beginning of recorded history. Ok… maybe not allll the things universal state management system We’re busy cataloging the tree of life, human genome, and even the stars across the skies. Humans are astute keepers of state. 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 and the . this video 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? We’re going to deploy a simple Decentralized Identity Application right now. Let’s find out. How is this possible? Isn’t blockchain and decentralized difficult? is a for Ethereum developers. Truffle the Ethereum Swiss Army Knife “ ” must have Become the blockchain. Know the blockchain. Whether you’re a junior Javascript developer or seasoned Solidity developer, Truffle adds to the developer workflow. Everything from a to ready-to-go , the Truffle Suite contains a delicious box of “goodies” for a variety of Ethereum situations. portable solidity debugger boilerplate code called Truffle Boxes 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, and , are spokes, steadfast on creating a simple and easy-to-use decentralized infrastructure. is focused on providing developers/engineers with the essential tools (portable solidity debugger) and resources (boilerplate boxes) to 10x the builder happiness and productivity ( ). is Ethereum’s decentralized identity Platform providing a collection of cryptographic primitives and ready-to-deploy IdentityManager and Proxy smart contracts. uPort Truffle ConsenSys Truffle we love you guys! uPort In addition to the Ethereum identity, uPort provides capabilities using the inter-planetary file system (IPFS). decentralized identity documents (DIDs) Plus, we also have a pretty nifty transaction fueling station, called , to supercharge your blockchain transaction requests, but more on that in another article. Sensui Follow , and for the latest developers news! ConsenSys Truffle uPort 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 CLI command is magic. 'truffle’ 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 ‘ ’ kind of like ‘ ’, but wayyy better, truffle unbox create-react-app because… blockchain . http://truffleframework.com/ Why is truffle unbox better then create-react-app? While... instead of a single boilerplate ( ) we have easy access to all the Truffle Boxes — with just a simple CLI command. and it doesn't even blockchain....pfff truffle unbox react-uport We can go home!” — Blockchain “Done. Haha just kidding — we have work to do! The Truffle Boxes are still in the early stages. . But uPort predicts in the comings months and years Truffle Boxes will be plentiful, bountiful and . Expect a growth of both trivial code examples and non-trivial demo applications available to You with just a few simple CLI commands. That being said, they currently has a bunch of awesome boxes though… right now delicious 🤔 Perhaps even a new Truffle Box from uPort… perhaps we shall see! The Truffle/uPort Powerpack 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... ! With that one simple command, we just saved a ton of time. time! for more blockchain that is — byzantine battalion charge A simple demonstration. Nothing more. The box 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. react-upport For developers ( ) it should provide inspiration. like yourself 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 ( ) 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. and interesting https://github.com/gluon-project/gluon-rxp “Use the Open Source code Luke! “ — Yoda Before we start building let’s start with something a little more manageable**.** decentralized social networks, with decentralized login to display self-sovereign identities name, email, phone and country. A minimal viable product (MVP) Dashboard 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 Truffle Box codebase. react-uport 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. http://truffleframework.com/boxes/drizzle http://truffleframework.com/boxes/status http://truffleframework.com/boxes/ens-bid-truffle-box Exploring The Code — The Important Files/Folders Let’s open our favorite Code Editor, shall we. We’re going to start exploring the known only as Truffle Box react-uport The boilerplate code demonstrates logging into a decentralized application, storing data in Redux and finally passing the back into the DOM. props 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 CLI command, a ready-to-go uPort/React/Redux boilerplate codebase will be manifested. truffle unbox react-uport Magic! What does the ‘react-uport’ Truffle box do anyways? Blockchain Applications with Decentralized Identity Ready to start building a uPort Decentralized Application? The showcases a Dashboard/Profile login system. Any person ( ) can login to the Browser Application ( ) simply by scanning a QR code via the uPort Smartphone Application. uPort React Dashboard Demo with a uPort registered identity after we insert a DApp signing key 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 uPort Application Manager n Android Smartphone Applicatio IOS Smartphone Application Javascript Libraries | Browser Applications uport-connect | Server Side Applications uport-js 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 it’s easy to create a new decentralized identity. uport-cli-client In short, simply download the uPort Smartphone application from either or to create a new decentralized identity. Google Play Store Apple App Store Once you’ve created a new decentralized identity, visit the to register a new decentralized application. uPort AppManager 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… Login Here => uPort Application Manager A New Decentralized Application Right Now To create a new we must first dispatch a request within the uPort AppManager using a ÐIdentity ( ). decentralized application 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 button, but you could also select the button too… but that would make us sad 😞 Continue Cancel Login. Create a DApp. Wait for Blockchain confirmations *ugghgh* 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 ( ) a newly minted decentralized application will become available within the uPort AppManager. it’s blockchain — that’s normal Time to celebrate 🎉 ÐApp created! ⚠️🚨 🚨⚠️ 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 command! Manifesting the box into existence. You’ve also launched a new decentralized identity and Application. That’s pretty cool too 😊 truffle-unbox react-uport Excellent job! …We must continue by exploring the Truffle Box and inserting our new The quest is not complete though react-uport ÐApp Signing Key Since the Truffle Box is a standard Javascript stack: including several module dependencies, a Webpack build process ( ) plus the truffle-config.js and truffle.js files… the project contains a total of 5 separate configuration files. react-uport and development server Each controlling the various build processes to a decentralized application. Exploring The React Application The folder contains the React/Redux application. src 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 We’re going to edit the above files to include decentralized technology within our boilerplate. Let’s get right to the heart of the application. 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 to work properly, requires credentials obtained from the uPort AppManager, be added to the uPort Connect module object. connectors.js 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() Including the SimpleSigner(‘SIGNING KEY’) in the Browser is only for demonstration purposes. DO NOT include the signing key in a application. WARNING: production 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({ }).then((credentials) => {....... requested: ['name', 'email', 'phone', 'country'] 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 ( ) is passed props from the Browser State Management ( ) which includes Identity data from the Universal State Management( ). Redux Router Redux Ethereum/IPFS Do you want a challenge? Now that you’ve an attestment data from a decentralized identity document (DID)… think you can generate an attestment for the decentralized network? consumed _Primary object for frontend interactions with uPort. ConnectCore excludes some functionality found in Connect for a…_developer.uport.me UPort Documentation Store users private data within phones and request information in a future time or from another decentralized applications. Attest Credentials. It’s one BIG mesh of state: Identity => Blockchain =>Browser =>DApp In other words, when an identity (dapp user) authenticates ( ) to a decentralized application, that information is temporarily stored in the Browser. A page refresh clears the authentication information only stored in the Browsers DOM. sends private data It’s only temporary. 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 ( ) and need to maintain the ability to pass DOM state from one HTML Document to the next. or maybe with async magic 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 of the current project. scope 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 folder contains the Webpack configuration files. The folder contains both the development and production Webpack configuration files. config config 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 ( ) but we learned a lot! ok…it kind’of was, but that’s the point 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).

Ethereum

Stacks

Apple

BUNCH

ConsenSys

Dapp

Facebook

Fetch

Genome

Google

Super

Twitter

YouTube

Too Long; Didn't Read

Discover Saakuru: Web3 Mass-Adoption with 0-FEES

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

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

Too Long; Didn't Read

Companies Mentioned

Coins Mentioned

uPort

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

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

Too Long; Didn't Read

Companies Mentioned

Coins Mentioned

uPort

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES