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