creating firebase otp authetication in a dialogue in flutter

Question

i am working on a huge project and in it i have to create a firebase otp authentication login page in adsearch.dart file in a dialogue and then we need to call it in a function named userAuthentication also in adsearch.dart file. in dialog i need to create two pages where first page is where user will enter his/her mobile number and then it will send otp in his mobile sms and then user will be directed on 2nd page where user will enter otp that user recieved on his sms and if its correct user will be logged in the app and move in the page where user was or otherwise it will give the error and user will also have option to resend otp and an option to go back that user has entered the wrong number and he wants it to change

i tried to reasearch but cant find solution

Answer 1

You could have a button that triggers the message. The Firebase Auth documentation specifies that the verifyPhoneNumber() method has four different callbacks, one of which is codeSent. This callback can be used to navigate the user to the second screen.

Something like this:

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  codeSent: (String verificationId, int? resendToken) async { <- This will be executed when after the message is sent
    // here you'll navigate the users to the second screen! (you must pass the `verificationId` as a parameter to the following screen)
   
  },
);

On the other screen...

FirebaseAuth auth = FirebaseAuth.instance;

 // you should have a method which will be called once the user entered the received code...

Future<void> logIn(String smsCode ) async { <- value entered by the user
    // Create a PhoneAuthCredential with the code
  PhoneAuthCredential credential = PhoneAuthProvider.credential(verificationId: widget.verificationId, smsCode: smsCode);
    
  //Sign the user in (or link) with the credential
  await auth.signInWithCredential(credential);
}

Hope this helps!