React with Firebase Authentication
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.
Firebase Authentication can provide us more convenience to manage user. if you want to explore more check at Firebase.com
I appreciated all cup of coffee. you can donate coffee at button below.
And if you want to run my code just check it here.
See you on next article, enjoy coding.