Flutter firebase phone authentication with example tutorial 2022

Basics, Database, Flutter Firebase, Flutter Login App

In this flutter firebase tutorial, we will learn flutter firebase phone number authentication and will sent OTP verification SMS to verify.

In this video, we’ll be learning how to create a Flutter Firebase phone number OTP authentication. This will allow us to secure our phone numbers with an OTP verification mechanism.

Flutter is a new mobile development framework that has been gaining a lot of popularity lately. In this video, we’ll be using Flutter to create a Firebase phone number OTP authentication.

So whether you’re a beginner or an experienced developer, be sure to check out this video and learn how to create a Flutter Firebase phone number OTP authentication!

Go to the project folder in the terminal.

Mac keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

Windows keytool -list -v -keystore "\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android

Linux keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

Watch Youtube tutorial

 

Introduction of flutter firebase phone number authentication

Welcome to our comprehensive guide on implementing Flutter Firebase phone number authentication in your applications. In today’s mobile-driven world, user authentication is a key component of creating safe and reliable apps. Thankfully, Firebase, a powerful mobile development platform, offers a seamless solution through its phone authentication service.

In this step-by-step tutorial, we will walk you through the process of integrating Firebase phone number authentication in Flutter project. Whether you’re a seasoned Flutter developer or just starting your mobile app development journey, this guide will provide you with the knowledge and tools necessary to implement phone authentication effortlessly.

By deploying the powerful Firebase and user-friendly authentication services, you can provide your app users with a reliable and secure login experience using their phone numbers. This strategy not only improves convenience by eliminating the need for traditional passwords, but it also lowers the risk of fraudulent operations.

So, let’s dive into the world of Firebase phone authentication and discover how you can leverage this powerful feature to enhance the security and usability of your Flutter apps.

Overview of Firebase Phone Number Authentication

Firebase Phone Number Authentication is a cool feature provided by Firebase that allows developers to add an easy and secure way for users to verify themselves using their phone numbers in Flutter apps. Instead of remembering complicated passwords, users can just use their phone numbers to verify their identity.

So, what’s great about Firebase Phone Authentication? Well, it makes life easier for users because they don’t have to deal with passwords anymore. They can quickly verify their phone numbers by receiving a special code through a text message. This makes logging in faster and more convenient. And the best part? It’s more secure too because there’s no need to worry about weak passwords or reusing the same password for different apps.

Firebase Phone Authentication works well with other Firebase services too. For example, you can use it together with Firebase Cloud Firestore or Firebase Realtime Database to create powerful and secure user experiences. By combining phone authentication with features like storing user data or personalizing content, you can build really cool and customized apps.

Before we begin

Implement Flutter Firebase Phone number Authentication

Below is the code how you will authenticate Phone number in firebase.

import 'package:firebase_auth/firebase_auth.dart';
import 'package:get/get.dart';
import 'package:login_flutter_app/src/features/authentication/screens/welcome/welcome_screen.dart';
import 'package:login_flutter_app/src/features/core/screens/dashboard/dashboard.dart';

import 'exceptions/login_with_email_and_pssword_failure.dart';
import 'exceptions/signup_email_password_failure.dart';

class AuthenticationRepository extends GetxController {
static AuthenticationRepository get instance => Get.find();

//Variables
final _auth = FirebaseAuth.instance;
late final Rx<User?> firebaseUser;

//Will be load when app launches this func will be called and set the firebaseUser state
@override
void onReady() {
firebaseUser = Rx<User?>(_auth.currentUser);
firebaseUser.bindStream(_auth.userChanges());
ever(firebaseUser, _setInitialScreen);
}

/// If we are setting initial screen from here
/// then in the main.dart => App() add CircularProgressIndicator()
_setInitialScreen(User? user) {
user == null ? Get.offAll(() => const WelcomeScreen()) : Get.offAll(() => const Dashboard());
}

//FUNC
Future<String?> createUserWithEmailAndPassword(String email, String password) async {
try {
await _auth.createUserWithEmailAndPassword(email: email, password: password);
firebaseUser.value != null ? Get.offAll(() => const Dashboard()) : Get.to(() => const WelcomeScreen());
} on FirebaseAuthException catch (e) {
final ex = SignUpWithEmailAndPasswordFailure.code(e.code);
return ex.message;
} catch (_) {
const ex = SignUpWithEmailAndPasswordFailure();
return ex.message;
}
return null;
}

Future<String?> loginWithEmailAndPassword(String email, String password) async {
try {
await _auth.signInWithEmailAndPassword(email: email, password: password);
} on FirebaseAuthException catch (e) {
final ex = LogInWithEmailAndPasswordFailure.fromCode(e.code);
return ex.message;
} catch (_) {
const ex = LogInWithEmailAndPasswordFailure();
return ex.message;
}
return null;
}

Future<void> logout() async => await _auth.signOut();
}

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

@override
Widget build(BuildContext context) {
final controller = Get.put(SignUpController());
final formKey = GlobalKey<FormState>();

return Container(
padding: const EdgeInsets.symmetric(vertical: tFormHeight - 10),
child: Form(
key: formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextFormField(
controller: controller.fullName,
decoration: const InputDecoration(label: Text(tFullName), prefixIcon: Icon(Icons.person_outline_rounded)),
),
const SizedBox(height: tFormHeight - 20),
TextFormField(
controller: controller.email,
decoration: const InputDecoration(label: Text(tEmail), prefixIcon: Icon(Icons.email_outlined)),
),
const SizedBox(height: tFormHeight - 20),
TextFormField(
controller: controller.phoneNo,
decoration: const InputDecoration(label: Text(tPhoneNo), prefixIcon: Icon(Icons.numbers)),
),
const SizedBox(height: tFormHeight - 20),
TextFormField(
controller: controller.password,
decoration: const InputDecoration(label: Text(tPassword), prefixIcon: Icon(Icons.fingerprint)),
),
const SizedBox(height: tFormHeight - 10),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () {
if(formKey.currentState!.validate()) {
// SignUpController.instance.registerUser(controller.email.text.trim(), controller.password.text.trim());
SignUpController.instance.phoneAuthentication(controller.phoneNo.text.trim());
Get.to(() => const OTPScreen());
}
},
child: Text(tSignup.toUpperCase()),
),
)
],
),
),
);
}
}

import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../../repository/authentication_repository/authentication_repository.dart';

class SignUpController extends GetxController {
static SignUpController get instance => Get.find();

//TextField Controllers to get data from TextFields
final email = TextEditingController();
final password = TextEditingController();
final fullName = TextEditingController();
final phoneNo = TextEditingController();

/// This func will be used to register user with [EMAIL] & [Password]
void registerUser(String email, String password) {
String? error = AuthenticationRepository.instance.createUserWithEmailAndPassword(email, password) as String?;
if (error != null) {
Get.showSnackbar(GetSnackBar(message: error.toString()));
}
}

//Get phoneNo from user (Screen) and pass it to Auth Repository for Firebase Authentication
void phoneAuthentication(String phoneNo) {
AuthenticationRepository.instance.phoneAuthentication(phoneNo);
}
}

class OTPController extends GetxController {
static OTPController get instance => Get.find();

void verifyOTP(String otp) async {
var isVerified = await AuthenticationRepository.instance.verifyOTP(otp);
isVerified ? Get.offAll(const Dashboard()) : Get.back();
}

}

6 – Clean Code

To keep code clean, manageable, and readable we use State Management. Therefore we are using GETX State management to follow the seperation of concern principle.

Hence, we have design in Screens Folder and it has nothing to do with backend logic. Backend logic only deals with logic of the screen and not performing Database Queries. Authentication and User Repositories are only dealing with Firebase authentication and Firebase Firestore database.

Conclusion

Congratulations! You’ve reached the end of our comprehensive guide on implementing Firebase phone authentication in Flutter. By now, you should have a solid understanding of how Firebase Phone Authentication works and how to integrate it into your Flutter applications seamlessly.

We explored the power and convenience of Firebase Phone Authentication, which allows users to verify their identity using their phone numbers, eliminating the need for complex passwords. With a simple SMS code verification process, users can enjoy a faster and more user-friendly login experience.

By leveraging Firebase Phone Authentication, you’ve taken a big step towards building secure and trustworthy apps. Users can rest assured knowing that their data is protected, and you can focus on creating engaging user experiences without the burden of password management.

Remember to apply the best practices we discussed throughout the tutorial. Enhance the user experience by implementing features like automatic verification, custom UI, and error handling. And don’t forget to explore advanced topics such as user persistence and integration with other Firebase services to unlock even more possibilities for your apps.

As you continue your mobile app development journey, Firebase will remain a valuable tool in your arsenal. It offers a wide range of features beyond authentication, including analytics, cloud storage, and real-time database capabilities. So keep exploring and discovering how Firebase can elevate your app development process.

Thank you for joining us on this learning journey. We hope this guide has empowered you to build secure, user-friendly Flutter applications with Firebase Phone Authentication. Now it’s time to put your knowledge into action and create amazing mobile experiences that users will love.

Happy coding and best of luck with your future app development endeavors!

CODING with T

🚀 Supercharge your Flutter skills! Subscribe to my YouTube channel now for mind-blowing coding insights, expert tips, and exclusive content. Don’t miss out!

23 - Product Detail Screen, How to create Products Details Screen in Flutter. Flutter eCommerce app UI Design

Source code

COURSES

Flutter E Commerce App Modern and latest
Flutter Login App UI Source Code - Flutter Complete App - Flutter App Design - Flutter App 2023 - Complete Flutter App 2023
Learn flutter from scratch in 4 hours - Flutter Crash Course - Coding with T

Learn Flutter

1.2 # How to install flutter on android studio 2022 - Flutter Basic Crash Course
2.2 - Add Image in Flutter - Assets Network- Flutter Basic Crash Course 2022

flutter Design

How to create a Custom Shape in Flutter. Flutter E Commerce app Design. Ecommerce app design Flutter. Flutter clippath tutorial
How to create a Custom Appbar in flutter. Custom Appbar Design. Flutter App Design
16 - Product Card and Grid Layout, How to create a Grid View in Flutter. How to add Products in GridView Layout. Flutter eCommerce app UI Design
Bottom Navigation bar in Flutter. Flutter Material 3 bottom navigation bar. How to design background color of Flutter bottom navigation bar. Flutter ecommerce app design
23 - Product Detail Screen, How to create Products Details Screen in Flutter. Flutter eCommerce app UI Design

Flutter Backend

33 - How to Setup Firebase - Firebase Basics - Flutter Firebase - Flutter ecommerce app with firebase as backend
38 - How to Sign-in with Google in flutter Firebase, Firebase Basics, Flutter Firebase, Flutter ecommerce app with firebase as backend
40 - Flutter Firebase CRUD,  Firebase Basics, Flutter Firebase, Flutter ecommerce app with firebase as backend
Access Admin Panel, Premium Tutorials, Live Chat, 50% off Codes, and More on Patreon!
This is default text for notification bar