Skip to main content

Firebase Integration

info

Currently, this feature is not available on app.dhiwise.com. Stay tuned!

Implement backend service Firebase in your app and help your app run more effectively with it.

Create a service account in Firebase

To access Firebase, create a Firebase service account while developing your Flutter app on DhiWise and connect it to DhiWise. Your Firebase service account only gives access to store and retrieve information from and to the Firebase. Learn more.

How to setup a service account in Firebase

Sign in to your Firebase account, once you sign in follow the below steps:

Step 1:

Click on Go to console.

Create your Project by following all the necessary steps, and once you reach the Project’s dashboard, follow the below steps to proceed further.

Step 2:

Click on the Project Overview settings icon > Project settings > Service accounts.

Step 3:

Under Service accounts, choose Node.js then click on Generate new private key.

Step 4:

You will get a popup with the below warning and the option to generate the key.

caution

Your private key gives access to your project's Firebase services. Keep it confidential and never store it in a public repository.

Step 5:

Click on Generate Key.

info

The downloaded file is in JSON format which you can upload on DhiWise. After that, you won't need to write any code, just check the appropriate check box on the DhiWise platform.

Now, you can upload these downloaded files in DhiWise, and proceed further easily.

Firebase Authentication

Authentication helps in accessing and keeping your data secure. Firebase Authentication provides backend services, easy-to-use SDKs, and ready-made UI libraries to authenticate users to your app. It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more.

How to setup Firebase authentication

Step 1:

Log in to your Firebase account. Once logged in, go to the left-hand control panel and click on Build > Authentication.

Step 2:

Click on Sign-in method. Select and enable the type of sign-in or authentication that you want for your application.

Select a sign-in method and setup as mentioned in Firebase.

At this stage, you have successfully enabled Firebase authentication in Firebase.

Use Firestore rules to secure data

Cloud Firestore Security Rules allow you to control access to documents and collections in your database. The flexible rules syntax allows you to create rules and also track them match anything, from all writes to the entire database to operations on a specific document.

How to setup Firestore rules file

Step 1:

Log in to Firebase, go to Project overview > Build > Firestore Database

And click on Create database

Step 2:

Once you click there, you will get a dialog to create a database and ask you Secure rules for Cloud Firestore

After you define your data structure, you will need to write rules to secure your data. Learn more.

info

Production mode: All third party reads and writes will be denied.

Test mode: The default security rules for test mode allow anyone with your database reference to view, edit and delete all data in your database for the next 30 days.

Click Next, once you secure rules for cloud firestore.

Step 3:

Next, you need to Set Cloud Firestore location, here select your Cloud Firestore location and click Enable.

As you can see, your rules file is generated.

At this stage, you have successfully added Firestore.rules file in Firebase.

Integrate Cloud Firestore

Cloud Firestore is a cloud-hosted, NoSQL database that your Flutter app can directly access and use even more effectively. Integrate it easily in your Flutter app using simple steps in DhiWise.

How to integrate Cloud Firestore

In your DhiWise application dashboard select Cloud Firestore Integration from the left.

For integrating Cloud Firestore there are mainly 3 simple steps to follow, as below;

Step 1: Select option: Sync with Firebase or create new schema.

To sync Firestore data, simply click on “I have already created tables in Firestore. I want to use them” under the select schema data or click “I don’t have available schemas in Firestore. Create new schema” to create new schemes.

info

There's no need to upload the JSON file or authenticate the Firestore account when creating a new schema.

Step 2: Authentication: Upload your private key JSON for authentication

Upload your Firebase service account's JSON key file. This will link your Firebase account to DhiWise and allow you to access your Firebase schemas for your application. Learn more.

Step 3: Collection: Retrieve a collection from Cloud Firestore

All of your Cloud Firestore collections are retrieved to use in your application. You can also add more collections by clicking on the ➕️ symbol. Similarly, by clicking on the ➕️ icon under the respective collections, you can add attributes to your current collection.

Supported data types in collections are:

String | Number | Boolean | Map | Array Null | Timestamp | Geopoint

Step 5: Cloud Firestore rules: Add rules in individual collection

Select the corresponding CRUD checkboxes in the collections list to provide CRUD permission to Authenticated users, then click Save.

Authenticated users will have access to only the permissions they have selected.

Next, click on Save to save your Cloud Firestore integration.

At this stage, you have successfully integrated Cloud Firestore into your application.

Integrate Firebase to your app

Firebase provides a back-end server, a great database and solution for analytics, and useful integrations with other Google products. Also, it is free and affordable to use and set up. A wisely designed backend solution for your app guarantees scalability and data security. Create your app’s backend even faster and in easy steps by integrating Firebase to your Flutter app in DhiWise.

info

You must have the Cloud Firestore integrated into your app. To know how to get one click here.

How to setup Firebase

Step 1:

Choose the screen you wish to integrate Firebase for, from the list of screens.

Step 2:

Next, go to the widget you want to add integration, and from the suggestion box for the onClick property, choose Firebase integration, which will take you to its integration screen. Where you will be asked to Enter function name. Enter the name of your function and click Submit.

info

The given function name will be generated in the code.

Step 3:

After submitting the function name, you will be asked to select a type of Firebase integration.

  • Query - To fetch data from Firebase.
  • Store - To upload data to Firebase.

Step 4:

Select the collection you want to use for your integration for Please select a collection you want to use from the list of collections available in your Firebase account.

Step 5:

Select type of integration

TypeDescription
SingleUsed to fetch a single record from the database
MultipleUsed to fetch multiple records from the database
note

For Multiple type, you need to set data limit, order by, and order

Step 6:

Bind your screen’s view component or widget directly with your Cloud Firestore database to retrieve and display data in it.

You can Handle request inputs in four ways:

  • Select operator for comparison before moving forward.
TypeDescription
ViewSelect any component from your app design.
ConstantSelect a constant you've created in your app. Learn more
Get from preferenceSelect from stored data preference from API integration.
Navigation argumentSelect data that's been passed from one screen to another. Learn more

Step 7:

Handle response

TypeDescription
ViewSelect any component from your app design.
Save to preferenceStoring the data to preference.

Select 8:

Handle action Select the action you wish to take, once the Firebase call has either been accepted successfully or refused due to a mistake.

On success

1. Show alert
2. Navigation

On error

1. Show alert
2. Navigation


At this stage, you have integrated Firebase into your application!



Got a question? Ask here.