Firebase Phone Authentication awaiting for login bug | Flutter

I'm making a Flutter app that uses phone authentication and I'm facing difficulty in organizing the verifyPhoneNumber method and how to proceed thereafter.

I organized my code in two classes, one which is the app interface:

import 'package:flutter/foundation.dart';
import 'package:pinput/pinput.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:wecourtsappv1/main.dart';

class OTPView extends StatefulWidget {
  const OTPView({super.key, required this.title});

  final String title;

  @override
  State<OTPView> createState() => _OTPViewState();
}

class _OTPViewState extends State<OTPView> {


  @override
  initState() {
    super.initState();
    //code removed for NDA reasons 
  }

  @override
  Widget build(BuildContext context) {
    final defaultPinTheme = PinTheme(
      width: 56,
      height: 56,
      textStyle: const TextStyle(
          fontSize: 20,
          color: Color.fromRGBO(30, 60, 87, 1),
          fontWeight: FontWeight.w600),
      decoration: BoxDecoration(
        border: Border.all(color: const Color.fromRGBO(234, 239, 243, 1)),
        color: Colors.blueGrey,
        borderRadius: BorderRadius.circular(20),
      ),
    );

    final focusedPinTheme = defaultPinTheme.copyDecorationWith(
      border: Border.all(color: const Color.fromRGBO(114, 178, 238, 1)),
      borderRadius: BorderRadius.circular(8),
    );

    final submittedPinTheme = defaultPinTheme.copyWith(
      decoration: defaultPinTheme.decoration?.copyWith(
        color: const Color.fromRGBO(234, 239, 243, 1),
      ),
    );

 
    return Scaffold(
      body: Stack(
        children: [
          Center(
            child: Column(
              children: [
                Pinput(
                  length: 6,
                  defaultPinTheme: defaultPinTheme,
                  focusedPinTheme: focusedPinTheme,
                  submittedPinTheme: submittedPinTheme,
                  validator: (s) {
                  },
                  pinputAutovalidateMode: PinputAutovalidateMode.onSubmit,
                  showCursor: true,
                  onCompleted: (pin) async {
                    setState(() {
                      firebaseAuthService.smsCode = pin;
                      firebaseAuthService.signInWithPhoneNumber();
                    });
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
  
  //code removed for NDA reasons

  void invalidAlert(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) => AlertDialog(
        title: const Text('Invalid OTP'),
        content: const Text('This OTP is invalid.'),
        actions: <Widget>[
          TextButton(
            onPressed: () => Navigator.pop(context, 'Cancel'),
            child: const Text('Cancel'),
          ),
          TextButton(
            onPressed: () => Navigator.pop(context, 'OK'),
            child: const Text('OK'),
          ),
        ],
      ),
    );
  }
}

NOTE: I get the phone number from another class and save it to the firebase auth class as seen below:

And this is the code for my Auth class:

class FirebaseAuthService {
  final FirebaseAuth _firebaseAuth = FirebaseAuth.instance;
  late final User user;

  late String phoneNumber;
  late String smsCode;

  bool enteredOTP = false;

  Future<void> signInWithPhoneNumber() async {
    try {
      await FirebaseAuth.instance.verifyPhoneNumber(
        phoneNumber: phoneNumber,
        verificationCompleted: (PhoneAuthCredential credential) async {
          // ANDROID ONLY!

          // Sign the user in (or link) with the auto-generated credential
          await _firebaseAuth.signInWithCredential(credential);
        },
        verificationFailed: (FirebaseAuthException e) {
          if (e.code == 'invalid-phone-number') {
            print('The provided phone number is not valid.');
          }

          // Handle other errors
        },
        codeSent: (String verificationId, int? resendToken) async {
          // Update the UI - wait for the user to enter the SMS code


          // Create a PhoneAuthCredential with the code

          PhoneAuthCredential credential = PhoneAuthProvider.credential(verificationId: verificationId, smsCode: smsCode);

          // Sign the user in (or link) with the credential
          await _firebaseAuth.signInWithCredential(credential);
        },
        codeAutoRetrievalTimeout: (String verificationId) {},
      );
      ;
    } on Exception catch (e) {
      print(e);
    }
  }
}

The issue I'm facing is I'm currently unable to check if the OTP smsCode is valid and if its invalid.

I tried looking into async and await calls but I'm honestly unsure how that works. Any help would be appreicated.

If I understood your question, you want a standalone method to confirm and update the users when they provide an SMS code to do that

UserCredential userCredential = await confirmationResult.confirm('123456');

Use providers on your project to honour separation of concerns and listen for changes to update UI respectively