Firebase Integration

a) Create a Firebase Account

Create a Firebase account and then gain access to your own Firebase Console. A Firebase account can host multiple Firebase Projects that can host multiple mobile apps.

b) Configure a Firebase Project

Create a mobile app project in Firebase for each app that you are planning to publish. If you are publishing to both iOS and Android, you will need to create separate apps in Firebase, since technically they are different apps.

If you want your Flutter app to run on both iOS and Android, then you need to create a different mobile app for each (in Firebase). Simply click on the “Add App” button.

After you select the platform (iOS or Android), you need to provide the app’s identifier. Depending on which Flutter template you’ve purchased. Find the correct identifier in the files you’ve downloaded

for Android, go to android/app/build.gradle and get the applicationId

for iOS, open the app in Xcode and locate the Bundle ID field in the project’s configuration

Once you have the bundle ID, just use it in Firebase, add your sha1 or sha256 key (For Mobile verification) and create the app.

c) Enable Firebase Authentication

To enable Firebase Authentication, go to Firebase Console -> Authentication -> Sign-in Methods and enable the methods that you are going to support in your app. By default, our Flutter apps have integration with Email/Password, Phone, and Facebook.

For Facebook log-in, you’ll also need your Facebook App ID. You can add that later when you set up Facebook.

d) Enable Firebase Firestore

To allow the mobile app to read and write data to/from Firebase Firestore, set up the correct access permissions. To do that, just head over to Database -> Cloud Firestore and set the Rules for writes and reads to the public.

service cloud.firestore
{match/databases/}database},/documents {match/{document=**}, {allow read, write: if true;}, }, },

e) Enable Firebase Storage

If your mobile app needs access to Firebase Storage (e.g. for uploading photos and videos, for instance), you have to enable Firebase Storage, so that the functionality works properly. To enable it, just go to Storage in the left menu.

service cloud.firestore    
{service firebase.storage {match /b/{bucket}/o {match /{allPaths=**} {allow read, write: if request.auth != null; } } }

f) Link Firebase Account to Your Mobile App

Once you’ve created the app, Firebase will generate a configuration file name(for android google-service.json and for ios GoogleService-Info.plist). You have to add this file to your Flutter app. This is how the Flutter app can use your own Firebase backend. To do that, just download the configuration file and replace the existing mock files:

iOS: Download the GoogleService-Info-plist file and override the
existing ios/NameOfApp/GoogleService-Info.plist file.

Android: Download the google-service.json file and replace the
existing android/app/google-service.json file.

Add those files in all three apps as mentioned.

If you already have an app in Firebase, you can find and download this configuration file in Firebase Console -> Project Settings.

Run your brand new Flutter template, the mobile app will use your own Firebase backend, as opposed to our default one. Make sure you add all the tables and the required data in your Firebase so that the app will have items to display (e.g. food categories, chat messages, etc.). To quickly test the Flutter firebase integration, try registering a new user and see if they show up in Firebase -> Authentication tab.

g) Enable SMS Phone Authentication

To enable SMS authentication with Firebase, there are a few things we need to configure, that will allow the app to send SMS to the users.

Enable Phone Authentication in Firebase In Firebase, go to Authentication -> Sign-in method -> Phone Authentication and check the Enable switch.

Setting up

In this module, we are going to outline how to configure your Flutter development.

Install Basic Flutter Development Tools

View the Flutter Installation Guide to know about basic flutter development.

Create Firebase project

Step 1: Go to firebase console using this link Firebase

Step 2: Click on “Go to console” in the top right corner.

Step 3: Click on “Add project”, it will redirect you to the new project creation page Enter your project name and click on “Continue” again click on “Continue” after that select “Default Account fo firebase” and then click on “Create Project” See

Step 4: After creating a new project it will redirect you to the overview page on this page click on icons like

It will redirect you to the “Add Firebase to your web app” page enter your app nickname and click on “Register app” after clicking on it scroll down you can see details like below

You can add these firebase project details in the project’s .env file.

Step 5: After that click on “Firestore Database” in the left sidebar and select your project name from the drop-down and click on “Create database”

Step 6: Select the preferable option for you and click on the Next button then click on “Enable”.

Step 7: Firstore Database Rules Update.

All the necessary Firebase Functions have been initially coded by us, you just need to deploy these functions to your own Firebase account. This means that you need to upload the source code inside the FirebaseFunctions folder to your account. If a Firebase account has been created, find a Firebase project, and 2 apps (iOS and Android).

Follow these steps for setup

Step 1: Setting up Node.js and the Firebase CLI

• Use the official Firebase doc if you encounter any issues.
• Node.js and Firebase CLI is needed to write functions and deploy them to the Cloud Functions. Install Node.js and npm, Node Version Manager. After Node.js and npm are installed, install the Firebase CLI. Use: npm install -g firebase-tools, to install the CLI via npm.

Step 2: Initialize your project

An empty project containing sample code is created when you initialized Firebase SDK for cloud functions.

For initializing the project:

• Authenticate the firebase tool by running the firebase login via browser
• You need to create a new “MyFirebaseFunctions” empty folder
• Go to the MyFirebaseFunctions project directory and run firebase init functions
• With the tool, you can install npm. Before emulating or deploying your functions, you’ll need to run npm install
• The tool gives you two options for language support:
  • – JavaScript
  • – TypeScript
• Please select JavaScript.

During initialization, package.json file is created that contains an important key: “engines”: {“node”: “12”}. Make sure it is Node.js version 12, before writing and deploying functions.

Step 3: Adding Foodie Functions

As we are providing the full source code for your Firebase Functions, all you need to do is add that source code into your newly created MyFirebaseFunctions project. Follow these steps to proceed:

• – In the Foodie’s FirebaseFunctions folder, copy the “functions” subfolder to the clipboard.
• – Paste it to MyFirebaseFunctions folder, and OVERRIDE the functions folder. Now you have a Firebase Functions project, that is linked to your Firebase account with our source code that works on the mobile app

Step 4: Deploy Firebase Functions

To deploy Firebase Functions, you need to make sure you upgrade your Firebase Pricing Plan to Blaze.

Simply run the command (firebase deploy –only functions) in the project directory

Now you can go to your Firebase Console and check, as the functions have been deployed. It is possible to see the logs for each function, understand the output, and know when it gets called.

Step 5: Watch Firebase Functions for Errors

To run properly, some Firebase functions need the creation of indexes on certain Firestore collections. Use the app and watch the logs for the Firebase Functions in the console. If you happen to get an error of missing index, simply click on the URL of that error, and the index will get created automatically. There is no need to deploy functions again, but wait until the index is created, before testing the app again.