Firebase and DialogFlow with React Native made easy (Part 2)

How to integrate Firebase Authentication in your React-native app

Hello awesome developers! Welcome back to the second part of the tutorial series. If you haven’t checked out the first part, I highly recommend you to check out the first part from here. So in this post, we will learn how to integrate Authentication functionality provided by Firebase in our react-native app.

So without further ado let’s get started.

First, we need to make a Firebase account. So go to http://firebase.google.com and click on Get Started and then sign in with your Google account.

Firebase Home Page

After signing in you with your Google account you will see a page like this

Click on Add Project.

After that, we need to give our project a name. So I am giving the name ChatApp but you can give any name of your choice.

Step 1 of 3

Hit the Continue button and then just follow the basic steps shown in the pictures below.

Step 2 of 3

Remember to change to Default Account of Firebase (if not ) in Choose or Create a Google Analytics account under the Configure Google Analytics.

Step 3 of 3

Finally, click the Create Project button and finally you will be navigated to your console window!

Console window

Now with our account set up, we can start adding the Authentication functionality in our app. We will integrate Email Authentication in our react-native app.

So for using the Email Authentication we will have to create a firebase app. So click on the web-app icon under Get Started by adding Firebase to your app in the console window.

After clicking the web-app icon we need to give our Firebase app a nickname. I have given ChatApp as the name of our Firebase app.

Click Register app.

The information about our Firebase app which we have just created is present in the firebaseConfig object. We will pass this firebaseConfig object in our react-native app.

Copy the firebaseConfig object and click Continue to console. As said before we need to pass this FirebaseConfig object to our react native app. But before doing that we first need to install firebase dependency in our react-native app. So fire off your terminal and install the Firebase:

npm i --save firebase

Now in the Login screen of our app, add the Firebaseconfig object that we copied before. We also need to change a little bit of code in the Login screen. So finally our code in the Login.js will look like this:

import React, { Component } from 'react';
import { Container, Content, Form, Item, Input, Label, Button } from 'native-base';
import { Text, Alert } from 'react-native';
import * as firebase from 'firebase';
var firebaseConfig = {
apiKey: "<YOUR API KEY>",
authDomain: "<YOUR AUTH DOMAIN>",
databaseURL: "<YOUR DATABASE URL>",
projectId: "<YOUR PROJECT ID",
storageBucket: "<YOUR STORAGE BUCKET>",
messagingSenderId: "<YOUR MESSAGING SENDERID>",
appId: "<YOUR APP ID>",
measurementId: "<YOUR MEASUREMENT ID>"
};
if(!firebase.apps.length){
firebase.initializeApp(firebaseConfig);
}
export default class Login extends Component {
constructor(props){
super(props);
this.state = {
email : '',
password : '',
}}
static navigationOptions = {
title : 'Login',
}
loginUser = () => {
try{
firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password).then((user) => {this.props.navigation.navigate('Home');})
}
catch(err){
console.log(err.toString());
}}
signUpUser = () => {
try{
if(this.state.password < 6){
Alert.alert('The password length is less than 6');
}
else{
firebase.auth().createUserWithEmailAndPassword(this.state.email, this.state.password);
this.props.navigation.navigate('Home');
}}
catch(err){
console.log(err.toString());
}}
render() {
return (
<Container>
<Content>
<Form>
<Item floatingLabel><Label>Username</Label>
<Input
onChangeText = {email => this.setState({email : email})}
placeholder = 'Username'
value = {this.state.email}/>
</Item>
<Item floatingLabel last><Label>Password</Label>
<Input
secureTextEntry
onChangeText = {password => this.setState({password : password})}
placeholder = 'Password'
value = {this.state.password}
/>
</Item>
<Button
onPress = {() => this.loginUser()}
style={{marginTop : 40}}
full dark block><Text style={{color:'#fff'}}>Login</Text>
</Button>
<Button
onPress = {() => this.signUpUser()}
style={{marginTop : 15}}full dark block><Text style={{color:'#fff'}}>Register</Text></Button>
</Form></Content>
</Container>
);}}

In the code, we have added the loginUser and signUpUser functions and we have also created a state for storing the email and password input by the user. Inside the login and sign up functions we are doing nothing special. We are just using the default authentication functions provided by Firebase like for example in the loginUser function we are using firebase.auth().signInWithEmailAndPassword function for signing user in.

Now we need to tell the Firebase app that we are going to use Email Authentication. So in your console window click on Authentication in the left sidebar under the Develop section:

In the Authentication click on Set up sign-in method.

Under the sign-in providers click on the Email/Password.

Enable the Email/Password authentication and hit the Save button.

And finally, the Authentication in our app is fully functional :). A user can now log in and Register in our app!

So in the coming last part of the tutorial series, we will learn about the DialogFlow fulfilments and see how we can use DialogFlow with the Firebase app created by us here and to integrate DialogFlow and use Firebase database in our react-native app.

I just wanted to share a side note that using Firebase and seeing its terms may seem overwhelming at first for a beginner and you may feel like :

But believe me, after your first hands-on you will get that Firebase is really very easy to use.

If you are liking this tutorial series do let me know with your claps and if you want to give any suggestion please mention down in the comments. So Bye-Bye and see you all until next time!