[Guide] How to use Firebase Authentication :google: :firebase: on :kodular:

Hello Koders! In this guide, I’m going to explain how to use the “Firebase Authentication” component in yoour apps and it’s utilities. I hope you find it useful :wink:

What is Firebase Authentication?

Firebase Authentication is a :google: :firebase: service that allow your users to log in and sing up into your app. Basically, you can have a login service for free with this componet/service.
You don’t need any extension, because :kodular: already have it.

How to add it?

It’s simple. Go to the :google: section on your designer and drop the component to your screen.

Configure it…

Firebase Configurations

1. Add your APP to Firebase

First, go to your :firebase: console. Select your APP project. (If you don’t have it, create one. Remember not to enable Google Analytics)
To create your APP, click on the Android Logo :android:, and complete ALL THE STEPS. The SHA-1 key is in your Account Settings :gear: at the top right of your creator.
Then, upload your google-services.json file to your app assets

2. Enable login methods

Go to AUTH settings / Sign-in Methods and enable Google, EMAIL and PHONE methods. (You can enable only what you want to use on your app)

Blocks

Current User Failed


The action that happens when there was an error loading the Firebase User

Current User Sucess


When the Firebase User loads correctly

  • User ID → ID of the user on :firebase:
  • name → What is the user name
  • email → User’s email
  • phone Number → User’s phone number (If it’s exist)
  • profile Picture → User’s profile picture

Get ID Token

3
It get the ID Token of a user as a variable. It need the block get ID TOKEN

Login Failed

4
When a user failed to login (Because an internet error, wrong email/password…)

  • Provider → Login method the user used (Google, Email or phone numer)

Login Success


When the user login correctly and with success.

  • Provider → Login method the user used (Google, Email or phone numer)
  • user ID → The ID of the user :crazy_face:
  • name → The name of the user
  • email → User’s email
  • phone Number → User’s phone number :iphone:
  • profile Picture → User’s profile picture (Image)

Reset Password of Email :white_check_mark:


When the user reset correctly their password (Email METHOD)

  • sucess → Return true if the password reset email has been sent correctly

Sign UP Failed


When the user’s sign up failed

  • provider → Sing up METHOD
  • message → The error that the APP gets

Sign UP Success


When the user sign up correctly (Normally with Email or Phone Number METHOD, because you don’t need to sign up with :google: method

  • Provider → Login method the user used (Google, Email or phone numer)
  • user ID → The ID of the user :crazy_face:
  • name → The name of the user
  • email → User’s email
  • phone Number → User’s phone number :iphone:
  • profile Picture → User’s profile picture (Image)

User UPDATE success :white_check_mark:


When the user update his profile correctly

  • type → The data that the user has update

Email Password Login


Login with EMAIL METHOD

  • email → TEXT INPUT of user’s email
  • password → TEXT INPUT of user’s password

Email Password Sign UP


Sign UP with Email METHOD

  • email → TEXT INPUT of user’s email
  • password → TEXT INPUT of user’s password

Get User

12
Get the current user that is signed

Get ID Token

13
Call the block that gets the user ID TOKEN

:google: Google Login

14
Login with Google Method. Use Login Success block to get user info.

Is signed in?

15
Return true if the user is signed and false if not

Logout

16
Logout of the current user

Phone Number Sign In


Try to sign in with the phone number method

  • phone number → Input the number’s phone

Send Reset Password Email


Send the email to reset the user’s password

  • email → TEXT INPUT the user’s email

Update EMAIL

19
Try to update the user’s email. The user must be sign in onto the APP

  • email → TEXT INPUT the user’s email

Update PROFILE

20
Try to update the user’s profile. The user must be sign in onto the APP

  • name → Change the user’s name
  • profile Picture → Change the profile image

Verify EMAIL

21
Try to verify the email. The user must be sign in onto the APP

Verify Phone CODE

22
Try to verify Phone Code with the code that the user recieved by SMS

:blush: It helps you? :thinking:

  • Yes! It’s impresionant :heart_eyes::blue_heart: :kodular:
  • No… :expressionless::expressionless:

0 voters

With :heart:, by Javier :kodular:

18 Likes

Very, very, detailed guide!
Congrats!

2 Likes

Just awarded you your Tutorial Writer badge. :+1:

6 Likes

Really awesome. It looks like you have done really hard work. But this explanation is the same as in Docs #no-offence
Also change the work imput to input in your guide

2 Likes

Thanks!! :blue_heart:

Ups… :sweat_smile::wink::+1:t3:

1 Like

Nice guide. @JaviR3TicS

1 Like

So it’s a docs not a guide basically

2 Likes

It’s necessary too :wink:

Judging by the types of topics that keep appearing it seems some people don’t read the documentation.

Congratulations @JaviR3TicS !

1 Like

Thanks!! :blue_heart::blush:

I was actually complimenting you for making this guide because some people don’t read the docs. This way when (or if) they search the forum your guide will come up.

I’m not sure why you took my post the wrong way.

1 Like

Ah ok. Sorry! I understand your answer as wrong way. Thanks!:sweat_smile::blush::wink:

1 Like

Hi,
I was reading your guide and looking for a way to validate the user phone number on signup. But in the blocks only i saw, Verify Phone Code but no blocks on when to send the code and validate that code against what input?

Am i missing something here?

Did anyone tried validating the phone number by sending otp using firebase to the said number and then validating whether the code is correct or not?

To send the code, to will have to use this block @Meghraj_Singh

1 Like

Is This One Time Sign Up System

compiling error

Kodular is unable to compile this project.
The compiler error output was
________Preparing application icon
________Creating animation xml
________Creating fragment xml
________Creating listview xml in res/layout/…
________Creating listview xml in res/layout-v21/…
________Creating xml in res/drawable/…
________Creating splash png in res/drawable/…
________Creating colors xml
________Creating styles xml
________Creating drawables xml v21
________Checking for firebase
________________Firebase components found.
________________Firebase config file error.
.

has u uploaded the google json file if yes then check its name

yes

google-services.json

It has been asked many times :slightly_smiling_face::

4 Likes