React-Native Firebase Phone Authentication with CRUD Operations and Image Upload on storage

This post is all about authenticating firebase phone number authentication and CRUD operations in your cool new app. In this post, you will learn

• How to implement authenticate phone numberin our app.
• How to perform Firebase CRUD operations in React-Native app.
• How to upload an image on firebase storage

Before start, first you will need a React-Native app to start with, hence you can follow how to create a react-native app for beginnersand start after that from here.

Complete source code of this tutorial is available here — react-native-firebase-phone-auth-CRUD

What is React-Native

React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. In other words: web developers can now write mobile applications that look and feel truly “native,” all from the comfort of a JavaScript library that we already know and love. Plus, because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS.

Similar to React for the Web, React Native applications are written using a mixture of JavaScript and XML-Esque markup, known as JSX. Then, under the hood, the React Native “bridge” invokes the native rendering APIs in Objective-C (for iOS) or Java (for Android). Thus, your application will render using real mobile UI components, not webviews, and will look and feel like any other mobile application. React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user’s location.

React Native currently supports both iOS and Android and has the potential to expand to future platforms as well. In this tutorial, we’ll cover firebase phone authentication and CRUD operations. The vast majority of the code we write will be cross-platform. And yes: you can really use React Native to build production-ready mobile applications! Some anecdota: Facebook, Palantir, and TaskRabbit are already using it in production for user-facing applications.
 The fact that React Native actually renders using its host platform’s standard rendering APIs enables it to stand out from most existing methods of cross-platform application development, like Cordova or Ionic.

Existing methods of writing mobile applications using combinations of JavaScript, HTML, and CSS typically render using webviews. While this approach can work, it also comes with drawbacks, especially around performance. Additionally, they do not usually have access to the host platform’s set of native UI elements. When these frameworks do try to mimic native UI elements, the results usually “feel” just a little off; reverse-engineering all the fine details of things like animations takes an enormous amount of effort, and they can quickly become out of date.

What and why Firebase?

Firebase is a mobile and web application development platform developed by Firebase Inc. in 2011, then was acquired by Google in 2014. Firebase is a toolset to “build, improve, and grow your app”. It gives you functionality like analytics, databases, messaging and crash reporting so you can move quickly and focus on your users.

Today Firebase is one of the fastest-growing platforms for application development. Some of the reasons are

1. You don’t need to write a back-end from scratch. Firebase is a ready-made back-end, with a DB attached to it. You just integrate Firebase SDK in your app and you are good to go.
2. It’s R-E-A-L T-I-M-E 🕺.
   If you are a developer, you understand the importance of a real-time back-end/database in today’s app market. Things like chat, news feeds, ratings, bookings, etc all are very easy if you factor in real-time operations
3. Simple Authentication operations.
   The very first things required in a user-facing application is login/register operations. Firebase handles this very smoothly and with minimum coding effort. You can integrate a number of social authentication services like Facebook, Google etc. with Firebase as well.
4. You get tonnes of additional features in-built e.g. AdMob, analytics, etc 😍😍
5. It’s free, up to a certain usage limit. But this is pretty awesome for developers who are trying things, or making MVPs, or even for small scale app businesses. 🤑

In this article, we will focus on Firebase with react-native— phone Auth with CRUD operations and image upload to firebase storage.

Before we start I assume you have already created a project and ready to integrate the firebase in that. To add firebase in your project you can just follow this tutorial and start from here.

1. Phone Number Authentication — What and why?

Phone authentication allows users to sign in to Firebase using their phone as the authenticator. An SMS message is sent to the user via their phone number containing a unique code.

Using phone authentication is a little more involved as it is a multi-step process which can differ between iOS and Android. The basic flow for phone authentication is as follows:

1. The user enters their phone number
2. Firebase sends a verification code to the user’s phone
3. The user enters the verification code
4. Firebase confirms that the verification code matches and signs the user in

 To start with phone authentication you need to install reat-native-firebase by executing the following command:

npm install --save react-native-firebase
yarn add react-native-firebase

You can follow the official react-native-firebase link for any issue.

 let's start with phone authentication, as I have performed all the actions and checked on android but I will cover for the android an IOS both in this tutorial.

Add the dependency

Android:
Add the Firebase Authentication dependency to android/app/build.gradle:

dependencies {
// ...
implementation "com.google.firebase:firebase-auth:17.0.0"
}

Then, Install the RNFirebase Authentication package
Add the RNFirebaseAuthPackage to your android/app/src/main/java/com/[app name]/MainApplication.java:

// ...
import io.invertase.firebase.RNFirebasePackage;
import io.invertase.firebase.auth.RNFirebaseAuthPackage; // <-- Add this line

public class MainApplication extends Application implements ReactApplication {
// ...

    @Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RNFirebasePackage(),
new RNFirebaseAuthPackage() // <-- Add this line
);
}
};
// ...
}

Now you are all set to use authentications in your app.

signInWithPhoneNumber is a more straight-forward implementation of handling the auth flow, however, it provides less flexibility to handle the various situations which may occur.

i. Trigger phone auth

firebase.auth().signInWithPhoneNumber(phoneNumber)
.then(confirmResult => // save confirm result to use with the manual verification code)
.catch(error => /error);

ii. Confirm verification code

confirmResult.confirm(verificationCode)
.then(user => // User is logged in){
.catch(error => // Error with verification code);

iii. [Android] Handle Auto Verification

To handle auto verification, we need to listen to auth#onAuthStateChanged:

firebase.auth().onAuthStateChanged((user) => {
if (user) // user is verified and logged in
});

Full Working Example:

Logics here:

View here:

Here I have divided my login flow into three different parts as:

1. LoginContainer contains the logic part

2. LoginView Contains the View Part and 

3. LoginStyles contains the CSS of the page

Styles here:

Now you are all set to take the taste of phone authentication in your cool react-native app. Here I have used the latest react-native version 0.60.4. If you get any issues just clone my repository with the link provided above.

Complete source code of this tutorial is available here — react-native-firebase-phone-auth-CRUD 

2.CRUD Operations in react-native application

Before you start, you need to add Firebase Firestore in your app.

Add the dependency

Add the Firebase Firestore dependency to android/app/build.gradle:

dependencies {
// ...
implementation "com.google.firebase:firebase-firestore:19.0.0"
}

Install the RNFirebase Firestore package

Add the RNFirebaseFirestorePackage to your android/app/src/main/java/com/[app name]/MainApplication.java:

// ...
import io.invertase.firebase.RNFirebasePackage;
import io.invertase.firebase.firestore.RNFirebaseFirestorePackage; // <-- Add this line

public class MainApplication extends Application implements ReactApplication {
// ...

    @Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RNFirebasePackage(),
new RNFirebaseFirestorePackage() // <-- Add this line
);
}
};
// ...
}

Then,

Enable multidex:

Adding Firestore to your Android app requires multiDexEnabledto be set totrue in android/app/build.gradle:

//..
android {
//..

  defaultConfig {
//..
multiDexEnabled true  // needed for firestore:
}
//..
}

Now you're all set to store and retrieve data in firebase Firestore.

1.Create

You will need to add the createDatabse() method to persist an item collection in the Firestore database:

createDatabse(){
firebase.firestore().collection('collection name').add({.....your data})
}

2. Read

You will need to add the readDatabse() method to retrieve the available item from the Firestore collection:

readDatabse() {
return firebase.firestore.collection('collection name').onSnapshot((data)=>{console.log(data)});
}

3. Update

Next, you need to add the updateDatabse() method to update an item data by its identifier:

updateDatabse(docId){
firebase.firestore.doc('collection name/' + docId).update({data to update});
}

Here, docId is the particular id that you get while fetching data from the Firestore, with this docId you will be able to update a particular doc from the list of docs.

4. Delete

Finally, you can add the deleteItem() method to delete an item by its identifier:

deleteItem(docId){
firebase.firestore.doc('collection name/' + docId).delete();
}

The complete working example is here:

Complete source code of this tutorial is available here — react-native-firebase-phone-auth-CRUD and image upload

3 Image Upload in react-native-firebase storage

Add the dependency

Add the Firebase Storage dependency to android/app/build.gradle:

dependencies {
// ...
implementation "com.google.firebase:firebase-storage:17.0.0"
}

Install the RNFirebase Storage package

Add the RNFirebaseStoragePackage to your android/app/src/main/java/com/[app name]/MainApplication.java:

// ...
import io.invertase.firebase.RNFirebasePackage;
import io.invertase.firebase.storage.RNFirebaseStoragePackage; // <-- Add this line

public class MainApplication extends Application implements ReactApplication {
// ...

    @Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RNFirebasePackage(),
new RNFirebaseStoragePackage() // <-- Add this line
);
}
};
// ...
}

Now you are all set to upload images on firebase Firestore and update that too. In the above gist, I have used a function uploadImageTask() . In this function, I have uploaded an image to my firebase storage and received the URL and saved that to my database. In uploadImageTask(), we have used default javascript function decodeURI(imageURl).

Here, The decodeURI() function is used to decode URI generated by encodeURI(). Parameters: This function accepts single parameter complete_encoded_uri_string which holds the encoded string. Return Value: This function returns the decoded string (original string).

Here all the functions are tested on android and to make it working in IOS please follow the IOS Setup from thereact-native-firebasedocumentation.
Once you setup then you can execute all the above functions or you can clone the repository.

 You can follow all the steps and achieve this very easily or you can clone my repo on Github 

Complete source code of this tutorial is available here — react-native-firebase-phone-auth-CRUD and image upload 😎 😎 😎 🕺 🕺 🕺..…

Conclusion

In this post, we learned how to integrate firebase phone auth with CRUD operations and image upload to the firebase storage. Since all the integrations are somehow tricky because of react-native stability but it has great documentation, if you face any issue please do ask me on our discuss section.

Complete source code of this tutorial is available here — react-native-firebase-phone-auth-CRUD and image upload