flutter_gb_authentication_fire_social 3.0.0 copy "flutter_gb_authentication_fire_social: ^3.0.0" to clipboard
flutter_gb_authentication_fire_social: ^3.0.0 copied to clipboard

A utility package when integrating authentication with social media (facebook,apple,google) using BLoC pattern

Authentication Fire Social #

Features #

⚠️ WARNING ⚠️ #

First of all, you should make sure that the Firebase project is already configured and you have access to it.

Necessary Dependencies #

Add the following dependencies to your pubspec.yaml file:

firebase_auth: ^4.4.2 # Or higher
firebase_core: ^2.3.0 # Or higher
flutter_gb_authentication_fire_social: 2.0.0

Depending on which social provider used install the required companion package

flutter_gb_authentication_fire_social_google flutter_gb_authentication_fire_social_apple flutter_gb_authentication_fire_social_facebook

Android Configuration #

  1. Go to the Firebase Console and then open the project configuration.

  2. Scroll down until Your apps section, you will see the configured applications.

  3. Click the google-services.json button to download the configuration file in both Android apps (Dev and Production).

  4. Now in your project folder, go to the android/app/src/ folder.

  5. Create a folder for each flavor inside the mentioned folder above and paste the corresponding google-services.json file for each one.

  6. After that, in the android/build.gradle file, add the Google Services plugin within dependencies.

dependencies {
        classpath 'com.android.tools.build:gradle:4.1.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        classpath 'com.google.gms:google-services:4.3.10'  // Google Services plugin
  1. In the android/app/build.gradle file, apply the Google Services plugin.
apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
apply plugin: 'com.google.gms.google-services'  // Google Services plugin
  1. We need to implement Multidex support in our Gradle dependencies inside the android/app/build.gradle file to prevent any issues while using Firebase.
dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'com.android.support:multidex:2.0.1' // MultiDex
  1. Also, we will need to enable the Multidex support within the mentioned file above but inside of defaultConfig.
defaultConfig {
        applicationId "com.example.app"
        minSdkVersion flutter.minSdkVersion
        targetSdkVersion flutter.targetSdkVersion
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
        multiDexEnabled true // Enable MultiDex
  1. Google

    • Google Config
      1. Make sure you add your key SHA to firebase project configuration.
  2. Facebook

    • Facebook Config

      1. If your project handles login-signup with Facebook, you should add your facebook_app_id and facebook_client_token within android/app/src/main/res/values/strings.xml file.
          <string name="facebook_app_id">YOUR_ID</string>
          <string name="facebook_client_token">YOUR_CLIENT_TOKEN</string>
      1. You will need to add a query and meta-data tag within android/src/app/main/AndroidManifest.xml file to finish the FaceBook configuration.

        <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.boxxie.app">
            <!-- If using Facebook ADD THIS queries -->
                <provider android:authorities="com.facebook.katana.provider.PlatformProvider" />
            <application android:label="@string/app_name" android:name="${applicationName}" android:icon="@mipmap/launcher_icon">
        				<!-- If using Facebook ADD BOTH meta-data -->
                <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id" />
                <meta-data android:name="com.facebook.sdk.ClientToken" android:value="@string/facebook_client_token" />
        		    ...More code
        		...More code 
  3. Apple Sign In

    • Apple Config
      1. Activate Apple Sign-In method under Firebase Console → Authentication → Sign In method
      2. We recommend following these instructions to configure Apple Services to create an Apple Sign-in service ID
        1. Create Apple Sign-in service
        2. Enable Apple Sign-in capability on each App ID
        3. Generate a Key for the Apple Sign in Service
        4. Fill Firebase configuration data in Apple Sign-in method
      3. Configure AuthenticationFireSocialConfigModel.appleWebAuthentication (WebAuthenticationOptions) setting.

iOS Configuration #

  1. Go to the Firebase Console and then open the project configuration.

  2. Scroll down until Your apps section, you will see the configured applications.

  3. Click the GoogleService-Info.plist button to download the configuration file in both iOS apps (Dev and Production).

  4. Now in your project folder, go to the ios folder and create a new one called config, in case it doesn’t exists.

  5. Within config folder create a folder for each scheme and paste the corresponding GoogleService-Info.plist file for each one.

  6. Make sure you follow this instructions if using a flavored project.

  7. Open your ios/Runner/Info.plist file and add the following code.

					<!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID -->
  1. For Facebook:
    • Add in you ios/Runner/Info.plist:

      <string>{App Name}</string>
  2. For Apple:
    1. Enable Apple Sign-In capability inside the XCode project.

Injection Configuration #

  1. In your lib/core/injection_config.dart file you should create an instance of AuthenticationFireSocialConfigModel and add your custom endpoints, do it within configureDependencies method.
final authConfig = AuthenticationFireSocialConfigModel(
    loginCredentialsAPIendpoint: () {
      return EnvironmentConfig.api_url + ApiEndpoints.login();
    customLoginRequestMapper: (email, password) {
      return {
        "emailOrUsername": email,
        "password": password,
    signupCredentialsAPIendpoint: () {
      return EnvironmentConfig.api_url + ApiEndpoints.signup();
    authenticateGoogleAPIendpoint: (_) {
      return EnvironmentConfig.api_url + ApiEndpoints.authFirebaseSocial();
    authenticateFacebookAPIendpoint: (_) {
      return EnvironmentConfig.api_url + ApiEndpoints.authFirebaseSocial();
    authenticateAppleAPIendpoint: (_) {
      return EnvironmentConfig.api_url + ApiEndpoints.authFirebaseSocial();
  1. Also you will need call configureAuthenticationAdvancedInjection inside of configureDependencies method.
// configure Auth Package
  await configureAuthenticationAdvancedInjection(
    customAuthServiceFactory: (() {
      // register custom impl of auth Service
      return CustomAuthenticationServiceImpl(
        config: authConfig,
        httpClient: getIt(),
        sharedPreferences: getIt(),
        appleSignInFacade: getIt(),
        facebookSignInFacade: getIt(),
        googleSignInFacade: getIt(),
        logger: getAuthenticationSocialLogger(authConfig),

Firebase Initialization #

Make sure you initialize Firebase at the beginning of your application, normally main.dart.