ScatterJS with React Redux and Saga

5 min readFeb 11, 2019

Find example of using ScatterJS with React/Redux and Redux-Saga here: https://github.com/nishants/scatterjs-react.

To make a transaction on a blockchain, we need to have the user’s private key to sign the transaction with. One of the downsides of web being so open is that we can’t trust a third party with such a sensitive piece of information. But then how do we authorize apps to transact on our behalf without compromising our private keys.

This where Scatter comes into the picture. User’s define there private, public key and their personal information like first name, last name, address in Scatter app running locally on their machine. ScatterJS is a web client library that allows a website to seek permission on user behalf and perform transactions, without knowing the user’s private key.

Comparison with OAuth

If like me, if you are coming from a Web2.0 background, the best way to understand Scatter will be a quick comparison with OAuth.

When we want to login into a website using our google/facebook accounts, we don’t share our original password with the site. Instead, we allow the website to link to our account with a defined set of permissions, and we trust Google and Facebook to take care of security for us.

Just like OAuth is the de facto for identity management, authorization and authentication for web 2.0, currently Scatter app is for Ethereum and EOS blockchains.

Similarities with OAuth

Acts as third-party authority that brokers identity management and authority between the user and an app
Like OAuth, user controls what information and permissions they allow for an app

Difference with OAuth

Unlike OAuth, the user can always see which app they have linked.
For each action (transaction), the user explicitly reviews and approves in Scatter app.
No central authority like Google or Facebook that holds and manages the user identity and permission. In this case, the user has way more control.

For e.g. when we need to identify a user on a website and seek authority to act on behalf of the user (like tweet, post on Facebook, get google data), we use scatter for doing the same on blockchains.

Unlike OAuth, there is no central authority like Google or Facebook that holds and manages the user identity and permission. Scatter runs locally on a user’s machine giving user has way more control about which apps can see their details. Also, each transaction that we perform on behalf of the user, has to be explicitly approved by the user in Scatter app.

Installing dependencies

Initialising scatter and plugins

Scatter interaction flow

App connects with Scatter using ScatterJS

This fails if the user does not have Scatter installed or if Scatter is locked on the user’s machine

2. Link app with Scatter (login user) -

Define a set of permissions that we seek from scatter on behalf of the user
The user sees prompt in Scatter to grant these permissions to our app

3. Perform transactions

Every transaction will need to be signed by the user via the scatter app

In this step, we try to connect to the Scatter instance running on the user’s machine. This will fail if the user does not have Scatter installed or if hasn’t unlocked Scatter app.

Step 2: Get endpoints and chain-id of networks that we want to connect to

Now we seek user’s permission to view who they are on the designated network. The network could be Ethereum, Tron, EOS main net of a testnet like jungle. For this example, we will use Jungle Testnet.

First, we need to define these networks that we want to connect to on behalf of user :

In this example, we have asked permission of Jungle Testnet. For each network that you want user’s account on, you can create a similar structure in array. To get these details for Jungle net go to https://monitor.jungletestnet.io and click on API endpoints, you will see details like

Apart from these details we also need the chainId, to get this click on API link and get information for /v1/chain/get_block.

Step 3 : Ask user to allow us to access there details on chosen networks

When the above code runs, use sees a prompt in Scatter app :

Now user can select which public key they want for our app to get :

Once a user has approved linking our app to scatter, a user can see our app on his home screen and unlink at any time they want to.

Now we have the user’s account name, public key on the jungle testnet.

Step 4 : Perform transactions on the network

Even though we still do not have the user’s private key, we can still initiate transactions using the ScatterJS , at which point user will see a prompt in Scatter app with details of the transaction. Use can approve/reject the transaction as he likes.

This is how the user will see the request to sign this transaction :