Firebase Authentication in Android Kotlin - Mini App: Build & Ship

Build: Login Screen

This screen allows users to sign in using their email and password with Firebase Authentication.

Target UI

-------------------------
|       Login Screen     |
|-----------------------|
| Email: [___________]  |
| Password: [_______]   |
|                       |
| [Login Button]         |
|                       |
| Don't have an account?|
| [Register Button]      |
-------------------------

Two EditText fields for email and password input.

A Login button that authenticates the user with Firebase.

A Register button that navigates to a registration screen (navigation can be a placeholder).

Show a Toast message on successful login or failure.

Disable the Login button while authentication is in progress.

Starter Code

Android Kotlin

package com.example.firebaseauth

import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.google.firebase.auth.FirebaseAuth

class LoginActivity : AppCompatActivity() {
    private lateinit var auth: FirebaseAuth
    private lateinit var emailEditText: EditText
    private lateinit var passwordEditText: EditText
    private lateinit var loginButton: Button
    private lateinit var registerButton: Button

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_login)

        auth = FirebaseAuth.getInstance()

        emailEditText = findViewById(R.id.emailEditText)
        passwordEditText = findViewById(R.id.passwordEditText)
        loginButton = findViewById(R.id.loginButton)
        registerButton = findViewById(R.id.registerButton)

        // TODO: Implement loginButton click listener
        // TODO: Implement registerButton click listener
    }
}

Task 1

Task 2

Task 3

Task 4

Solution

Android Kotlin

package com.example.firebaseauth

import android.content.Intent
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.google.firebase.auth.FirebaseAuth

class LoginActivity : AppCompatActivity() {
    private lateinit var auth: FirebaseAuth
    private lateinit var emailEditText: EditText
    private lateinit var passwordEditText: EditText
    private lateinit var loginButton: Button
    private lateinit var registerButton: Button

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_login)

        auth = FirebaseAuth.getInstance()

        emailEditText = findViewById(R.id.emailEditText)
        passwordEditText = findViewById(R.id.passwordEditText)
        loginButton = findViewById(R.id.loginButton)
        registerButton = findViewById(R.id.registerButton)

        loginButton.setOnClickListener {
            val email = emailEditText.text.toString().trim()
            val password = passwordEditText.text.toString().trim()

            if (email.isEmpty() || password.isEmpty()) {
                Toast.makeText(this, "Please enter email and password", Toast.LENGTH_SHORT).show()
                return@setOnClickListener
            }

            loginButton.isEnabled = false

            auth.signInWithEmailAndPassword(email, password)
                .addOnCompleteListener(this) { task ->
                    loginButton.isEnabled = true
                    if (task.isSuccessful) {
                        Toast.makeText(this, "Login successful", Toast.LENGTH_SHORT).show()
                        // TODO: Navigate to main app screen
                    } else {
                        Toast.makeText(this, "Authentication failed: ${task.exception?.message}", Toast.LENGTH_LONG).show()
                    }
                }
        }

        registerButton.setOnClickListener {
            Toast.makeText(this, "Navigate to Register Screen", Toast.LENGTH_SHORT).show()
            // TODO: Implement navigation to RegisterActivity
        }
    }
}

This solution uses FirebaseAuth to sign in users with email and password. We get the input from EditText fields and check if they are not empty. When the login button is clicked, it disables itself to prevent multiple clicks during the authentication process. After Firebase responds, it re-enables the button. On success, it shows a Toast message and you can add navigation to the main app screen. On failure, it shows the error message. The register button currently shows a Toast as a placeholder for navigation to a registration screen.

Final Result

Completed Screen

-------------------------
|       Login Screen     |
|-----------------------|
| Email: [user@example] |
| Password: [•••••••]   |
|                       |
| [Login Button]         |
|                       |
| Don't have an account?|
| [Register Button]      |
-------------------------

User enters email and password.

Taps Login button: button disables, Firebase authenticates.

On success: Toast 'Login successful' appears.

On failure: Toast with error message appears.

Taps Register button: Toast 'Navigate to Register Screen' appears.

Stretch Goal

Add a progress indicator (spinner) that shows while the login is in progress.

💡 Hint

Use a ProgressBar view and toggle its visibility when login starts and ends.