Vincent Tsen
Vincent Tsen - AndroidDev Blog

Follow

Vincent Tsen - AndroidDev Blog

Follow

Simple Firebase Sign-in UI Demo App

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

Vincent Tsen's photo
Vincent Tsen
ยทMay 20, 2023ยท

3 min read

Simple Firebase Sign-in UI Demo App

Table of contents

  • Connect Your App to Firebase
  • Add Firebase Authentication SDK to your app
  • Integrate pre-build Firebase Sign-in UI
  • Some Thoughts
  • Next Step
  • Source Code

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

Connect Your App to Firebase

  1. Go to the Firebase console, 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 -> 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 -> 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.

     buildscript {
         dependencies {
             classpath("com.google.gms:google-services:4.3.15")
         }
     }
    
  2. Add Google service Gradle plugin in your app-level build.gradle.kts/

     plugins {
         /*...*/
         id ("com.google.gms.google-services")
     }
    
  3. Add FirebaseUI and Play Services Auth libraries

     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 -> 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:

     @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

     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 demo app. I plan to implement this in this app which allows the user to store their settings in the cloud instead of on the local phone. Before that, I need to learn how to store the data in Firebase real-time database.

Source Code

GitHub Repository: Demo_FirebaseSignIn

Did you find this article valuable?

Support Vincent Tsen by becoming a sponsor. Any amount is appreciated!

See recent sponsors |ย Learn more about Hashnode Sponsors
ย 
Share this