Google & Email Login With Firebase Authentication in Kodular

Login system in your app is the basic of your app to make your App dynamic and user friendly. so here today we are going to learn how to implement a login system in your app with email as well as Google direct sign in using firebase authentication component in kodular apps.

 So Let;s Start:

Also Read: Paytm System in Kodular Without any Extension.

Download Demo Apk : Click Here.

Download Demo Aia File: Click Here.

Firebase Console Setup:

So Firstly let us set up our project in firebase console and do the necessary changes to make the login system works.

1. Go to your firebase console and create a new project. Open existing project if already created.
2. While creating your project you will get Google services JSON file,  download it and upload it’s your Kodular assets folder.
3.  At the homepage of firebase console,  go to to authenticate section & under that go to “sign in method”.
4. under sign in method  enable Google sign in as well as email password sign in option by clicking on the right  icon.

Submitting SHA1 Key to Firebase for Google Signin : 

So to make Google Sign In system work perfectly in your App you have to submit your SHA1  key to firebase project under your app package.

1. Firstly go to Tu kodular and open your project. at the top right side you could see an account I can click on that and go to settings.
2. Under settings scroll down and find your SHA1 Keystore for your app & Copy it.
3. Come back to your firebase console,  open the settings of your firebase project. 
4. Under settings you will find a SHA1 certificate fingerprint option under your apps package.
5. Simply click on add certificate and paste your SHA1Key that you have copied from your Kodular.
6. Finally save it and you are also with all of your firebase console setup.

Working With your Kodular Project: 

  let’s start working with your project in Angular and integrating firebase authentication login system in your app with direct Google sign in and Manual email password sign in option.

Designer Part: 

Under designer section you have to create 4th screen which will include  the following screens: 

• Welcome screen
• Login screen
• Sign up screen
• Your apps homepage screen

Welcome Screen: 

Create a Simple but good Welcome Screen Where user will get an option to choose between Email Sign In Or Google Sign In. As you can see welcome screen in the above image.

Login Screen :

In Login Screen take Two TextBox, So that user can fill the Email and Password for his email and further click on the Login Button to login to his Account. Also add A Label below the Login button to create a New Account if user is not yet registered with your app. Refer the Screens Images above.

Signup Screen :

In Sign Up Screen all the things will be same as the Login Screen, just you have to add an Additional TextBox for user to input password for second time as Confirming both the Password input by user is same. Refer the Screens Images above.

Home Screen :

Home Screen is screen which will be fully developed by you as per your Application Usage and Setup, to which user will get access after login.

Blocks Part:

 Welcome Screen:

Google Signin Setup:

Login Screen: 

Signup Screen: