Easy Firebase Signal-in UI Demo App

On this demo app, we are going to information you thru the steps to allow FirebaseUI for authentication and display the way to combine it into your Jetpack Compose utility.

We’ll add these 2 sign-in strategies:

Join Your App to Firebase

1. Go to the Firebase console, and log in along with your Google account.

2. Add venture and comply with on-screen directions

3. Flip off Allow Google Analytics for this venture, and click on Create venture.

4. Register the app with Android bundle identify (applicationId in your construct.gradle file)

   • Add app nickname (it may be any identify)

   • Add Debug signing certificates SHA-1 if you wish to use Google sign-in technique. Within the Android Studio terminal, run this command ./gradlew signingReport. Copy the SHA-1 and paste it right here.

5. Obtain google-services.json to your venture app folder.

6. Go to Authentication -> Signal-in technique. Add and allow E mail/Password, and Google sign-in suppliers.

The google-services.json and debug singing certificates fingerprints will also be accessed from the Mission Overview -> Mission settings on the prime left nook.

Add Firebase Authentication SDK to your app

1. Add Google providers Gradle plugin in your project-level construct.gradle.kts.

    buildscript {
        dependencies {
            classpath("com.google.gms:google-services:4.3.15")
        }
    }
   

2. Add Google service Gradle plugin in your app-level construct.gradle.kts/

    plugins {
        
        id ("com.google.gms.google-services")
    }
   

3. Add FirebaseUI and Play Providers 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 Providers Auth library is required for the E mail/Password sign-in technique.

In Android Studio, all of the above steps might be automated with the Firebase Assistant (Instruments -> Firebase) besides that it’s essential manually add the Debug signing certificates SHA-1 and likewise manually modify the library dependencies.

Combine pre-build Firebase Signal-in UI

Fast steps on what it’s essential do to launch the pre-build Signal-in UI:

1. Create ActivityResultLauncher

2. Select authentication suppliers

3. Create and launch sign-in intent

Right here is an instance of SignInScreen() composable features:

@Composable
enjoyable SignInScreen(
    onSignInResult: (FirebaseAuthUIAuthenticationResult) -> Unit
) {
    
    val launcher = rememberLauncherForActivityResult(
        contract = FirebaseAuthUIActivityResultContract(),
        onResult = onSignInResult
    )

    
    val suppliers = arrayListOf(
        AuthUI.IdpConfig.GoogleBuilder().construct(),
        AuthUI.IdpConfig.EmailBuilder().construct(),
    )

    
    val intent = AuthUI.getInstance()
        .createSignInIntentBuilder()
        .setAvailableProviders(suppliers)
        .construct()

    LaunchedEffect(true){
        launcher.launch(intent)
    }
}

1. Deal with the sign-in outcome callback

SignInScreen { outcome ->
    
    if (outcome.resultCode == ComponentActivity.RESULT_OK) {
        signInStatus = "Signed In"
        val person = FirebaseAuth.getInstance().currentUser
        userId = person!!.uid

    } else {
        val response = outcome.idpResponse
        signInStatus = if (response == null) {
            "Not Signed In"
        } else {
            val errorCode = response.getError()?.getErrorCode()
            "Failed - Error Code: $errorCode"
        }
    }    
    
}

When the response is null, the person cancels the sign-in operation (e.g. press the again button)

Some Ideas

The Firebase Assistant in Android Studio is fast and useful, however for those who’re new, I like to recommend you undergo the Firebase console venture setup steps above to totally perceive the precise steps that must be achieved.

Subsequent Step

Properly, that is only a demo app. I plan to implement this in this app which permits the person to retailer their settings within the cloud as a substitute of on the native telephone. Earlier than that, I must discover ways to retailer the information in Firebase real-time database.

Supply Code

GitHub Repository: Demo_FirebaseSignIn