Making Android Authentication easy for all

Published in

AndroidPub

5 min readJun 20, 2019

What is FirebaseUI Auth?

FirebaseUI is a library built on top of the Firebase Authentication SDK that provides drop-in UI flows for use in your app.

Does It have any benefits over Firebase SDK Authentication why should someone use it?

FirebaseUI provides the following benefits:

Multiple Providers — sign-in flows for email/password, email link, phone authentication, Google Sign-In, Facebook Login, Twitter Login, and GitHub Login.
Account Management — flows to handle account management tasks, such as account creation and password resets.
Account Linking — flows to safely link user accounts across identity providers.
Anonymous User Upgrading — flows to safely upgrade anonymous users.
Custom Themes — customize the look of FirebaseUI to match your app. Also, because FirebaseUI is open source, you can fork the project and customize it exactly to your needs.
Smart Lock for Passwords — automatic integration with Smart Lock for Passwords for fast cross-device sign-in.

What is our aim, What we will be building and why?

Authentication enables organizations to keep the data secure by permitting only authenticated users to access their protected resources. Enabling a secure authentication is the first step in creating any successful app. Our aim is to ease this task so that we can invest our time in solving other problems 😐

We will be building a basic app which will be using FirebaseUI android library for providing some of the famous authentications, we use in our day to day life.

Google
Facebook
Twitter
Phone
Email

Let’s start to build

First of all, open your firebase console and create a new project, for me it is FirebaseAuthentication. Create a new Android project and connect it to Firebase. If you are new to Firebase and don’t know how to connect your app with Firebase, you can follow this

When you are done with project creation and have successfully connected your app with Firebase. Add the following dependencies in your application level build.gradle and re-sync gradle.

//Firebase
implementation 'com.google.firebase:firebase-auth:16.1.0'
implementation 'com.google.firebase:firebase-core:16.0.6'
implementation 'com.firebaseui:firebase-ui-auth:4.3.1'

//Facebook
implementation 'com.facebook.android:facebook-android-sdk:5.0.1'

//Twitter
implementation 'com.twitter.sdk.android:twitter:3.1.0'
implementation 'com.twitter.sdk.android:twitter-core:3.1.0'

Authentication using Google, Email and phone are provided within Firebase but for Facebook and Twitter, you have to add separate dependencies for their SDK and also required to configure the project on their developer console as we do in our Firebase console while creating an app.

You can visit the developer console of Facebook and Twiter here

In the Firebase console, open the Authentication section and enable the sign-in methods you want to support. Some sign-in methods require additional information, you can leave them for now, we will be covering them in later part.

If you support Google Sign-in and haven’t yet specified your app’s SHA-1 fingerprint, do so from the Settings page of the Firebase console. See Authenticating Your Client for details on how to get your app’s SHA-1 fingerprint.

For Facebook and Twitter, you have to create an app on their developer consoles. After creating the app you will be provided with App Id and App secret key which you have to add as string resources to strings.xml It specifies the identifying information required by each provider.

<resources>
    <string name="app_name">Firebase Authentication</string>

    <string name="facebook_application_id">Your_id_here</string>
    <string name="fb_login_protocol_scheme">Your_value_here</string>

    <string name="twitter_consumer_key">Your_key_here </string>
    <string name="twitter_consumer_secret">Your_secret_here </string>
</resources>

You also have to enter the same App Id and secret key in the Firebase console (the additional information which we talking about earlier) at the time of enabling the Facebook and Twitter Sign-In method.

Now come to your Android app and create a new Activity loginActivity. This will be responsible for login work and after successful login, the app will take you to mainActivity where we will be having a sign out button to Sign-out from the app.

To kick off the FirebaseUI sign-in flow, create a sign in intent with your preferred sign-in methods in onCreate method of your loginActivity:

providers = Arrays.asList(
        new AuthUI.IdpConfig.EmailBuilder().build(),
        new AuthUI.IdpConfig.PhoneBuilder().build(),
        new AuthUI.IdpConfig.FacebookBuilder().build(),
        new AuthUI.IdpConfig.GoogleBuilder().build(),
        new AuthUI.IdpConfig.TwitterBuilder().build()
);
showSignInOptions();

Create showSignInOptions a function which will show you all the signIn option we have.

private void showSignInOptions() {
    startActivityForResult(
            AuthUI.getInstance().createSignInIntentBuilder()
                    .setAvailableProviders(providers)
                    .setTheme(R.style.MyTheme)
                    .setLogo(R.drawable.firebase)
                    .build(), MY_REQUEST_CODE
    );

When the sign-in flow is complete, you will receive the result in onActivityResult:

@Override
protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    if (requestCode == MY_REQUEST_CODE) {
        IdpResponse response = IdpResponse.fromResultIntent(data);
        if (resultCode == RESULT_OK) {
            FirebaseUser user = FirebaseAuth.getInstance().getCurrentUser();
            startActivity(new Intent(this, MainActivity.class));
            finish();
            Toast.makeText(this, "Welcome! " + user.getDisplayName(), Toast.LENGTH_LONG).show();
        } else {
            Toast.makeText(this, "" + response.getError().getMessage(), Toast.LENGTH_LONG).show();
        }
    }
}

Here is what your loginActivity will look like after all the work.

If you have noticed, we are using our own theme MyTheme and a image drawable for logo. You can create your own like this in your styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="MyTheme" parent="AppTheme">
        <item name="android:windowBackground">@android:color/white</item>
    </style>

</resources>

Now let's move to mainActivity and create a function to Sign Out from the app. Here is what your mainActivity will look like after creating it.

As you have noticed, we have created a sign_out button to perform signOut. You can create the same with your own choice of color in your activity_main.xml