Android Simply Login Using Firebase UI

Hello everyone, today i gonna be post a nice tutorial relate with login process that provided by Firebase called Firebase UI.

 

What is Firebase UI ?

As simple as i can explain, Firebase UI will provide us the easy way  to creating login process even  login using Facebook, Google account, Email or Twitter

With Firebase UI you don't need create your login form or other API to do login, Firebase UI will handle it all.

Video Result

For achieve that goal, please follow the following steps :

Create Your Application On Firebase

Please go to firebase console and create your project

Create firebase project

After that, choose your platform, in this case choose Android Platform.

Choose platform

Add your SHA-1 key and your package name

Add package name and SHA-1

Download the google-service.json

Download google-service.json

After downloaded, place it inside your app folder. Please take a look at the following figure

App folder

Configuration Gradle

Make sure your gradles are similar with the following gradles :

build.gradle(Project : YourProjectName)

	// Top-level build file where you can add configuration options common to all sub-projects/modules.
	buildscript {
	repositories {
	google()
	jcenter()
	}
	dependencies {
	classpath 'com.android.tools.build:gradle:3.0.0'
	//add this line after download google-service.json
	classpath 'com.google.gms:google-services:3.1.0'
	// NOTE: Do not place your application dependencies here; they belong
	// in the individual module build.gradle files
	}
	}
	allprojects {
	repositories {
	google()
	jcenter()
	}
	}
	task clean(type: Delete) {
	delete rootProject.buildDir
	}

view raw build.gradle hosted with ❤ by GitHub

build.gradle(Module : App)

	apply plugin: 'com.android.application'
	android {
	compileSdkVersion 26
	defaultConfig {
	applicationId "com.androidbie.firebasephonenumberverification"
	minSdkVersion 19
	targetSdkVersion 26
	versionCode 1
	versionName "1.0"
	testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
	}
	buildTypes {
	release {
	minifyEnabled false
	proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
	}
	}
	}
	dependencies {
	implementation fileTree(dir: 'libs', include: ['*.jar'])
	implementation 'com.android.support:appcompat-v7:26.1.0'
	implementation 'com.android.support.constraint:constraint-layout:1.0.2'
	testImplementation 'junit:junit:4.12'
	androidTestImplementation 'com.android.support.test:runner:1.0.1'
	androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
	//compile this line
	compile 'com.google.firebase:firebase-auth:11.4.2'
	//firebase UI auth
	compile 'com.firebaseui:firebase-ui-auth:3.1.0'
	}
	//add this line after download google-service.json
	apply plugin: 'com.google.gms.google-services'

view raw build.gradle hosted with ❤ by GitHub

Create your Android Studio Project

You just need 1 XML layout and 1 java class to create login process using Firebase UI. Here they are :

activity_main.xml

Write the following code to create a simple view.

	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:id="@+id/main_layout"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:orientation="vertical"
	android:weightSum="4">
	<TextView
	android:id="@+id/textview_login_description"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:textSize="20sp"
	android:text="@string/please_login_before_verification_your_phone"
	android:layout_gravity="center"
	android:gravity="center"
	android:layout_marginTop="20dp"
	android:textColor="@android:color/black"/>
	<LinearLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_marginTop="20dp"
	android:layout_gravity="center"
	android:gravity="center"
	android:orientation="horizontal">
	<FrameLayout
	android:layout_marginRight="2dp"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_gravity="center"
	android:background="@color/colorPrimary">
	<Button
	android:id="@+id/btn_login"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:background="?attr/selectableItemBackground"
	android:text="Login"
	android:textColor="@android:color/white"
	android:textAllCaps="false" />
	</FrameLayout>
	<FrameLayout
	android:layout_marginRight="2dp"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_gravity="center"
	android:background="@color/colorPrimary">
	<Button
	android:id="@+id/btn_logout"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:background="?attr/selectableItemBackground"
	android:text="Logout"
	android:visibility="gone"
	android:textColor="@android:color/white"
	android:textAllCaps="false" />
	</FrameLayout>
	</LinearLayout>
	</LinearLayout>

view raw activity_main.xml hosted with ❤ by GitHub

MainActivity.java

	package com.androidbie.firebasephonenumberverification;
	import android.app.Dialog;
	import android.content.DialogInterface;
	import android.content.Intent;
	import android.support.annotation.NonNull;
	import android.support.v4.widget.SwipeRefreshLayout;
	import android.support.v7.app.AlertDialog;
	import android.support.v7.app.AppCompatActivity;
	import android.os.Bundle;
	import android.text.TextUtils;
	import android.util.Log;
	import android.view.View;
	import android.widget.Button;
	import android.widget.EditText;
	import android.widget.TextView;
	import android.widget.Toast;
	import com.firebase.ui.auth.AuthUI;
	import com.firebase.ui.auth.IdpResponse;
	import com.google.android.gms.tasks.OnCompleteListener;
	import com.google.android.gms.tasks.Task;
	import com.google.firebase.FirebaseException;
	import com.google.firebase.FirebaseTooManyRequestsException;
	import com.google.firebase.auth.AuthResult;
	import com.google.firebase.auth.FirebaseAuth;
	import com.google.firebase.auth.FirebaseAuthInvalidCredentialsException;
	import com.google.firebase.auth.FirebaseUser;
	import com.google.firebase.auth.PhoneAuthCredential;
	import com.google.firebase.auth.PhoneAuthProvider;
	import java.util.Arrays;
	import java.util.List;
	import java.util.concurrent.TimeUnit;
	public class MainActivity extends AppCompatActivity implements View.OnClickListener, FirebaseAuth.AuthStateListener {
	private static final int RC_SIGN_IN = 123;
	private static final String TAG = "MainActivity>.TAG";
	private TextView tvDesc;
	private Button btnLogin;
	private Button btnLogout;
	private FirebaseUser user;
	FirebaseAuth firebaseAuth = FirebaseAuth.getInstance();
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	tvDesc = findViewById(R.id.textview_login_description);
	btnLogin = findViewById(R.id.btn_login);
	btnLogout = findViewById(R.id.btn_logout);
	btnLogin.setOnClickListener(this);
	btnLogout.setOnClickListener(this);
	firebaseAuth.addAuthStateListener(this);
	}
	@Override
	public void onClick(View v) {
	int id = v.getId();
	if(id == R.id.btn_login){
	signIn();
	}else if(id == R.id.btn_logout){
	signOut();
	}
	}
	private void signIn(){
	List<AuthUI.IdpConfig> providers = Arrays.asList(
	new AuthUI.IdpConfig.Builder(AuthUI.EMAIL_PROVIDER).build(),
	new AuthUI.IdpConfig.Builder(AuthUI.GOOGLE_PROVIDER).build()
	);
	startActivityForResult(
	AuthUI.getInstance()
	.createSignInIntentBuilder()
	.setAvailableProviders(providers)
	.build(),
	RC_SIGN_IN
	);
	}
	private void signOut(){
	AuthUI.getInstance()
	.signOut(this)
	.addOnCompleteListener(new OnCompleteListener<Void>() {
	@Override
	public void onComplete(@NonNull Task<Void> task) {
	Toast.makeText(MainActivity.this, "Successfully Logout", Toast.LENGTH_SHORT).show();
	onViewStateLogout();
	}
	});
	}
	@Override
	protected void onActivityResult(int requestCode, int resultCode, Intent data) {
	super.onActivityResult(requestCode, resultCode, data);
	if(requestCode == RC_SIGN_IN){
	IdpResponse response = IdpResponse.fromResultIntent(data);
	Log.d(TAG, "onActivityResult: " + response.getEmail() + ", " + response.getIdpToken());
	if(resultCode==RESULT_OK){
	user = FirebaseAuth.getInstance().getCurrentUser();
	onViewStateLogin();
	}else{
	Toast.makeText(this, "SignIn Failed", Toast.LENGTH_SHORT).show();
	}
	}
	}
	private void onViewStateLogin(){
	btnLogin.setVisibility(View.GONE);
	btnLogout.setVisibility(View.VISIBLE);
	tvDesc.setText("Hello, " +firebaseAuth.getCurrentUser().getDisplayName());
	}
	private void onViewStateLogout(){
	btnLogin.setVisibility(View.VISIBLE);
	btnLogout.setVisibility(View.GONE);
	tvDesc.setText(R.string.please_login_before_verification_your_phone);
	}
	@Override
	public void onAuthStateChanged(@NonNull FirebaseAuth firebaseAuth) {
	if(firebaseAuth.getCurrentUser()!=null){
	onViewStateLogin();
	}else{
	onViewStateLogout();
	}
	}
	@Override
	public void onResume() {
	super.onResume();
	firebaseAuth.addAuthStateListener(this);
	}
	@Override
	public void onPause() {
	super.onPause();
	firebaseAuth.removeAuthStateListener(this);
	}
	}

view raw MainActivity.java hosted with ❤ by GitHub

Run your project, and may it running well. Thank you.

Download the project here : LINK GITHUB