flutter_account_kit

pub package Build Status Coverage Status A Flutter plugin for allowing users to authenticate with the native Android & iOS AccountKit SDKs

How do I use it?

For complete API documentation, just see the source code.

import 'package:flutter_account_kit/flutter_account_kit.dart';

AccountKit akt = new AccountKit();
LoginResult result = await akt.logInWithPhone();

switch (result.status) {
  case LoginStatus.loggedIn:
    _sendTokenToServer(result.accessToken.token);
    _showLoggedInUI();
    break;
  case LoginStatus.cancelledByUser:
    _showCancelledMessage();
    break;
  case LoginStatus.error:
    _showErrorOnUI();
    break;
}

Installation

To get things up and running, you'll have to declare a pubspec dependency in your Flutter project. Also some minimal Android & iOS specific configuration must be done, otherwise your app will crash.

On your Flutter project

See the installation instructions on pub.

Configuration

Find out your Facebook App ID and AccountKit Client Token from Facebook App's dashboard in the Facebook developer console.

Android
1. In **\/android/app/src/main/res/values/strings.xml**
  ...
  <string name="fb_app_id">YOUR_FACEBOOK_APP_ID</string>
  <string name="ak_client_token">YOUR_CLIENT_TOKEN</string>
  1. In /android/app/src/main/AndroidManifest.xml
  ...
  <application>

      ...
      <meta-data
          android:name="com.facebook.sdk.ApplicationId"
          android:value="@string/fb_app_id" />
      <meta-data
          android:name="com.facebook.accountkit.ApplicationName"
          android:value="@string/app_name" />
      <meta-data
          android:name="com.facebook.accountkit.ClientToken"
          android:value="@string/ak_client_token" />
   </application>
   ...

This is the minimal required configuration. Take a look to the Account Kit documentation for Android for a more detailed guide.

(Optional) Exclude backup for Access Tokens on Android >= 6.0

As per this documentation, Account Kit does not support automated backup (introduced in Android 6.0). The following steps will exclude automated backup

  1. Create a file /android/app/src/main/res/xml/backup_config.xml that contains the following:
  <?xml version="1.0" encoding="utf-8"?>
  <full-backup-content>
    <exclude domain="sharedpref" path="com.facebook.accountkit.AccessTokenManager.SharedPreferences.xml"/>
  </full-backup-content>
  1. In your AndroidManifest.xml add the following to exclude backup of Account Kit's Access Token.
  <application
    //other configurations here
    android:fullBackupContent="@xml/backup_config" // add this line
   >
iOS

Add your Facebook credentials to your project's Info.plist file

  <plist version="1.0">
    <dict>
      ...
      <key>FacebookAppID</key>
      <string>{your-app-id}</string>
      <key>AccountKitClientToken</key>
      <string>{your-account-kit-client-token}</string>
      <key>CFBundleURLTypes</key>
      <array>
        <dict>
          <key>CFBundleURLSchemes</key>
          <array>
            <string>ak{your-app-id}</string>
          </array>
        </dict>
      </array>
      ...
    </dict>
  </plist>

This is the minimal required configuration. Take a look to the Account Kit documentation for iOS for a more detailed guide.

Done!

Themes

iOS
import 'package:flutter/material.dart';
import 'package:flutter_account_kit/flutter_account_kit.dart';

final theme = AccountKitTheme(
    // Background
    backgroundColor: Color.fromARGB(255, 0, 120, 0,),
    backgroundImage: 'background.png',
    // Button
    buttonBackgroundColor: Color.fromARGB(255, 0, 153, 0),
    buttonBorderColor: Color.fromARGB(255, 0, 255, 0),
    buttonTextColor: Color.fromARGB(255, 0, 255, 0),
    // Button disabled
    buttonDisabledBackgroundColor: Color.fromARGB(255, 100, 153, 0),
    buttonDisabledBorderColor: Color.fromARGB(255, 100, 153, 0),
    buttonDisabledTextColor: Color.fromARGB(255, 100, 153, 0),
    // Header
    headerBackgroundColor: Color.fromARGB(255, 0, 153, 0),
    headerButtonTextColor: Color.fromARGB(255, 0, 153, 0),
    headerTextColor: Color.fromARGB(255, 0, 255, 0),
    // Input
    inputBackgroundColor: Color.fromARGB(255, 0, 255, 0),
    inputBorderColor: Color.hex('#ccc'),
    inputTextColor: Color(0xFFb74093),
    // Others
    iconColor: Color(0xFFFFFFFF),
    textColor: Color(0xFFb74093),
    titleColor: Color(0xFFb74093),
    // Header
    statusBarStyle: StatusBarStyle.lightStyle, // or StatusBarStyle.defaultStyle
   );
AccountKit akt = new AccountKit();
Config cfg = Config()
             ..theme = theme;
akt.configure(cfg);

To see the statusBarStyle reflected you must set the UIViewControllerBasedStatusBarAppearance property to true on your app's Info.plist file. You can do it from XCode screen shot 2016-08-02 at 11 44 07 am

Android

<br/>

Check this commit to see how it's done in our sample app

  1. In your application styles.xml file (usually located in /android/app/src/main/res/values folder) create a Theme with the following schema
<style name="LoginThemeYellow" parent="Theme.AccountKit">
    <item name="com_accountkit_primary_color">#f4bf56</item>
    <item name="com_accountkit_primary_text_color">@android:color/white</item>
    <item name="com_accountkit_secondary_text_color">#44566b</item>
    <item name="com_accountkit_status_bar_color">#ed9d00</item>

    <item name="com_accountkit_input_accent_color">?attr/com_accountkit_primary_color</item>
    <item name="com_accountkit_input_border_color">?attr/com_accountkit_primary_color</item>
</style>

See the full set of customizable fields here

  1. In your app AndroidManifest.xml file (usually under /android/app/src/main folder) set that Theme to the AccountKitActivity
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" <-- Add this line
    ...>

    <!-- Set the AccountKitActivity theme -->
    <activity
      tools:replace="android:theme"
      android:name="com.facebook.accountkit.ui.AccountKitActivity"
      android:theme="@style/LoginThemeYellow" />

</manifest>

Troubleshooting

"A system issue occured, Please try again" when sending SMS

A. Check your FacebookAppID and AccountKitClientToken on iOS Info.plist and Android strings.xml are correct

B. If you have enabled the client access token flow in fb account kit dashboard, then responseType should be set to code when calling configure

// Configures the SDK with some options
import 'package:flutter_account_kit/flutter_account_kit.dart';

AccountKit akt = new AccountKit();
Config cfg = Config()
             ..responseType = ResponseType.code;
akt.configure(cfg);


Inspiration

This project was inspired by flutter_facebook_login and react-native-facebook-account-kit

Libraries

flutter_account_kit
i18n