Simple Firebase Sign-in UI Demo App
Tags: firebase, android, kotlin, beginners
Published: 2023-06-10 00:00:00

**Simple Jetpack Compose example to demonstrate how to sign in with a Firebase Authentication pre-build UI using FirebaseUI**

This is part of the Firebase tutorial series:

* **Part 1 - Simple Firebase Sign-in UI Demo App**
    
* [Part 2 - Integrate Firebase Realtime Database and User Authentication into your Android App](https://vtsen.hashnode.dev/integrate-firebase-realtime-database-and-user-authentication-into-your-android-app)

In this demo app, we will guide you through the steps to enable FirebaseUI for authentication and demonstrate how to integrate it into your Jetpack Compose application.

We're going to add these 2 sign-in methods:

* Email/Password
    
* Google
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683609057169/9c8af9ef-2507-4496-9fd8-7fcdc9342445.gif)

## Connect Your App to Firebase

1. Go to the [Firebase console](https://console.firebase.google.com/), and log in with your Google account.
    
2. **Add project** and follow on-screen instructions
    
3. Turn off **Enable Google Analytics for this project**, and click **Create project.**
    
4. Register the app with **Android package name** (**applicationId** in your build.gradle file)
    
    * Add **app nickname** (it can be any name)
        
    * Add **Debug signing certificate SHA-1** if you want to use Google sign-in method. In the Android Studio terminal, run this command **./gradlew signingReport.** Copy the SHA-1 and paste it here.
        
5. Download **google-services.json** to your project **app folder**.
    
6. Go to **Authentication** -&gt; **Sign-in** method. Add and enable **Email/Password**, and **Google** sign-in providers.
    

> The **google-services.json** and debug singing certificate **fingerprints** can also be accessed from the **Project Overview** -&gt; **Project settings** at the top left corner.

## Add Firebase Authentication SDK to your app

1. Add **Google services Gradle plugin** in your **project-level** build.gradle.kts.
    
    ```kotlin
    buildscript {
        dependencies {
            classpath("com.google.gms:google-services:4.3.15")
        }
    }
    ```
    
2. Add **Google service Gradle plugin** in your **app-level** build.gradle.kts/
    
    ```kotlin
    plugins {
        /*...*/
        id ("com.google.gms.google-services")
    }
    ```
    
3. Add **FirebaseUI** and **Play Services Auth** libraries
    
    ```kotlin
    dependencies {
        /*...*/
        implementation ("com.firebaseui:firebase-ui-auth:7.2.0")
        implementation ("com.google.android.gms:play-services-auth:20.5.0") 
    }
    ```
    
    > The Play Services Auth library is required for the Email/Password sign-in method.
    

In Android Studio, all the above steps can be automated with the **Firebase Assistant (Tools -&gt; Firebase)** except that you need to **manually add the Debug signing certificate** SHA-1 and also **manually modify the library dependencies**.

## Integrate pre-build Firebase Sign-in UI

Quick steps on what you need to do to launch the pre-build Sign-in UI:

1. Create ActivityResultLauncher
    
2. Choose authentication providers
    
3. Create and launch sign-in intent. Here is an example of `SignInScreen()` composable functions:
    
    ```kotlin
    @Composable
    fun SignInScreen(
        onSignInResult: (FirebaseAuthUIAuthenticationResult) -> Unit
    ) {
        // (1) Create ActivityResultLauncher
        val launcher = rememberLauncherForActivityResult(
            contract = FirebaseAuthUIActivityResultContract(),
            onResult = onSignInResult
        )
    
        // (2) Choose authentication providers
        val providers = arrayListOf(
            AuthUI.IdpConfig.GoogleBuilder().build(),
            AuthUI.IdpConfig.EmailBuilder().build(),
        )
    
        // (3) Create and launch sign-in intent
        val intent = AuthUI.getInstance()
            .createSignInIntentBuilder()
            .setAvailableProviders(providers)
            .build()
    
        LaunchedEffect(true){
            launcher.launch(intent)
        }
    }
    ```
    
4. Handle the sign-in result callback
    
    ```kotlin
    SignInScreen { result ->
        // (4) Handle the sign-in result callback
        if (result.resultCode == ComponentActivity.RESULT_OK) {
            signInStatus = "Signed In"
            val user = FirebaseAuth.getInstance().currentUser
            userId = user!!.uid
            
        } else {
            val response = result.idpResponse
            signInStatus = if (response == null) {
                "Not Signed In"
            } else {
                val errorCode = response.getError()?.getErrorCode()
                "Failed - Error Code: $errorCode"
            }
        }    
        /*...*/
    }
    ```
    

> When the `response` is null, the user cancels the sign-in operation (e.g. press the back button)

## Some Thoughts

The Firebase Assistant in Android Studio is quick and helpful, but if you're new, I recommend you go through the Firebase console project setup steps above to fully understand the actual steps that need to be done.

## Next Step

Well, this is just a quick demo app to demonstrate the Firebase sign-in APIs. I probably should move the sign-in state to a ViewModel when I port this change to my actual app.

> **[Updated - Aug 08, 2023]:** Yeah, I have moved the sign-in state to the VIewModel if you look at the source code.

I also want to learn how to store the user data in the remote server using Firebase real-time database instead of using [Preferences and Proto DataStore](https://vtsen.hashnode.dev/simple-preferences-proto-datastore-demo-app) on the local phone.

## Source Code

GitHub Repository: [Demo\_FirebaseSignInRealtimeDB](https://github.com/vinchamp77/Demo_FirebaseSignInRealtimeDB)

---

*Originally published at [https://vtsen.hashnode.dev](https://vtsen.hashnode.dev/simple-firebase-sign-in-ui-demo-app)*.