FlutterFire x Bloc: Phone Authentication

Introduction

Hello there, Flutter Devs!!! In this blog, we'll look at how to use Firebase to authenticate users using their phone numbers.
For authentication, we'll use Firebase, and for state management, we'll utilize Bloc.
So, without further ado, let's get started.

Starter Project

https://github.com/red-star25/FlutterFire-Bloc-PhoneAuthentication/tree/main/firebase_phone_authentication_starter

A basic starter project is shown above. The following dependencies are included in it:

dependencies:
  flutter:
      sdk: flutter

  cupertino_icons: ^1.0.2
  flutter_bloc: ^8.0.1                               # for state management
  firebase_core: ^1.12.0                          #  for firebase 
  firebase_auth: ^3.3.7                           # for firebse authentication
  equatable: ^2.0.3                                 
  country_code_picker: ^2.0.2               # for picking up different countries with its code

Starter Project Folder Structure

As you can see, the folder structure is pretty straightforward :
The bloc folder contains all the business logic-related files.
The data folder contains a repository for phone authentication in which we will write methods of verifying the phone number.
The presentation folder contains 3 screens. In which the auth folder has a phone_auth screen, and the home is just an empty screen that the user will be able to see only after the successful authentication.
The widget has two files. One for OTP Textfield and the second for Phone Number Textfield.

Starter Project Output

phoneauth screen.png

Setting up Firebase

First and foremost, we must connect our app to a Firebase server. Create a project in the Firebase Console.
You will be requested to input the SHA keys here during the project creation process. In order to operate with phone authentication, the firebase project must have both SHA-1 and SHA-256.
To generate SHA keys in your code, go to the project terminal and type the following command.
```
cd android/
gradlew signingReport
```
The keys will be generated as a result of this. If you already have a Firebase project, you can find it under the Project Settings section. The keys may then be added over there.

Also do not forget to enable the sign-in method for Phone in the Authentication section.

After that add the updated google_services.json file in your project.

Enable Android Device Verification

In order to enable the device verification for your app, you need to enable the Android Device Verification service on your Cloud Console.
To enable it, head over to Google Cloud Console and select your project

Now find and go to API & Services section. Over there click on the Enable APIS and Services button.

Now, search for Android Device Verification and enable that service.

Firebase Initialization

We need to initialize the Firebase in order to use the Firebase services. Let's do it before running the app.

void main() async {
   WidgetsFlutterBinding.ensureInitialized();
   await Firebase.initializeApp();
   runApp(const MyApp());
}

BLoC Implementation

As we've set up all the necessary things in order to authenticate users with their phone numbers. Let's now write the logic for it in our flutter app.

Event

There are mainly 5 events that we need to handle. Let us try to understand all the events one by one. Head over to bloc \ phone_auth \ phone_auth_event.dart file.

SentOtpToPhoneEvent :

This event will be triggered when the user enters the phone number and presses the Send OTP button on the UI. Once Send Otp button is pressed we will send the phone number with the event to the bloc.

class SendOtpToPhoneEvent extends PhoneAuthEvent {
  final String phoneNumber;

  const SendOtpToPhoneEvent({required this.phoneNumber});

  @override
  List<Object> get props => [phoneNumber];
}

VerifySentOtpEvent :

Once the user requested the OTP after entering the phone number, the OTP field will get appeared on the screen. After the OTP is entered by the user this event will get fired.

class VerifySentOtpEvent extends PhoneAuthEvent {
  final String otpCode;
  final String verificationId;

  const VerifySentOtpEvent(
      {required this.otpCode, required this.verificationId});

  @override
  List<Object> get props => [otpCode, verificationId];
}

OnPhoneOtpSent :

After the user request the OTP from the server, the Firebase will send the OTP to the user's phone number. Firebase will send the token, verificationId with the response. This verificationId is then used to log in to the user.

class OnPhoneOtpSent extends PhoneAuthEvent {
   final String verificationId;
   final int? token;
   const OnPhoneOtpSent({
     required this.verificationId,
     required this.token,
   });

   @override
   List<Object> get props => [verificationId];
}

OnPhoneAuthErrorEvent :

This event will be triggered when an error occurs while sending the OTP to the user's phone number. This can be due to network issues or firebase's error.

class OnPhoneAuthErrorEvent extends PhoneAuthEvent {
   final String error;
   const OnPhoneAuthErrorEvent({required this.error});

   @override
   List<Object> get props => [error];
}

OnPhoneAuthVerificationCompleteEvent :

This event will be triggered when the verification of the OTP is successful.

class OnPhoneAuthVerificationCompleteEvent extends PhoneAuthEvent {
   final AuthCredential credential;
   const OnPhoneAuthVerificationCompleteEvent({
     required this.credential,
   });
}

State

There are mainly 3 states that we need to handle. Let us try to understand all the events one by one. Head over to bloc \ phone_auth \ phone_auth_state.dart file.

PhoneAuthLoading :

This state is used to show the loading indicator when the phone number is being sent to the server for verification and the user is being redirected to the verification page.
```
class PhoneAuthInitial extends PhoneAuthState {}
```

PhoneAuthError

This state is used to show the error message.

class PhoneAuthError extends PhoneAuthState {
   final String error;

   const PhoneAuthError({required this.error});

   @override
   List<Object> get props => [error];
}

PhoneAuthVerified

This state indicates that verification is completed and the user is being redirected to the home page.
```
class PhoneAuthVerified extends PhoneAuthState {}
```

PhoneAuthCodeSentSuccess

This state is used to show the OTP widget in which the user enters the OTP sent to his/her phone number.

class PhoneAuthCodeSentSuccess extends PhoneAuthState {
   final String verificationId;
   const PhoneAuthCodeSentSuccess({
     required this.verificationId,
   });
   @override
   List<Object> get props => [verificationId];
}

Bloc

In this file, we will handle all the events triggered during the authentication.

class PhoneAuthBloc extends Bloc<PhoneAuthEvent, PhoneAuthState> {
   final PhoneAuthRepository phoneAuthRepository;
   final auth = FirebaseAuth.instance;

  PhoneAuthBloc({required this.phoneAuthRepository})
      : super(PhoneAuthInitial()) {

     // When user clicks on send otp button then this event will be fired
       on<SendOtpToPhoneEvent>(_onSendOtp);

     // After receiving the otp, When user clicks on verify otp button then this event will be fired    
      on<VerifySentOtpEvent>(_onVerifyOtp);

     // When the firebase sends the code to the user's phone, this event will be fired
     on<OnPhoneOtpSent>((event, emit) =>
         emit(PhoneAuthCodeSentSuccess(verificationId: event.verificationId)));

     // When any error occurs while sending otp to the user's phone, this event will be fired
     on<OnPhoneAuthErrorEvent>(
         (event, emit) => emit(PhoneAuthError(error: event.error)));

     // When the otp verification is successful, this event will be fired
     on<OnPhoneAuthVerificationCompleteEvent>(_loginWithCredential);
   }
}

Let's now implement all the methods in order to handle the different events

The first is _onSendOtp.

FutureOr<void> _onSendOtp(
    SendOtpToPhoneEvent event, Emitter<PhoneAuthState> emit) async {
  emit(PhoneAuthLoading());
  try {
    await phoneAuthRepository.verifyPhone(
      phoneNumber: event.phoneNumber,
      verificationCompleted: (PhoneAuthCredential credential) async {
        // On [verificationComplete], we will get the credential from the firebase  and will send it to the [OnPhoneAuthVerificationCompleteEvent] event to be handled by the bloc and then will emit the [PhoneAuthVerified] state after successful login
        add(OnPhoneAuthVerificationCompleteEvent(credential: credential));
      },
      codeSent: (String verificationId, int? resendToken) {
        // On [codeSent], we will get the verificationId and the resendToken from the firebase and will send it to the [OnPhoneOtpSent] event to be handled by the bloc and then will emit the [OnPhoneAuthVerificationCompleteEvent] event after receiving the code from the user's phone
        add(OnPhoneOtpSent(
            verificationId: verificationId, token: resendToken));
      },
      verificationFailed: (FirebaseAuthException e) {
        // On [verificationFailed], we will get the exception from the firebase and will send it to the [OnPhoneAuthErrorEvent] event to be handled by the bloc and then will emit the [PhoneAuthError] state in order to display the error to the user's screen
        add(OnPhoneAuthErrorEvent(error: e.code));
      },
      codeAutoRetrievalTimeout: (String verificationId) {},
    );
  } catch (e) {
    emit(PhoneAuthError(error: e.toString()));
  }
}

onVerifyOtp

FutureOr<void> _onVerifyOtp(
    VerifySentOtpEvent event, Emitter<PhoneAuthState> emit) async {
  try {
    emit(PhoneAuthLoading());
    // After receiving the otp, we will verify the otp and then will create a credential from the otp and verificationId and then will send it to the [OnPhoneAuthVerificationCompleteEvent] event to be handled by the bloc and then will emit the [PhoneAuthVerified] state after successful login
    PhoneAuthCredential credential = PhoneAuthProvider.credential(
      verificationId: event.verificationId,
      smsCode: event.otpCode,
    );
    add(OnPhoneAuthVerificationCompleteEvent(credential: credential));
  } catch (e) {
    emit(PhoneAuthError(error: e.toString()));
  }
}

_loginWithCredential

FutureOr<void> _loginWithCredential(
    OnPhoneAuthVerificationCompleteEvent event,
    Emitter<PhoneAuthState> emit) async {
  // After receiving the credential from the event, we will login with the credential and then will emit the [PhoneAuthVerified] state after successful login
  try {
    await auth.signInWithCredential(event.credential).then((user) {
      if (user.user != null) {
        emit(PhoneAuthVerified());
      }
    });
  } on FirebaseAuthException catch (e) {
    emit(PhoneAuthError(error: e.code));
  } catch (e) {
    emit(PhoneAuthError(error: e.toString()));
  }
}

Phone Auth Repository

If you've noticed in the above code, I've called a method verifyPhone(). We need to implement this method in the Phone Auth Repository. Let's do it.

Head over to lib \ data \ repository \ phone_auth_repository.dart file

class PhoneAuthRepository {
FirebaseAuth auth = FirebaseAuth.instance;

Future<void> verifyPhone({
  required String phoneNumber,
  required Function(PhoneAuthCredential) verificationCompleted,
  required Function(FirebaseAuthException) verificationFailed,
  required Function(String, int?) codeSent,
  required Function(String) codeAutoRetrievalTimeout,
}) async {
  await auth.verifyPhoneNumber(
    phoneNumber: phoneNumber,
    verificationCompleted: verificationCompleted,
    verificationFailed: verificationFailed,
    codeSent: codeSent,
    codeAutoRetrievalTimeout: codeAutoRetrievalTimeout,
  );
}
}

The auth which we have initialized with the FirebaseAuth instance has a method called verifyPhoneNumber.
We need to simply call this method, and also we need to pass those methods that we've implemented in the phone_auth_bloc file.

Updating UI

Now that we've implemented all the functionalities in order to authenticate the user. Let's update the UI according to the state which we've defined in phone_auth_state.

Head over to phone_auth_page.dart and wrap the body of the Scaffold around the BlocBuilder.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: BlocListener<PhoneAuthBloc, PhoneAuthState>(
      listener: (context, state) {
        // If Phone Otp Verified. Send User to Home Screen
        if (state is PhoneAuthVerified) {
          Navigator.of(context).pushReplacement(
            MaterialPageRoute(
              builder: (_) => const HomePage(),
            ),
          );
        }

        // Show error message if any error occurs while verifying phone number and otp code
        if (state is PhoneAuthError) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
              content: Text(state.error),
            ),
          );
        }
      },
      child: BlocBuilder<PhoneAuthBloc, PhoneAuthState>(
        builder: (context, state) {
          if (state is PhoneAuthLoading) {
            return const Center(
              child: CircularProgressIndicator(),
            );
          }
          return Center(
              child: Padding(
            padding: const EdgeInsets.all(18.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text(
                  "Firebase x Flutter: \nPhone Authentication",
                  style: TextStyle(fontSize: 24),
                  textAlign: TextAlign.center,
                ),
                const Divider(
                  height: 30,
                  endIndent: 20,
                  indent: 20,
                  thickness: 1.5,
                  color: Colors.grey,
                ),
                const SizedBox(
                  height: 30,
                ),
                  // Here we are conditionally rendering the OtpWidget. When the user presses the Send OTP button we will update the PhoneNumberWidget with the OtpWidget. So that user can enter the OTP.
                if (state is! PhoneAuthCodeSentSuccess)
                  PhoneNumberWidget(
                    phoneNumberController: _phoneNumberController,
                  )
                else
                  OtpWidget(
                    codeController: _codeController,
                    verificationId: state.verificationId,
                  ),
              ],
            ),
          ));
        },
      ),
    ),
  );
}

Now head over to otp_field.dart file. Here we need to implement the _verifyOtp method. This method is called when the user has entered the OTP and presses the Verify button.

void _verifyOtp({required BuildContext context}) {
  context.read<PhoneAuthBloc>().add(VerifySentOtpEvent(
      otpCode: codeController.text, verificationId: verificationId));
  codeController.clear();
}

Also in the phone_number_field.dart file we need to implement _sendOtp function.

void _sendOtp({required String phoneNumber, required BuildContext context}) {
  final phoneNumberWithCode = "${_countryCode.dialCode}$phoneNumber";
  context.read<PhoneAuthBloc>().add(
        SendOtpToPhoneEvent(
          phoneNumber: phoneNumberWithCode,
        ),
      );
  setState(() {
    widget.phoneNumberController.clear();
  });
}

Providing Repository and Bloc

In order to provide the PhoneAuthRepository and PhoneAuthBloc we need to wrap the parent with the RepositoryProvider and BlocProvider.

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Firebase Phone Auth Demo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: RepositoryProvider(
      create: (context) => PhoneAuthRepository(),
      child: BlocProvider(
        create: (context) => PhoneAuthBloc(
          phoneAuthRepository:
              RepositoryProvider.of<PhoneAuthRepository>(context),
        ),
        child: const PhoneAuthPage(),
      ),
    ),
  );
}
}

Final Output

As you can see the OTP gets auto validated as soon as the user gets it.

Final Repo

https://github.com/red-star25/FlutterFire-Bloc-PhoneAuthentication/tree/main/firebase_phone_authentication

Wrapping Up

I hope you enjoyed and learned something from this article. If you have any feedback/queries, leave them in the comments.
Thank you for spending time reading this article. See you in the next article. Until then...

Follow me on Twitter, LinkedIn, Github

FlutterFire x Bloc: Phone Authentication

Comments

Flutter

Networking In Flutter: 🔥Interceptors🔥

More from this blog

100 Blogs Later: Lessons from Code, Content, and Consistency

A Practical Journey from Application to Distributed Systems - Part 6

A Practical Journey from Application to Distributed Systems - Part 5

A Practical Journey from Application to Distributed Systems - Part 4

A Practical Journey from Application to Distributed Systems - Part 3

Introduction

Starter Project

Starter Project Folder Structure

Starter Project Output

Setting up Firebase

Enable Android Device Verification

Firebase Initialization

BLoC Implementation

Event

SentOtpToPhoneEvent :

VerifySentOtpEvent :

OnPhoneOtpSent :

OnPhoneAuthErrorEvent :

OnPhoneAuthVerificationCompleteEvent :

State

PhoneAuthLoading :

PhoneAuthError

PhoneAuthVerified

PhoneAuthCodeSentSuccess

Bloc

Phone Auth Repository

Updating UI

Providing Repository and Bloc

Final Output

Final Repo

Wrapping Up

Command Palette

Comments

Flutter

Networking In Flutter: 🔥Interceptors🔥

More from this blog

Introduction

Starter Project

Starter Project Folder Structure

Starter Project Output

Setting up Firebase

Enable Android Device Verification

Firebase Initialization

BLoC Implementation

Event

SentOtpToPhoneEvent :

VerifySentOtpEvent :

OnPhoneOtpSent :

OnPhoneAuthErrorEvent :

OnPhoneAuthVerificationCompleteEvent :

State

PhoneAuthLoading :

PhoneAuthError

PhoneAuthVerified

PhoneAuthCodeSentSuccess

Bloc

Phone Auth Repository

Updating UI

Providing Repository and Bloc

Final Output

Final Repo

Wrapping Up