How to Make a Login and Sign Up Application in MIT App Inventor using Firebase?

Prerequisite: Welcome to The Modern Android App Development

Hello geeks, today we are going to make a very basic level login and sign up the application using MIT App Inventor and we will learn that how we can connect MIT App Inventor to Firebase and store data which we have collected from the user. And using that data we can detect that username and password of the user exist on our database or not.

Basic Terminologies Used

• MIT App Inventor: MIT App Inventor is an intuitive, visual programming environment that allows everyone even children to build fully functional apps for smartphones and tablets.  
• Firebase: Firebase is an open-source platform(real-time database) developed by Google so that developers can use it to store the data of applications and implement their work easily.

So, after knowing about these basic terminologies firstly we will see how to add a project on firebase so that we can collect data of our application in that project.

To Add a Project on Firebase

Step 1: Open the portal https://firebase.google.com/ and create or open your account.

Step 2: After creating an account click on go to console, and such a screen will appear.

Step 3: Click on Add project > give your project a name > click on continue > click on create project. 

Step 4: Such screen will appear so select real-time database from the sidebar

Step 5: After selecting a real-time database new screen will appear. Click on create database > next > enable.

Step 6: On-screen different options will appear so click on rules so that we can make changes to them as per our requirement. After that use the following code.

{
 "rules": 
 {
   ".read": true,
   ".write": true
 }
}

After using the following code click on publish. And we are done with our work on firebase.

Working on MIT App Inventor

Step 1: Open the portal http://ai2.appinventor.mit.edu/ and create a new project. Name it according to your convenience.

Step 2: While designing your application follow the following steps.

Step 2.1: Select Vertical arrangement from the palette and add other components to it as shown below.

Step 2.2: Now go to properties of VerticalArrangement1 and uncheck the property visible from it. And then the screen will become blank.

Step 2.3: Drag a new Vertical Arrangement from the palette and design it as shown below.

Step 2.4: Now go to properties of VerticalArrangement2 and uncheck the property visible > go to properties of VerticalArrangement1 and check property visible.

Note: Do not forget to add Firebase from the palette to VerticalArrangement1 as we have to use firebase to store data from here.

Step 3: Go to blocks, where we have to write the logic for our application. Use the logic as shown below.

Now we are also done with the MIT App Inventor designing and blocks part, now let us see that how we can connect Firebase(our real-time database) to MIT App Inventor. Connecting Firebase with MIT App Inventor.

Step 1: Go to your Firebase Realtime Database and copy the link as shown below

Step 2: Select FirebaseDB1 in MIT App inventor and in its properties paste the link which we copied above.

Congratulations! You have successfully made the login and signup application using Firebase. And here is the output of our application.

Output:

When the user clicks on sign up its data is sent to Firebase where we can check that while the user logs in then the data exists in our database or not if data exist then login is successful otherwise “Incorrect Username or password” message is displayed. Here you can see that when the user clicked on the sign-up button data came to our Real-time Database(firebase).

Hence, we made an application which uses firebase for realtime updation of data and user can easily login through it.