Posts

Cryptonomic NYC Hackathon part 1

The Idea

We live in an era of cryptocurrencies, and there’s no escaping it. It’s already happening, and if there’s one thing that represents well what’s going to happen next, it’s blockchain. That’s why during the Cryptonomic NYC Hackathon we decided to try and visualize tezos transactions by creating a frontend data visualization app. What is tezos, you ask? As I’ve mentioned before, it’s definitely part of our future. Here’s why. Tezos is a decentralized platform based on blockchain technology with its cryptocurrency (XTZ). It launched in June 2018 and uses the Proof of Stake algorithm. Too much information? Yeah, the cryptocurrencies topic may seem a little bit complicated at first and needs some time to get into but don’t worry, let’s go over it together. 

Frontend data visualization app – Time of day chart
Frontend data visualisation

What exactly did we build?

tAs I’ve already mentioned, we’ve built a frontend data visualization app. We wanted to visualize tezos transactions on the frontend/client-side. We’ve split the application into several sections such as Home, Transactions, Charts, and Live Chart. The Home section presents general information about our project, such as the tech stack, project description, etc. We used the Charts section to display the tezos transactions in charts. Users can choose the date that they want to see from the charts as well as the type of data (Transactions, Currency, Buyers, Sellers). There is also a second chart which presents the time of day when the transaction was committed, such as morning, afternoon, evening, night. The transactions section shows a list of the last 100 operations, including all connected data such as Source, Destination, and Timestamp. The previous section is the Live Chart which displays transactions and updates them every 10 seconds. We’ve built the chart in the form of colorful circles, with size depending on the number of transactions completed by each of the tezos.

Frontend data visualization app – List of transactions
Frontend data visualisation
Frontend data visualization app – Transactions charts

Frontend data visualisation

The Project

The tech stack we chose was React with Hooks, Redux-Saga, TypeScript, and React Chart.js for data visualization. We picked this stack because our teammates were familiar with the React library. For the communication between our frontend application and the server, we used ConseilJS RESTFUL API. Storing 100000 transactions on the frontend side was quite challenging, but we finally decided to store the data in LocalStorage and redux state. We wanted to focus on the UX/UI side to make sure our application is eye-catching and user-friendly, so no-one would have to run away, screaming, “my eyes are bleeding!”.

You can check out our project here: http://tezos-data-analytics-dashboard.scalac.io/

Live charts
Fronted Data visualization Live Charts

The Hackathon

Happy Hack Fest ! And may the odds be ever in your favor. 

We started at 9 AM on both Sunday and Saturday in our office. On day one, we split our work into roles. Damian was responsible for the Live Chart visualization, managing the redux state and request optimization, I was responsible for the Charts data visualization and Mariusz our leader was responsible for making the base of the application, transactions, server communication and making sure everything worked properly. We also joined the Cryptonomic channel via riot application so we could chat with other participants. 

The Experience

The hackathon was an enjoyable experience, one that I would recommend to everyone. It was a real pleasure to meet and work with such talented people. Sure, there was pressure and moments that we thought we wouldn’t make it, but we never gave up! Things I’ve learned from this experience are the experience itself, but also some new development knowledge as well as some blockchain stuff that might be very important and useful in the future. Thanks Cryptonomic for a great adventure!


During the hackathon, Scalac had two teams to develop their solutions. See how we made a Micheline Michelson translator.

Async/await is a brand new way of handling asynchronous calls in JavaScript. If you don’t know how it works, in this article I will be providing some examples to help you get started. Read more

Introduction

One of hardest parts in developing and maintaining React/Redux application is handling asynchronous actions: timeouts, requests/response handling, interaction with third-party stores, different callbacks and so on without сomplicating logic into actions-creators and reducers.

In this post, I’m going a real project to show you how to move all side-effects ( and not only ) away from action-creators. All of this in a way that makes them as clean as possible with Redux-Saga. Read more

During the ReactConf 2018 the Hooks were presented and to be honest it has shaken up the React community. If you haven’t seen “React Today and Tomorrow and 90% Cleaner React With Hooks” video yet, then I encourage you to do so.

Introducing stateless functional components in React 0.14 allowed us to create a smaller reusable blocks of code. But if this component had to handle some more advanced logic, then we had to convert it into a class. Now, by introducing React Hooks, we’re able to inject some logic into functional components and futhermore we can reuse this logic blocks in multiple components. Read more

JWT Authentication in a React-Redux app

Are you currently working on JWT authentication in React and Redux App? Don’t you know how to handle it? In this article we will cover a sign in process step by step.

These days, authentication is very important and commonly used aspect in modern web. It is for identifying users and to provide access rights for specific content. When logging, users either enter their usernames and passwords or use 3rd party providers for authentication purposes. In this entry I’ll present how to handle that process from the front-end side with an example using JSON Web Token.

JSON Web Token (JWT) is an open standard that defines a compact and self-contained way to transmit information securely between parties using a JSON object. More about JWT

Tools that we’ll use: react, redux, redux-form, react-router, redux-thunk, axios.

Prelude

After receiving user login data (e.g.: email and password), the server checks if data is valid. If it is, server returns a specific json response containing the token to allow user identification.
JSON Web Tokens consist of three parts, which are:

  • Header – The header usually consists of: the type of the token (JWT) and the hashing algorithm such as HMAC SHA256 or RSA.
  • Payload – contains the claims like RESERVED, PUBLIC and PRIVATE. RESERVED – are predefined claims which are not mandatory but recommended, like iss (issuer), exp (expiration time), sub (subject), aud (audience). PUBLIC – can be defined at will by those using JWTs. PRIVATE – are the custom claims, dedicated for sharing information. The payload is then Base64Url encoded to form the second part of the JSON Web Token.
  • Signature – consists of the encoded header, the encoded payload, a secret and the algorithm specified in the header.

When the user wants to access a protected route or resource, the user agent should send the JWT, typically in the Authorization header using the Bearer schema. Header content should looks like the following: “Authorization: Bearer <token>”.

The server’s protected routes will check for a valid JWT in the Authorization header, and if it’s valid, the user will be allowed to access protected resources. For security reasons, after logout, the server should pass the token to the blacklist to revoke them.

If the server receives the request without the token, it should send the response of 401 code – unauthorized. In other cases, e.g. failed validation, the server returns 400 code – bad request.

Thanks to HTTP codes and messages, client side application can recognize failed and successful requests and serve responses like tokens or errors.

To begin authorization process, the application has to send request to specific server URL that provides authentication. For example: http://www.sample-website.com/signin

In our case the request must contains two parameters in its body: email and password.

After a successful sign-in, the server returns a specific user token which should be stored in browser memory, for example in the localStorage or sessionStorage, in order to authenticate the user session.

Alert: This post won’t cover the basics of react and redux. If you want learn more about state management in react/redux apps I recommend you to read: Managing React state with Redux.

Configuration:

To start with our application, first let’s begin by initializing React, Redux, and React Router.

Root index.js looks like this:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import Navbar from './components/universal/navbar';
import Homepage from './components/homepage';
import Signin from './components/auth/signin';
import Signup from './components/auth/signup';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware()(createStore);
const store = createStoreWithMiddleware(reducers);

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <div>
        <Navbar />
        <Route exact path="/" component={Homepage} />
        <Route path="/signin" component={Signin} />
        <Route path="/secret" component={SecretPage} />
      </div>
    </Router>
  </Provider>,
  document.querySelector('#root')
);

The code shows a typical initialization of react for our web application: reduxis used to help managing state, react-redux delivers the provider to establish a connection between the state and our application, and, lastly, react-router-dom, to help defining dynamic routing.

Provider requires passing store to be able to use connect() calls. We define createStoreWithMiddleware to be able to use middleware in the future and to pass main reducer file which will allow to propagation of state through the whole application scope.

There also was added react-router-dom, which allows to define dynamic routing inside web application. Components that were added to router as routes are: Homepage, Signin and the SecretPage (which ultimately is going to be available only for signed in users).

Sign In component:

It’s time to prepare component of Sign In form. For this purpose we’ll use the handy redux-form package, which allows to manage form state in Redux. Below you can find a very basic implementation of redux-form. The submit function takes values passed into form (email and password) and displays them in the console on click event (for testing purposes).

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';

class Signin extends Component {
  submit = (values) => {
    console.log(values);
  }

  render() {
    const { handleSubmit } = this.props;
    return (
      <div className="form">
        <div className="container">
          <h2>Sign In</h2>
          <form onSubmit={ handleSubmit(this.submit) }>
            <Field name="email"
                  component="input"
                  type="text"
                  placeholder="Email" 
            />
            <Field name="password" 
                  component="input"
                  type="password" 
                  placeholder="Password" 
            />
            <button type="submit" className="blue">Sign In</button>
          </form>
        </div>
      </div>
    );
  }
}

export default reduxForm({
  form: 'signin'
})(Signin);

To make the form component communicate with the store, it has to be wrapped with reduxForm(). ReduxForm will provide the props for the state and the function to handle the submission process. Also, provided by ReduxForm, thecomponent, helps connecting each input to the store. Redux store has to know how to handle actions coming from the form components. So make it possible we need to pass the formReducer to the store.

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';

const rootReducer = combineReducers({
form: formReducer
});

export default rootReducer;

Authentication:

It’s the high time to start working on authentication. So now, we are going to:

  • make a connection with the server,
  • pass email and password into the request body,
  • receive token and save inside browser’s memory – localStorage,
  • redirect user to specific route – Secret,
  • handle errors.

To make all of those things possible, we are going to use Action Creators.

Actions are payloads of information that send data from the application to store. Action Creators are exactly what the name suggests, they are functions that create actions. They always return an object with type and payload – type being the action name, and payload the data they carry. In fact we are going to make a few additional steps, listed above. That’s why we need to use a middleware like redux-thunk, which allows to write asynchronous code.

“The Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState as parameters.”

Installation of redux-thunk is very simple. First we need to install its package, import it in our root index.js and add its instance to applyMiddleware.

import reduxThunk from 'redux-thunk';

const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);

After redux-thunk is added, we can go forward and create our Action Creator:

import axios from 'axios';

export const AUTHENTICATED = 'authenticated_user';
export const UNAUTHENTICATED = 'unauthenticated_user';
export const AUTHENTICATION_ERROR = 'authentication_error';

const URL = 'http://www.sample-website.com';

export function signInAction({ email, password }, history) {
  return async (dispatch) => {
    try {
      const res = await axios.post(`${URL}/signin`, { email, password });

      dispatch({ type: AUTHENTICATED });
      localStorage.setItem('user', res.data.token);
      history.push('/secret');
    } catch(error) {
      dispatch({
        type: AUTHENTICATION_ERROR,
        payload: 'Invalid email or password'
      });
    }
  };
}

We have added to our application the HTTP client Axios, it allows for an easy way to send asynchronous HTTP requests to REST endpoints. Axios supports the Promise API, allows to cancel or intercept request, response and automatically transforms data to JSON. Thanks to this, our communication with the server will be much faster and easier. We also set some types that we will need to dispatch to the reducer.

Next we create an Action Creator called signInAction where we pass in: email, password and history from the Signin component. Email and password are required in the request body for authentication purposes and the history object will help us to redirect user if the sign in process passes successful. Then, we define async/await function with the dispatch method. In the try block, we define const res with axios method POST with server URL and values from Signin component (email/password).

We also added await operator before post method to execute other functions only if the request was done successfully, but, if not, the error is handled in the catch() block. Dispatches an actions of type AUTHENTICATED saves token in localStorage. Then, history.push() redirects the user to the specific route URL.

If user is authenticated, state should returns true or false. In case of an error, state also should contain error message. So, we need to create auth_reducer.js file that handles different cases based on dispatched action types.

import { AUTHENTICATED, UNAUTHENTICATED, AUTHENTICATION_ERROR } from '../actions';

export default function(state={}, action) {
  switch(action.type) {
    case AUTHENTICATED:
      return { ...state, authenticated: true };
    case UNAUTHENTICATED:
      return { ...state, authenticated: false };
    case AUTHENTICATION_ERROR:
      return { ...state, error: action.payload };
  }
  return state;
}

Depending on specific case AUTHENTICATED, UNAUTHENTICATED or AUTHENTICATION_ERROR, the reducer returns a new state with the appropriate boolean value or error message.

Now we have to pass our new auth reducer to the main reducer file as follows:

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import authReducer from './auth_reducer';

const rootReducer = combineReducers({
  form: formReducer,
  auth: authReducer
});

export default rootReducer;

On this step we have to back to Sign In component and make some changes.

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { signInAction } from '../../actions';
import { connect } from 'react-redux';

class Signin extends Component {
  submit = (values) => {
    this.props.signInAction(values, this.props.history);
  }

  errorMessage() {
    if (this.props.errorMessage) {
      return (
        <div className="info-red">
          {this.props.errorMessage}
        </div>
      );
    }
  }

  render() {
    const { handleSubmit } = this.props;
    return (
      <div className="form">
        <div className="container">
          <h2>Sign In</h2>
          <form onSubmit={ handleSubmit(this.submit) }>
            <Field name="email"
                   component="input"
                   type="text"
                   placeholder="Email" 
            />
            <Field name="password" 
                   component="input"
                   type="password"
                   placeholder="Password" 
            />
            <button type="submit" className="blue">Sign In</button>
          </form>
          {this.errorMessage()}
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return { errorMessage: state.auth.error };
}


const reduxFormSignin = reduxForm({
  form: 'signin'
})(Signin);

export default connect(mapStateToProps, {signInAction})(reduxFormSignin);

We have to import signInAction action that we prepared earlier and also connect() method from react-redux. This method will connect our reduxFormSignin and Signin component with actions creators. And now our Actions Creators (signInAction()) are available as a props in our component.

We also have to define mapStateToProps function which takes application state and pass it into component as a props. In our case, we need state.auth.error and use it as this.props.errorMessage, which returns an error in case of authentication failure.

We pass our action creator – signInAction to the submit function with the values from the form and with props.history (to be able to redirect user in action). We also defined errorMessageDisplay function that displays errors.

Sign In form should also have a client-side validation. Very fine example you can find in redux-form documentation

Now we can use our authenticated state value, for example to render proper menu items. If user is logged we render Signout and Secret page links, in other case we want Sign In and Sign Up. The code below shows how to achieve that.

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';

class Navbar extends Component {
  navbarLinks() {
    if (this.props.authenticated) {
      return [
        <li key="secret"><Link to="/secret">Secret</Link></li>,
        <li key="signout"><Link to="/signout">Sign out</Link></li>
      ];
    }
    return [
      <li key="signin"><Link to="/signin">Sign in</Link></li>,
      <li key="signup"><Link to="/signup">Sign up</Link></li>
    ];
  }

  render() {
    return (
      <nav className="navbar">
        <div className="container">
          <Link to="/"><span className="brand">Auth-app</span></Link>
          <ul>
            {this.navbarLinks()}
          </ul>
        </div>
      </nav>
    );
  }
}

function mapStateToProps(state) {
  return {
    authenticated: state.auth.authenticated
  };
}

export default connect(mapStateToProps)(Navbar);

Auto user authentication:

If the token is saved in localStorage, our application should automatically change the auth state to authenticated before rendering. But currently there’s no code for that. That’s why when we refresh the page, state of user auth comes back to false. To fix this, we have to add dispatch method with type: AUTHENTICATED if there is a proper token in user browser. In root index.js file, we need to make some fixes as follows:

import { AUTHENTICATED } from './actions';

const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);
const store = createStoreWithMiddleware(reducers);

const user = localStorage.getItem('user');

if(user) {
  store.dispatch({ type: AUTHENTICATED });
}

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <div>
        <Navbar />
        <Route exact path="/" component={Homepage} />
        <Route path="/signin" component={noRequireAuth(Signin)} />
        <Route path="/signup" component={noRequireAuth(Signup)} />
        <Route path="/signout" component={Signout} />
        <Route path="/secret" component={requireAuth(SecretPage)} />
      </div>
    </Router>
  </Provider>,
  document.querySelector('#root')
);

We have to check if there is an ‘user’ token in localStorage. In case there is, we need to dispatch an action of type AUTHENTICATED into reducers. Thanks to this, new state will return value of authenticated: true.

Sign out:

To add Sign out logic, we just have to create a SignOut component which would trigger specific action. Sample action creator for signout may looks like this:

export function signOutAction() {
  localStorage.clear();
  return {
    type: UNAUTHENTICATED
  };
}

Protected routes:

Currently the user, after successful sign in, is redirected into ‘/secret’ route. In fact this route isn’t protected in anyway. Even not authorized person can go there and see the content. This is behaviour that we want to avoid, because of security reasons. That’s why we want to secure our route with Higher-Order Components (HOC). HOC is able to wrap specific component and extend its functionality.

In our case, have to check if the user is authenticated. If the user is not, higher order component redirects to another route for example into Signin. To make it happen we have to create new component, called for example require_auth.js and add specific the logic like:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

export default function (ComposedComponent) {
  class Authentication extends Component {
    componentWillMount() {
      if (!this.props.authenticated) {
        this.props.history.push('/signin');
      }
    }

    componentWillUpdate(nextProps) {
      if (!nextProps.authenticated) {
        this.props.history.push('/signin');
      }
    }

    PropTypes = {
      router: PropTypes.object,
    }

    render() {
      return <ComposedComponent {...this.props} />;
    }
  }

  function mapStateToProps(state) {
    return { authenticated: state.auth.authenticated };
  }

  return connect(mapStateToProps)(Authentication);
}

When the component is mounting or updating (because of changes to props or state) there is an if statement that check if the user is authenticated. If the user is not, HOC will make a redirection into ‘/signin’ URL. In any other case, nothing happens and the user can go into current component.

Similarly, we can also ‘protect’ routes which should not be available for authenticated user, like Sign In, Sign Up etc. The HOC for it has a very similar logic

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

export default function (ComposedComponent) {
  class NotAuthentication extends Component {
    componentWillMount() {
      if (this.props.authenticated) {
        this.props.history.push('/secret');
      }
    }

    componentWillUpdate(nextProps) {
      if (nextProps.authenticated) {
        this.props.history.push('/secret');
      }
    }

    PropTypes = {
      router: PropTypes.object,
    }

    render() {
      return <ComposedComponent {...this.props} />;
    }
  }

  function mapStateToProps(state) {
    return { authenticated: state.auth.authenticated };
  }

  return connect(mapStateToProps)(NotAuthentication);
}

An authenticated user while visiting urls like ‘/signin’ or ‘/signup’ is automatically redirected to specific URL, for example ‘/secret’.

To secure specific routes, we just have to wrap those with our Higher Order Components as below:

import requireAuth from './components/hoc/require_auth';
import noRequireAuth from './components/hoc/no_require_auth';
<Route exact path="/" component={Homepage} />
<Route path="/signin" component={noRequireAuth(Signin)} />
<Route path="/signup" component={noRequireAuth(Signup)} />
<Route path="/signout" component={requireAuth(Signout)} />
<Route path="/secret" component={requireAuth(SecretPage)} />

And that’s it. We have made a react-redux app that uses JWT Authentication process.

I attach some links below to repositories which helped me to implement this authorization and to understand a whole process. I hope that this article will help you understand the unclear parts of the authentication process from a front-end point of view.

Other useful links:

Binding.scala is a one-way data-binding library written in Scala. It lets you create reactive user interfaces by writing concise Scala code. In this post, I’ll guide you step by step through the basics, as well as creating a simple dynamic web page. On top of that, I will discuss some undocumented issues I faced, which might be interesting for you if you decide to give Binding.scala a chance in your next project. Read more

Introduction

yoda

This blog post was created to see how Scala.js is holding on and have some fun with programming. I decided to do a simple mini-game using Scala.js and Three.js libraries.

I will explore Scala.js from practical perspective. You’ll see the perks of using typed languages in frontend. We are also going to take a look under the hood and see some generated JS code. Finally I’m going to present some advantages and disadvantages of Scala.js and try to answer the question: Is Scala.js production ready ? Read more

The Problem

In my previous post we have written a simple app with Scala.js. In the end we managed to do everything we wanted to, but as we added more and more code a problem appeared – state management, the real app killer. Although our app didn’t do anything advanced, state handling and UI updates forced us to write a lot of additional code.

That post has shown that Scala.js allows us to write browser apps, but it also demonstrated that these apps can be vulnerable to other ills of frontend programming. To fix this issue we need to simplify our codebase. One way to do that is by adding a binding between the UI and what data our app holds. This way if the data changes in one place it will be automatically propagated to the other. We will implement this using Reactive Extensions. Read more

scala-logo

What is Scala.js?

Scala.js is compiler that targets JavaScript, unlike the traditional Scala compiler which targets JVM bytecode. What it means in practice – with Scala.js you can write Scala code that will be executed in the browser. Read more