How to use Gaia Storage with Blockstack
Tags: blockstack, decentralization, api, blockchain
Published: 2019-06-08 18:32:21

---
title: How to use Gaia Storage with Blockstack
published: true
tags: blockstack,decentralization,api,blockchain
canonical_url: https://medium.com/better-programming/how-to-use-gaia-storage-with-blockstack-c188458bad7
---

###Final part of a three-part tutorial

In part two, [How to Connect Blockstack to your Backend API](https://dev.to/robghchen/how-to-connect-blockstack-to-your-backend-api-2bo0), I show you how to create a user object in your API after logging in with Blockstack. In this tutorial, we’ll build a form that sends public information to that API and a separate form that sends secret/sensitive information to Gaia Storage.

[![](https://cdn-images-1.medium.com/max/1600/1*JiRRbVU9s-EIYLuUTctQaw.png)](https://medium.com/better-programming/how-to-use-gaia-storage-with-blockstack-c188458bad7?source=rss-1a2b6738cba4------2)
######Blockstack applications use the Gaia storage system to store data on behalf of a user. When the user logs in to an application, the authentication process gives the application the URL of a Gaia hub, which performs writes on behalf of that user. The Gaia hub authenticates writes to a location by requiring a valid authentication token, generated by a private key authorized to write at that location.

By using Gaia Storage, the decentralized way of storing information:

- Your data is more secure than traditional storage systems, which have one or a few central points of vulnerability.
- Millions of encrypted copies of your data are spread across the world, constantly verifying each other for changes made without your authorization.
- A hacker would need to compromise 51% of the blockchain in order to access your data. This would require more computing power than any known entity possesses.
- You own your own data, your information will be safe and no one can access it, not me, not Blockstack, not even the president.

**Prerequisites**: Knowledge of setting up your own [API](https://dev.to/robghchen/launch-a-rails-database-in-under-5-minutes-1453). We’ll also be using [React.js](http://reactjs.org/).

Coming from [part two](https://dev.to/robghchen/how-to-connect-blockstack-to-your-backend-api-2bo0) of this three-part tutorial series, this is what `App.js` looked like:

{% gist https://gist.github.com/robghchen/a5f436cb79e2b54a1156b44453c6e066 %}

We’re going to add a form in JSX and some handler methods to use our API. We’ll, do the same for Gaia Storage but in the Blockstack way. Skip to step 6 if you only want to see the final code.

1) We’ll be adding a few placeholders to your app’s state:

{% gist https://gist.github.com/robghchen/45349960667f21465a3d0326f97e7c5f %}

2) Within the App class, we’ll add the changeHandler, submitHandler, and submitGaiaHandler functions for the forms (be sure to add the `superhero` attribute to your backend for the fetch PATCH request):

{% gist https://gist.github.com/robghchen/6f9cbadc2740751d7a897e51c1de674a %}


3) Within the App class, we’ll add a function to retrieve data from Gaia Storage:

{% gist https://gist.github.com/robghchen/1b9614bcf74e160bbbd207280bc5635a %}


4) Call `getGaiaUser()` function in `componentDidMount()`:

{% gist https://gist.github.com/robghchen/55dcc4c5537779696c84d0696a992a7b %}

5) In `render()`, we’ll add the JSX for our new forms:

{% gist https://gist.github.com/robghchen/49508e37ced1944b2f40c534c692c8e1 %}

6) At the end of this process, `App.js` should look like this:

{% gist https://gist.github.com/robghchen/58da774e1644754c7839ae6e5a4940c1 %}

7) Let’s sprinkle some CSS on this in `App.css` and make it a little easier on the eyes:

{% gist https://gist.github.com/robghchen/290082b059a3a76b6835469136c94220 %}

8) Test the two different forms, open console to see the data that is returned upon submitting each form.

![forms](https://cdn-images-1.medium.com/max/1200/1*716_jPPAL2FqInaY99aq4Q.png)

9) You should see encrypted information if you click the link that Gaia Storage returns on App.js:134:

![console](https://cdn-images-1.medium.com/max/800/1*sGU89mBSB_Tu1Sev2DYOdQ.png)
![json](https://cdn-images-1.medium.com/max/800/1*_wsCiAJzMMOdyw8dOupcEw.png)

<hr/>

Congratulations for making it to the end of this tutorial! You have now successfully implemented Blockstack authentication, connected Blockstack to a public API, and securely transferred data to Gaia Storage.

There is still lots to learn, but you now have the fundamentals to start building decentralized and hybrid apps. Remember you can always dive into the [Blockstack documentation](https://docs.blockstack.org/) or reach out to the [community on Slack](https://community.blockstack.org/slack) if you get stuck.

![app mining](https://cdn-images-1.medium.com/max/800/1*rUqG_UvAwTCKQYGSoEzrrw.png)

Thank you for following along through all of the tutorials, reach out if you have any questions. Wish you the best in your blockchain endeavors!

---

Bring your friends and come learn JavaScript in a fun never before seen way! [waddlegame.com](https://waddlegame.com)