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.

     <resources>
         <string name="facebook_app_id">YOUR_ID</string>
         <string name="facebook_client_token">YOUR_CLIENT_TOKEN</string>
     </resources>
     

     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 -->
        		<queries>
                <provider android:authorities="com.facebook.katana.provider.PlatformProvider" />
            </queries>
                   
            <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
        	  </application>
        		...More code 
        </manifest>
        

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.

<key>CFBundleURLTypes</key>
<array>
		<dict>
				<key>CFBundleTypeRole</key>
				<string>Editor</string>
				<key>CFBundleURLSchemes</key>
				<array>
					<!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID -->
					<string>$(GOOGLE_REVERSED_ID)</string>
				</array>
		</dict>
</array>

1. For Facebook:

   • Add in you ios/Runner/Info.plist:

     <key>CFBundleURLTypes</key>
     <array>
       <dict>
       <key>CFBundleURLSchemes</key>
       <array>
         <string>fb{FACEBOOK_CLIENT_ID}</string>
       </array>
       </dict>
     </array>
     <key>FacebookAppID</key>
     <string>{FACEBOOK_CLIENT_ID}</string>
     <key>FacebookClientToken</key>
     <string>{FACEBOOK_CLIENT_TOKEN}</string>
     <key>FacebookDisplayName</key>
     <string>{App Name}</string>
           
     <key>LSApplicationQueriesSchemes</key>
     <array>
       	<string>fbapi</string>
     		<string>fb-messenger-share-api</string>
     	<string>tel</string>
     	<string>https</string>
       	<string>http</string>
     </array>
     
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(
    environment,
    authConfig,
    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.