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.
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,
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.
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.
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,
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
Now from this way create Log in screen, I am not explaining the design of Log in screen
Drag Firebase Authentication, TinyDB and Notifier
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
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 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.