Build a Versioning System With IPFS and Blockstack

There are so many great use cases for versioning. Handling code deployments, document edits, and database snapshots are just a few immediate uses that come to mind. Normally, a versioning system is another segment within a database, but it can be so much more when you think of it through the lens of immutable data and DHT (distributed hash tables) technology. So, today, we’re going to build a stream of consciousness note-taking app with version history. This will be different than other notes apps as it will have just ONE note that the user can edit over time, removing information or adding information. But we’ll include versions so they can grab their history. We’ll do all that by using Blockstack and IPFS. is a decentralized application platform that lets users choose where there data is stored. For the similicity of this tutorial, we’re going to use the storage hub provided by Blockstack the company (it’s free and there’s no configuration needed). a peer-to-peer network that allows data to be served based on its content, not its location. This means that when the data changes, it is represented by a different identifier (a hash), and the old version of the data still exists, unchanged. This is perfect for a versioning system. We’re going to build all of this by creating a new React project and installing just one dependency: . Blockstack IPFS SimpleID provides developer tools for the decentralized web. In a nutshell, SimpleID lets developers add decentralized authentication and storage to their apps without asking their users to go through the cumbersome process of generating seed phrases and managing those 12-word backups. Users get a traditional username/password authentication flow while still owning their identity and getting access to Web 3.0 technology. SimpleID To get started, visit SimpleID and . Once you verify your account, you’ll be able to create a project and select the Web 3.0 modules to include in your project. Let’s walk through that quickly: sign up for a free developer account 1. Sign up for developer account 2. Click the verification link in your email 3. Once your account is verified, you’ll be on the Accounts page where you can create a new project 4. Give that new project a name and a URL where you may eventually host it (this can be a fake url for now as long as it’s https based) 5. Save and then click View Project 6. Copy down your API Key and Developer ID 7. Go to the Modules page and select Blockstack for your Authentication Module and both Blockstack and Pinata for your Storage Module 8. Click Save That’s it! Now, you’re ready to work. Quick note about : They provide an IPFS pinning service, so SimpleID uses them behind the scenes to add content to the IPFS network and to pin said content to ensure it is always available. Read more about pinning . Pinata here Let’s build a project. My instructions will be from the MacOS perspective, but those of you on different systems should be able to use similar commands to get started. First, open up your terminal and create the new React project: npx create-react-app ipfs-blockstack-versioning When that’s done, change into the directory and then install the SimpleID dependency: cd ipfs-blockstack-versioning npm i simpleid-js-sdk Ok, open the project up in your text editor of choice. We’re not going to spend time with complex folder structure. This is a very basic application designed to show off the power of Blockstack and IPFS. With that in mind, find the src folder and open App.js. At the top of that file add the following right below the import css statement: { createUserAccount, login, pinContent, fetchPinnedContent } ; config = { : ${yourApiKey}, devId: ${yourDevId}, authProviders: [ ], storageProviders: [ , ], appOrigin: , scopes: [ , , ] } import from 'simpleid-js-sdk' const apiKey //found in your SimpleID account page //found in your SimpleID account page 'blockstack' //array of auth providers that matches your modules selected 'blockstack' 'pinata' //array of storage providers that match the modules you selected "https://yourapp.com" //This should match the url you provided in your dev account sign up 'publish_data' 'store_write' 'email' //array of permission you are requesting from the user Ok, now with the SimpleID package imported and this config object (which comes right from the ), you’re ready to get started. Let’s work on the user interface a bit. As I mentioned, this is going to be a really simple app, so let’s drop in an editor for handling our document. We’ll do this with a script tag in the index.html file rather than installing a dependency via NPM. You can use any WYSIWYG library, but I'm going to use is called Medium Editor. You can find it . SimpleID Docs here Your index.html file is located in the public folder. Find it and add this above the title tag: NoteStream link rel "stylesheet" href "//cdn.jsdelivr.net/npm/medium-editor@latest/dist/css/medium-editor.min.css" type "text/css" media "screen" charset "utf-8" script src "//cdn.jsdelivr.net/npm/medium-editor@latest/dist/js/medium-editor.min.js" script title title You’ll note, I set the title of my app here since we were already editing the file. Feel free to use the same name or create your own. Now that we’ve added the stylesheet and the script we need, let’s move to our App.js file which is located in the src folder. We're going to clear everything out of this file and start mostly from scratch. So, update your App.js file to look like this: React ; ; { createUserAccount, login, pinContent, fetchPinnedContent } ; config = { : ${yourApiKey}, devId: ${yourDevId}, authProviders: [ ], storageProviders: [ , ], appOrigin: , scopes: [ , , ] } { (props) { (props); .state = { userSession, : , : [], : , : , : , : } } render() { ( ); } } App; import from 'react' import './App.css' import from 'simpleid-js-sdk' const apiKey //found in your SimpleID account page //found in your SimpleID account page 'blockstack' //array of auth providers that matches your modules selected 'blockstack' 'pinata' //array of storage providers that match the modules you selected "https://yourapp.com" //This should match the url you provided in your dev account sign up 'publish_data' 'store_write' 'email' //array of permission you are requesting from the user . class App extends React Component constructor super this content "" versions selectedVersionContent "" pageRoute "signup" versionPane false versionModal false return div className "App" div export default I’ve converted the function component to a class component, but you can do this as a function component with some minor changes to the way state is handled. You can see I have four state variable that I expect to use: userSession (which will be filled from our Blockstack authentication), content (which will be the actual streaming note), versions (which will be our history), selectedVersionContent (which will be used for displaying the actual content of past versions), pageRoute (which is for handling that is displayed on the screen), versionPane (which determines if the version pane is showing), and versionModal (which determines if the version modal is open or not). I think the first thing we should do is get a signup and sign in screen rendering. Within the with the className of “App”, add some conditional logic with form inputs like this: render() { { pageRoute, userSession } = .state; ( Sign Up Sign In App Content ); } const this return { pageRoute === "signup" && !userSession.isUserSignedIn() ? div className "App" : pageRoute === "signin" && !userSession.isUserSignedIn() ? : } div We are obviously going to fill this in with actual content, but this should help illustrate what’s happening. If that pageRoute state is "signup" and the user is NOT logged in, we should show the signup form. If the pageRoute state is "signin" and the user is NOT logged in, we should show the sign in form. Otherwise, we should show the app. Now, let’s build this out a little. Let’s start by handling the Blockstack userSession state. This is actually pretty simple. At the top of our App.js file, just add this below the import statements: { UserSession } ; { AppConfig } appConfig = AppConfig([ , , ]); userSession = UserSession({ appConfig }); import from 'blockstack' import from 'blockstack' const new 'store_write' 'publish_data' 'email' const new You should add this to the top of your actions.js file as well below the existing import statement. Blockstack comes installed with SimpleID, so you don't need to add anymore dependencies. Ok, now let's add the necessary sign in and sign up forms to our App.js file: { (props) { (props); .state = { userSession, : , : [], : , : , : , : , : , : , : , : , : App signup auth-form username username-sign-up text password password-sign-up password email password-sign-up email submit signin button-link signin auth-form username username-sign- text password password-sign- password submit signup button-link . class App extends React Component constructor super this content "" versions selectedVersionContent "" pageRoute "signup" versionPane false versionModal false username "" password "" email "" loading false error " } } handleUsername = (e) => { this.setState({ username: e.target.value }); } handlePassword = (e) => { this.setState({ password: e.target.value }); } handleEmail = (e) => { this.setState({ email: e.target.value }); } handleSignIn = (e) => { e.preventDefault(); } handleSignUp = (e) => { e.preventDefault(); }render() { const { pageRoute, userSession, username, password, email, error } = this.state; return ( { pageRoute === " " && !userSession.isUserSignedIn() ? Sign In Already have an account? this.setState({ pageRoute: " " })} className=" ">Sign In.

{error}

: pageRoute === " " && !userSession.isUserSignedIn() ? Sign In Need to sign up? this.setState({ pageRoute: " " })} className=" ">Register.

{error}

: App Content } ); } } export default App; There’s a lot we’ve added here, but it’s pretty simple to understand. We added the functions to handle the sign up and sign in flow. We added a form to handle each of those inputs as well. We added a state switcher so that someone on the sign in form could switch to the sign up form and vice versa. We also have a paragraph section ready in both the sign up form and the sign in form to handle any error that might happen during sign up or sign in. With all of this in place, I think we can finally fire up our app and see how well it’s working. From the terminal run npm start. Hopefully that worked for you. If it did you’ll see a god-awful ugly sign up form. You can switch to the sign in form and switch back as well.We’re not going to be touching much CSS in this tutorial, but we’ve got the start of a functioning app. You may have noticed earlier, I added a state variable called loading. We’re going to use that here in just a second as we actually sign a user up and log them in. We’ll start with the sign up process. And again, for this, we’ll be using the . SimpleID Docs Find the handleSignUp function and fill it in like so: handleSignUp = (e) => { e.preventDefault(); .setState({ : , : }); { username, password, email } = .state; credObj = { : username, : password, : , email: email } { account = createUserAccount(credObj, config); localStorage.setItem( , .stringify(account.body.store.sessionData)); .location.reload(); } (err) { .log(err); .setState({ : , : }) } } async this loading true error "" const this const id password hubUrl 'https://hub.blockstack.org' //This is the default Blockstack storage hub try const await 'blockstack-session' JSON window catch console this loading false error "Trouble signing up..." We made our function asynchronous because we need to wait for the createUserAccount promise to resolve before we can do anything else. Other that that, we simply followed the docs and added a try/catch. If there’s an error, the error state will be updated and the loading state will be set back to false. The user should see the error message on the screen then. If there’s no error, the localStorage item Blockstack needs is updated and we refresh the window. One last thing we should do before testing the sign up flow is add a loading indicator. This isn’t going to be anything special, but when signing up, the indicator will replace everything else on the screen. Let’s update our app code JSX to look like this: { loading ? Loading... : Sign In Already have an account? this.setState({ pageRoute: "signin" })} className="button-link">Sign In.

{error}

: pageRoute === "signin" && !userSession.isUserSignedIn() ? Sign In Need to sign up? this.setState({ pageRoute: "signup" })} className="button-link">Register.

{error}

: App Content } } "App" div div { pageRoute === "signup" && !userSession.isUserSignedIn() ? div Let’s test this out now. Go ahead and type a username, password, and email and then click sign up. Assuming that worked, you should have seen the loading screen and then after a few seconds, the user is logged in and the words “App Content” appear. Nice! But now what? We haven’t handled sign in, and the user can’t sign out. Let’s handle sign out first since it’s really simple. In the section of your app where you have the words “App Content” add a button that calls the handleSignOut function: Sign Out Then make sure to add that function up with your other functions: handleSignOut = { localStorage.removeItem( ); .location.reload(); } => () 'blockstack-session' window Give that a try and the user should be signed out. Now, we can work on log in. I hope you remembered your username and password. Let’s wire up the handleSignIn function: handleSignIn = (e) => { e.preventDefault(); .setState({ : , : }); { username, password } = .state; credObj = { : username, password, : } params = { credObj, : config, : {} } { signIn = login(params); (signIn.message === ) { localStorage.setItem( , .stringify(signIn.body.store.sessionData)); .location.reload(); } { .setState({ : , : signIn.message }) } } (err) { .log(err); .setState({ : }) } } async this loading true error "" const this const id hubUrl 'https://hub.blockstack.org' //This is the default Blockstack storage hub const appObj userPayload //this can be left as an empty object try const await if "user session created" 'blockstack-session' JSON window else this loading false error catch console this error "Trouble signing in..." We are using the SimpleID Docs once more to sign in, and most of this code is re-used from the sign up function. We don’t need the email for sign in, and we have to create a params object, but other than that, it’s mostly the same. With that in place, let’s give this a shot. You should have seen the loading indicator and then your user was signed in. Of course, we just have a sign out button now when a user in logged in. Let’s change that by dropping in our Medium-style editor. Below your constructor in App.js and above your other functions, let’s add a componentDidMount method: componentDidMount() { editor = .MediumEditor( ); } var new window '.editable' This is using window to fetch the MediumEditor script we added to our index.html file. For us to see anything, we need to edit the App Contents section of our JSX. So in the area where you put your sign out button, let’s add something below that to handle the editor: Start where you left off or shove your thoughts the middle somewhere. It "editor" NoteStream h1 h1 in 's up to you!

Without any css styling this is going to be too ugly to handle. So, let’s just drop a little in to fix that. In the same folder, but in the App.css file, add the following: { : ; : auto; : ; } { : ; : auto; : solid ; : ; : ; : ; : left; } .editor max-width 85% margin margin-top 100px .editable max-width 85% margin border 1px #282828 border-radius 3px min-height 500px padding 15px text-align We can change this later, but it at least makes the application presentable. You should see something like this: Not the prettiest thing, but it’ll do for now. We need to be able to handle the changes to the editor, so let’s start there before we even begin to save data. In our componentDidMount lifecycle event, let’s change things a bit: componentDidMount() { editor = .MediumEditor( ); editor.subscribe( , (event, editable) => { .setState({ : editor.getContent( ) }); }); } var new window '.editable' //We'll load our content here soon 'editableInput' this content 0 If you remember, we had created a state variable called content to hold the content of our note. We are setting that state on every change in the editor. That means when we are ready to save the note, we can just fetch our data from the content state. Let’s see how that looks by doing two things. We’ll add a save button and we’ll add a saveContent function. Right where the sign out button is, add a save button below it: Sign Out this /button> Save () const this console We’re going to be using the userSession state in a minute, so I threw it in there. But with this, you should be able to open the developer console, type into the editor, and then hit save. You’ll see the html content. That means you’re ready to save content and load that content back. Let’s thing this through first, though. We need to save the content to Blockstack’s storage system and IPFS. Blockstack’s storage system will be an overwrite function every time, but for IPFS, we’re going to store a new version to the network. We also need to be able to fetch the IPFS hashes, so we should store that to Blockstack as well. It sounds to me like we have two files to store on Blockstack: content and versions (hashes). But we have to first save to IPFS so that we have the hash result. Let’s start writing that out in our saveContent function. saveContent = () => { { content, userSession } = .state; contentToPin = { : .stringify(content) } params = { : config.devId, username: userSession.loadUserData().username, id: .now(), content: contentToPin, apiKey: config.apiKey } pinnedContent = pinContent(params); .log(pinnedContent); } async const this //First we save to IPFS const pinnedContent JSON const devId //your dev ID found in your SimpleID account page //you logged in user's username Date //an identifier you can use to reference your content later //the content we discussed previously //the api key found in your SimpleID account page const await console We’ve added the async keyword to the function and we’ve used the paramaters necessary to post the content to IPFS as given by the SimpleID docs. In some cases, a developer will need to query Pinata for content they previously posted to IPFS. that’s the whole point of the id field. In this case, we’ll be using Blockstack to manage all of our hashes, so we don’t really care what this identifier is except that it’s unique (thus, Date.now()). Let’s test this out with console open and see how it goes before we move on. Add some content to your editor then hit Save. If all goes well, you should see something like this in the console: { message: , body: } "content successfully pinned" "QmbRshi9gjQ2v5tK4B8czPqm3jEQ3zGzsuQJuQLyti4oNc" That body key in the object is an IPFS hash. We want to use that and store it as a version with Blockstack. So let’s tackle that next. saveContent = () => { { content, userSession } = .state; contentToPin = { : .stringify(content) } params = { : config.devId, username: userSession.loadUserData().username, id: .now(), content: contentToPin, apiKey: config.apiKey } (pinnedContent.message === ) { newVersion = { : .now(), : pinnedContent.body } versions.push(newVersion); .setState({ versions }); savedVersion = userSession.putFile( , .stringify(versions), { : }); .log(savedVersion); } { .log( ); } } async const this //First we save to IPFS const pinnedContent JSON const devId //your dev ID found in your SimpleID account page //you logged in user's username Date //an identifier you can use to reference your content later //the content we discussed previously //the api key found in your SimpleID account page if "content successfully pinned" const timestamp Date hash this const await "version_history.json" JSON encrypt true console else console "Error saving content" I’ve added a check to make sure the content pinning to IPFS was successful before trying to save the hash to Blockstack. We need to know the time of the version, so we’re building up a newVersion object with the timestamp and the hash itself and then we are pushing that into the versions array. We are then saving this to Blockstack, where something cool is happening. You can see an object in the putFile call that says encrypt. We are able to encrypt data that easily. Don’t believe me? Here’s the file I used to test this section of the tutorial: https://gaia.blockstack.org/hub/13ygSWdUeU4gPHbqUzEBvmq1LP7TKNnbtx/version_history.json That’s just encryption our version history, which is important, but wouldn’t it be cool to encrypt the content before sending it to IPFS too? Let’s do that before we tackle the last part of saving content. In your saveContent function, right about the contentToPin variable, add this: encryptedContent = userSession.encryptContent( .stringify(content), { : getPublicKeyFromPrivate(userSession.loadUserData().appPrivateKey)}); const JSON publicKey We need to import the getPrivateKeyFromPublic function as well. So at the top of your App.js file with the other import statements, add: { getPublicKeyFromPrivate } ; import from 'blockstack/lib/keys' And update the contentToPin variable to look like this: contentToPin = { : .stringify(encryptedContent) } const pinnedContent JSON We’ll see in a moment if this works. Let’s pick up after setting and saving the version history. So right after the savedVersions line, add this: savedVersion = userSession.putFile( , .stringify(versions), { : }); savedContent = userSession.putFile( , .stringify(encryptedContent), { : }); .log(savedContent); const await "version_history.json" JSON encrypt true const await 'note.json' JSON encrypt false console Here’s what I get back in the console log by doing that: https://gaia.blockstack.org/hub/13ygSWdUeU4gPHbqUzEBvmq1LP7TKNnbtx/note.json Looks like it worked! So, to recap, we are encrypting the content, storing it on IPFS, using the IPFS hash that’s returned to create a new entry in the versions array, saving that to Blockstack, then saving the current version of the note content to Blockstack. Pretty cool stuff, but we need to be able to fetch content too, right? Initially, there are just two files we need to fetch when the application loads up: The current content (from note.json), and the versions file (from version_history.json). We should do that as soon as the app loads, so this will need to be added to our componentDidMount lifecycle event. Update the entire event like this: componentDidMount() { { userSession } = .state; content = userSession.getFile( , { : }); decryptedContent = userSession.decryptContent( .parse(content), { : userSession.loadUserData().appPrivateKey}); .setState({ : .parse(decryptedContent )}); editor = .MediumEditor( ); editor.subscribe( , (event, editable) => { .setState({ : editor.getContent( ) }); }); editor.setContent( .parse(decryptedContent), ); } async const this const await 'note.json' decrypt false const JSON privateKey this content JSON var new window '.editable' 'editableInput' this content 0 JSON 0 Save that and go back to your app. When it reloads, the content you had saved will now appear in the editor. We’re getting there. We have just a couple more things to do. We need to load the version history, so let’s do that next. Right below the decryptContent variable, add the following: versions = userSession.getFile( , { : }); .setState({ : .parse(decryptedContent), : .parse(versions) }); const await 'version_history.json' decrypt true this content JSON versions JSON Now, we can start having fun with versions. Let’s make sure we can render our version history first. In the App Contents section of your JSX, below the editor, add the following: { versions.map(v => { return( this.handleVersionModal(v.hash)}>{v.timestamp} ) }) } div className {versionPane versionPaneOpen : versionPaneClosed ul li key {v.timestamp} a href "#" onClick {() a li ul div We are creating a section to hold the version history. You’ll note the className is conditional on the state variable versionPane. This is because we want to be able to change that variable and open the version history rather than have it open all the time. Let’s add a button up with our sign out and save button called Version History. this.setState({ versionPane: !versionPane })}>Version History button onClick {() button And let’s update our CSS one more time to handle the display of the pane: { : fixed; : ; : ; : ; : ; : solid ; : ; : ; : inline; } { : none; } .versionPaneOpen position top 0 right 0 width 250px z-index 999 border-left 2px #282828 height 100vh background #eee display .versionPaneOpen display Go ahead and test it out. You should have at least one version saved, so hit that Version History button to toggle the pane open and closed. It’s ugly, but it works. The last thing we need to do is pop up a modal to show the content of a past version. Let’s get to work on that by adding a function called handleVersionModal. handleVersionModal = { { userSession } = .state; .setState({ : , : }); fetch( ) .then( { response.json(); }) .then( { encryptedContent = myJson.pinnedContent; decryptedContent = userSession.decryptContent( .parse(encryptedContent), { : userSession.loadUserData().appPrivateKey}); .setState({ : .parse(decryptedContent)}); }); } ( ) => hash const this this selectedVersionContent "" versionModal true `https://gateway.pinata.cloud/ipfs/ ` ${hash} ( ) function response return ( ) function myJson const const JSON privateKey this selectedVersionContent JSON We are using the JavaScript native Fetch API to handle calling out to an IPFS gateway to fetch the content specific to the version we select in the version pane. That content is encrypted and needs to be parsed and decrypted properly to be accessible. But if you console log the decryptedContent variable, you’ll see the content of the version in question is properly being fetched. We are setting that content to the selectedVersionContent state variable and setting the versionModal to true. Let’s put that all to use to render the past version on screen. Below the version page JSX you wrote earlier, add this: this.setState({versionModal: false})} id="version-close">Close { selectedVersionContent ? : Loading content for selected version... } div className {versionModal versionModalOpen : versionModalClosed span onClick {() span div dangerouslySetInnerHTML {{__html: selectedVersionContent h3 h3 div Now, we need to style that a bit to be manageable. In App.css, add this: { : inline; : fixed; : left; : ; : ; : ; : ; : auto; : ; : ; : ; : solid ; : ; } { : none; } { : relative; : ; : ; : ; : pointer; } .versionModalOpen display position text-align left 12.5% top 15% width 75% min-height 500px margin z-index 999 background #eee padding 25px border 1px #282828 border-radius 3px .versionModalClosed display #version-close position right 10px top 10px z-index 1000 cursor Let’ give this thing a try now. Open up the version history pane. Click on a past version. A modal should pop up with the content of that version for you to view. That’s it! We made it. You can now have an endless stream of consciousness note taking system while retaining control of all past iterations via version history. And to top it all off, every version of the note is encrypted with a private key wholly under your control. Take your new powers and build other cool things and propel Web 3.0 into the mainstream. If you’d like to see the code for this tutorial, you can find it . here ( : ) Disclaimer The Author is a co-founder of SimpleID