IS2023 Mobile Application for Business
Tutorial 4 Kodular – Google Firebase Authentication
This tutorial will explain the use of the "Firebase Authentication" component in your apps and its
utilities.
This Tutorial Introduces:
• Firebase Authentication is a Google Firebase service that allows users to log in and sign
up for your app. You can have a login service for free with this component/service.
• Video: https://www.youtube.com/watch?v=8sGY55yxicA&t=1s
Part I: Setting up App Testing Environment:
1. To test this exercise on an emulator or on your Android device, you must first install
the .apk file.
2. This can be done by dragging and dropping the .apk file directly into the emulator window.
3. Once the file is dropped, the emulator should automatically proceed with the installation.
4. Alternatively, scan the Kodular-generated QR code to download the .apk file to your
physical Android device.
1|P a g e
IS2023 Mobile Application for Business
Part II: Input the Project Template:
Download T4_sign_up_template.aia file from the Canvas week 4 folder, save the file to
Desktop.
On Chrome/Firefox, go to the website: https://www.kodular.io/
1. Sign in with your Google account.
2. Import T4_sign_up_template.aia project.
3. Please note that Screen1 contains both visible and hidden components, click on the eye
icon to reveal the hidden components.
2|P a g e
IS2023 Mobile Application for Business
Part III: Firebase Configurations:
Add your Kodular APP to Firebase Console:
1. First, go to your Firebase console . (https://console.firebase.google.com/ )
2. Login / Signup with Google / Gmail account.
3. If you are a new user, click “Create a project” button.
3|P a g e
IS2023 Mobile Application for Business
If you are a returning user and have no existing projects, click 'Add project' button. If you have
existing projects, select one to continue working on it.
Example screenshot illustrating the reuse of an existing project.
4|P a g e
IS2023 Mobile Application for Business
For new user:
Create a project (Step 1 of 3).
Input a name for your new project, i.e., is2023.
Check the terms checkboxes and click the “Continue” button.
5|P a g e
IS2023 Mobile Application for Business
Note: If you've reached the project limit, please go back to choose one of your existing projects.
6|P a g e
IS2023 Mobile Application for Business
Remember NOT to enable Google Analytics!
7|P a g e
IS2023 Mobile Application for Business
You are now in your Firebase Project dashboard.
Click on the Project Overview “settings” icon and select “Project settings.”
8|P a g e
IS2023 Mobile Application for Business
On “Your apps” section, click the “Android icon” to select the Android platform.
9|P a g e
IS2023 Mobile Application for Business
We need to find the name of the Android package from our Kodular project.
Go back to Kodular, click on the setting icon, choose the Project settings>Publishing.
Give a name for the Package and then Copy that Package Name. i.e., com.is2023.auth
10 | P a g e
IS2023 Mobile Application for Business
Paste it back to Google Firebase Console's “Android package name.”
Click the “Register app” button to move on to the next step.
Click the “Download google-services.json” button (it contains keys and identifiers), then click the
“Next” button.
11 | P a g e
IS2023 Mobile Application for Business
Then simply scroll down and click another “Next” button.
12 | P a g e
IS2023 Mobile Application for Business
Click “Continue to Console” button.
Now you are back to the “Project Settings” page with an “Android apps” created under “Your
apps” section.
13 | P a g e
IS2023 Mobile Application for Business
Import/Upload the google-services.json to the Kodular Assets Manager folder.
Note: The file name much be exactly as “google-services.json”, no more no less!
14 | P a g e
IS2023 Mobile Application for Business
Enable login methods.
Back to the Firebase project, expand the Build menu, click Authentication, and click the “Get
started” button. (Or click the Sign-in method if you are a returning user.)
Under the “Sign-in method” tab, click the “Email/Password” methods.
15 | P a g e
IS2023 Mobile Application for Business
We will enable the Email/Password sign-in method. And then click the Save button.
Check out the Users tab, and you have no registered users yet.
16 | P a g e
IS2023 Mobile Application for Business
Back to Kodular to complete your Login system.
17 | P a g e
IS2023 Mobile Application for Business
Create the blocks for the btnSignUp event handler, NOT the btnLogin blocks. They may be
hidden!
18 | P a g e
IS2023 Mobile Application for Business
These two blocks will handle the case where the sign-up process either succeeds or fails. If
successful, the user is redirected to another screen named 'Screen2'. Otherwise, a label and a
notification are used to inform the user that the sign-up has failed.
19 | P a g e
IS2023 Mobile Application for Business
Manually add a Screen2.
You can now perform a live test of the sign-up process.
Export the Android App (.apk) file.
20 | P a g e
IS2023 Mobile Application for Business
Click Create Account to open the Create Account layout.
Email: should have the @ symbol and .com
Password: should have at least 6 chars.
After successfully testing the sign-up feature on your phone/emulator, return to the Firebase
Project Console to check your Users' records. You should see a new user added.
21 | P a g e
IS2023 Mobile Application for Business
Now create the three blocks related to the login process.
Look for the btnLogin component and open it’s drawer, to drag out the button.click event handler.
22 | P a g e
IS2023 Mobile Application for Business
When the login button is clicked, the blocks will check whether the username and password input
fields are empty.
If they are filled, the Firebase Authentication 'EmailPassword Login' block will be asked to verify
the credentials.
If the credentials are correct, the user is forwarded to 'Screen2' with a start value that includes
the user's email address.
If the login fails, an error message will be displayed using both a label and a notification.
23 | P a g e
IS2023 Mobile Application for Business
Live Test:
Fill the text boxes with your previously registered user email and password, then click the
'Login' button.
To fully test the authentication features, you should also try using an incorrect
email/password combination.
24 | P a g e
IS2023 Mobile Application for Business
Part IV: Submitting your work.
To submit your work for Tutorial 4, please adhere to the following instructions:
1. Capture screenshots of the following elements:
• The block's view on Screen1, ensuring that your name and student ID are clearly
visible.
• The Publishing tab in the Kodular project settings.
• The google-services.json file content.
2. Proceed to the designated location on Canvas, specifically the "Tutorial 4 Submission
Link."
3. Upload the snipped screenshots to the provided location.
4. The deadline for submission is one week from today.
Done!
Reference:
https://community.kodular.io/t/guide-how-to-use-firebase-authentication-on/80436
25 | P a g e
