GSoC 2018 Journey with SCoRe Lab — EPI 3

As mentioned in previous article, here I’m going to explain how I achieved authentication mechanism in ChainKeeper using Firebase Real Time Database and React JS. Before that if you want to refer my previous blog you can check it with following link. :)

Previous EPI

Before going to implementation with firebase I have created several pages to maintain the modularity in the application. Therefore, let’s see the React Router first before diving into Firebase and the authentication afterward.

I have created separate “src/constants/routes.js” file to save constant paths.

export const SIGN_UP = '/signup';
export const SIGN_IN = '/signin';
export const LANDING = '/';
export const HOME = '/home';
export const ACCOUNT = '/account';
export const PASSWORD_FORGET = '/pw-forget';

Then I have created user interface for above routed functionalities. In this article I’m not going to explain how I created those using React JS. Because you can find tons of articles in Google how to do that ;) Then I have created common Navigation bar for the whole application using above create routes. Lets see how it did. For the Navigation bar I created a file called “ src/components/Navigation.js” file.

import React from 'react';
import { Link } from 'react-router-dom';

import * as routes from '../constants/routes';

const Navigation = () =>
  <div>
    <ul>
      <li><Link to={routes.SIGN_IN}>Sign In</Link></li>
      <li><Link to={routes.LANDING}>Landing</Link></li>
      <li><Link to={routes.HOME}>Home</Link></li>
      <li><Link to={routes.ACCOUNT}>Account</Link></li>
    </ul>
  </div>

export default Navigation;

Then I can specify which components should show up according to corresponding routes with the help of the Route component from React Router in our App component.

import React from 'react';
import {
  BrowserRouter as Router,
  Route,
} from 'react-router-dom';

import Navigation from './Navigation';
import LandingPage from './Landing';
import SignUpPage from './SignUp';
import SignInPage from './SignIn';
import PasswordForgetPage from './PasswordForget';
import HomePage from './Home';
import AccountPage from './Account';

import * as routes from '../constants/routes';

const App = () =>
  <Router>
    <div>
      <Navigation />

      <hr/>

      <Route
        exact path={routes.LANDING}
        component={() => <LandingPage />}
      />
      <Route
        exact path={routes.SIGN_UP}
        component={() => <SignUpPage />}
      />
      <Route
        exact path={routes.SIGN_IN}
        component={() => <SignInPage />}
      />
      <Route
        exact path={routes.PASSWORD_FORGET}
        component={() => <PasswordForgetPage />}
      />
      <Route
        exact path={routes.HOME}
        component={() => <HomePage />}
      />
      <Route
        exact path={routes.ACCOUNT}
        component={() => <AccountPage />}
      />
    </div>
  </Router>

export default App;

So far I have created 2 main files called Routes.js (to declare constant routes) and Navigation.js file (to create a navigation bar with routes). Then I have updated my App.js component with specifying how the app need to react with different URLs.

Then I have created Landing page to ChainKeeper application as follows which is the page to redirect if the signup or sign in process complete.

import React from 'react';

const LandingPage = () =>
  <div>
    <h1>Landing Page</h1>
  </div>

export default LandingPage;

As summary, I have created basic application with react ui and react routes. For next EPI I will explain how to get involve Firebase in React Setup.

Stay tuned :)