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. :)
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 :)