Flutter - Designing Email Authentication System using Firebase

Flutter is an amazing tool for developing cross-platform applications using a single code base. While Flutter is useful, it gets even better when you add Firebase.  In this article, we'll discuss how to implement the Email/Password Authentication process in Flutter, using Firebase.

In this article, we'll cover the following Flutter development aspects:

• Improved widget tree.
• TextFormField Validation logic.
• Toggle password text visibility.
• Handling Authentication errors in UI.
• Custom submit button with loading state.
• UI logic and Firebase authentication logic, separated.

Note: Configure Firebase in your Flutter application, before diving into Firebase Authentication. Check this link for the initial firebase setup with flutter.

Project Preview

Now, let's look into the implementation.

Step-by-Step Implementation

Step 1: Installing and Initializing Firebase

Installation:

Before any Firebase services can be used, you must first install the firebase_core plugin, which is responsible for connecting your application to Firebase. Add the plugin to your pubspec.yaml file. Also, add a few supporting plugins which is used to deal with the authentication flow.

project/lib/pubspec.yaml

dependencies:
 flutter:
 sdk: flutter

firebase_core: "0.5.2"
firebase_auth: "^0.18.3"
provider: ^4.3.2+2
cloud_firestore: ^0.14.3
font_awesome_flutter: ^8.10.0

Install the plugin by running the following command from the project root:

$ flutter pub get

Initializing Firebase

To initialize Firebase, call the .initializeApp() method on the Firebase class, as described in the below code. This method is asynchronous and returns a Future, so we need to ensure it has completed before displaying our main application. Updating the main( ) method of main.dart

project/lib/main.dart

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

Step 2: Folder Structure

Following below folder structure to process forward.

Step 2: Firebase Authentication Service

 Authentication Process:

/libservices/authentication_service.dart

Create a new folder as services, and inside it a new dart file as authentication_service.dart, it will contain all the authentication logic, which in case help us to separate the UI logic.

authentication_service.dart

/libmodels/user_model.dart

The user_model.dart is just a Plain Old Dart Object Strategy, which is used to convert the user model into a Map and also to retrieve it as a Map like it's a JSON object basically.

The authentication_service.dart file:

Below are the methods used in the authentication_service.dart file:

1.   signIn({String email, String password})

• This method accepts email and password as a parameter.
• Email and Password are used to Sign-In the user.
• It returns an appropriate message when the user "Signed In".
• It returns an appropriate message when FirebaseAuthException catches an error.

2.  signUp({String email, String password})

• This method accepts email and password as a parameter.
• Email and Password are used to Register the user.
• It returns an appropriate message when the user "Signed Up” .
• It returns an appropriate message when FirebaseAuthException catches an error.

3.   addUserToDB({String uid, String username, String email, DateTime timestamp})

• This method accepts user uid, username, email, and the current timestamp( DateTime.now( ) ) of the user as a parameter.
• Creating a new document of the current user in the Cloud Firestore Database. (Do enable cloud firestore from your firebase project console). The document name should be the uid of the user.
• This method can only be triggered, when the current user is a new user, i.e the user registered in our application at the initial point.

4.  getUserFromDB({String uid})

• This method accepts the current user uid as a parameter.
• It will help us to get the current user, stored data from the cloud firestore database.

5. signOut()

• This method is simply used to signing out the user from the application.

Step 4 : Checking the Authentication State

Registering the AuthenticationService methods as Provider, in our main.dart file.

Project/lib/main.dart

The AuthenticationWrapper class of main.dart, checks the state of the user. If the user is not Logged-In it will display the AuthScreenView( ), If the user is Logged-In it will display the HomePage( ).

Step 5: Switching Between  ScreenView's, Based On The Authentication State.

AuthScreenView( ):

/lib/pages/auth_screen_view.dart

AuthScreenView is just a pageview, which deals with switching between the LoginPage() and RegisterPage() .

auth_screen_view.dart

 RegisterPage( ):

/lib/pages/register_page.dart

register_page.dart:

Output:

LoginPage( ):

The LoginPage is exactly similar to the RegisterPage, the only difference is, the LoginPage is having only two TextFormField (For email and password) and while submitting it triggers signIn() method of authentication_service.dart

/lib /pages/login_page.dart

login_page.dart:

Output:

 HomePage:

The HomePage will be displayed when the firebaseUser != null, checking from main.dart

lib/pages/home_page.dart

Output:

Final Output: