Working With Passwords in Jetpack Compose

---

In this article, I will show you how to hide or show passwords in jetpack compose. Furthermore, I will show you how we can validate passwords.

We will use the OutlinedTextField as shown below.

@Composable
fun PasswordItem(
    modifier: Modifier = Modifier,

) {
    var isPasswordVisible by remember { mutableStateOf(false) }
    var value by remember { mutableStateOf("") }
    OutlinedTextField(
        modifier = modifier.fillMaxWidth(),
        value = value,
        onValueChange = {
            value = it
        },
        visualTransformation = if (isPasswordVisible) VisualTransformation.None
        else PasswordVisualTransformation(),
        placeholder = {
            Text(
                modifier = Modifier.fillMaxWidth(),
                text = "Password"
            )
        },
        trailingIcon = {
            IconButton(
                onClick = {}
            ) {
                Icon(
                    painter = if (isPasswordVisible) painterResource(R.drawable.baseline_visibility_24)
                    else painterResource(R.drawable.baseline_visibility_off_24),
                    contentDescription = if (isPasswordVisible) "Hide password"
                    else "Show password"
                )
            }
        }
    )
}

We will focus on the visualTransformation and trailingIcon.

Visual transformation transforms the visual representation of the value in the text field. In our case, we want the user to have the option to hide or show the password. So if the user wants to see the password, we don’t apply any transformation but if the user wants to hide the password, we apply the transformation. How can we achieve this?

visualTransformation = if (isPasswordVisible) VisualTransformation.None
        else PasswordVisualTransformation(),

PasswordVisualTransformation() will replace the values in the text field with a mask character. This function has a default parameter of val mask: Char = ‘\u2022’, which replaces the values with filled little circles. We can specify other characters if we want to use different masks. For example

PasswordVisualTransformation('\u002A') // Asterisks
asswordVisualTransformation('\u0023') // Hash
PasswordVisualTransformation('\u002B') // Plus
PasswordVisualTransformation('\u002D') // Dash

Next we add an icon to the trailingIcon so that the user can enable or diable visibility. As show above this is as easy as this.

trailingIcon = {
            IconButton(
                onClick = {
                    isPasswordVisible = !isPasswordVisible
                }
            ) {
                Icon(
                    painter = if (isPasswordVisible) painterResource(R.drawable.baseline_visibility_24)
                    else painterResource(R.drawable.baseline_visibility_off_24),
                    contentDescription = if (isPasswordVisible) "Hide password"
                    else "Show password"
                )
            }
        }

---

VALIDATE PASSWORD

If we now want the password to be a certain length and contain certain characters, we can use a regex pattern as shown below

fun String.isPasswordValid(password: String): Boolean {
    return Regex("^(?=.*[A-Za-z])(?=.*\\d)(?=.*[@\$!%*?&])[A-Za-z\\d@\$!%*?&]{8,}\$")
        .matches(password)
}

Let me breakdown the pattern:

[A-Za-z] // Contains atleast one letter
(?=.*\\d) //  Contains atleast one digit
[@\$!%*?&] //Contains at least one special character from the set
{8,} // Is atleast 8 characters long.

If we want our password to contain atleast an uppercase and a lowercase letter, with all other conditions remaining the same, we can use the pattern below.

fun String.isPasswordValid2(password: String): Boolean {
    return Regex("^(?=.*[A-Z])(?=.*[a-z])(?=.*\\d)(?=.*[@\$!%*?&])[A-Za-z\\d@\$!%*?&]{8,}\$")
        .matches(this)
}

(?=.*[A-Z])// contains at least one uppercase letter.
(?=.*[a-z])// Ensures the password contains at least one lowercase letter.

Let’s try it.

left — Initial Screen, right — Pasword hidden

left — Password visible, right- Password is valid

GitHub - andrewphiri/WorkingWithPasswords: An app showing how to show/hide and validate password.
An app showing how to show/hide and validate password. - andrewphiri/WorkingWithPasswordsgithub.com

And don’t forget to follow me on X and medium.