Add Firebase Authentication to a Jetpack Compose App (2023)

May 19, 2022

This is the second in a series of articles dedicated to creating a new Android app from scratch.Jetpack compositorfor the UI and some other tools that Google offers likeFirebase Authentication,Crashlytics,Cloud Fire Tentjdeal with.

Part 1has an overview of what you can do with this app, how it's structured, and what technologies we'll cover in this series. In this second part we will see how the login and registration flows are implemented and howsee modelconnects business logic with theFunctions that can be composed🇧🇷 You'll also learn how to add Firebase authentication to your project.

authentication flow

Firebase Authentication

To implement the user authentication flow, we'll use a Firebase product calledauthentication, which lets you securely authenticate users to your application. It supports authentication with passwords, phone numbers, and some popular federated identity providers like Google, Facebook, Twitter, Github, and more.

One of the coolest features of Firebase Authentication isanonymous authentication, which allows you to create an anonymous session for a user without having to ask for any information. Later, it is possible to update an anonymous user account by requiring the user to authenticate with one of the other providers and link their credentials to the existing (anonymous) account.

Start the app for the first time

Nobody likes to create a new account before trying a new app. To give users the best possible experience, we want to let them start using the app without having to sign up first. We'll use anonymous authentication to accomplish this.

Anonymous authentication can be very useful in a situation like this, where we want user data to be protected by security rules from the beginning. Once the application starts, we will start an anonymous session and display thetask screen, allowing the user to create and edit tasks.

add an account

Once the user has used the app for a while and found they like it, we want to give them the option to upgrade to a full account linked to a login that they can also use on other devices. 🇧🇷 The user can do this by navigating to the settings screen and logging in or creating an account.

On this screen, the user has two options: login or create a new account using the email and password authentication method. At this point, the previously created anonymous account will be associated with these new credentials. This means Firebase will never create a second account for the user.

Depending on the user's authentication status, the configuration screen displays different options. When the logged in user navigates to the settings screen, two new options become available: he can log out alone or delete the account, which will erase all pending items.

Implementation of the authentication flow

Add Firebase to your project

To implement the authentication flow described above, we'll use Firebase authentication. First we need to add the Firebase SDK (Software Development Kit) to the Android project. To do this, we need to add the Make It So Android app to the Make It So Firebase project inFirebase-KonsoleName🇧🇷 Once we're done building the project, we can download a configuration file that we'll add to the project. This configuration file contains all the information the Firebase Android SDK needs to connect to the Firebase project. All these instructions are described in detail in the officialfirebase documentation.

After adding the SDK to the project, we canAdd dependency for Firebase authentication libraryopposite toapp/build.gradleOpening hours:

dependencies{ // Import BOM to Firebase platformImplementationplatform('com.Google.base of fire:base of fire-born:31,0.0') // Declare dependency on Firebase authentication libraryimplementation 'with.Google.base of fire:base of fire-authentication-ktx'}

Authentication in Compose

Before we talk about using authentication in Compose, let's review how Firebase authentication works with aexercise🇧🇷 when you look at themDocumentation for Android, you'll find a step-by-step guide showing how to create an instance ofFirebaseAuthwhich will later be initialized withembringMethod.

Private Latin I wasauthentication:FirebaseAuthAbort Fun embring() { super.embring()authentication=base of fire.authentication}

In our case, we just use theexerciseto create the first composable function calledMakeItSoApp. Losexerciseand functions that can be composed should not know anything about the business logic and APIs that thesee modelsgoing to use, that's howMakeItSoActivityThis will look like this:

classMakeItSoActivity: AppCompatActivityAppCompatActivity() { Abort Fun embring(saved instance state:Package?) { super.embring(saved instance state)defineContent{ MakeItSoApp() } }}

this is thatMakeItSoAppmethod we see above:

Fun MakeItSoApp() {MakeItSoTheme{ Turn up(cor=MaterialTema.cores.background) { bravuraapplication status= Remember application status() structure( [...]state of structure=application status.state of structure) { [...] } } }}

This is the top-level compositing feature of the app, where we keep a reference to the state of the app so we can monitor changes and recompose screens as needed. Here we also applied the Make It So theme (which defines which colors are used in dark mode and light mode) and added thisstructurewhere all screens are displayed.structureis a composable element that provides slots for many different components and display elements; This is useful for defining the general structure of a screen.

Create the display template

To prevent the composable functions from knowing anything about the business logic, we call the Firebase Authentication API methods ofsee models🇧🇷 But to do that, we first need to retrieve the data that the user has entered in thetext boxesof the screens so that we can pass it as a parameter for the authentication methods.

Let's see how this works intela de login🇧🇷 This screen has quite a bit of data to sync withsee model(email and passwordstring instruments🇧🇷 We package this information into aDatenklassefor ease of handling:

Data class LoginUiState( bravuraE-mail:line= "", bravuraClave:line= "")

inside sideLoginViewModellet's create onemutable stateaccording to the state the screen is in:

I wasUI state= mutableStateOf(LoginUiState()) Private Found

onlysee modelYou can post new values ​​for itmutable state. Lostela de loginYou can only observe and react to these new states.

@ComponibleFun tela de login(tela pop-up: () ->Unit,see model:LoginViewModel= handleViewModel()) { bravuraUI statethrough thesee model.UI statebasic toolbar(app text.registration information) Share([...]) { email field(UI state.E-mail,see model::onEmailChange,modifier.field modifier()) [...] }}

We can see in the above excerpt that we share themuiState.emailasemail fieldcomposable Let's see what this composable function does:

@ComponibleFun email field(bravura:line,deNuevoValor: (line) ->Unit,modifier:modifier=modifier) { text box with border(single line= real,modifier=modifier,bravura=bravura,onValueChange= { deNuevoValor(That is) },placeholder= { Text(stringResource(app text.E-mail)) },LeaderIcone= { [...] } )}

We initialize theemail fieldasbravurapublished bysee model🇧🇷 Every time the user updates this field (by typing something), we send the new value to thedeNuevoValorCallback passed as a parameter to the composable function.

On themtela de loginthat we can compose that we see above, we can see that this callback forwards the email we just wrote to thesee model(viewModel::onEmailChange), e assee modelThen post the new email value toUI state:

Fun onEmailChange(new value:line) {UI state.bravura=UI state.bravura.copy of(E-mail=new value)}

once thesee modelprints the new state, the composite function notices that the state has been updated and automatically updates itself by a process calledredial🇧🇷 Then the new email value will be displayed in the UI (the content in theemail fieldwill be updated).

Thus, we guarantee that bothsee modeland the function that can be composed always has the most up-to-date informationUI state, and as soon as the user clicks the login button, thesee modelgets the latest email and password values ​​and passes them as parameters to the service's methods.

Account service creation

The next step is to create theaccount service, using the service interface and implementation pattern we saw earlier inPart 1of this series It is the sole responsibilitysee modelInvoke service methods based on user interactions with on-screen buttons. We'll use callbacks to get responses from calls made to the Firebase Authentication API. The interface will look like this:

interfaceaccount service{ Fun Create an anonymous account(as a result: (playable?) ->Unit) Fun authenticate(E-mail:line,Clave:line,as a result: (playable?) ->Unit) Fun linkCuenta(E-mail:line,Clave:line,as a result: (playable?) ->Unit)}

We need to implement these methods in theAccountServiceImplClass. Here we see another difference from how we used the Authentication API before. Previously, we had to call these methods directly from theexercise, so we had some context to add for our listeners:

authentication.Login with email and password(E-mail,Clave) .addOnCompleteListener(That is) {assignment-> e (assignment.is successful) { Update UI(authentication.current user) } Most { Update UI(Null) } }

Now, we won't call these methods from theexerciseno more so we won't have themauthenticationinstance already initialized and we have no context to attach to the listeners. We can avoid this by using a listener that doesn't need a context. Also note that we canFirebase.authInstance in the service implementation without having to initialize it first.

Abort Fun Create an anonymous account(as a result: (playable?) ->Unit) {base of fire.authentication.sign up anonymously() .addOnCompleteListener { as a result(That is.exception) } }Abort Fun authenticate(E-mail:line,Clave:line,as a result: (playable?) ->Unit) {base of fire.authentication.Login with email and password(E-mail,Clave) .addOnCompleteListener { as a result(That is.exception) } }Abort Fun linkCuenta(E-mail:line,Clave:line,as a result: (playable?) ->Unit) { bravuraI WOULD=Email Authentication Provider.get identity(E-mail,Clave)base of fire.authentication.current user!!.linkWithCredential(I WOULD) .addOnCompleteListener { as a result(That is.exception) }}

Now all we have to do is call these methods from thesee models, with the callback passed as a parameter. Here's an example of thatlinkCuentamethod called byRegistrarseVerModelo:

account service.linkCuenta(E-mail,Clave) {Mistake-> e (Mistake== Null) { open and unfold(CONFIGURATION SCREEN,SIGN_UP_SCREEN) } Most onError(Mistake)}

This method is called when the user wants to create a new account. we got thoseE-mailjClaveentered by the user and both passed as parameters to theEmailAuthProvider.getCredentialMethod. This method returns the newI WOULDthat we use when callinglinkWithCredentialFirebase-API-Methode.

Combinable display upgrade

Next, let's discuss what happens inside the callback method. After successfully creating the account, we move on to the next step, calling the methodopen and unfold🇧🇷 This method will reopenconfiguration screenand turn off the powerregistration screenfrom above. As soon as we get back to youconfiguration screen, aConfigurationUiStateis updated with the new value forIt's an anonymous accountProperty.

@ComponibleFun configuration screen(openEnter: () ->Unit,openEnter: () ->Unit,restart the application: () ->Unit,modifier:modifier=modifier,see model:ViewModel Customizations= handleViewModel()) { bravuraUI statethrough thesee model.UI stateShare(modifier=modifier.rellenoMaxWidth() .FillMaxHeight() .Vertical Displacement(recordarScrollState()) ) { [...] e (UI state.It's an anonymous account) { normal map editor(app text.get connected,modifier.Map()) { openEnter() } normal map editor(app text.Create your account here,modifier.Map()) { openEnter() } } Most {exit map{see model.onSignOutClick(restart the application) }RemoveMyAccountCard{see model.onDeleteMyAccountClick(restart the application) } } }}

Since the account we are using is no longer an anonymous account, the composable resource will recompose and update the content displayed to the user and theexit mapit's atRemoveMyAccountCardinstead of login and account creation cards. This way, the UI will reflect the user's authentication status, allowing you to log out or delete your account if you wish.

What is the next

In Part 3 of this series, we'll learn more about Crashlytics and how it can help you improve the quality of your app. We will also see how messages are displayed inSnack barsand some improvements we can make to avoid duplicate code.

Make it So source code for Android is available atdieses Github-Repository🇧🇷 This article shows how to use callbacks to pass resultsservicesjsee models, but this pattern is only used in the first version of the Make it So app. Then you must check this out.Tag v1.0.0if you specifically want to access this code. The latest version usedKotlin-KoroutinenjRio Kotlininstead of callbacks (cf.Part 5 of this seriesUnderstand how this change affects theservicesshown in this article).

If you are also interested in iOS/Mac development, the same app is also available for these platforms. The iOS/Mac version uses SwiftUI to build the UI, which is very similar to building the UI in Compose. The source code can be found atdieses Github-Repository.

If you have any questions, feel free to contact me atblood.