Phone number & E-mail verification in Android using Facebook Account Kit

Now-a-days most of the apps we develop are payment related. That’s why it becomes mandatory to verify user by their phone number or e-mail. Normally we do this with Firebase authentication. But recently, Facebook released a new product named Account Kit to make this verification easier. And in this article, we are going to implement this Facebook Account Kit.

Why Facebook Account Kit ?

Though there are some others methods to authenticate users, we should use Facebook Account Kit because of some special reasons. The reasons include:

• The process is very simple and easy to use.
• The login scope is fully handled by Facebook’s secure infrastructure.
• The good thing is that it doesn’t require a Facebook Account for a user to log in.
• It supports up to 10,000 verification messages per month(Relatively cheaper than others). After that, applications that exceed that will be charged at SMS standard rates.

Now lets start and follow the below steps:

Step 1: Create a new project with android studio

Step 2: Create an application on Facebook and Set up Facebook account kit

1. Go to https://developers.facebook.com/apps/, sign in with your credentials and click on the ‘Add a new App’ button.

2. Type the ‘Display Name’ of your application and a ‘Contact Email’ on the input fields and click on ‘Create App Id’. then enter the captcha and click submit.

3. From the left navigation drawer, click on Add a Product then press on the Set Up button on Account Kit.

4. After clicking Set Up skip the Quickstart and go back to the app’s Basic Settings section

5. Head to the bottom of the Settings page and click on the + Add Platform button and then choose Android. This screen will open.

6. Insert your Google Play Package Name, Class Name and Key Hashes on the Android Platform. Save changes and tick: “Use this package name”.

7. Now go to Account Kit’s Settings section and enable “Require server validation”. Then click “Get Started”.

9. Turn off the option “Require App Secret” and make sure the option “Enable Client Access Token Flow” has turned on, set to “YES”. Here you will obtain “Account Kit Client token” which will come in handy in the next steps.

Step 3: Set up Strings.xml

1. Get your “Facebook AppID” from the toolbar on Facebook developers website or you can navigate to: Settings → Basic and copy to App ID.
2. In Android studio open strings.xml file and define below strings.

Step 4: Import Account kit SDK

• Open the app level build.gradle(Module: app) file and add the implementation dependency of account kit with the latest version.

• After adding this, click on sync now and let android studio to import the SDK into your project.

Step 5: Edit AndroidManifest.xml

• Add Internet Permission to Android’s Manifest.

• Add the following meta-data and activity to the application tag of AndroidManifest.xml.

Step 6: Edit interface (activity_main.xml)

• In this tutorial we are going to use a very simple layout. It contains only two buttons, and you can find its code below:

Step 7: Edit Java files

Initialize the SDK

Previously we had the initialize the Account Kit SDK in application class but According to the latest Facebook we now don’t need to initialize it manually, it gets initialize by itself.

Initiate the Login Flow

• For Phone,

• For Email,

Handle response for login flow in Activity’s Result

In onActivityResult method we can notify the user if login failed with Toast message and if login is successful then you can start a new activity.

Accessing account information on the device

• After successful login session, we can access the Account Kit ID, phone number, and Email of the current account by the following code

account.getEmail() will return null if LoginType.PHONE was used in your configuration. Vice versa if you use LoginType.EMAIL in your configuration.

How to check the user is logged in or not?

• By calling AccountKit.getCurrentAccessToken() we can know the user logged in or not.

if (AccountKit.getCurrentAccessToken() != null) {
       // The User is logged in.........
} else {
       // The User is not logged in......
}

How to remove access token on Logout ?

• By calling AccountKit.logout() method we can remove the stored access token.

AccountKit.logOut();

How to Customize the Account Kit User Interface?

It’s not possible to change the whole Account Kit UI. Modification is very limited made by Facebook. You can change Color of texts, buttons, Change background, title, Predefine phone-number etc. You can’t even change the text below the number input.

Customize color of EditText, Button, Text and Background

• To change the color of text, editText, button set a custom theme to the AccountKitActivity inAndroidManifest.xml

And the AppLoginTheme looks like below in style.xml . You can modify this as per your requirements.

Specify target country code

• If you target your app for some specific country you can use setSMSWhitelist(String[] smsWhitelist) method of AccountKitConfigurationBuilder, this will show the list of country codes which we want to target.

String[] smsWhitelist = new String[]{"BD"};
configurationBuilder.setSMSWhitelist(smsWhitelist);

Specify default country code

• You can use setDefaultCountryCode(String defaultCountryCode) in AccountKitConfigurationBuilder to give default value.

String[] smsWhitelist = new String[]{"BD"};
configurationBuilder.setDefaultCountryCode("BD");

Set initial phone number in AccountKitActivity

• You can set the initial phone number by doing:

How to Customize the color of Email?

Account Kit also offers the customization of the color of emails to match the color scheme with the color of your app. To do this-

• Go to the Account kit section of your app dashboard and there you can select the Background color, Button color and Link color of the Email like below.

So we learned about the facebook account kit integration in android app to verify the user of our app via phone OTP and Email. Be sure to give claps if you find this article helpful.

Happy Coding :)