Forem: Yauheni Mokich

How to implemented pull to refresh in Jetpack Compose

Yauheni Mokich — Fri, 27 Sep 2024 19:06:10 +0000

Setup

Update your material3 version to at least 1.3.0-beta04,
or compose-bom to 2024.09.00

Now implement PullToRefreshBox:

PullToRefreshBox(
        isRefreshing = uiState.currentWeatherRefreshResult.isInProgress(),
        onRefresh = { onIntent(HomeIntent.RefreshCurrentWeather) },
        contentAlignment = Alignment.Center,
        modifier = Modifier.fillMaxSize()) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .verticalScroll(rememberScrollState())
        ) {

        }
    }

If you're trying to use PullToRefreshBox on a regular Column, then make sure to add verticalScroll, without it pull to refresh will not work.
Use onRefresh parameter to perform your desired operation (intent) that would cause an update to it's result (represented in the form of currentWeatherRefreshResult here)

How to Scrape LinkedIn for the Latest Job Postings: A Step-by-Step Guide 🖥️💼

Yauheni Mokich — Sun, 08 Sep 2024 10:36:50 +0000

In today's tutorial, I’m going to show you how to efficiently scrape LinkedIn for up-to-date job postings—straight from the source! 🔍 Whether you're a developer looking to automate your job search or simply want a powerful tool for staying ahead of the competition, this guide has got you covered.

What's more, the core logic behind this process is the same technology powering my app, CoverAI: AI-Powered Cover Letter Generator. 🚀

With CoverAI, not only can you instantly generate tailored cover letters, but you can also integrate your resume and analyze job postings to extract key details—saving you time while increasing your chances of landing that dream job. 🌟

If you’re ready to streamline your application process and make every job application count, check out CoverAI

We're going to use Jsoup, Java HTML parser that is fully compatible with Kotlin

Setup

libs.versions.toml

[versions]
jsoup = "1.17.2"

[libraries]
jsoup = { module = "org.jsoup:jsoup", version.ref = "jsoup"}

build.gradle.kts

implementation(libs.jsoup)

Base definition

If you're thinking of using web scraping for different purposes (apart from the one discussed here), it's a good idea to put the main logic into an interface

interface Scraper {
    fun Connection.getPageDocument(): Document? = return this.ignoreContentType(true).get()
}

The code above executes the get request on a Jsoup Connection while ignoring the content type

In order to efficiently store job posting data, define an appropriate data class:

data class LinkedInJob(
    val id: String = UUID.randomUUID().toString(),
    val title: String,
    val company: String,
    val location: String,
    val link: String)

Next we'll define a LinkedInJobsScraper class:

class LinkedInJobsScraper(
    private val connection: (String) -> Connection
): Scraper {
    fun getJobs(country: String, jobTitle: String, hiringOrganization: String): List<LinkedInJob> {
        val url = constructUrl(country, coverLetter)
        val document = connection(url).getPageDocument()
    }
    private fun constructUrl(country: String, jobTitle: String, hiringOrganization: String): String {
        val jobTitle = coverLetter.jobTitle
        val hiringOrganization = coverLetter.hiringOrganization
        return "https://www.linkedin.com/jobs/search?keywords=${jobTitle} $hiringOrganization" +
                "&location=$country".replace(" ", "%20")
    }
}

connection parameter is of higher-order function type. It's a function that takes a String url as input and returns a Connection object. getJobs uses that Kotlin features to establish an appropriate connection, and then get the Document

Here's what a url requesting jobs could look like: https://www.linkedin.com/jobs/search?keywords=Android%20Developer%20Google&location=Germany

Replacing spaces with %20 in URLs is important because spaces are not valid characters in a URL. URLs have specific encoding rules to ensure they can be properly understood by web browsers and servers. Spaces are replaced by %20, which is the ASCII hexadecimal value for a space character, ensuring that the URL is correctly encoded and interpreted.

The last thing left to do related to scraping is extracting appropriate text with CSS queries:

inside getJobs function

var jobCards = document.select("div.base-card.base-card--link.job-search-card")
        if (jobCards.isEmpty()) {
            jobCards = document.select("li a.base-card")
        }
        val linkedInJobs = jobCards.map { card ->
            val titleElement = card.selectFirst("h3.base-search-card__title")
            val companyElement = card.selectFirst("h4.base-search-card__subtitle")
            val locationElement = card.selectFirst("span.job-search-card__location")
            val linkElement = card.selectFirst("a.base-card__full-link")

            LinkedInJob(
                title = titleElement?.text() ?: "",
                company = companyElement?.text() ?: "",
                location = locationElement?.text() ?: "",
                link = linkElement?.attr("href") ?: card.attr("href") ?: ""
            )
        }
        return linkedInJobs

I've tested job cards extraction with different CSS queries and have come to the conclusion that the structure of downloaded HTML from LinkedIn can vary, which is why document.select("li a.base-card") and linkElement?.attr("href") ?: card.attr("href") are used.
Inside of the map function we're extracting titleElement, companyElement, locationElement, and linkElement from each individual Element, inserting them into LinkedInJob data class, and saving them inside of linkedInJobs variable.

Firebase Authentication With Jetpack Compose. Testing. Part 2

Yauheni Mokich — Thu, 27 Jun 2024 15:09:35 +0000

Nice to meet you here. This post is the second part of a series of Firebase Authentication with Jetpack Compose. Today we're going to implement UI and Unit testing with the help of Robolectric and MockK. Make sure to have a tab with this post opened

What is Robolectric?

Robolectric is a framework which enables testing Android applications without an emulator, directly on a local computer. It does so by emulating Android environment and its components. Robolectric tests are primarily used in UI and Integration testing. Robolectric tests use the same syntax for verifying UI components as regular UI tests run on an emulator.

What is MockK?

MockK is a Unit testing framework. It allows to mock, or fake, our code. Mocking can make certain functions or properties return the result we want.

Setup

dependencies {
    val mockkVersion = "1.13.11"
    val robolectricVersion = "4.12.1"
    testImplementation("io.mockk:mockk-android:$mockkVersion")
    testImplementation("io.mockk:mockk-agent:$mockkVersion")
    testImplementation("org.robolectric:robolectric:$robolectricVersion ")
}

Create an auth package inside of test [unitTest] folder together with files for the code. For me it looks like this

Common.kt file should contain shared authentication mocking function so that we could reuse it in UI and Unit testing

Create a Helpers.kt file and insert the following code

val userId = "id"
class CorrectAuthData {
    companion object {
        const val USERNAME: String = "Evgen"
        const val EMAIL: String = "someemail@gmail.com"
        const val PASSWORD: String = "SomePassword123"
    }
}
class IncorrectAuthData {
    companion object {
        const val USERNAME: String = " "
        const val EMAIL: String = "incorrect"
        const val PASSWORD: String = " "
    }
}
inline fun <reified T> mockTask(result: T? = null, exception: Exception? = null): Task<T> {
    val task = mockk<Task<T>>()
    every { task.result } returns result
    every { task.exception } returns exception
    every { task.isCanceled } returns false
    every { task.isComplete } returns true
    return task
}

mockTask function is defined as reified so that it could take in any type of Firebase task (T) as a parameter, which is inserted automatically when the Task starts executing. E.g, Firestore set function is of the following type: com.google.android.gms.tasks.Task<Void>, while signInWithEmailAndPassword is of com.google.android.gms.tasks.Task<com.google.firebase.auth.AuthResult> type

Inside of Common.kt file define the following function

fun mockAuth(userProfileChangeRequest: CapturingSlot<UserProfileChangeRequest>? = null): FirebaseAuth {
    val user = mockk<FirebaseUser>{
        every { uid } returns userId
        every { displayName } returns CorrectAuthData.USERNAME
        every { updateProfile(if (userProfileChangeRequest != null) capture(userProfileChangeRequest) else any()) } returns mockTask()
    }
    return mockk {
        every { currentUser } returns user
        every { signOut() } answers {
            every { currentUser } returns null
        }
        every { createUserWithEmailAndPassword(any(), any()) } answers {
            every { currentUser } returns user
            mockTask()
        }
        every { signInWithEmailAndPassword(any(), any()) } answers {
            every { currentUser } returns user
            mockTask()
        }
    }
}

As already said at the beginning, mocking allows us to make certain functions or properties of a mocked object return the values we want them to return. In the code above we define a function which returns a mocked instance of Firebase auth. The mocking syntax is clear: for every call to currentUser return a user instance of FirebaseUser. answers keyword enables us to mock other objects on function call.
userProfileChangeRequest is inserted as a slot to the updateProfile function call. With this we can verify that a call to updateProfile was made with a specific instance of UserProfileChangeRequest. We could also verify its displayName property.

After that define a BaseTestClass which will hold basic properties and methods of every test class and which every test class will implement.

open class BaseTestClass {
    val testScope = TestScope()
    val snackbarScope = TestScope()
    lateinit var auth: FirebaseAuth
}

Unit testing code

Inside of AuthUnitTests class define an init function which is going to initialize authentication and view model instances.

@OptIn(ExperimentalCoroutinesApi::class)
@RunWith(AndroidJUnit4::class)
class AuthUnitTests: BaseTestClass() {
    private val userProfileChangeRequestSlot = slot<UserProfileChangeRequest>()
    private lateinit var viewModel: AuthViewModel

    @Before
    fun init() {
        auth = mockAuth(userProfileChangeRequestSlot)
        val repository = AuthRepository(auth, firestore)
        viewModel = AuthViewModel(repository, CoroutineScopeProvider(testScope))
    }
}

In my previous article I've touched on a topic of inserting CoroutineScope instances. The code above demonstrates that.

Next we're going to test how username, password, and email validators work together with AuthViewModel. First let's define a function inside of our test class which makes sure that validators react appropriately to the input of incorrect format.

@Test
    fun incorrectInput_error() {
        val context = ApplicationProvider.getApplicationContext<Context>()
        val resources = context.resources
        viewModel.apply {
            onUsername("")
            assertEquals(uiState.value.validationState.usernameValidationError.asString(context),
                resources.getString(R.string.username_not_long_enough))

            onEmail("dfjdjfk")
            assertEquals(uiState.value.validationState.emailValidationError.asString(context),
                resources.getString(R.string.invalid_email_format))

            onPassword("dfdf")
            assertEquals(uiState.value.validationState.passwordValidationError.asString(context),
                resources.getString(R.string.password_not_long_enough))
            onPassword("eirhgejbrj")
            assertEquals(uiState.value.validationState.passwordValidationError.asString(context),
                resources.getString(R.string.password_not_enough_uppercase))
            onPassword("Geirhgejbrj")
            assertEquals(uiState.value.validationState.passwordValidationError.asString(context),
                resources.getString(R.string.password_not_enough_digits))
        }
    }

Here we're using dummy input values and assert that a validator's error is equal to the one defined in string resources.

Next we're going to test how validators and the view model react to input of correct format

@Test
    fun correctInput_success() {
        viewModel.apply {
            onUsername(CorrectAuthData.USERNAME)
            assertTrue(uiState.value.validationState.usernameValidationError == StringValue.Empty)

            onEmail(CorrectAuthData.EMAIL)
            assertTrue(uiState.value.validationState.emailValidationError == StringValue.Empty)

            onPassword(CorrectAuthData.PASSWORD)
            assertTrue(uiState.value.validationState.passwordValidationError == StringValue.Empty)
        }
    }

Next goes a function which tests the sign up behaviour

@Test
    fun signUp_success() = testScope.runTest {
        viewModel.apply {
            changeAuthType()
            assertEquals(uiState.value.authType, AuthType.SIGN_UP)
            onUsername(CorrectAuthData.USERNAME)
            onEmail(CorrectAuthData.EMAIL)
            onPassword(CorrectAuthData.PASSWORD)
            onCustomAuth()
        }
        advanceUntilIdle()
        verify { auth.createUserWithEmailAndPassword(CorrectAuthData.EMAIL, CorrectAuthData.PASSWORD) }
        assertEquals(userProfileChangeRequestSlot.captured.displayName, CorrectAuthData.USERNAME)
        verify { auth.currentUser!!.updateProfile(userProfileChangeRequestSlot.captured) }
    }

runTest function allows us to execute suspend functions in the test code. It's important to call runTest specifically on the testScope instance, since this is the scope in which our view model is going to call auth functions.
In the function above we're first changing auth type to sign up, then insert credentials and call the auth function.
advanceUntilIdle function makes suspend functions return immediately.
In the end we're verifying if createUserWithEmailAndPassword and updateProfile were called with correct parameters, and assert that displayName of UserProfileChangeRequest instance equals to the one we inserted.

@Test
    fun signIn_success() = testScope.runTest {
        viewModel.apply {
            assertEquals(uiState.value.authType, AuthType.SIGN_IN)
            onUsername(CorrectAuthData.USERNAME)
            onEmail(CorrectAuthData.EMAIL)
            onPassword(CorrectAuthData.PASSWORD)
            onCustomAuth()
        }
        advanceUntilIdle()
        verify { auth.signInWithEmailAndPassword(CorrectAuthData.EMAIL, CorrectAuthData.PASSWORD) }
    }

UI testing code

In AuthUITests class define a setup method which, in addition to creating a view model and auth mock, will also set content

@OptIn(ExperimentalCoroutinesApi::class)
@RunWith(AndroidJUnit4::class)
class AuthUITests: BaseTestClass() {
    @get: Rule
    val composeRule = createComposeRule()
    private lateinit var viewModel: AuthViewModel

    @Before
    fun setup() {
        auth = mockAuth()
        createViewModel()
        composeRule.apply {
            setContentWithSnackbar(snackbarScope) {
                AuthScreen(onSignIn = { }, viewModel = viewModel)
            }
        }
    }
    private fun createViewModel() {
        val repository = AuthRepository(auth, firestore)
        viewModel = AuthViewModel(repository, CoroutineScopeProvider(testScope))
    }
}

Head on to Common.kt file and define a setContentWithSnackbar extension function

@OptIn(ExperimentalMaterial3Api::class)
fun ComposeContentTestRule.setContentWithSnackbar(
    coroutineScope: CoroutineScope,
    content: @Composable () -> Unit) {
    setContent {
        val context = ApplicationProvider.getApplicationContext<Context>()
        val snackbarHostState = remember { SnackbarHostState() }
        val snackbarController = SnackbarController(snackbarHostState, coroutineScope, context)
        CompositionLocalProvider(LocalSnackbarController provides snackbarController) {
            CustomErrorSnackbar(snackbarHostState = snackbarHostState,
                swipeToDismissBoxState = rememberSwipeToDismissBoxState())
            content()
        }
    }
}

In the same file define 2 more helper functions

@OptIn(ExperimentalCoroutinesApi::class)
fun ComposeContentTestRule.assertSnackbarIsNotDisplayed(snackbarScope: TestScope) {
    waitForIdle()
    snackbarScope.advanceUntilIdle()
    onNodeWithTag(getString(R.string.error_snackbar)).assertIsNotDisplayed()
}
@OptIn(ExperimentalCoroutinesApi::class)
fun ComposeContentTestRule.assertSnackbarTextEquals(snackbarScope: TestScope, message: String) {
    waitForIdle()
    snackbarScope.advanceUntilIdle()
    onNodeWithTag(getString(R.string.error_snackbar)).assertTextEquals(message)
}

Before making assertions, we first have to make sure that all coroutines get executed, e.g LaunchedEffect in AuthScreen

LaunchedEffect(uiState.authResult) {
        snackbarController.showSnackbar(uiState.authResult)
}

And the one in SnackbarController

fun showSnackbar(result: CustomResult) {
        if (result is CustomResult.DynamicError || result is CustomResult.ResourceError) {
            coroutineScope.launch {
                snackbarHostState.currentSnackbarData?.dismiss()
                snackbarHostState.showSnackbar(result.error.asString(context))
            }
        }
    }

That's exactly what waitForIdle() and snackbarScope.advanceUntilIdle() do.

Next let's write the code that verifies that the UI correctly responds to input

    @Test
    fun signIn_testIncorrectInput() {
        composeRule.apply {
            onNodeWithText(getString(R.string.dont_have_an_account)).assertIsDisplayed()
            onNodeWithTag(getString(R.string.email)).performTextReplacement(
                IncorrectAuthData.EMAIL)
            onNodeWithTag(getString(R.string.password)).performTextReplacement(
                IncorrectAuthData.PASSWORD)
            onNodeWithText(getString(R.string.sign_in)).assertIsNotEnabled()
        }
    }
    @Test
    fun signUp_testIncorrectInput() {
        composeRule.apply {
            onNodeWithText(getString(R.string.go_to_signup)).performClick()
            onNodeWithText(getString(R.string.dont_have_an_account)).assertIsNotDisplayed()

            onNodeWithTag(getString(R.string.username)).performTextReplacement(
                IncorrectAuthData.USERNAME)
            onNodeWithText(getString(R.string.username_not_long_enough)).assertIsDisplayed()
            onNodeWithTag(getString(R.string.email)).performTextReplacement(
                IncorrectAuthData.EMAIL)
            onNodeWithText(getString(R.string.invalid_email_format)).assertIsDisplayed()
            onNodeWithTag(getString(R.string.password)).performTextReplacement(
                IncorrectAuthData.PASSWORD)
            onNodeWithText(getString(R.string.password_not_long_enough)).assertIsDisplayed()

            onNodeWithText(getString(R.string.sign_up)).assertIsNotEnabled()
        }
    }
   @Test
    fun signIn_testCorrectInput() {
        composeRule.apply {
            onNodeWithText(getString(R.string.dont_have_an_account)).assertIsDisplayed()
            onNodeWithTag(getString(R.string.email)).performTextReplacement(
                CorrectAuthData.EMAIL)
            onNodeWithTag(getString(R.string.password)).performTextReplacement(
                CorrectAuthData.PASSWORD)
            onNodeWithText(getString(R.string.sign_in)).assertIsEnabled()
        }
    }
    @Test
    fun signUp_testCorrectInput() {
        composeRule.apply {
            onNodeWithText(getString(R.string.go_to_signup)).performClick()
            onNodeWithText(getString(R.string.dont_have_an_account)).assertIsNotDisplayed()
            onNodeWithTag(getString(R.string.username)).performTextReplacement(
                CorrectAuthData.USERNAME)
            onNodeWithTag(getString(R.string.email)).performTextReplacement(
                CorrectAuthData.EMAIL)
            onNodeWithTag(getString(R.string.password)).performTextReplacement(
                CorrectAuthData.PASSWORD)
            onNodeWithText(getString(R.string.sign_up)).assertIsEnabled()
        }
    }

Recall that sign up must not be available if username is not provided, while sign in must be available even if username is not null. This is what we'll test next

@Test
    fun signInCorrectInputTest_onGoToSignUpClick_isSignUpDisabled() {
        composeRule.apply {
            onNodeWithTag(getString(R.string.email)).performTextReplacement(
                CorrectAuthData.EMAIL)
            onNodeWithTag(getString(R.string.password)).performTextReplacement(
                CorrectAuthData.PASSWORD)
            onNodeWithText(getString(R.string.go_to_signup)).performClick()
            onNodeWithText(getString(R.string.sign_up)).assertIsNotEnabled()
        }
    }
    @Test
    fun signUpCorrectInputTest_onGoToSignInClick_isSignInEnabled() {
        composeRule.apply {
            onNodeWithText(getString(R.string.go_to_signup)).performClick()

            onNodeWithTag(getString(R.string.username)).performTextReplacement(
                CorrectAuthData.USERNAME)
            onNodeWithTag(getString(R.string.email)).performTextReplacement(
                CorrectAuthData.EMAIL)
            onNodeWithTag(getString(R.string.password)).performTextReplacement(
                CorrectAuthData.PASSWORD)

            onNodeWithText(getString(R.string.sign_up)).assertIsEnabled()
            onNodeWithText(getString(R.string.go_to_signin)).performClick()
            onNodeWithText(getString(R.string.sign_in)).assertIsEnabled()
        }
    }

And finally, let's test how UI reacts on successful and unsuccessful authentication

@Test
    fun signIn_onSuccess_snackbarNotShown() = testScope.runTest {
        composeRule.apply {
            onNodeWithTag(getString(R.string.email)).performTextReplacement(
                CorrectAuthData.EMAIL)
            onNodeWithTag(getString(R.string.password)).performTextReplacement(
                CorrectAuthData.PASSWORD)
            onNodeWithText(getString(R.string.sign_in)).performClick()

            onNodeWithTag(getString(R.string.email)).assertIsNotEnabled()
            onNodeWithTag(getString(R.string.password)).assertIsNotEnabled()
            onNodeWithText(getString(R.string.go_to_signup)).assertIsNotEnabled()
            onNodeWithText(getString(R.string.sign_in)).assertIsNotEnabled()

            advanceUntilIdle()
            assertSnackbarIsNotDisplayed(snackbarScope)
        }
    }
    @Test
    fun signUp_onSuccess_snackbarNotShown() = testScope.runTest {
        composeRule.apply {
            onNodeWithText(getString(R.string.go_to_signup)).performClick()
            onNodeWithTag(getString(R.string.username)).performTextReplacement(
                CorrectAuthData.USERNAME)
            onNodeWithTag(getString(R.string.email)).performTextReplacement(
                CorrectAuthData.EMAIL)
            onNodeWithTag(getString(R.string.password)).performTextReplacement(
                CorrectAuthData.PASSWORD)
            onNodeWithText(getString(R.string.sign_up)).performClick()

            onNodeWithTag(getString(R.string.username)).assertIsNotEnabled()
            onNodeWithTag(getString(R.string.email)).assertIsNotEnabled()
            onNodeWithTag(getString(R.string.password)).assertIsNotEnabled()
            onNodeWithText(getString(R.string.go_to_signin)).assertIsNotEnabled()
            onNodeWithText(getString(R.string.sign_up)).assertIsNotEnabled()

            advanceUntilIdle()
            assertSnackbarIsNotDisplayed(snackbarScope)
        }
    }
    @Test
    fun signIn_onError_snackbarShown() = testScope.runTest {
        val exception = Exception("exception")
        every { auth.signInWithEmailAndPassword(CorrectAuthData.EMAIL, CorrectAuthData.PASSWORD) } returns mockTask(exception = exception)
        composeRule.apply {
            onNodeWithTag(getString(R.string.email)).performTextReplacement(
                CorrectAuthData.EMAIL)
            onNodeWithTag(getString(R.string.password)).performTextReplacement(
                CorrectAuthData.PASSWORD)
            onNodeWithText(getString(R.string.sign_in)).performClick()

            onNodeWithTag(getString(R.string.email)).assertIsNotEnabled()
            onNodeWithTag(getString(R.string.password)).assertIsNotEnabled()
            onNodeWithText(getString(R.string.go_to_signup)).assertIsNotEnabled()
            onNodeWithText(getString(R.string.sign_in)).assertIsNotEnabled()

            advanceUntilIdle()
            assertSnackbarTextEquals(snackbarScope, exception.message!!)
        }
    }

    @Test
    fun signUp_onError_snackbarShown() = testScope.runTest {
        val exception = Exception("exception")
        every { auth.createUserWithEmailAndPassword(CorrectAuthData.EMAIL, CorrectAuthData.PASSWORD) } returns mockTask(exception = exception)
        composeRule.apply {
            onNodeWithText(getString(R.string.go_to_signup)).performClick()
            onNodeWithTag(getString(R.string.username)).performTextReplacement(
                CorrectAuthData.USERNAME)
            onNodeWithTag(getString(R.string.email)).performTextReplacement(
                CorrectAuthData.EMAIL)
            onNodeWithTag(getString(R.string.password)).performTextReplacement(
                CorrectAuthData.PASSWORD)
            onNodeWithText(getString(R.string.sign_up)).performClick()

            onNodeWithTag(getString(R.string.username)).assertIsNotEnabled()
            onNodeWithTag(getString(R.string.email)).assertIsNotEnabled()
            onNodeWithTag(getString(R.string.password)).assertIsNotEnabled()
            onNodeWithText(getString(R.string.go_to_signin)).assertIsNotEnabled()
            onNodeWithText(getString(R.string.sign_up)).assertIsNotEnabled()

            advanceUntilIdle()
            assertSnackbarTextEquals(snackbarScope, exception.message!!)
        }
    }

onNodeWithTag(getString(R.string.email)) represents email auth field

The code above clearly demonstrates the advantage of inserting CoroutineScope into view models. We could use the viewModelScope in Robolectric tests, but it would deprive us of a possibility of verifying InProgress state since the suspending code would automatically advance. Also, before making assertions on InProgress state, make sure that in the view model you don't update the state inside of coroutine body, e.g:

fun onCustomAuth() {
        val authType = _uiState.value.authType
        updateAuthResult(CustomResult.InProgress)
        scope.launch {
            try {
                if (authType == AuthType.SIGN_UP) {
                    authRepository.signUp(_uiState.value.authState)
                }
                authRepository.signIn(_uiState.value.authState)
                updateAuthResult(CustomResult.Success)
            } catch (e: Exception) {
                updateAuthResult(CustomResult.DynamicError(e.toStringIfMessageIsNull()))
            }
        }
    }

That's it! If you have any suggestions feel free to leave them in the comments. Good luck!

Firebase Authentication With Jetpack Compose. Part 1

Yauheni Mokich — Tue, 18 Jun 2024 23:10:21 +0000

Hey! This post is part of a series of building an expense tracker app. In today's guide we're going to implement firebase authentication with input verification in jetpack compose. Also, this post features the usage of CompositionLocalProvider, which enables a clear and reusable way of showing a snackbar instead of injecting a separate callback into composables which is very junky. In one of the next guides I'll show you how to implement Google sign in, UI, and Unit testing of authentication, so stay tuned. If you have any questions or suggestions feel free to leave them in comments

Here's how the end result might look like

And the source code is here

Firebase setup

Head on to firebase and click on add project

After filling in the required info start configuring the project for Android by clicking on the corresponding icon

After following instructions head on to Authentication tab and add Email/Password provider

Hilt setup

Hilt is a popular dependency injection tool which simplifies inserting dependencies (classes, objects, mocks, etc.) into other dependencies.

You can pick versions of plugins that suit you here

Insert the following code into your root build.gradle file

plugins {
  id("com.google.dagger.hilt.android") version "2.50" apply false
// compatible with the 1.9.22 version of Kotlin
  id("com.google.devtools.ksp") version "1.9.22-1.0.16" apply false
}

After syncing gradle, apply the below dependencies in your app/build.gradle file

plugins {
  id("com.google.dagger.hilt.android")
  id("com.google.devtools.ksp")
}
dependencies {
  implementation("com.google.dagger:hilt-android:2.50")
// required if using navigation together with hilt
  implementation("androidx.hilt:hilt-navigation-compose:1.2.0")
  ksp("com.google.dagger:hilt-compiler:2.50")
  ksp("com.google.dagger:hilt-android-compiler:2.50")
}

Then annotate your MainActivity class with @AndroidEntryPoint

@AndroidEntryPoint
class MainActivity : ComponentActivity()

And last, create a ${YourAppName}Application.kt file and insert the following code

@HiltAndroidApp
// name it however you want
class MyApplication: Application()

To learn more about Hilt, visit this page:

Repository and View Model

First let's create a AuthUseCases.kt file and put 3 input validators

class UsernameValidator {
    operator fun invoke(username: String): UsernameValidationResult {
        return if (username.isBlank()) UsernameValidationResult.IS_EMPTY
        else UsernameValidationResult.CORRECT
    }
}
class EmailValidator {
    operator fun invoke(email: String): EmailValidationResult {
        return if (Patterns.EMAIL_ADDRESS.matcher(email).matches()) {
            EmailValidationResult.CORRECT
        }
        else EmailValidationResult.INCORRECT_FORMAT
    }
}

class PasswordValidator {
    operator fun invoke(password: String): PasswordValidationResult {
        return if (password.length < 8) PasswordValidationResult.NOT_LONG_ENOUGH
        else if (password.count(Char::isUpperCase) == 0) PasswordValidationResult.NOT_ENOUGH_UPPERCASE
        else if (!password.contains("[0-9]".toRegex())) PasswordValidationResult.NOT_ENOUGH_DIGITS
        else PasswordValidationResult.CORRECT
    }
}
enum class UsernameValidationResult {
    IS_EMPTY,
    CORRECT
}
enum class EmailValidationResult {
    INCORRECT_FORMAT,
    CORRECT
}
enum class PasswordValidationResult {
    NOT_LONG_ENOUGH,
    NOT_ENOUGH_DIGITS,
    NOT_ENOUGH_UPPERCASE,
    CORRECT
}

operator fun invoke() is a special type of function in Kotlin that allows us to insert parameters into a class instance. Here's an example

val passwordValidator = PasswordValidator()
passwordValidator(password)

For email validation we're using an email address checker of android.util package that returns true if a given email passes the check
In password validator, password.contains("[0-9]".toRegex()) returns true if a given input contains at least 1 number, otherwise, we will inform a user of this requirement

Next, we'll create a AuthRepository.kt file that will consist of a class responsible for authentication, which we'll later inject into our view model

class AuthRepository(
    private val auth: FirebaseAuth,
    private val firestore: FirebaseFirestore) {
    suspend fun signUp(authState: AuthState) {
       auth.createUserWithEmailAndPassword(authState.email!!, authState.password!!).await()
       auth.currentUser?.updateProfile(UserProfileChangeRequest.Builder()
            .setDisplayName(authState.username!!).build())?.await()
    }
    suspend fun signIn(authState: AuthState) {
        auth.signInWithEmailAndPassword(authState.email!!, authState.password!!).await()
    }
}

The code above contains a function that creates a user with email, password, and a username, which is set with the help of UserProfileChangeRequest.

Create a StringValue.kt file and define the StringValue class. It will enable us to match input validation results to strings in an easy and clean way

sealed class StringValue {

    data class DynamicString(val value: String) : StringValue()

    data object Empty : StringValue()

    class StringResource(
        @StringRes val resId: Int
    ) : StringValue()

    fun asString(context: Context): String {
        return when (this) {
            is Empty -> ""
            is DynamicString -> value
            is StringResource -> context.getString(resId))
        }
    }
}

Create a AuthModule.kt file and define AuthModule, that will tell hilt which instance of AuthRepository and CoroutineScopeProvider to provide (e.g mocked or real)

@Module
@InstallIn(SingletonComponent::class)
object AuthModule {
    @Provides
    @Singleton
    fun provideAuthRepository(): AuthRepository =
        AuthRepository(Firebase.auth, Firebase.firestore)

    @Provides
    @Singleton
    fun provideCoroutineScopeProvider(): CoroutineScopeProvider =
        CoroutineScopeProvider()
}

Singleton components are created only once per lifecycle of the application. Since there's absolutely no need to provide a different instance of AuthRepository and CoroutineScopeProvider each time they're requested, using @Singleton is a perfect choice.

Create a Result.kt file containing the Result class.

sealed class CustomResult(val error: StringValue = StringValue.Empty) {
    data object Idle: CustomResult()
    data object InProgress: CustomResult()
    data object Empty: CustomResult()
    data object Success: CustomResult()
    class DynamicError(error: String): CustomResult(StringValue.DynamicString(error))
    class ResourceError(@StringRes res: Int): CustomResult(StringValue.StringResource(res))
}

This class will be responsible for providing smooth user experience as well as other important features (like disabling auth fields and buttons when the result of a sign in operation is InProgress)

After that, create a AuthViewModel.kt file and start defining auth view model

@HiltViewModel
class AuthViewModel @Inject constructor(
    private val authRepository: AuthRepository
): ViewModel() {
    private val usernameValidator = UsernameValidator()
    private val emailValidator = EmailValidator()
    private val passwordValidator = PasswordValidator()
    private val _uiState = MutableStateFlow(UiState())
    val uiState = _uiState.asStateFlow()

    fun onUsername(username: String) {
        val result = when (usernameValidator(username)) {
            UsernameValidationResult.IS_EMPTY -> StringValue.StringResource(R.string.username_not_long_enough)
            else -> StringValue.Empty
        }
        _uiState.update { it.copy(validationState = it.validationState.copy(usernameValidationError = result),
            authState = it.authState.copy(username = username)) }
    }
    fun onEmail(email: String) {
        val result = when (emailValidator(email)) {
            EmailValidationResult.INCORRECT_FORMAT -> StringValue.StringResource(R.string.invalid_email_format)
            else -> StringValue.Empty
        }
        _uiState.update { it.copy(validationState = it.validationState.copy(emailValidationError = result),
            authState = it.authState.copy(email = email)) }
    }
    fun onPassword(password: String) {
        val result = when (passwordValidator(password)) {
            PasswordValidationResult.NOT_LONG_ENOUGH -> StringValue.StringResource(R.string.password_not_long_enough)
            PasswordValidationResult.NOT_ENOUGH_UPPERCASE -> StringValue.StringResource(R.string.password_not_enough_uppercase)
            PasswordValidationResult.NOT_ENOUGH_DIGITS -> StringValue.StringResource(R.string.password_not_enough_digits)
            else -> StringValue.Empty
        }
        _uiState.update { it.copy(validationState = it.validationState.copy(passwordValidationError = result),
            authState = it.authState.copy(password = password)) }
    }
    data class UiState(
        val authType: AuthType = AuthType.SIGN_IN,
        val authState: AuthState = AuthState(),
        val validationState: ValidationState = ValidationState(),
        val authResult: CustomResult = CustomResult.Idle)
    data class ValidationState(
        val usernameValidationError: StringValue = StringValue.Empty,
        val emailValidationError: StringValue = StringValue.Empty,
        val passwordValidationError: StringValue = StringValue.Empty,
    )
}
data class AuthState(
    val username: String? = null,
    val email: String? = null,
    val password: String? = null,
)
enum class AuthType {
    SIGN_IN,
    SIGN_UP
}
enum class FieldType {
    USERNAME,
    EMAIL,
    PASSWORD
}

In this code AuthViewModel is annotated with @HiltViewModel, and its constructor is annotated with @Inject, which makes hilt inject the dependencies we defined in AuthModule.
onUsername, onEmail, and onPassword functions are responsible for updating auth fields and the appropriate verification results. These will be called every time a user types something in.
Depending on the value of authType variable we'll decide what kind of authentication is currently chosen (sign in or sign up), and make the UI and authentication pipeline react accordingly.

Now lets add a couple of functions to AuthViewModel, which are directly responsible for authenticating a user

fun changeAuthType() {
        _uiState.update { it.copy(authType = AuthType.entries[it.authType.ordinal xor 1]) }
    }

    fun onCustomAuth() {
        val authType = _uiState.value.authType
        updateAuthResult(CustomResult.InProgress)
        viewModelScope.launch {
            try {
                if (authType == AuthType.SIGN_UP) authRepository.signUp(_uiState.value.authState)
                else authRepository.signIn(_uiState.value.authState)
                updateAuthResult(CustomResult.Success)
            } catch (e: Exception) {
       updateAuthResult(CustomResult.DynamicError(e.toStringIfMessageIsNull()))
            }
        }
    }

changeAuthType changes authentication type using XOR logical operator. For example, when a user is viewing a sign in composable, authType ordinal has a value of 0. Upon calling the function, 0 xor 1 will be equal to 1, selecting the auth type at index 1, which is sign up. And vise versa, when a user is viewing a sign up composable and calls changeAuthType function, the result of 1 xor 1 will be 0.
onCustomAuth function starts off by telling a user that the authentication is running, then launches a coroutine scope with a try and catch block. If auth is successful, the function updates the result to Success.

UI code

(Optional)
Let's create a fancy title for our app with gradient animation

@Composable
fun Title() {
    val gradientColors = listOf(MaterialTheme.colorScheme.onBackground,
        MaterialTheme.colorScheme.primary,
        MaterialTheme.colorScheme.onPrimary.copy(0.5f))
    var offsetX by remember { mutableStateOf(0f) }
    LaunchedEffect(Unit) {
        animate(
            initialValue = 0f,
            targetValue = 1000f,
            animationSpec = tween(3000)) {value, _ ->
            offsetX = value
        }
    }
    val brush = Brush.linearGradient(
        colors = gradientColors,
        start = Offset(offsetX, 0f),
        end = Offset(offsetX + 200f, 100f)
    )
    Text(stringResource(id = R.string.app_name),
        style = MaterialTheme.typography.titleLarge.copy(brush = brush))
}

Let's define an auth field

@Composable
fun CustomInputField(
    enabled: Boolean,
    fieldType: FieldType,
    value: String?,
    error: String,
    onValueChange: (String) -> Unit) {
    val shape = RoundedCornerShape(dimensionResource(id = R.dimen.auth_corner))
    val fieldTypeString = stringResource(id = when(fieldType) {
        FieldType.USERNAME -> R.string.username
        FieldType.EMAIL -> R.string.email
        FieldType.PASSWORD -> R.string.password
    })
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxWidth()
    ) {
        OutlinedTextField(
            value = value ?: "",
            isError = error.isNotEmpty(),
            onValueChange = onValueChange,
            enabled = enabled,
            shape = shape,
            keyboardOptions = KeyboardOptions(imeAction =
            if (fieldType == FieldType.USERNAME || fieldType == FieldType.EMAIL) ImeAction.Next else ImeAction.Done),
            placeholder = {
                if (value.isNullOrBlank())
                    Text(fieldTypeString)
            },
            singleLine = true,
            modifier = Modifier.fillMaxWidth().testTag(fieldTypeString)
        )
        if (error.isNotEmpty()) {
            Text(error,
                textAlign = TextAlign.Center,
                color = MaterialTheme.colorScheme.error,
                modifier = Modifier.testTag(error))
        }
    }
}

Here, we use fieldType to decide the Ime action and show a placeholder. Also, we use the result of input validators to either show or not show an error text composable

Let's define an auth button

@Composable
fun CustomAuthButton(
    authType: AuthType,
    enabled: Boolean,
    onClick: () -> Unit) {
    val label = stringResource(
        id = when (authType) {
            AuthType.SIGN_IN -> R.string.sign_in
            AuthType.SIGN_UP -> R.string.sign_up
        }
    )
    ElevatedButton(onClick = onClick,
        shape = RoundedCornerShape(dimensionResource(id = R.dimen.button_corner)),
        colors = ButtonDefaults.buttonColors(),
        enabled = enabled,
        modifier = Modifier.fillMaxWidth()
    ) {
        Text(label, style = MaterialTheme.typography.displaySmall,
            modifier = Modifier.padding(10.dp))
    }
}

Here authType comes in handy, as we can show an appropriate label for a button.

After that follows a "go to text" which would enable a user to transition between desired auth states

@Composable
fun GoToText(authType: AuthType,
             enabled: Boolean,
             onClick: () -> Unit) {
    val label = stringResource(
        id = if (authType == AuthType.SIGN_IN) R.string.go_to_signup else R.string.go_to_signin
    )
    TextButton(onClick = onClick,
        enabled = enabled) {
        Text(label, style = MaterialTheme.typography.labelSmall.copy(
            textDecoration = TextDecoration.Underline
        ))
    }
}

Here we show "Go to sign up" text if a user is in sign in state. And vise versa.

Now we combine all the composables above into a single card

@Composable
fun AuthFieldsColumn(
    uiState: AuthViewModel.UiState,
    authEnabled: Boolean,
    onUsername: (String) -> Unit,
    onEmail: (String) -> Unit,
    onPassword: (String) -> Unit,
    onChangeAuthType: () -> Unit,
    onAuth: () -> Unit
) {
    val shape = RoundedCornerShape(dimensionResource(id = R.dimen.auth_corner))
    val validationState = uiState.validationState
    val authState = uiState.authState
    val authResult = uiState.authResult
    val context = LocalContext.current
    val usernameValidationError = validationState.usernameValidationError.asString(context)
    val emailValidationError = validationState.emailValidationError.asString(context)
    val passwordValidationError = validationState.passwordValidationError.asString(context)
    val authButtonEnabled = (usernameValidationError.isEmpty() && authState.username != null || uiState.authType != AuthType.SIGN_UP) &&
            (emailValidationError.isEmpty() && authState.email != null) &&
            (passwordValidationError.isEmpty() && authState.password != null) && authEnabled
    ElevatedCard(
        modifier = Modifier
            .width(350.dp)
            .shadow(
                dimensionResource(id = R.dimen.shadow_elevation),
                shape = shape,
                spotColor = MaterialTheme.colorScheme.primary
            )
            .clip(shape)
            .background(MaterialTheme.colorScheme.onBackground.copy(0.1f))
            .border(1.dp, MaterialTheme.colorScheme.primary, shape)
    ) {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(20.dp),
            modifier = Modifier
                .fillMaxWidth()
                .padding(10.dp)
        ) {
            AnimatedVisibility(uiState.authType == AuthType.SIGN_UP) {
                CustomInputField(
                    fieldType = FieldType.USERNAME,
                    enabled = authEnabled,
                    value = authState.username,
                    error = usernameValidationError,
                    onValueChange = onUsername)
            }
            CustomInputField(
                fieldType = FieldType.EMAIL,
                enabled = authEnabled,
                value = authState.email,
                error = emailValidationError,
                onValueChange = onEmail)
            CustomInputField(
                fieldType = FieldType.PASSWORD,
                enabled = authEnabled,
                value = authState.password,
                error = passwordValidationError,
                onValueChange = onPassword)
            CustomAuthButton(
                authType = uiState.authType,
                enabled = authButtonEnabled,
                onClick = onAuth)
            if (authResult is CustomResult.InProgress) {
                LinearProgressIndicator()
            }
            Column(horizontalAlignment = Alignment.CenterHorizontally) {
                if (uiState.authType == AuthType.SIGN_IN) {
                    Text(stringResource(id = R.string.dont_have_an_account),
                        style = MaterialTheme.typography.labelSmall)
                }
                GoToText(authType = uiState.authType,
                    enabled = authEnabled,
                    onClick = onChangeAuthType)
            }
        }
    }
}

In the code above authButtonEnabled will be true in 2 cases: either if a current auth option is sign in and email with password pass the input check, or if a current option is sign up and username together with email and password pass the check. Also, username text field will be shown only on sign up.

After that I've defined another composable that accepts ui state and callback methods. This is useful for previewing composables.

@Composable
fun AuthContentColumn(
    uiState: AuthViewModel.UiState,
    onUsername: (String) -> Unit,
    onEmail: (String) -> Unit,
    onPassword: (String) -> Unit,
    onChangeAuthType: () -> Unit,
    onCustomAuth: () -> Unit,
    onSignGoogleSignIn: suspend () -> IntentSender?,
    onSignInWithIntent: (ActivityResult) -> Unit) {
    val authResult = uiState.authResult
    val authEnabled = authResult !is CustomResult.InProgress && authResult !is CustomResult.Success
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(40.dp),
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState())
            .padding(10.dp)
    ) {
        Title()
        AuthFieldsColumn(
            uiState = uiState,
            authEnabled = authEnabled,
            onUsername = onUsername,
            onEmail = onEmail,
            onPassword = onPassword,
            onChangeAuthType = onChangeAuthType,
            onAuth = onCustomAuth)
    }
}

Next create a top auth screen composable

@Composable
fun AuthScreen(
    onSignIn: () -> Unit,
    viewModel: AuthViewModel = hiltViewModel()) {
    val uiState by viewModel.uiState.collectAsState()
    val focusManger = LocalFocusManager.current
    val snackbarController = LocalSnackbarController.current
    LaunchedEffect(uiState.authResult) {
        if (uiState.authResult is CustomResult.Success) {
            focusManger.clearFocus(true)
            onSignIn()
        }
    }
    LaunchedEffect(uiState.authResult) {
        snackbarController.showErrorSnackbar(uiState.authResult)
    }
    AuthContentColumn(
        uiState = uiState,
        onUsername = viewModel::onUsername,
        onEmail = viewModel::onEmail,
        onPassword = viewModel::onPassword,
        onChangeAuthType = viewModel::changeAuthType,
        onCustomAuth = viewModel::onCustomAuth,
        onSignGoogleSignIn = viewModel::onGoogleSignIn,
        onSignInWithIntent = viewModel::onSignInWithIntent,
    )
}

On successful authentication, the composable clears keyboard focus and calls onSignIn callback, which is usually responsible for navigating to another screen. On unsuccessful authentication, an error snackbar is shown. Here's the code for it:

In MainActivity.kt create a LocalSnackbarController variable

val LocalSnackbarController = compositionLocalOf<SnackbarController> {
    error("No snackbar host state provided")
}

Then inside of setContent function wrap the app's content with CompositionLocalProvider and define a dismissable snackbar. To learn more about CompositionLocalProvider, visit this page

setContent {
    val snackbarHostState = remember {
        SnackbarHostState()
    }
    val swipeToDismissBoxState = rememberSwipeToDismissBoxState(confirmValueChange = {value ->
        if (value != SwipeToDismissBoxValue.Settled) {
            snackbarHostState.currentSnackbarData?.dismiss()
            true
        } else false
    })
    val snackbarController by remember(snackbarHostState) {
        mutableStateOf(SnackbarController(snackbarHostState, lifecycleScope, applicationContext))
    }
    LaunchedEffect(swipeToDismissBoxState.currentValue) {
        if (swipeToDismissBoxState.currentValue != SwipeToDismissBoxValue.Settled) {
            swipeToDismissBoxState.reset()
        }
    }
    MoneyMonocleTheme(darkTheme = isThemeDark.value) {
        CompositionLocalProvider(LocalSnackbarController provides snackbarController) {
            Surface(
                Modifier
                    .fillMaxSize()
                    .background(MaterialTheme.colorScheme.background)
            ) {
                Box(
                    Modifier
                        .fillMaxSize()
                        .imePadding()
                ) {
                    MoneyMonocleNavHost(
                        navController = navController
                    )
                    CustomErrorSnackbar(snackbarHostState = snackbarHostState,
                        swipeToDismissBoxState = swipeToDismissBoxState)
                }
            }
        }

    }
}

After that in a separate file create SnackbarController with CustomErrorSnackbar

class SnackbarController(
    private val snackbarHostState: SnackbarHostState,
    private val coroutineScope: CoroutineScope,
    private val context: Context,
) {
    fun showErrorSnackbar(result: CustomResult) {
        if (result is CustomResult.DynamicError || result is CustomResult.ResourceError) {
            coroutineScope.launch {
                snackbarHostState.currentSnackbarData?.dismiss()
                snackbarHostState.showSnackbar(result.error.asString(context))
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CustomErrorSnackbar(snackbarHostState: SnackbarHostState,
                        swipeToDismissBoxState: SwipeToDismissBoxState) {
    SwipeToDismissBox(state = swipeToDismissBoxState, backgroundContent = {}) {
        SnackbarHost(hostState = snackbarHostState,
                    snackbar = {data ->
                Snackbar(
                    containerColor = MaterialTheme.colorScheme.errorContainer,
                    modifier = Modifier
                        .padding(20.dp)
                ) {
                    Row(
                        verticalAlignment = Alignment.CenterVertically,
                        modifier = Modifier.fillMaxWidth()
                    ) {
                        Text(data.visuals.message,
                            color = MaterialTheme.colorScheme.onErrorContainer,
                            modifier = Modifier.testTag(stringResource(id = R.string.error_snackbar)))
                    }
                }
            })
        }
}

And that's all there is to it! Good luck on your Android Development journey.