Photo by Franki Chamaki on Unsplash

3Box Spaces: Easy Decentralised Storage For Apps

Intro

3Box is a secure and decentralized user data storage system. Simple APIs allow developers to easily use 3Box for identity, auth, profiles, storage, and messaging. As well as allowing for fast development 3Box offers other benefits:

• Build apps with less backend infrastructure
• Reliable decentralized storage on IPFS and OrbitDB
• Improve security and privacy of user data
• Support data portability and interoperability
• Users can use their ETH account, don’t need to install additional software

In this guide I’ll demonstrate how to integrate 3Box with a React app. The demo itself is basic but it shows how easy it is to add 3Box decentralised storage using the Storage API. In the app the data is used as preference settings to control how the app renders and what text it displays.

From Zero To 3Box

To get a React app up and running quick we’ll use Create React App:

$ npm init react-app 3boxspaces
$ cd 3boxspaces
$ npm start

Go to http://localhost:3000/ in the browser and confirm that you see the React app up and running.

Integrating 3Box is really easy using the SDK, we just install the package then import it into the project.

To install the 3Box package:

$ npm install 3box

Now edit your src/App.js file to look like:

Your app should automatically reload and if you hit the ‘Load Public Data’ button you should see some amazing changes — ok, the change itself isn’t amazing but what’s going on in the background is pretty cool. The app is pulling data from a distributed data storage system and using it to determine how the app renders.

So what’s going on? At the top of the file we’ve imported 3Box: const Box = require(‘3box’) which gives the app access to all 3Box functionalities.

For storage 3Box uses the concept of Spaces to sandbox key-value data into stores specific to an application or context. In this case we are using the Space called `spacesdemo`. In this Space preferences such as background colour and font size are stored.

The app loads the data in the loadPublic() function on line 22. We use the 3Box API method, Box.getSpace, to retrieve the public spacesdemo data for the displayed Ethereum address. (I alread saved some demo preferences for the address, 0x531b92991c4EC8Bb18E39E6180aa2350e434C42D so you can see the effect). The rest of the app is just standard React to render the app with the right preferences.

Taking 3Box Spaces Further

We’ve already got 3Box up and running and pulling public data but we can easily build on this to allow the app to also read private data as well as storing both publicly and privately.

At this stage it’s useful to have a 3Box profile as it allows you to easily verify the app is storing data where we want it. You can also explore the other 3Box functionalities such as Profiles. Signing up is very easy, just go to the 3Box Hub.

Now, delete the code in src/App.js and replace it with:

There’s more going on here than the last time but the code should be easy to follow. Some of the main points to understand:

The app now shows an Authentication button. Authentication is required to perform any of the interactive functionalities offered by 3Box, including: decrypting private data, updating data, removing data, and posting messages. The Open3Box() function on Line 63 takes care of the auth. You can read more about 3Box Authentication here.

Next we authenticate with the Space we to interact with. In this case wa want to accest the spacesdemo data. box.openSpace is the 3Box API method we use for this on Line 84.

Once authenticated we use the Storage APIs to read and write both public and private data. Take a look at getSpaceData() and the setPublic() and setPrivate() functions in the code above.

Try using the app to add/change the following preferences:

Public:
backgroundColor (i.e. #58D3F7)
fontSize (i.e. 50px)
Private:
text (i.e. 3Box is the best way to store and manage user data)
fontFamily (i.e. Marker Felt)

You can also expore your 3Box profile and see all the data there.

Portable Data

One of the largest benefits to 3Box is that when data is kept with the user, it makes it easy for the user to carry their data across various apps, networks, and services without needing to recreate new data each time. Some refer to this as portable, self-sovereign data. Additionally, user data on 3Box belongs to users first and foremost. 3Box data is not subject to any form of vendor lock-in, including 3Box ourselves, since the user can always take their data to another provider that adopts the same standards. — 3Box Docs

So you can take the preferences you saved above with you to another app. To demonstrate this I have a similar app deployed here (code). Once you go through the authentication process you should see your preferences applied to this app - very cool! Try changing some values and confirm the effects are applied locally.

There’s a lot more functionality to explore such as Profiles and Messaging. Check out the 3Box Docs and join the Discord chat for any questions or help.