idStack hello world tutorial

Anilkishen Dukkipatty
Draft · Unlisted

Let us walk you through building a sample application on top of idStack. idStack is a blockchain network that allows you to build full-stack fast apps on top of a decentralised network. The sample app we will build will teach you the basics of building an idStack app. It will allow the user to create an identity and login with this newly created universal identity. It will allow you to learn how to read and write data to the user’s data storage.

Requirements before we proceed with the tutorial:

  • We need to have Nodejs installed. Any version above v10.0.0 would work with this demo. We are using v12.10.0
  • ExpressJS 4.15.5
  • We need the idStack SDK to enable the Auth flows and access to the user’s data storage

What will you be able to do post learning the tutorial:

  • You should be able to authenticate your customers using idStack identity
  • You should be able to write application data or badges, etc to the user’s storage engine
  • You should be able to read the data you’ve written to the user's storage engine

The application we are about to build is an ExpressJS application. The backend is only required to store your app-id, app-secret, auth-token. The user data will be entirely stored with the user on his storage engine. Knowledge of expressJs is not required to follow along.

Scaffold a normal express app using express-generator

npm install -g express-generator
express idStack-app

We can now create a route where we render the login button. We will store the state of the user (whether he is logged-in or not) and other details like the app-id, app-secret, etc. in the global variable for the purpose of this tutorial. Once we get the auth_token from idStack we will set it in the global state variable, this will mean the user is logged-in.

let state = { app_id: '123', app_secret: 'abc123', auth_token: null }
app.get('/', (req, res, next) => res.render('index', state)

Once we install the idStack SDK we can start building the functionality in the front-end. On clicking the login button we will invoke the authenticate function in the SDK. This will automatically redirect the user to idStack (where the user can create a new ID or login with an existing ID). Once the user checks the permissions being asked by your app he is redirected back to your app. If the user authorised your app then you will get back an auth-token. If the user rejects the permissions then you’ll get an error message. Once we get the auth token we can set it in the state variable. Now we can hide the login button and instead show authorised content to the user.

const SDK = require('idStack-SDK')
const btn = document.getElementById('login_btn')
btn.addEventListener('click', (event) => SDK.authenticate())

We can now work on the next steps of this tutorial. We want to be able to write and read data from the user's storage engine. We can use the getData() and the writeData() functions in the SDK to achieve this.

const SDK = require('idStack-SDK')const data = { foo: 'bar', baz: 'test' }
const writeDataResult = await SDK.writeData(data, state)
const readData = await SDK.getData('foo', state)
console.log(readData)
// the output will be 'bar'

We’re all done!

We’ve built our first idStack app! now using these basic functions we can go ahead and build any app we want on top of idStack. Data modelling will play an important role when we want to build more complex apps. The next tutorial will focus on how we can model a more complex use-case using idStack.

Note: This tutorial was tested and run on macOS Catalina 10.15. Users can follow along with this tutorial even if they’re using Windows or Linux systems. Just be careful to translate correctly for your OS. This tutorial was tested on Chrome 7.0.3865.90.

Unlisted