Dhruv Dave Logo
/ a-step-by-step-guide-to-creating-a-firebase-project
Resume
Article Image

React-Native

Firebase

How_to

project

A Step-by-Step Guide to Creating a Firebase Project

Basic Step Info

Here are basic but most easy way to implement Firebase and create account.

  1. Open Firebase Console
  2. Create a Firebase Application
  3. Add Android Details
  4. Download and Place google-service.json
  5. Android Files Changes
  6. Add iOS App Details in Firebase App
  7. Download and Place GoogleService-info.plist
  8. Make some changes in a pod file
  9. Install the pod
  10. Make some changes in AppDelegate.m file
  11. Run iOS App to connect with Firebase

Okay i know these steps list make you little bit confuse but those are all step which we are performing now. Let's Start with Every Step details,

Open Firebase Console

  • visit Firebase console to log in from your Google account. if you already have an account then its directly show all your projects. By clicking on Add project you can create new project. it id few step process to create new project.

Google_signin_1

Create a Firebase Application

  • Now you are on Project dashboard and you can see option to add firebase in multiple plateform like Android, IOS and Web. For React Native we will create project in IOS and Android. Let's start with Android Project option. google_signin_example2

Adding Android Details

  • On clicking Android button you will required to fill three(3) field.
  1. Your Application Package Name (required)
  2. Your Application Nick Name (required)
  3. You application Debug signing Certificate SHA-1 (optional)google_signin_example3
  • By clicking on "Register app" you new firebase Project is ready for android.

Download and Place google-service.json

  • To work witih firebase we need to link our application with firebase and for that we are adding google-service.json file in out android folder structure. google_signin_example4

Android Files Changes

  • In next step we are going to add single lines in project/build.gradle and app/build.gradle. those line are already shown. google_signin_android2

Okay now Android related changes are done, now we are moving for IOS related changes

Add iOS App Details in Firebase App

  • for IOS registering process is same as Android we need to add same details for IOS too
  1. Your Application Apple bundle ID (required)
  2. Your Application nickname (optional)
  3. You application App Store ID (optional)google_signin_ios1

Download and Place GoogleService-info.plist

  • You will see the instruction to download and add GoogleService-info.plist into your project google_signin_ios2

    We can add .plist file in two ways

    1. add file using Xcode

    • open project and click on main project dir for options to add file. google_signin_ios3

    • now select the downloaded file, also check copy items if needed and click Add. google_signin_ios4

    • now you can see googleService-info.plist file in list. google_signin_ios5

    1. directly move to folder
    • Go to project_folder -> ios -> move, now clean you project and rebuild it.

Make some changes in a pod file

  • we required to add this two lines in podfile.
pod 'FirebaseAuth'
pod 'FirebaseFirestore'

Install the pod

As we have added a new pod for firebase in the pod file we required to install the pod file and run the following command in your terminal from your project’s main directory, This will install the added pod into our project

// INSTALL POD
cd ios
pod install --repo-update
------ npx ----
npx pod-install

Make some changes in AppDelegate.m file

In the next step in Firebase console and you need to add some additional lines in AppDelegate.m. Please note we have to add Objective-C code but with some changes for React Native. Please see the screenshot below.

google_signin_ios6

okay so we are making some custom change in AppDelegate.m file

  • we need to add dependency in top of the code and few configuration code in that file
#import <Firebase.h>

insidedidFinishLaunchingWithOptions we required to add

if([FIRApp defaultApp] == nil){
 [FIRApp configure];
}

If you have done everything correctly then you will see a green message to notify successful connection google_signin_ios7

Conclusion

  • To add firebase in our application we required a firebase account and inside that account we need to create project for our application.
  • As we want to run in ReactNative we required Android, IOS project
  • For register application we required a package name for both application.
  • All required change are show on creating project time.

Happy Programming!

  • If you found this article helpful, don’t forget to like, comment, share and clap! 👏
Like