Real-time shared expense tracker app using Flutter and Firebase: Part 3— Firebase Authentication for users.

In the previous article-Part 2, we saw how to get the firebase project started with flutterfire cli. In the app architecture, I mentioned that we have our user access the app via their google credentials. This facility is enabled by firebase authentication. The firebase authentication console gives you many options to choose from and several plans where we can enable different types of validation. The cloud authentication portal looks something like this image.

After enabling Google as a provider, we need to follow steps mentioned in the official documentation. flutter provides a package that can simplify the user Authentication UI and logic for that we need these dependencies.

//for enabling firebase authentication in app
firebase_auth: ^4.15.3
// for creating the authentication ui
firebase_ui_auth: ^1.11.0
// for adding google authentication tabs
firebase_ui_oauth_google: ^1.2.15

Now after importing these dependencies, we can create authentication page. the logic is, whenever a user opens app, the authentication is verified, if the verification is not successful, the app will show the authentication page. Whenever authentication is successful whether from the page or directly after opening the app, user moves to the next page with the authenticated user data. Also, in later section we will discuss adding the new authenticated user to the database.

User user = FirebaseAuth.instance.currentUser!;
            UserData userdata = UserData(
                username: user.displayName!,
                uid: user.uid,
                devicetoken: FirebaseMessagingClass.device_token);
            // This adding user to the database
            FirebaseDatabaseClass.setUserValue(userdata);

For enabling the google credentials, we need the web credentials from firebase cloud portal and paste it as ClientID.

providers: [GoogleProvider( clientId:'####################.apps.googleusercontent.com')],

the web credentials are generated when we register the flutter app in the firebase project. We use StreamBuilder to listen to the authentication stream.

stream: FirebaseAuth.instance.authStateChanges()

The entire class looks like below.

class AuthGate extends StatelessWidget {
  const AuthGate({super.key});
  static const route = '/auth-gate';

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<User?>(
        stream: FirebaseAuth.instance.authStateChanges(),
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return SignInScreen(
              providers: [
                //EmailAuthProvider(),
                GoogleProvider(
                    clientId:
                        '####################.apps.googleusercontent.com')
              ],
            );
          } else {
            User user = FirebaseAuth.instance.currentUser!;
            UserData userdata = UserData(
                username: user.displayName!,
                uid: user.uid,
                devicetoken: FirebaseMessagingClass.device_token);
            // This adding user to the database
            FirebaseDatabaseClass.setUserValue(userdata);
            return ChatPage(user: user);
          }
        });
  }
}

Firebase authentication packages provide many services, after authentication, firebase creates a unique client id (uid) for each user. This uid is effective in simple but effective database rules to provide read / write access to specific users. In next section we will see how chat application is created using firebase.