React with Firebase Authentication

Published in

Medvine Tech

3 min readDec 5, 2018

Your might heard the world React and Firebase but don’t know with it is exactly. so today I will explain to you and demonstrate with authentication example. so let get started.

What about React?

React is very popular on web technology world. React create by facebook. they focus is create single page application for purpose try to give more user experience for user when user visit website. if you notice the facebook feed. you can see last update of your friend without refresh web browser. also notification that will popup without you doing anythings. that the power of react.

What is Firebase?

The easy way to explain is firebase is a platform develop by google. they provide a backend service for easy to start building web application without worry about server or service behind the scene. firebase have feature like Realtime database, push notification, firebase analysis, firebase cloud message etc. but today we will focus on service that provide authentication for us. Firebase authentication.

Prepare for working.

Before getting started. make sure you have this following list installed

Npm or Yarn
Nodejs

Install create-react-app by use this command

npm i create-react-app -g

Then create react project by using command

# create-react-app <project_name>
create-react-app firebase-auth

We will use Bootstrap for front-end. we add bootstrap by command

npm install bootstrap --save

And on top of index.js file. we import bootstrap so we can use it in our app

import 'bootstrap/dist/css/bootstrap.min.css';

Install react-router-dom for create path and link to controll pages.

npm install react-router-dom --save

And install firebase

npm install firebase

Let Coding

File structure should be like this.

Split App.js Code to difference component for easy to maintain by start with create navbar.js

Then we import navbar to App.js by put at the top of App.js file

We use <Route> for control path that got from url. it will show component that we setup. that why we need to create Login and Register component for render it.

On register process. we create input field and when we type on that field. we need to setState on function inputHandle so we can get value from it. after that when we submit it will trigger register function. that function will register our user on firebase authentication and when register success we will render component ShowProfile.

This is result of register process.

Ok, register working so we do login process next. by create Login component.

This similar with register process. we setState of input field and when user click login will trigger Login function. that we will set state and send user to showProfile pages.

And this is result when login.