Firebase Authentication P-1

Authenticating using E-mail and Password

Firebase is Google’s mobile application development platform that helps you build, improve, and grow your application. Firebase provides support for building better apps using

• Cloud Firestore for storing and syncing app data at global scale
• ML Kit (Machine Learning for mobile developers)(Beta)
• Cloud Functions to run backend code without managing servers
• Authentication for authenticating user simply and securely
• Hosting for delivering web app assests with speed and security
• Realtime Database for storing and syncing app data in milliseconds

Lets explore more about the authentication and different sign-in methods

Go to the Firebase console and login with your account then you can create a project within three steps

Step 1: Enter your project name (Use the same name which you have used when creating the application)

Step 2: Allow Google analytics for your project

Step 3: Configure google analytics using default account for firebase

Your project will be created within a minute :)

Now open Android Studio and create a project with the same app name.

Go to app -> resources -> layout

You can see a file named activity_main.xml is created automatically. In this folder we should create two more files one for register activity and another for login activity. Right click on the layout folder then go to new -> activity and select empty activity

Name this as activity_register.xml a respective java file will be created in the java folder. Repeat the same and create another layout for login activity and name it as activity_login.xml

Now go to the design part of the activity register and drag a text field to the layout for getting full name and make it look good according to the background by adjusting size. Using the same steps add three more text fields for email, password and phone number. Similarly add a button to submit the details. Using a constraint layout helps managing all the components in the layout easily. Link the constraints to the respective fields in the order.

Drag and drop a progress bar and make it as invisible to make it visible when some work is happening.

Example of making a text field:

<EditText
    android:id="@+id/Email"
    android:layout_width="342dp"
    android:layout_height="40dp"
    android:layout_marginStart="14dp"
    android:layout_marginLeft="14dp"
    android:layout_marginTop="14dp"
    android:layout_marginEnd="14dp"
    android:layout_marginRight="14dp"
    android:background="@android:color/background_dark"
    android:ems="10"
    android:hint="e-mail"
    android:inputType="PersonName"
    android:textColor="#FFFFFF"
    android:textColorHint="#FFFFFF"
    android:textSize="12sp"
    android:typeface="normal"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/fullName"
    app:layout_constraintVertical_bias="0.0" />

Now go to register.java file and create a register class with

public class Register extends AppCompatActivity {
    EditText mFullName,mEmail,mPassword,mPhone;
    TextView mLoginBtn;
    Button mRegisterBtn;
    ProgressBar progressBar;
    FirebaseAuth fAuth;

After creating the variables link those variables to the activity_register.xml file by using findViewById()

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_register);

    mFullName    = findViewById(R.id.fullName);
    mEmail       = findViewById(R.id.Email);
    mPassword    = findViewById(R.id.password);
    mPhone       = findViewById(R.id.phone);
    mLoginBtn    = findViewById(R.id.createText);
    mRegisterBtn = findViewById(R.id.registerBtn);
    progressBar  = findViewById(R.id.progressBar);
    fAuth        = FirebaseAuth.getInstance();

Set an OnClickListener to mRegisterBtn and get the email and password as strings from mEmail and mPassword fields.

Registering user with Firebase:

Before registering the user the application must be connected to the firebase.

To do that go to tools and click firebase then click authentication and click Email and password authentication.

Click connect to firebase and login with the same account

And in Add firebase authentication to to your app allow the dependencies to setup correctly.

After connecting go to firebase console. In the develop section click authentication then go to sign-in methods and enable Email/Password and save it.

Use the createUserWithEmailAndPassword() and add user in the database. Now use the if-else condition to check the user creation status and update the user with Toast.makeText() with a message in it.

fAuth.createUserWithEmailAndPassword(email,password).addOnCompleteListener(new OnCompleteListener<AuthResult>() {
    @Override
    public void onComplete(@NonNull Task<AuthResult> task) {
        if(task.isSuccessful()){
            Toast.makeText(Register.this, "User Created", Toast.LENGTH_SHORT).show();
            startActivity(new Intent(getApplicationContext(),MainActivity.class));
        }else{
            Toast.makeText(Register.this, "Error !" + task.getException().getMessage(), Toast.LENGTH_SHORT).show();
        }
    }
});

Now use isEmpty() to make sure that the fields are not null and use .length() to confirm that the password is more than 6 characters.

if(TextUtils.isEmpty((email))){
    mEmail.setError("Email is Required");
    return;
}

if(TextUtils.isEmpty(password)){
    mPassword.setError("Password is Required");;
    return;
}

if(password.length()<6){
    mPassword.setError("Password must be >= 6 characters");
    return;
}

Finally use setOnClickListener() to the register button to make it interactive and make the progress bar visible until the user is created in the firebase.

progressBar.setVisibility(View.VISIBLE);
mRegisterBtn.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        startActivity(new Intent(getApplicationContext(),MainActivity.class));
    }
});

Hurray…! You did it…..:)

Thank you for reading this. I really appreciate all the effort. If you’re having any doubts comment below and I’ll try to answer them ASAP.