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

Post a Comment

Popular posts from this blog

A Flash Light App in Sketchware

Create Music Player app in Sketchware

In Sketchware: How to create a calculator for any simple formula?

Simple car racing android game in Sketchware

Firebase auth in Sketchware for Login Activity