The new Firebase announcements made at Google I/O 2016 really make Firebase a first-class citizen in the Google ecosystem. Firebase is bringing together all of Google's best offerings and packaging it into a clean and easy-to-use package.
In Part 1, you've learned the way to enabling Firebase auth on it's website and developing a registration screen, which allows users create their own account for your Android application. In this post, I will talk about developing a login screen (with registered Firebase account and get user information when logged in successfully).
DEMO VIDEO:
Declaring it's layout first:
Code for login activity:
As you can see, if login successful, user will be redirected to main activity and I will display user information here! Creating it's layout first:
Source code for main activity:
Output when running login screen:
Logging in:
Main screen (login successful):
When click on Logout button, user will be redirected to login screen again!
Throughout this Firebase tutorial, you’ve learned the basics of Firebase by building a simple authentication app. I hope you liked our Firebase Authentication example tutorial, please leave comments in the comment section below in case of any doubts. From here, you should read the official docs to find out another exciting features (change email, remove user,...). I will have more posts about Firebase about it's main features (push notification, realtime database,...).
References:
In Part 1, you've learned the way to enabling Firebase auth on it's website and developing a registration screen, which allows users create their own account for your Android application. In this post, I will talk about developing a login screen (with registered Firebase account and get user information when logged in successfully).
DEMO VIDEO:
Building the login screen
activity_login.xml
Similar with registration activity, the method help us to login to Firebase server is <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00BCD4"
android:padding="@dimen/activity_horizontal_margin">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="@drawable/firebase" />
<android.support.design.widget.TextInputLayout
android:id="@+id/password_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:inputType="textPassword" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/email_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="@id/password_field"
android:layout_centerInParent="true">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Email"
android:inputType="textEmailAddress" />
</android.support.design.widget.TextInputLayout>
<Button
android:id="@+id/login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/password_field"
android:layout_marginTop="@dimen/activity_horizontal_margin"
android:background="#FFCA28"
android:text="Login" />
</RelativeLayout>
signInWithEmailAndPassword(). The parameters is your email and password. Code for login activity:
LoginActivity.java
package info.devexchanges.firebaselogin;
import android.app.ProgressDialog;
import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.design.widget.TextInputLayout;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import com.google.android.gms.tasks.OnCompleteListener;
import com.google.android.gms.tasks.Task;
import com.google.firebase.auth.AuthResult;
import com.google.firebase.auth.FirebaseAuth;
@SuppressWarnings("ConstantConditions")
public class LoginActivity extends AppCompatActivity {
private TextInputLayout emailField;
private TextInputLayout passwordField;
private View btnLogin;
private ProgressDialog progressDialog;
private FirebaseAuth auth;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_login);
emailField = (TextInputLayout) findViewById(R.id.email_field);
passwordField = (TextInputLayout) findViewById(R.id.password_field);
btnLogin = findViewById(R.id.login);
//Get Firebase auth instance
auth = FirebaseAuth.getInstance();
btnLogin.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (!Utils.hasText(emailField)) {
Utils.showToast(LoginActivity.this, "Please input your email");
} else if (!Utils.hasText(passwordField)) {
Utils.showToast(LoginActivity.this, "Please input your password");
} else {
//requesting Firebase server
showProcessDialog();
authenticateUser(Utils.getText(emailField), Utils.getText(passwordField));
}
}
});
}
private void authenticateUser(String email, String password) {
auth.signInWithEmailAndPassword(email, password)
.addOnCompleteListener(LoginActivity.this, new OnCompleteListener<AuthResult>() {
@Override
public void onComplete(@NonNull Task<AuthResult> task) {
// When login failed
if (!task.isSuccessful()) {
Utils.showToast(LoginActivity.this, "Login error!");
} else {
//When login successful, redirect user to main activity
Intent intent = new Intent(LoginActivity.this, MainActivity.class);
startActivity(intent);
progressDialog.dismiss();
finish();
}
}
});
}
private void showProcessDialog() {
progressDialog = new ProgressDialog(this);
progressDialog.setTitle("Login");
progressDialog.setMessage("Logging in Firebase server...");
progressDialog.show();
}
}
Show user information in main activity
activity_main.xml
In Java code, Firebase user profile was stored by <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="@dimen/activity_horizontal_margin">
<ImageView
android:id="@+id/user_photo"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:src="@drawable/firebase"
android:contentDescription="@null" />
<TextView
android:id="@+id/user_id"
android:textStyle="bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/activity_horizontal_margin" />
<TextView
android:id="@+id/email_field"
android:textStyle="bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/activity_horizontal_margin" />
<TextView
android:id="@+id/displayed_name"
android:textStyle="bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/activity_horizontal_margin" />
<Button
android:id="@+id/logout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/activity_horizontal_margin"
android:background="#FFA000"
android:text="LogOut" />
</LinearLayout>
FirebaseUser object. Get current FirebaseUser instance by this line:
FirebaseUser user = FirebaseAuth.getInstance().getCurrentUser();
getUid(): return user account id (inString)getEmail(): return registered emailgetDisplayName(): return user registered name (if existed)getPhotoUrl(): return user avatar Url inString(if existed).
FirebaseAuth.AuthStateListener interface to detect state changed of FirebaseUser, when it is null, redirecting user to login screen. The fact that, this happen when user logging out.Source code for main activity:
MainActivity.java
Another necessary files, you can look at Part 1!
package info.devexchanges.firebaselogin;
import android.annotation.SuppressLint;
import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import com.google.firebase.auth.FirebaseAuth;
import com.google.firebase.auth.FirebaseUser;
import com.squareup.picasso.Picasso;
public class MainActivity extends AppCompatActivity {
private FirebaseAuth.AuthStateListener authListener;
private FirebaseAuth auth;
private ImageView imageView;
private TextView email;
private TextView name;
private View btnLogOut;
private TextView userId;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
name = (TextView) findViewById(R.id.displayed_name);
email = (TextView) findViewById(R.id.email_field);
btnLogOut = findViewById(R.id.logout);
userId = (TextView) findViewById(R.id.user_id);
imageView = (ImageView) findViewById(R.id.user_photo);
//get firebase auth instance
auth = FirebaseAuth.getInstance();
//get current user
FirebaseUser user = FirebaseAuth.getInstance().getCurrentUser();
setDataToView(user);
//add a auth listener
authListener = new FirebaseAuth.AuthStateListener() {
@SuppressLint("SetTextI18n")
@Override
public void onAuthStateChanged(@NonNull FirebaseAuth firebaseAuth) {
Log.d("MainActivity", "onAuthStateChanged");
FirebaseUser user = firebaseAuth.getCurrentUser();
if (user != null) {
setDataToView(user);
//loading image by Picasso
if (user.getPhotoUrl() != null) {
Log.d("MainActivity", "photoURL: " + user.getPhotoUrl());
Picasso.with(MainActivity.this).load(user.getPhotoUrl()).into(imageView);
}
} else {
//user auth state is not existed or closed, return to Login activity
startActivity(new Intent(MainActivity.this, LoginActivity.class));
finish();
}
}
};
//Signing out
btnLogOut.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
auth.signOut();
}
});
}
@SuppressLint("SetTextI18n")
private void setDataToView(FirebaseUser user) {
email.setText("User Email: " + user.getEmail());
name.setText("User name: " + user.getDisplayName());
userId.setText("User id: " + user.getUid());
}
@Override
public void onStart() {
super.onStart();
auth.addAuthStateListener(authListener);
}
@Override
public void onStop() {
super.onStop();
if (authListener != null) {
auth.removeAuthStateListener(authListener);
}
}
}
Running application
Conclusions
References:
- About Firebase on Wikipedia.
- Firebase overview in Google I/O 2016
- Firebase Authenticating document
- Read Part 1 here!
- About push notifications by Firebase: read this post.
