Adding Decentralized IDs and User-Owned Storage to a React App
This is a live streamed presentation. You will automatically follow the presenter and see the slide they're currently on.
This is a live streamed presentation. You will automatically follow the presenter and see the slide they're currently on.
Friedger Müffke
Dev Day 2019
Berlin, 25 May 2019
Friedger Müffke
PhD in Bristol, UK
Android/Web Developer
friedger.id
@friedger
@social.nasqueron.org
@fmdroid@twitter
Engineering Partner
Blockstack
Founder Droidcon
Founder OpenIntents
1960
2020
2000
1980
2040
Mainframe era
IBM
Decentralized era
Blockstack ?
Cloud era
Google
Desktop era
Microsoft
Open source!
Contribute and get rewarded!
You
You to Carol as sibling
You to PwC as employee
You to Germany as citizen
You to Bob as friend
You
Your facts of birth
Your credit history
Your health records
Your education
You
Your cloud service
Your mobile device
Your lawyer
Your broker
You
Relationships
Attributes
Agents
did:example:123456789abcdefghi
App
App
App
Authenticator
Network
Decentralized Identifier
Login Request
© microsoft.com/ownyouridentity
Define your App Configuration:
yarn add blockstack
import {UserSession} from 'blockstack'
const userSession = new UserSession()
Provide a sign in button
document.getElementById('signin').onclick = () => {
userSession.redirectToSignIn()
}
And call redirectToSignIn()
// Check for the auth response token in the URL,
// provided by the browser redirect.
if (userSession.isSignInPending()) {
// Decodes the token and retrieves user data.
userSession.handlePendingSignIn()
.then((userData) => {
// Refresh main page once signed in.
window.location = window.origin
})
}
if (userSession.isSignInPending()) {
...
} else if (userSession.isUserSignedIn()) {
var userData = userSession.loadUserData()
// Do something with user profile data..
showProfile(userData.profile)
}
{
"username": "matt.id",
"profile": {
"name": "Matthew Little",
"image": [{
"name": "avatar",
"contentUrl": "https://gaia-matt.com/1159ZPz88pypemHP84SMacuJWa3XmFSKcv/avatar.png"
}]
},
"email": "matthew@blockstack.com",
"decentralizedID": "did:stack:1159ZPz88pypemHP84SMacuJWa3XmFSKcv",
"hubUrl": "https://gaia-matt.digitaloceanspaces.com/1QHGBN4d2WtnHgEFhsMpAqcJAL2Sy76zoK/",
"appPrivateKey": "6660d3ce7f79038aa5cadb7305897d9a20cfd95ed764c28bd3ffd2618c610553"
}
Example User Data
{
"username": "matt.id",
"profile": {
"name": "Matthew Little",
"image": [{
"name": "avatar",
"contentUrl": "https://gaia-matt.example.com/1159ZPz88pypemHP84SMacuJWa3XmFSKcv/avatar.png"
}]
},
"email": "matthew@blockstack.com",
"decentralizedID": "did:stack:1159ZPz88pypemHP84SMacuJWa3XmFSKcv",
"hubUrl": "https://gaia-matt.digitaloceanspaces.com/1QHGBN4d2WtnHgEFhsMpAqcJAL2Sy76zoK/",
"appPrivateKey": "6660d3ce7f79038aa5cadb7305897d9a20cfd95ed764c28bd3ffd2618c610553"
}
Example User Data
© Cogarius, Brussels
None for private key so far
Server-less apps
User based (S3, Azure,..)
Content based (IPFS, Storj, SSB, ..)
Address based (Gaia)
Address-based access protocol
My storage
Alice's storage
My storage
Write data
var statusMsg = 'Hello! 🚀'
userSession.putFile('status.txt', statusMsg)
.then(() => {
console.log('file updated!')
})
Read data
userSession.getFile('status.txt')
.then((statusMsg) => {
console.log('Status: ' + statusMsg)
})
Console > Status: Hello! 🚀
Sharing Data/Multi-user apps
"apps": {
"https://app.graphitedocs.com": "https://gaia-matt.com/1QHGBN4d2WtnHgEFhsMpAqcJAL2Sy76zoK/",
"https://helloblockstack.com": "https://gaia-matt.com/1KBU9qxDg8xMgyFdwiVDGU4RZr16Z7TB2S/"
}
publish_data
scope in AppConfig:
Sharing Data/Multi-user apps
// Upload unencrypted, public file (logged in as friedger.id)
var options = { encrypt: false }
var statusMsg = 'Hello! 🚀'
userSession.putFile('status.txt', statusMsg, options).then(() => {
console.log('uploaded publicly accessible file!')
})
Sharing Data/Multi-user apps
// Get file for specific user (logged in as alice.id)
var options = {
username: 'friedger.id',
decrypt: false
}
userSession.getFile('status.txt', options).then((msg) => {
console.log(`Got status for ${options.username}: ${msg}`)
})
Sharing Data/Multi-user apps
// Upload unencrypted, public file (logged in as friedger.id)
var options = { encrypt: false }
var statusMsg = userSession.encryptContent('Hello! 🚀',
{ publicKey: alicePubKey })
userSession.putFile('status.txt', statusMsg, options).then(() => {
console.log('uploaded publicly accessible file!')
})
Sharing Data/Multi-user apps
// Get file for specific user (logged in as alice.id)
var options = {
username: 'friedger.id',
decrypt: false
}
userSession.getFile('status.txt', options).then((encMsg) => {
var msg = userSession.decryptContent(encMsg,
{ privateKey: myPrivKey})
console.log(`Got status for ${options.username}: ${msg}`)
})
Share document privately
react-redux CRUD + bigcalendar
https://github.com/yasnaraj/react-calendar-events-example
Javascript
Android, iOS, React Native
Gatsby starter library
yeoman generator-blockstack
Infrastructure
blockstack-core
gaia
Integrations
omniauth-blockstack
blockstack-ruby
