Skip to content

Authentication

This documentation provides an overview of how Firebase Authentication and Google Sign-In are integrated into the app. It covers the setup on the Firebase portal, the AuthService class, the UserAuthProvider class, and the profile update and login/logout functionalities.

Features

  • Email/Password Sign-In
  • Google Sign-In
  • Profile Update
  • Logout

Firebase Setup

Firebase offers multiple authentication methods. Enable Email/Password and Google provider sign in to get started.

Authentication Options
  1. In the Firebase console’s Authentication section, open the Sign in method page.

  2. From the Sign in method page, enable the Email/password sign-in method and click Save.

    Email/Password Sign-In
  3. Enable Google signin and provide your support email. Save and proceed.

    Google Sign-In

    The public facing name for the project is shown when the Google sign in method is used on this screen:

    Sign-In Screen

    google_sign_in package is used in Flutter to enable authentication. For authentication on IOS device, you need to follow the steps here: https://pub.dev/packages/google_sign_in_ios#ios-integration.

    You should see authentication setup something like this:

    Authentication Setup

AuthService Class

The AuthService class handles all authentication-related operations, including sign-in, sign-out, registration, and profile updates.

Key Methods

  • Auth State Changes: This stream notifies listeners about changes in the user’s authentication state (e.g., sign-in, sign-out).
    Stream<User?> get authStateChanges => _auth.authStateChanges();
  • User Changes: This stream notifies listeners about changes to the user’s profile information.
    Stream<User?> get userChanges => _auth.userChanges();
  • Sign In with Email and Password
  • Google Sign-In
  • Sign Out
  • Update Display Name
  • Update User Photo
  • Update Password

Design

The UserAuthProvider class extends ChangeNotifier and manages the user’s authentication state. It listens to authentication state changes and user profile changes, updating its internal state and notifying listeners accordingly.

UserAuthProvider contains instance of AuthService to interact with Firebase Authentication. The constructor sets up listeners for authentication state changes and user profile changes. When these events occur, the _onAuthUserChanged method is called.

UserAuthProvider() {
_authService.authStateChanges.listen(_onAuthUserChanged);
_authService.userChanges.listen(_onAuthUserChanged);
}
void _onAuthUserChanged(User? user) {
_user = user;
notifyListeners();
}
  • The provider centralizes the authentication state, ensuring that all parts of the app have a consistent view of the user’s authentication status.
  • By using a provider, the authentication logic is decoupled from the UI components. This separation makes the code more modular, easier to maintain, and testable.

Display

Profile PageProfile Page

References

  1. https://pub.dev/packages/google_sign_in
  2. https://pub.dev/packages/firebase_auth