Firebase Authentication Example in Kotlin

In this tutorial on Firebase and Kotlin, we will learn how to use Firebase Authentication API to implement user Registration feature and store user data in Firebase and then allow user to login into our mobile app using their username and password. We will also use Firebase and Kotlin in this tutorial to implement Email confirmation feature and Password Reset features.  So by the end of this tutorial you will have some of the most common and must-to-have features implemented for your app: 

• User Registration,
• User Sign in,
• Email verification,
• Password reset or Forgot password functionality,
• User Sign out.

Firebase provides us with many Cloud Services which we can use to speed up our development process and implement relatively time consuming features much faster. For example in this and in following up tutorial I will use:

• Authentication API
• Real Time Database
• Cloud Storage
• Analytics
• Notification Services

Create a new project in Firebase

To use Firebase with your mobile application you will need to have a project created in Firebase. You can create a new project using Firebase console:

 

Once you click on ‘Create project’ button, we’re done with the initial process. Now, we can move on to adding Android specific details. Once the project is created, you will see a Welcome message from Firebase like the one below:

 

Click on the Android option:

 

Fill in your package name, and click ‘Register App’. For example my package name is com.appdevelopersblog.firebaseauthapp

 

 

Download the JSON file, then switch to the Project view as it is shown on the image above and move the google-services.json file into your Android App module root directory and then click ‘Continue’.

Make the changes in build.gradle file as shown on the image above and click ‘Finish’. Once this is done, sync the gradle file and wait for it to finish.

Once everything is done, you’ll see the Android app appear in Firebase console like on the picture below:

Next, in Android Studio, click on Tools > Firebase. This will open a dialog:

Click on ‘Realtime Database’ option and follow along as it says to add dependencies. It will make changes to Gradle file itself.

Now that the dependencies are set up correctly, we can start to work on our app which will communicate with the firebase server. Make sure you have a project made in Firebase Console. You will be needing its ID later to be configured in the project too.

Also, please note that as this lesson is meant for authentication purpose, we’re accessing the same database on the basis of the user identity. So, to make our database private, we will add the following script in our Firebase project access rules. To do that you will need to: 

• Open Firebase console
• Select your project, then
• Switch to the Database section, then
• In the Database section, select the Rules tab
• Paste the below JSON into the text field

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

Also, If you select the Data tab on the same page you will see that there is no data and our database is empty: 

Now we can now start working on our app.

Adding Firebase Authentication

To add Firebase Authentication module to our Android project we will need to open Android Studio and then from the top menu select Tools > Firebase and then select ‘Authentication’ module. The dependencies should be added automatically.

All in all, I have following dependencies now:

implementation 'com.google.firebase:firebase-database:11.0.4'
implementation 'com.google.firebase:firebase-auth:11.0.4'

While creating the project, I named my First activity as LoginActivity:

For this example to work, we will need to create three activities in our app, with the following names:

• CreateAccountActivity
• LoginActivity
• ForgotPasswordActivity

The purpose of each activity is clear with their names. Let’s start with the user registration functionality.

User Registration

In Firebase, we can register a new user with their email and password. Any other information will have to be mapped additionally and differently.

Also, to allow user registration with their email address and password, we must enable this service in Firebase console:

Unless we enable this in console, we will get a Firebase exception stating the reason:

com.google.firebase.auth.FirebaseAuthException: This operation is not allowed. You must enable this service in the console.

To create a user account, let’s create a simple UI as on the picture below: 

To create user interface as on the picture below I had to create following XML layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
   ...>

   <EditText
       android:id="@+id/et_first_name"
       style="@style/viewCustom"
       android:ems="10"
       android:hint="@string/first_name"
       android:inputType="textPersonName" />

   <EditText
       android:id="@+id/et_last_name"
       style="@style/viewCustom"
       android:layout_below="@id/et_first_name"
       android:ems="10"
       android:hint="@string/last_name"
       android:inputType="textPersonName" />

   <EditText
       android:id="@+id/et_email"
       style="@style/viewCustom"
       android:ems="10"
       android:layout_below="@id/et_last_name"
       android:hint="@string/email"
       android:inputType="textEmailAddress" />

   <EditText
       android:id="@+id/et_password"
       style="@style/viewCustom"
       android:layout_below="@id/et_email"
       android:ems="10"
       android:hint="@string/password"
       android:inputType="textPassword" />

   <Button
       android:id="@+id/btn_register"
       style="@style/viewCustom"
       android:layout_below="@id/et_password"
       android:background="@color/colorAccent"
       android:text="@string/create_act"
       android:textColor="@android:color/white"
       android:textStyle="bold" />

</RelativeLayout>

and the Style:

<resources>

   <!-- Base application theme. -->
   <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
   </style>

   <style name="viewCustom">
       <item name="android:layout_width">match_parent</item>
       <item name="android:layout_height">wrap_content</item>
       <item name="android:layout_margin">8dp</item>
   </style>

</resources>

and here are my Strings

<resources>
   <string name="app_name">FirebaseAuthApp</string>

   <string name="email">Email</string>
   <string name="password">Password</string>
   <string name="first_name">First Name</string>
   <string name="last_name">Last Name</string>
   <string name="login_title">Login</string>
   <string name="create_act">Create Account</string>
</resources>

Now is the time for Kotlin. Let’s define variables for our UI elements:

//UI elements
private var etFirstName: EditText? = null
private var etLastName: EditText? = null
private var etEmail: EditText? = null
private var etPassword: EditText? = null
private var btnCreateAccount: Button? = null
private var mProgressBar: ProgressDialog? = null

We will also define Firebase references for Database and Authorization:

/Firebase references
private var mDatabaseReference: DatabaseReference? = null
private var mDatabase: FirebaseDatabase? = null
private var mAuth: FirebaseAuth? = null

Finally, we will also define some global variables:

private val TAG = "CreateAccountActivity"

//global variables
private var firstName: String? = null
private var lastName: String? = null
private var email: String? = null
private var password: String? = null

Now, we will initialize these references in onCreate method:

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

   initialise()
}

private fun initialise() {

   etFirstName = findViewById<View>(R.id.et_first_name) as EditText
   etLastName = findViewById<View>(R.id.et_last_name) as EditText
   etEmail = findViewById<View>(R.id.et_email) as EditText
   etPassword = findViewById<View>(R.id.et_password) as EditText
   btnCreateAccount = findViewById<View>(R.id.btn_register) as Button
   mProgressBar = ProgressDialog(this)

   mDatabase = FirebaseDatabase.getInstance()
   mDatabaseReference = mDatabase!!.reference!!.child("Users")
   mAuth = FirebaseAuth.getInstance()

   btnCreateAccount!!.setOnClickListener { createNewAccount() }
}

Note the following points:

• We initialise UI elements by calling findViewById method with appropriate IDs
• mDatabaseReference is initialized with database location with key ‘Users’. Our user information will be stored at this location in Firebase database
• mAuth is the Firebase authentication service reference which will we will use to authenticate and create a new user
• We set a listener on our button and we will create a new method named as createNewAccount

Let us define this new method createNewAccount:

private fun createNewAccount() {
...
}

In this method, we will first get current String values present in EditText:

firstName = etFirstName?.text.toString()
lastName = etLastName?.text.toString()
email = etEmail?.text.toString()
password = etPassword?.text.toString()

Then, we will validate this text and show appropriate error message if any value is empty:

if (!TextUtils.isEmpty(firstName) && !TextUtils.isEmpty(lastName)
       && !TextUtils.isEmpty(email) && !TextUtils.isEmpty(password)) {

  ...
} else {
   Toast.makeText(this, "Enter all details", Toast.LENGTH_SHORT).show()
}

As Firebase connection and validation can take a little time, we will show the Progress bar with appropriate message before we make the authorization:

mProgressBar!!.setMessage("Registering User...")
mProgressBar!!.show()

Finally, we make use of createUserWithEmailAndPassword function to create a new user with the mentioned email and password:

mAuth!!
  .createUserWithEmailAndPassword(email!!, password!!)
  .addOnCompleteListener(this) { task ->
      mProgressBar!!.hide()

      if (task.isSuccessful) {
        // Sign in success, update UI with the signed-in user's information
        Log.d(TAG, "createUserWithEmail:success")

        val userId = mAuth!!.currentUser!!.uid

        //Verify Email
        verifyEmail();

        //update user profile information
        val currentUserDb = mDatabaseReference!!.child(userId)
        currentUserDb.child("firstName").setValue(firstName)
        currentUserDb.child("lastName").setValue(lastName)

        updateUserInfoAndUI()
      } else {
        // If sign in fails, display a message to the user.
       Log.w(TAG, "createUserWithEmail:failure", task.exception)
       Toast.makeText(this@CreateAccountActivity, "Authentication failed.",
                       Toast.LENGTH_SHORT).show()
     }
}

 

We try creating a new user by calling createUserWithEmailAndPassword and then using addOnCompleteListener, we get to know if the task was successful or not.

If the task is a success, we create a new key and insert firstName and lastName key-values in it.

If you run the app right now and try registering a new user, you should see a new registration in our Firebase database:

In the last method call, we just start a new Activity once user is authenticated:

private fun updateUserInfoAndUI() {

   //start next activity
   val intent = Intent(this@CreateAccountActivity, MainActivity::class.java)
   intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP)
   startActivity(intent)
}

The FLAG_ACTIVITY_CLEAR_TOP flag clears the CreateAccountActivity from stack so that if user press back from MainActivity, he should not be taken back to CreateAccountActivity.

User Email Address Verification

As we have also made a call to verifyEmail method, we will add a new method in which we will verify user’s email address.

private fun verifyEmail() {
   val mUser = mAuth!!.currentUser;
   mUser!!.sendEmailVerification()
           .addOnCompleteListener(this) { task ->

               if (task.isSuccessful) {
                   Toast.makeText(this@CreateAccountActivity,
                           "Verification email sent to " + mUser.getEmail(),
                           Toast.LENGTH_SHORT).show()
               } else {
                   Log.e(TAG, "sendEmailVerification", task.exception)
                   Toast.makeText(this@CreateAccountActivity,
                           "Failed to send verification email.",
                           Toast.LENGTH_SHORT).show()
               }
           }
}

Also, as the user is now logged in, we can also see Database values being inserted in the database:

User Login

For User to login, I have created the following UI:

With the UI above, user has three options:

• Login
• Using ‘Create Account’ button, user will be taken to a CreateAccountActivity we created earlier
• User can also reset their password if he or she submits their email in a ForgotPasswordActivity page, which will be opened when user taps on ‘Forgot Password?’ view.

Here is the XML interface for the above UI:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <EditText
       android:id="@+id/et_email"
       style="@style/viewCustom"
       android:ems="10"
       android:hint="@string/etEmail"
       android:inputType="textEmailAddress" />

   <EditText
       android:id="@+id/et_password"
       style="@style/viewCustom"
       android:layout_below="@id/et_email"
       android:ems="10"
       android:hint="@string/etPassword"
       android:inputType="textPassword" />

   <Button
       android:id="@+id/btn_login"
       style="@style/viewCustom"
       android:layout_below="@id/et_password"
       android:background="@color/colorAccent"
       android:text="@string/login_title"
       android:textColor="@android:color/white"
       android:textStyle="bold" />

   <TextView
       android:id="@+id/tv_forgot_password"
       style="@style/viewCustom"
       android:layout_below="@id/btn_login"
       android:clickable="true"
       android:gravity="center_horizontal"
       android:text="Forgot Password?"
       android:textSize="20sp" />

   <Button
       android:id="@+id/btn_register_account"
       style="@style/viewCustom"
       android:layout_alignParentBottom="true"
       android:background="@color/colorAccent"
       android:text="@string/create_act"
       android:textColor="@android:color/white"
       android:textStyle="bold" />

</RelativeLayout>

In this Login activityl, we will define similar references to our UI elements and Firebase APIs:

private val TAG = "LoginActivity"

//global variables
private var email: String? = null
private var password: String? = null

//UI elements
private var tvForgotPassword: TextView? = null
private var etEmail: EditText? = null
private var etPassword: EditText? = null
private var btnLogin: Button? = null
private var btnCreateAccount: Button? = null
private var mProgressBar: ProgressDialog? = null

//Firebase references
private var mAuth: FirebaseAuth? = null

Let us initialize these references as well:

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

   initialise()
}

private fun initialise() {
   tvForgotPassword = findViewById<View>(R.id.tv_forgot_password) as TextView
   etEmail = findViewById<View>(R.id.et_email) as EditText
   etPassword = findViewById<View>(R.id.et_password) as EditText
   btnLogin = findViewById<View>(R.id.btn_login) as Button
   btnCreateAccount = findViewById<View>(R.id.btn_register_account) as Button
   mProgressBar = ProgressDialog(this)

   mAuth = FirebaseAuth.getInstance()

   tvForgotPassword!!
     .setOnClickListener { startActivity(Intent(this@LoginActivity,
        ForgotPasswordActivity::class.java)) }

   btnCreateAccount!!
      .setOnClickListener { startActivity(Intent(this@LoginActivity,
        CreateAccountActivity::class.java)) }

   btnLogin!!.setOnClickListener { loginUser() }
}

Let’s define the loginUser function:

private fun loginUser() {

  email = etEmail?.text.toString()
  password = etPassword?.text.toString()

  if (!TextUtils.isEmpty(email) && !TextUtils.isEmpty(password)) {

    mProgressBar!!.setMessage("Registering User...")
    mProgressBar!!.show()

    Log.d(TAG, "Logging in user.")

    mAuth!!.signInWithEmailAndPassword(email!!, password!!)
            .addOnCompleteListener(this) { task ->

              mProgressBar!!.hide()

              if (task.isSuccessful) {
                // Sign in success, update UI with signed-in user's information
                Log.d(TAG, "signInWithEmail:success")
                updateUI()
              } else {
                // If sign in fails, display a message to the user.
                Log.e(TAG, "signInWithEmail:failure", task.exception)
                Toast.makeText(this@LoginActivity, "Authentication failed.",
                                    Toast.LENGTH_SHORT).show()
              }
            }
      } else {
          Toast.makeText(this, "Enter all details", Toast.LENGTH_SHORT).show()
      }
}

And once the user has successfully logged in, they will be taken to the MainActivity:

private fun updateUI() {
   val intent = Intent(this@LoginActivity, MainActivity::class.java)
   intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP)
   startActivity(intent)
}

Using signInWithEmailAndPassword, we can login a user with their email and password. Once a user logs in, we will take them to a MainActivity to show user specific details. We will define this activity shortly.

Sending password reset Email

Firebase provides us with an API call to let users reset their password. To demonstrate this, we will create a ForgotPasswordActivity.

Here is a simple UI:

Here is XML layout the we need:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    ...>

    <EditText
        android:id="@+id/et_email"
        style="@style/viewCustom"
        android:ems="10"
        android:hint="@string/etEmail"
        android:inputType="textEmailAddress" />

    <Button
        android:id="@+id/btn_submit"
        style="@style/viewCustom"
        android:layout_below="@id/et_email"
        android:background="@color/colorAccent"
        android:text="@string/send_password_reset_email"
        android:textColor="@android:color/white"
        android:textStyle="bold" />

</RelativeLayout>

Let’s define references and initialize them:

private val TAG = "ForgotPasswordActivity"

//UI elements
private var etEmail: EditText? = null
private var btnSubmit: Button? = null

//Firebase references
private var mAuth: FirebaseAuth? = null

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

   initialise()
}

private fun initialise() {
   etEmail = findViewById<View>(R.id.et_email) as EditText
   btnSubmit = findViewById<View>(R.id.btn_submit) as Button

   mAuth = FirebaseAuth.getInstance()

   btnSubmit!!.setOnClickListener { sendPasswordResetEmail() }
}

And to let user reset their password we will use the sendPasswordResetEmail function. Let us see it in action:

private fun sendPasswordResetEmail() {

  val email = etEmail?.text.toString()

  if (!TextUtils.isEmpty(email)) {
    mAuth!!
        .sendPasswordResetEmail(email)
        .addOnCompleteListener { task ->
          if (task.isSuccessful) {

            val message = "Email sent."
            Log.d(TAG, message)
            Toast.makeText(this, message, Toast.LENGTH_SHORT).show()
            updateUI()
          } else {
            Log.w(TAG, task.exception!!.message)
            Toast.makeText(this, "No user found with this email.", Toast.LENGTH_SHORT).show()
          }
        }
   } else {
       Toast.makeText(this, "Enter Email", Toast.LENGTH_SHORT).show()
   }
}

private fun updateUI() {
  val intent = Intent(this@ForgotPasswordActivity, LoginActivity::class.java)
  intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP)
  startActivity(intent)
}

Access User specific data

In the Kotlin code example below we will access some user specific data and display it in our MainActivity.

I will create a very simple UI to display user details.

And here is XML layout file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="10dp"
    tools:context="com.appdevelopersblog.firebaseauthapp.MainActivity">

    <ImageButton
        android:id="@+id/ib_profile_pic"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginTop="10dp"
        android:layout_centerHorizontal="true"
        android:background="@drawable/defaultphoto"
        android:scaleType="centerCrop" />

    <TableLayout
        android:id="@+id/tl_data"
        android:layout_below="@id/ib_profile_pic"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TableRow>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="First Name : "
                android:textSize="20sp" />

            <TextView
                android:id="@+id/tv_first_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20sp" />

        </TableRow>

        <TableRow>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Last Name : "
                android:textSize="20sp" />

            <TextView
                android:id="@+id/tv_last_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20sp" />

        </TableRow>

        <TableRow>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="User Email : "
                android:textSize="20sp" />

            <TextView
                android:id="@+id/tv_email"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20sp" />

        </TableRow>

        <TableRow>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Email Verified : "
                android:textSize="20sp" />

            <TextView
                android:id="@+id/tv_email_verifiied"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20sp" />

        </TableRow>

    </TableLayout>

</RelativeLayout>

As done before, we will define and initialize our references:

//Firebase references
private var mDatabaseReference: DatabaseReference? = null
private var mDatabase: FirebaseDatabase? = null
private var mAuth: FirebaseAuth? = null

//UI elements
private var tvFirstName: TextView? = null
private var tvLastName: TextView? = null
private var tvEmail: TextView? = null
private var tvEmailVerifiied: TextView? = null

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

   initialise()
}

private fun initialise() {
   mDatabase = FirebaseDatabase.getInstance()
   mDatabaseReference = mDatabase!!.reference!!.child("Users")
   mAuth = FirebaseAuth.getInstance()

   tvFirstName = findViewById<View>(R.id.tv_first_name) as TextView
   tvLastName = findViewById<View>(R.id.tv_last_name) as TextView
   tvEmail = findViewById<View>(R.id.tv_email) as TextView
   tvEmailVerifiied = findViewById<View>(R.id.tv_email_verifiied) as TextView
}

Now, in onStart method, we will fetch user data from Firebase database.

override fun onStart() {
   super.onStart()

   val mUser = mAuth!!.currentUser
   val mUserReference = mDatabaseReference!!.child(mUser!!.uid)

   tvEmail!!.text = mUser.email
   tvEmailVerifiied!!.text = mUser.isEmailVerified.toString()

   mUserReference.addValueEventListener(object : ValueEventListener {
     override fun onDataChange(snapshot: DataSnapshot) {
       tvFirstName!!.text = snapshot.child("firstName").value as String
       tvLastName!!.text = snapshot.child("lastName").value as String
       }

       override fun onCancelled(databaseError: DatabaseError) {}
   })
}

That’s it. According to our database structure in Firebase, we need to parse down the tree to reach our values.

Note that to get a database value, you must add a addValueEventListener listener to get a DataSnapshot reference from which database values can be fetched.

User Logout

Create a simple UI element and call:

mAuth.signOut()

Let’s leave this part as an exercise for you to do on your own :).

Conclusion

In this tutorial on Firebase Authentication with Kotlin, we have learned how to take leverage from the power of Firebase Authentication and Database to implement features like User registration, User Sign in, Sign out, Password reset and email verification.

This simple mobile application I have created in this tutorial can be extended to a full featured mobile app. Go on and play with the code. 

I hope this example was helpful!

If you are looking for more short code examples in Kotlin or even longer step by step Kotlin tutorials, checkout the Android->Kotlin category of this blog.

And if you are looking for books or video tutorials on Kotlin check the list of resources below. I hope you will find some of them helpful!

Happy learning Kotlin!

Building Mobile Apps with Kotlin for Android – Books

Building Mobile Apps with Kotlin for Android – Video Courses