Successfully building your first app is one of the best feelings a software developer can ever have. I purpose to share the journey of how I made a login app using Firebase in Kotlin.
Introduction.
What is Firebase?
Firebase is a backend-as-a-service that gives developers a variety of tools and services to help them make high-quality apps, and grow their user base.
It's built on Google's infrastructure. Firebase enables a programmer to include user authentication such as sign-in using passwords, phone numbers, Google, Facebook, Twitter, and more.
The Firebase Authentication (SDK) can be used to manually add one or more sign-in methods into an app.
Building a login app.
To build a login app, one would require Firebase tools to set up the authentication of the user. Fortunately, this article provides a detailed step-by-step process for achieving this successfully.
Connecting the project with Firebase.
For the app's authentication, I included the basic user sign-in with an email address. Below are the steps to connect your project with firebase:
Create a new project in Android Studio.
**Tip **: Android Studio has to be of the latest version. ie)equal or above the 2.2 version.
Click to download the latest Android Version
Configure the project created.
** Step 1)**
Indicate the **Name ** of your project.
** Step 2)**
The **Package Name ** will, by default be created by android studio from the **Name ** of your project.
** Step 3)**
On the Save location tab, choose where to** save** the project on your PC.
** Step 4)**
Choose your preferred language of code. For the app, we will be using Kotlin.
** Step 5)**
Specify the **Minimum API level ** to be supported by your app. I recommend a higher percentage API level ie) API 21: Android 5.0 (Lollipop)
** Step 6)**
Click on Finish to complete the setup of the project.
Adding Firebase to your project.
Step 1 )
On the **Tools bar ** in Android studio, click on Firebase on the drop-down menu.
Step 2 )
On the Firebase assistant menu, (located on the right side if the screen), click on the Authentication option.
Step 3 )
Select the ** Authenticate using a custom authentication system [KOTLIN]** option.
Step 4 )
Once your app has been successfully connected with Firebase, click on the **Add the Firebase authentication SDK to your app ** option.
The Dependencies.
Project level build .gradle file.
After following the steps correctly, your project-level file will have the Firebase dependencies included in the code:
buildscript {
repositories {
google()
mavenCentral()
}
dependencies {
classpath "com.android.tools.build:gradle:7.0.4"
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.6.21"
classpath 'com.google.gms:google-services:4.3.13'
}
}
task clean(type: Delete) {
delete rootProject.buildDir
App-level build .gradle file.
On the app-level build.gradle file, add the following code:
}
buildFeatures{
viewBinding= true
}
Your app-level file will have the Firebase dependencies and plugins included in the file:
plugins {
id 'com.android.application'
id 'kotlin-android'
id 'com.google.gms.google-services'
}
android {
compileSdk 33
defaultConfig {
applicationId "com.example.first_app"
minSdk 21
targetSdk 33
versionCode 1
versionName "1.0"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
}
}
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
kotlinOptions {
jvmTarget = '1.8'
}
buildFeatures{
viewBinding= true
}
}
dependencies {
implementation 'androidx.core:core-ktx:1.9.0'
implementation 'androidx.appcompat:appcompat:1.4.2'
implementation 'com.google.android.material:material:1.6.1'
implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
implementation 'com.android.support:support-annotations:28.0.0'
implementation 'com.android.support:support-v4:28.0.0'
testImplementation 'junit:junit:4.+'
androidTestImplementation 'androidx.test.ext:junit:1.1.3'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
implementation platform('com.google.firebase:firebase-bom:30.2.0')
implementation 'com.google.firebase:firebase-analytics-ktx'
}
Layouts for the App.
Use the activity_main.xml file as the **Login layout ** for the app.
For the Sign up layout , create a new xml layout by following these steps:
Step 1 )
On the android app icon, right-click on the layout folder.
Step 2 )
Move your cursor to new activity then select the ** Gallery ** option.
Step 3 )
Select Empty Activity ** and click on ** Next.
Step 4 )
Indicate the Activity Name for the signup layout. In this case, we have used Sign_up.
Creating the XML layout for the Registration Activity.
You can customize your layout to your specification.
One can use the following code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@drawable/bgcolor"
tools:context=".MainActivity">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Sign Up "
android:id="@+id/signup"
android:textColor="@color/white"
android:textSize="30sp"
android:textStyle="bold"
android:layout_margin="30dp"
android:gravity="center"
android:backgroundTint="@color/bgcolor2"
tools:ignore="HardcodedText"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/username"
android:hint="Username"
android:textColorHint="@color/white"
android:textColor="@color/white"
android:layout_margin="10dp"
android:padding="20dp"
android:background="@color/edit_txtbg"
android:drawableStart="@drawable/ic_baseline_person_24"
tools:ignore="HardcodedText"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/password"
android:inputType="textPassword"
android:hint="Password"
android:textColorHint="@color/white"
android:textColor="@color/white"
android:layout_margin="10dp"
android:padding="20dp"
android:background="@color/edit_txtbg"
android:drawableStart="@drawable/ic_baseline_info_24"
tools:ignore="HardcodedText"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/confpassword"
android:inputType="textPassword"
android:hint="Confirm Password"
android:textColorHint="@color/white"
android:textColor="@color/white"
android:layout_margin="10dp"
android:padding="20dp"
android:background="@color/edit_txtbg"
android:drawableStart="@drawable/ic_baseline_info_24"
tools:ignore="HardcodedText"/>
<TextView
android:id="@+id/tvRedirectLogin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_margin="10dp"
android:text="@string/already_have_an_account_login"
android:textColor="#18206F"
android:textSize="16sp" />
</LinearLayout>
Creating the XML layout for the Login activity.
You can design your layout to your specifications. The code for the log-in activity is as follows:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@drawable/bgcolor"
tools:context=".MainActivity">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/login"
android:text="LOGIN"
android:layout_gravity="center"
android:layout_margin="20dp"
android:textSize="20sp"
android:backgroundTint="@color/bgcolor"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/username"
android:hint="Username"
android:textColorHint="@color/white"
android:textColor="@color/white"
android:layout_margin="10dp"
android:padding="20dp"
android:background="@color/edit_txtbg"
android:drawableStart="@drawable/ic_baseline_person_24"
tools:ignore="HardcodedText"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/password"
android:inputType="textPassword"
android:hint="Password"
android:textColorHint="@color/white"
android:textColor="@color/white"
android:layout_margin="10dp"
android:padding="20dp"
android:background="@color/edit_txtbg"
android:drawableStart="@drawable/ic_baseline_info_24"
tools:ignore="HardcodedText"/>
<TextView
android:id="@+id/tvRedirectSignUp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:gravity="center_horizontal"
android:text="@string/don_t_have_an_account_sign_in"
android:textColor="#18206F"
android:textSize="16sp" />
</LinearLayout>
Creating code for the Registration Activity.
Here is the code that will enable the user to **Sign up ** for the app.
package com.example.first_app
import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView
import android.widget.Toast
import com.example.first_app
import com.google.firebase.auth.FirebaseAuth
import com.google.firebase.auth.ktx.auth
import com.google.firebase.ktx.Firebase
class SignUpActivity : AppCompatActivity() {
lateinit var Email: EditText
lateinit var ConfPass: EditText
private lateinit var Pass: EditText
private lateinit var btnSignUp: Button
lateinit var tvRedirectLogin: TextView
// create Firebase authentication object
private lateinit var auth: FirebaseAuth
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_sign_up)
// View Bindings
Email = findViewById(R.id.username)
ConfPass = findViewById(R.id.confpassword)
Pass = findViewById(R.id.password)
btnSignUp = findViewById(R.id.signup)
tvRedirectLogin = findViewById(R.id.tvRedirectLogin)
// Initialising auth object
auth = Firebase.auth
btnSignUp.setOnClickListener {
signUpUser()
}
// switching from signUp Activity to Login Activity
tvRedirectLogin.setOnClickListener {
val intent = Intent(this, LoginActivity::class.java)
startActivity(intent)
}
}
private fun signUpUser() {
val email = Email.text.toString()
val pass = Pass.text.toString()
val confirmPassword = ConfPass.text.toString()
// check pass
if (email.isBlank() || pass.isBlank() || confirmPassword.isBlank()) {
Toast.makeText(this, "Email and Password can't be blank", Toast.LENGTH_SHORT).show()
return
}
if (pass != confirmPassword) {
Toast.makeText(this, "Password and Confirm Password do not match", Toast.LENGTH_SHORT)
.show()
return
}
// If all credential are correct
// We call createUserWithEmailAndPassword
.
auth.createUserWithEmailAndPassword(email, pass).addOnCompleteListener(this) {
if (it.isSuccessful) {
Toast.makeText(this, "Successfully Singed Up", Toast.LENGTH_SHORT).show()
finish()
} else {
Toast.makeText(this, "Singed Up Failed!", Toast.LENGTH_SHORT).show()
}
}
}
}
Creating code for the Login activity.
Here is the code that will enable the user to **Login ** after signing up for the app:
package com.example.first_app
import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView
import android.widget.Toast
import com.example.first_ap
import com.google.firebase.auth.FirebaseAuth
class LoginActivity : AppCompatActivity() {
private lateinit var tvRedirectSignUp: TextView
lateinit var Email: EditText
private lateinit var Pass: EditText
lateinit var btnLogin: Button
// Creating firebaseAuth object
lateinit var auth: FirebaseAuth
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_login)
// View Binding
tvRedirectSignUp = findViewById(R.id.tvRedirectSignUp)
btnLogin = findViewById(R.id.login)
Email = findViewById(R.id.username)
Pass = findViewById(R.id.password)
//initializing Firebase auth object
auth = FirebaseAuth.getInstance()
btnLogin.setOnClickListener {
login()
}
tvRedirectSignUp.setOnClickListener {
val intent = Intent(this, SignUpActivity::class.java)
startActivity(intent)
// using finish() to end the activity
finish()
}
}
private fun login() {
val email = Email.text.toString()
val pass = Pass.text.toString()
// calling signInWithEmailAndPassword(email, pass)
// function using Firebase auth object
// On successful response Display a Toast
auth.signInWithEmailAndPassword(email, pass).addOnCompleteListener(this) {
if (it.isSuccessful) {
Toast.makeText(this, "Successfully LoggedIn", Toast.LENGTH_SHORT).show()
} else
Toast.makeText(this, "Log In failed ", Toast.LENGTH_SHORT).show()
}
}
}
Bonus
For a better choice of colors to use in the XML layout, you can follow these steps:
** Step 1 )**
Go to Coolors.co
** Step 2 )**
Click on Explore trending palettes to find the color of your choice.
** Step 3 )**
Click on the ** Hex value ** to pick the color of your choice.
** Step 4 )**
Click on the res/values/colors.xml to access the colors.xml file in your android app project.
** Step 5 )**
Using the following code, **name ** and paste the **hex value ** of your color:
<color name="color">#hexvalue</color>
**Step 6 ) **
Access the color in the XML layout file by its ** name **. ie)
android:backgroundTint="@color/bgcolor2"
I hope this article helps. Happy coding!!
