How to Connect Blockstack to your Backend API
Tags: decentralization, blockchain, programming, react
Published: 2019-06-08 18:01:03

---
title: How to Connect Blockstack to your Backend API
published: true
tags: decentralization,blockchain,programming,react
canonical_url: https://medium.com/better-programming/how-to-connect-blockstack-to-your-backend-api-4643f5a331a4
---

###Part two of a three-part tutorial

In part one, [How To Build Your First Blockchain App on Blockstack](https://dev.to/robghchen/how-to-build-your-first-blockchain-app-on-blockstack-2n01), I show you how to set up Blockstack login/signup. In this tutorial, we’ll connect the unique username that visitors create on Blockstack to your back end.

[![](https://cdn-images-1.medium.com/max/1600/1*hqsZrbxFXMF6CXtQXiD0TA.png)](https://medium.com/better-programming/how-to-connect-blockstack-to-your-backend-api-4643f5a331a4?source=rss-1a2b6738cba4------2)

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

While you would want to send private information such as phone numbers and addresses to [Gaia Storage](https://github.com/blockstack/gaia) (a decentralized storage system), what I’m about to show you is useful for storing public information like comments or posts where you might want that information available on a public API.

Coming from [part one](https://dev.to/robghchen/how-to-build-your-first-blockchain-app-on-blockstack-2n01) of this three-part tutorial series, this is what App.js looked like:

{% gist https://gist.github.com/BetterProgramming/137d478a3a0b098878be5cc741db9a69 %}

We’re going to add two methods that’ll connect Blockstack to your API. Skip to step 6 if you only want to see the final code.

1) We’ll be adding the following placeholders to your app’s `state`:

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

2) Within the App class, we’ll add this function which does the following:

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

3) Within the App class, we’ll add another function that takes the username from Blockstack and creates a new user object in your API:

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

4) Call `getUsers()` function in `componentDidMount()`, add this line to the existing code:

```
this.getUsers();
```

5) In `render()`, we’ll add a welcome greeting above the Sign Out button in order to see that all is working correctly:

{% gist https://gist.github.com/robghchen/20122ab8f89f331d1297f5089c4f3076 %}

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

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

7) Let’s quickly center the greeting div by adding this snippet to `App.css`:

```
.hello {
  margin: auto;
}
```

8) Sign in, then verify that the user object is getting created in your back end:

![api](https://cdn-images-1.medium.com/max/800/1*O4F6rCFNrQEUq5atuxj4pw.png)

9) Sign out and sign back in to verify that the user object does not get duplicated if it already exists.

![signed in](https://cdn-images-1.medium.com/max/800/1*I6vhW-UtSLeLoEcgflEmBA.png)

You can now connect Blockstack authentication with your own custom back end and build the user object however you’d like. Have fun with it!

In the final part of this tutorial, I’ll show you [How to Use Gaia Storage with Blockstack](https://dev.to/robghchen/how-to-use-gaia-storage-with-blockstack-917)

---

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