FirebaseAuth phone number verification in Sketchware

To create a login activity using Firebase Auth phone number verification method in Sketchware, follow the steps given below. This method uses Firebase authentication service for creating login.

1. In your Firebase account, go to Firebase authentication.
2. In Firebase authentication web set-up, go to SIGN-IN method, and enable Phone.


3. Go to Project settings in your Firebase project and copy the Web API Key, Project ID, and App ID.
4. Paste the Project ID, App ID, and Web API Key in your project in Sketchware, in the Firebase settings.

5. In main.xml add two EditText edittext1 and edittext2, and two Buttons button1 and button2 as shown in the image below.


6. On the MainActivity page add an Intent i. Also add a FirebaseAuth component fa.

7. Create a new page success.xml with a Button button1.

8. In onCreate event of MainActivity, if user is logged in move to SuccessActivity. Use blocks as shown in image below.
9. Create two more blocks, sendVerificationCode and verifyCode.

10. Create three String variables phone, codeSent, and code.

11. In more block sendVerificationCode, use blocks as shown below.

The codes used are:
com.google.firebase.auth.PhoneAuthProvider.getInstance().verifyPhoneNumber(phone, 60, java.util.concurrent.TimeUnit.SECONDS, this, mCallbacks);
}

com.google.firebase.auth.PhoneAuthProvider.OnVerificationStateChangedCallbacks mCallbacks = new com.google.firebase.auth.PhoneAuthProvider.OnVerificationStateChangedCallbacks() {
@Override
public void onVerificationCompleted(com.google.firebase.auth.PhoneAuthCredential phoneAuthCredential) {
showMessage("Verification completed");
}
@Override
public void onVerificationFailed(com.google.firebase.FirebaseException e) {
showMessage(e.toString());
}
@Override
public void onCodeSent(String s, com.google.firebase.auth.PhoneAuthProvider.ForceResendingToken forceResendingToken) {
super.onCodeSent(s, forceResendingToken);
codeSent = s;
}
};

{

12. In more block verifyCode, use blocks and codes as shown in the image below.
The codes used are:
com.google.firebase.auth.PhoneAuthCredential credential = com.google.firebase.auth.PhoneAuthProvider.getCredential(codeSent, code);
signInWithPhoneAuthCredential(credential);
}
private void signInWithPhoneAuthCredential(com.google.firebase.auth.PhoneAuthCredential credential) {
fa.signInWithCredential(credential) .addOnCompleteListener(this, _fa_sign_in_listener);
}

{
Note that in above code 'fa' used twice, is the name of the FirebaseAuth component added in Sketchware.

13. In the event button1 onClick, use block sendVerificationCode.
14. In the event button2 onClick, use block verifyCode.
15. Add event FirebaseAuth onSignInUserComplete. Here use Intent to move to SuccessActivity.

16. In SuccessActivity, add FirebaseAuth component fa.

17. In the event button1 onClick, .
of SuccessActivity, logout FirebaseAuth.
18. Save and run the project.

19. Now download Dev Tools(Android Developer Tools) - Device Info app by trinea.

20. In Dev Tools app, click on App Info - your app. Copy the SHA-1 from here.

21. Go to your project in Firebase console. In project settings click on add fingerprint, and paste the SHA-1 code there.

22. That's all. Now you should be able to login using your phone number.

Comments

  1. Most awaited tutorial. Thanks for this.

    I want a tutorial on integrating payment gateway like instamojo. I want to add a subscription page in my app which redirects to payment gateway and after successful payment it returns a token. Pl make a tutorial on it.

    ReplyDelete
    Replies
    1. Bro all I done correctly but when I click on get code app closing. Please help me

      Delete
    2. Bro all I done correctly but when I click on get code app closing. Please help me

      Delete
  2. Hi, I really need your help. I need the menu to be black after clicking on something. no matter how much I look, I found only this, but it does not work on new versions. maybe you can make it work on all versions, or something with app compat design. Here is the code for the white version that I use

    PopupMenu popup = new PopupMenu(MainActivity.this, _view);
    Menu menu = popup.getMenu();
    menu.add("Delete");
    menu.add("Show");
    popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener(){
    @Override
    public boolean onMenuItemClick(MenuItem item){
    switch (item.getTitle().toString()){
    case "Delete":
    break;
    case "Show":
    break;}
    return true;
    }
    });
    popup.show();


    , but for the black version

    PopupMenu popup = new PopupMenu(getApplicationContext() , _view);
    Menu menu = popup.getMenu();
    menu.add("Delete");
    menu.add("Show");
    popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener(){
    @Override
    public boolean onMenuItemClick(MenuItem item){
    switch (item.getTitle().toString()){
    case "Delete":
    break;
    case "Show":
    break;}
    return true;
    }
    });
    popup.show();


    Help me please, this is very important for me

    ReplyDelete
    Replies
    1. Instead of getApplicationContext() use
      getActionBar().getThemedContext()

      Delete
    2. We are having the same problem sir

      Delete
  3. Hola.

    Me aparece un error.


    Error


    com.google.firebase.auth.PhoneAuthProvider.getInstance().verifyPhoneNumber(phone, 60, java.util.concurrent.TimeUnit.SECONDS, this, mCallbacks);

    "mCallbacks cannot be resolved a variable"

    1 problem (1 error)

    ReplyDelete
  4. Please update firebase db video in this tutorial

    ReplyDelete
  5. Bro all I done correctly but when I click on get code app closing. Please help me

    ReplyDelete
  6. Hello bro, I used these codes, created app. Installed it.
    BUT when I click Get verification code button, it isn't getting.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
    2. There is error message:
      com.google.firebase.auth.FirebaseAuthInvalidCredentialsException: The request contains malformed or mismatching credentials ( App ID does not match requested project)

      Delete
    3. This comment has been removed by the author.

      Delete
    4. Were you successful in entering the SHA1 key in your firebase project?

      Delete
  7. Hello bro can I ask you how to enter permission Direct manifest
    using Android software manifest manager Apk

    ReplyDelete
  8. hello teacher how to make a like button on firebase chat app?

    ReplyDelete
  9. Hello sir,
    Once signout from the app, again sign in is not possible with same mobile number. Plz make one more video to describe sign in again.

    Thanks for your very informative tutorials. Thank u very much.

    ReplyDelete
  10. Thanks a lot,

    Please , i want to edit SMS verification forum in firebase .
    Thank you .

    ReplyDelete
  11. Yes its work properly.
    Sir I request you arrange the code in different lines because some occurred while code pasting so saprate the code in saprate line..

    ReplyDelete
  12. Hello, this is very good tutorial, however, for me, when compiling, there is error:

    Activity.java (at line 260)
    else {
    Syntax error on token "else", delete this token

    Any idea what might go wrong?
    Thank you very much

    ReplyDelete
    Replies
    1. Some mistake in placing curly brackets. Check { and }.

      Delete
    2. Thank you very much. It all works, you explained well on video and on this blog. Any idea where to look for more online tutorials and guides? (No youtube channels, i prefer written documentation of explanation of commands/syntax/blocks....)

      Delete
  13. I'm having 2 errors.
    The first time the error was about my SHA-1 key.
    The second time the error was that "mCallbacks cannot be resolved to a variable"

    ReplyDelete
    Replies
    1. Hi,
      For sha1 key there are 2 more steps to make:
      1.you have to find your sha1 key using app-dev tools app from yoyr phone
      2.you have to enter the key in firebase auth account on google

      And since i write this... Does anyone knows...

      if i modify the app (and add new blocks of code) does the sha1 key gets modified?

      Thanks

      Delete
  14. I have getting 3 errors in my phone verification project
    1. code send was not resolved as a veriable
    2.fa_sign_... this code was also not resolved
    3.In firebase is not capable to select SH1 in Dev tools....@# firebase show an error is Oauth was already exist

    ReplyDelete
    Replies
    1. _fa_sign_in_listener
      here fa is my FirebaseAuth component. If your FirebaseAuth component is fauth, it should be
      _fauth_sign_in_listener

      Delete
    2. Please sir i have done everthing and i can send sms but once i click on signin, app crash and, i see the following error : Cannot create phoneAuthCredential without either verificationproof, sessioninfo, temporary proof or enrollment id.

      Delete
  15. I have completed all the steps but I got only one OTP after then it's doesn't work.
    Please Help me

    ReplyDelete
  16. I have done everything and it works fine but i have problem when i uninstall the app or clear app data then i cannot login again

    ReplyDelete
  17. Syntex error on token "override" delate this token
    ---------------------------------------------
    1 problem (1 error)

    ReplyDelete
  18. Hello sir,
    Once signout from the app, again sign in is not possible with same mobile number. Plz make one more video to describe sign in again.

    Thanks for your very informative tutorials. Thank u very much.

    ReplyDelete

Post a Comment

Popular posts from this blog

Create Music Player app in Sketchware

A Flash Light App in Sketchware

Admob rewarded video Ads in Sketchware

Simple car racing android game in Sketchware

Firebase auth in Sketchware for Login Activity