Blockstack Authentication for ReactJS Apps Using Hooks

Blockstack Landing page

What is BlockStack?

According to the Website:

“Blockstack is a decentralized computing platform that puts users in control of their data and identity. Apps built on Blockstack make data breaches and trust violations an antiquated notion.”

This article assumes that you already understand and know all there is to know (more than beginner) level about the Blockchain and Decentralized Technology.

This article also assumes that you have come across Blockstack and you want to use it in your Decentralized Application and particularly implement the Authentication and Authorization Protocol using a React App.

Also this article assumes that you already know how to build a simple ReactJS app using Create React App command and you know what components are.

Currently, the Blockstack documentation does not detail an extensive enough approach to show you how to implement user sessions in a React App. Using A code example which is shared at the end of the article, I will show you how you can successfully implement User Authentication and Authorization in your app.

Understanding Blockstack Authentication with Visuals

Below is a visual guide representing the User actions in signing up using Blockstack in your React App:

Authentication Flow Diagram

The steps are as follows:

1.User Lands on page with authentication (sign in) button in the ReactJS app.
2. User clicks the “Sign In” so as to access protected routes.
2b. User cannot access Protected Routes without clicking the Sign In Button.
3. App redirects to Bockstack to authenticate User.
4. User can now access Protected routes after authentication with Blockstack’
5. User can Sign out.

Create React App with Blockstack — Auth

This articles assumes that you possess Basic React Knowledge, we will go ahead and build a simple ReactJS app with a Button to implement the Blockstack Authentication.

This is a nav with a sign button

The Blockstack Authentication Interface

Protect Route with User Sign Out option

To authenticate a React App using Blockstack, you need to install blockstack, @blockstack/connect and react-blockstack npm packages.

We will go over it all together

npx create-react-app your-app-name

Using NPM or YARN install the following required packages

yarn add blockstack react-blockstack @blockstack/connect

For Routing we will need to install react-dom and react-router-dom

yarn add react-dom react-router-dom

Create 3 separate components: Layout.js, SignIn.js and SignOut.js

The Layout component will be rendered in App.js file.

https://gist.github.com/emmaodia/c99fc3d3faa377e197f656089409eb1f

This Github repository contains a Open Source Guest Book build using Blockstack for Authentication and Authorization and Blockstack Gaia for storing User Session and Data.