In this tutorial I will explain how to use Firebase Authentication for Login and Signup and how to use State Progress Bar to the Sign up page, that’s how your app looks different from other.

Splash Design

So here first of all I have create a splash screen with some coding. Basically it is important to create a splash screen if you are creating an advance label app with Login and Signup system. Where a TinyDB will work. So first of all just create a simple splash screen and add a Clock with Timer Interval of 3000 ms and also untick Timer Always Fires. Now drag a TinyDB and that’s it.

Now see the blocks,

Splash Block

You can see I have created only one function that will happen after Clock Timer Do. Here a tag is required which will Store in the Login or Signup screen, here I named the tag as id, which is saved in Tiny DB. So if a user already registered or signed in from a device then from that device the user don’t have to Login again. This is how this function is work. You can see if the TinyDB value is there in the app on that mobile device then it will go to Home screen and if the mobile device does not have any TinyDB id value then it will go to Login screen.

SignUp Design

So in this screen I have set background colour of this screen as Blue and also the Navigation Bar colour. Now drag State Progress Bar from User Interface and set Elements from Strings as Basic, Photo, Account, Confirm, this is my own strings, you may use other strings. I set State Description Size as 15, you may use all the settings as you want, but remember to test the settings before you publish the app. You have to drag 4 vertical arrangements to create different functions. And also a Footer Arrangement which will be a Horizontal Arrangement and here only a next label button will appear after your user insert every field.
I am not gonna tell you all the vertical arrangements, just see the image below and watch the video tutorial if you dont’ know how to create these.

Basic Arrangement

In the Basic Arrangement, all the horizontal arrangements set as IsCard and Is Rounded Card. And other TextBoxes and others are known to you, if you don’t know then see video tutorial.

In Photo Arrangement I have dragged Image and Image Picker

In Account Arrangement I have dragged 2 Horizontal Arrangements and also Textboxes, one for email and one for password

In the Confirm Arrangement all the required fields will be here as Label form and also a Confirm button, when the button will press then it will call Firebase Authentication for Signup using email and password, and also save the Name and Image of the user.

Now in the Footer Arrangement just drag a Label and set text as keyboard_arrow_right and set font as Material Icons and set the next as invisible.
Set only basic arrangement as Visible and all the other main arrangements as invisible.

Now drag TaifunTextbox, Notifier, TinyDB, Airtable Spreadsheet (if you want to store all the data of a new user to the Spreadsheet) and Firebase Authentication.
To use Firebase Authentication in your app then you have to setup Firebase Authentication, the setup is coming below.
Now see the blocks,

SignUp Blocks

This block and the extension will help to work inscreen text change, and also only when a particular text inserted only then the next will be visible.

This is the Date Picker after function

Here Image1 is in the Photo arrangement and Image2 is in the Confirm Arrangement, and when Image Picker picked then next will be visible

4 procedures will work for 4 State Numbers and process

when next click then all the procedures will happen and also go to the next State

confirm button when clicked then firebase authentication will work for signup

when signup success then TinyDB will store some values and that’s how Splash Screen’s TinyDB will also work, and here I disabled the Spreadsheet store value, you can use this block to store all data to Airtable Spreadsheet, and also when Signup failed then a Reason Message will appear using Notifier

LogIn Design

Now from this way create Log in screen, I am not explaining the design of Log in screen

Drag Firebase Authentication, TinyDB and Notifier

LogIn Blocks

Firebase Authentication Setup

First of all you have to set a Package name of your app, go to Screen1 and set a package name in this format

com.CompanyName.AppName

Now go to Firebase and login to your Firebase account. And click on Add App

click on Android icon

enter app package name and nickname and click on Register

Now click on Download and you will get your unique google-services.json file and click on Next then click on Skip and go to Kodular and upload this .json file to the Assets 

Now go back to Firebase home screen and go to Authentication page and click on Setup Signin Method and enable Email/Password system and done. Now whole setup is finished.

Download AIA

Video Tutorial

Part 1

Part 2