Login and Signup Page in Android Studio using Firebase Authentication | Kotlin Easy 7 Steps

Table of Contents

• What is Firebase?
• Pre-requisite Color
• Download Login Background Image
• Step-by-Step Implementation:
• AK Bonus Points

What is Firebase?

Firebase is a service to applications, it provides hosting, NoSQL storage, real-time databases, social authentication, notification, and other services.

In this project, we have created a login and signup page in android studio using firebase so we have used the Authentication service for free! When the user signs up using email and password that gets stored in the authentication database of firebase.

For login purposes, the same credentials are checked in the firebase authentication table and if it matches with user credentials then it will lead you to the home screen otherwise it will throw an error as login failed.

Pre-requisite Color

Please find the brand color as #8692f7 (Purple)

Add the color in the colors.xml file as given:

    <color name="lavender">#8692f7</color>
    <color name="grey">#ff424242</color>

Download Login Background Image

Download the login background image for free:

Add email, password, and lock vector assets.

Step-by-Step Implementation:

Step 1: Open Android Studio, Create New Project and Choose Empty Activity. Click Finish.

Step 2: Pre-requisites

themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.LoginSignupAuth" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/lavender</item>
        <item name="colorPrimaryVariant">@color/lavender</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

gradle(app)

 kotlinOptions {
        jvmTarget = '1.8'
    }
    buildFeatures{
        viewBinding true
    }

lavender_border.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <corners
        android:radius="20dp"/>

    <stroke
        android:color="@color/lavender"
        android:width="2dp"/>
    <solid
        android:color="@color/white"/>

</shape>

lavender_fill

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid
        android:color="@color/lavender"/>
    <corners
        android:topRightRadius="20dp"
        android:topLeftRadius="20dp"/>

</shape>

dialog_forgot.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/dialogForgot"
    android:layout_margin="20dp"
    android:padding="20dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/dialogBox"
        app:layout_constraintTop_toTopOf="parent"
        android:background="@drawable/lavender_border">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/forgotTitle"
            android:background="@drawable/lavender_fill"
            android:padding="10dp"
            android:text="Forgot Password"
            android:textColor="@color/white"
            android:textSize="17sp"
            android:drawableLeft="@drawable/ic_baseline_lock_reset_24"
            android:drawablePadding="8dp"
            app:layout_constraintTop_toTopOf="parent"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/desc"
            android:text="Enter your email address"
            android:textSize="16sp"
            android:layout_marginStart="20dp"
            android:layout_marginEnd="20dp"
            android:textColor="@color/lavender"
            android:layout_marginTop="8dp"
            app:layout_constraintTop_toBottomOf="@id/forgotTitle"
            app:layout_constraintBottom_toTopOf="@id/editBox"/>

        <EditText
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:id="@+id/editBox"
            android:textColor="@color/lavender"
            android:textSize="16sp"
            android:layout_marginStart="20sp"
            android:backgroundTint="@color/lavender"
            android:layout_marginBottom="30dp"
            android:maxLines="1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toBottomOf="@id/forgotTitle"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:id="@+id/btnCancel"
            android:layout_marginStart="40dp"
            android:layout_marginEnd="10dp"
            android:textColor="@color/white"
            android:textSize="14sp"
            android:text="Cancel"
            android:layout_marginBottom="8dp"
            app:cornerRadius = "20dp"
            android:layout_marginTop="10dp"
            app:layout_constraintTop_toBottomOf="@id/editBox"
            app:layout_constraintBottom_toBottomOf="@id/dialogBox"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@id/btnReset"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:id="@+id/btnReset"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="40dp"
            android:textColor="@color/white"
            android:textSize="14sp"
            android:layout_marginBottom="8dp"
            android:layout_marginTop="10dp"
            android:text="Reset"
            app:cornerRadius = "20dp"
            app:layout_constraintBottom_toBottomOf="@id/dialogBox"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/btnCancel"/>

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Step 3: activity_signup.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/signupbkg"
    tools:context=".SignupActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_marginTop="320dp"
            android:padding="20dp">

            <EditText
                android:layout_width="350dp"
                android:layout_height="60dp"
                android:id="@+id/signup_email"
                android:layout_marginTop="30dp"
                android:background="@drawable/lavender_border"
                android:padding="8dp"
                android:hint="Email"
                android:drawableLeft="@drawable/ic_baseline_email_24"
                android:drawablePadding="8dp"
                android:textColor="@color/grey"/>

            <EditText
                android:layout_width="350dp"
                android:layout_height="60dp"
                android:id="@+id/signup_password"
                android:layout_marginTop="20dp"
                android:background="@drawable/lavender_border"
                android:padding="8dp"
                android:hint="Password"
                android:inputType="textPassword"
                android:drawableLeft="@drawable/ic_baseline_lock_24"
                android:drawablePadding="8dp"
                android:textColor="@color/grey"/>

            <EditText
                android:layout_width="350dp"
                android:layout_height="60dp"
                android:id="@+id/signup_confirm"
                android:layout_marginTop="20dp"
                android:background="@drawable/lavender_border"
                android:padding="8dp"
                android:hint="Confirm Password"
                android:inputType="textPassword"
                android:drawableLeft="@drawable/ic_baseline_password_24"
                android:drawablePadding="8dp"
                android:textColor="@color/grey"/>

            <Button
                android:layout_width="350dp"
                android:layout_height="70dp"
                android:layout_marginTop="30dp"
                android:text="Sign Up"
                android:id="@+id/signup_button"
                android:textSize="18sp"
                app:cornerRadius = "30dp"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/loginRedirectText"
                android:text="Already an user? Login"
                android:layout_gravity="center"
                android:padding="8dp"
                android:layout_marginTop="8dp"
                android:textSize="18sp"
                android:textColor="@color/lavender"/>

        </LinearLayout>

    </LinearLayout>

</ScrollView>

Step 4: activity_login.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/loginbkg"
    tools:context=".LoginActivity">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_marginTop="430dp"
            android:padding="20dp">

            <EditText
                android:layout_width="350dp"
                android:layout_height="60dp"
                android:id="@+id/login_email"
                android:layout_marginTop="30dp"
                android:background="@drawable/lavender_border"
                android:padding="8dp"
                android:hint="Email"
                android:drawableLeft="@drawable/ic_baseline_email_24"
                android:drawablePadding="8dp"
                android:textColor="@color/grey"/>

            <EditText
                android:layout_width="350dp"
                android:layout_height="60dp"
                android:id="@+id/login_password"
                android:layout_marginTop="20dp"
                android:background="@drawable/lavender_border"
                android:padding="8dp"
                android:hint="Password"
                android:drawableLeft="@drawable/ic_baseline_lock_24"
                android:drawablePadding="8dp"
                android:textColor="@color/grey"/>


            <Button
                android:layout_width="350dp"
                android:layout_height="70dp"
                android:layout_marginTop="30dp"
                android:text="Login"
                android:id="@+id/login_button"
                android:textSize="18sp"
                app:cornerRadius = "30dp"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/forgot_password"
                android:layout_gravity="center"
                android:layout_marginTop="6dp"
                android:padding="8dp"
                android:text="Forgot Password?"
                android:textColor="@color/lavender"
                android:textSize="16sp"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/signupRedirectText"
                android:text="Not yet registered? Signup"
                android:layout_gravity="center"
                android:padding="8dp"
                android:layout_marginTop="14dp"
                android:textSize="18sp"
                android:textColor="@color/lavender"/>

        </LinearLayout>

    </LinearLayout>
    </ScrollView>
</LinearLayout>

Step 5: activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Welcome to our app"
        android:textColor="@color/lavender"
        android:textSize="36sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 6: SignupActivity.kt

package com.example.loginsignupauth

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Toast
import com.example.loginsignupauth.databinding.ActivitySignupBinding
import com.google.firebase.auth.FirebaseAuth

class SignupActivity : AppCompatActivity() {

    private lateinit var binding: ActivitySignupBinding
    private lateinit var firebaseAuth: FirebaseAuth

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivitySignupBinding.inflate(layoutInflater)
        setContentView(binding.root)

        firebaseAuth = FirebaseAuth.getInstance()

        binding.signupButton.setOnClickListener{
            val email = binding.signupEmail.text.toString()
            val password = binding.signupPassword.text.toString()
            val confirmPassword = binding.signupConfirm.text.toString()

            if (email.isNotEmpty() && password.isNotEmpty() && confirmPassword.isNotEmpty()){
                if (password == confirmPassword){

                    firebaseAuth.createUserWithEmailAndPassword(email, password).addOnCompleteListener{
                        if (it.isSuccessful){
                            val intent = Intent(this, LoginActivity::class.java)
                            startActivity(intent)
                        } else {
                            Toast.makeText(this, it.exception.toString(), Toast.LENGTH_SHORT).show()
                        }
                    }
                } else {
                    Toast.makeText(this, "Password does not matched", Toast.LENGTH_SHORT).show()
                }
            } else {
                Toast.makeText(this, "Fields cannot be empty", Toast.LENGTH_SHORT).show()
            }
        }
        binding.loginRedirectText.setOnClickListener {
            val loginIntent = Intent(this, LoginActivity::class.java)
            startActivity(loginIntent)
        }
    }
}

Step 7: LoginActivity.kt

package com.example.loginsignupauth

import android.content.Intent
import android.graphics.drawable.ColorDrawable
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Patterns
import android.widget.Button
import android.widget.EditText
import android.widget.Toast
import androidx.appcompat.app.AlertDialog
import com.example.loginsignupauth.databinding.ActivityLoginBinding
import com.google.firebase.auth.FirebaseAuth

class LoginActivity : AppCompatActivity() {

    private lateinit var binding: ActivityLoginBinding
    private lateinit var firebaseAuth: FirebaseAuth

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityLoginBinding.inflate(layoutInflater)
        setContentView(binding.root)

        firebaseAuth = FirebaseAuth.getInstance()

        binding.loginButton.setOnClickListener {
            val email = binding.loginEmail.text.toString()
            val password = binding.loginPassword.text.toString()

            if (email.isNotEmpty() && password.isNotEmpty()){

                firebaseAuth.signInWithEmailAndPassword(email, password).addOnCompleteListener{
                    if (it.isSuccessful){
                        val intent = Intent(this, MainActivity::class.java)
                        startActivity(intent)
                    } else {
                        Toast.makeText(this, it.exception.toString(), Toast.LENGTH_SHORT).show()
                    }
                }
            } else {
                Toast.makeText(this, "Fields cannot be empty", Toast.LENGTH_SHORT).show()
            }
        }

        binding.forgotPassword.setOnClickListener {
            val builder = AlertDialog.Builder(this)
            val view = layoutInflater.inflate(R.layout.dialog_forgot, null)
            val userEmail = view.findViewById<EditText>(R.id.editBox)

            builder.setView(view)
            val dialog = builder.create()

            view.findViewById<Button>(R.id.btnReset).setOnClickListener {
                compareEmail(userEmail)
                dialog.dismiss()
            }
            view.findViewById<Button>(R.id.btnCancel).setOnClickListener {
                dialog.dismiss()
            }
            if (dialog.window != null){
                dialog.window!!.setBackgroundDrawable(ColorDrawable(0))
            }
             dialog.show()
        }

        binding.signupRedirectText.setOnClickListener {
            val signupIntent = Intent(this, SignupActivity::class.java)
            startActivity(signupIntent)
        }
    }

    //Outside onCreate
    private fun compareEmail(email: EditText){
        if (email.text.toString().isEmpty()){
            return
        }
        if (!Patterns.EMAIL_ADDRESS.matcher(email.text.toString()).matches()){
            return
        }
        firebaseAuth.sendPasswordResetEmail(email.text.toString())
            .addOnCompleteListener { task ->
                if (task.isSuccessful) {
                    Toast.makeText(this, "Check your email", Toast.LENGTH_SHORT).show()
                }
            }
    }
}

AK Bonus Points

If you have any queries or errors, please feel free to comment below 🙂

For detailed steps, watch our youtube video: Login and Signup using Firebase Authentication in Android Studio Kotlin

Check our popular post here: How to Create Splash Screen in Android Studio