Authenticator should allow integrating with Autofill in Compose

[pmellaaho]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues.
• I have read the guide for submitting bug reports.

Which UI component?

Authenticator

Gradle script dependencies

// Put output below this line
amplify-authenticator = { module = "com.amplifyframework.ui:authenticator", version.ref = "1.4.3" }

Environment information

# Put output below this line
Gradle 8.11.1

Please include any relevant guides or documentation you're referencing

https://developer.android.com/develop/ui/compose/text/autofill https://ui.docs.amplify.aws/android/connected-components/authenticator/customization#full-ui-customization

Describe the bug

Compose 1.8 contains newly added support for semantic autofill. This is a significant improvement on how easy it is for users to fill and save credentials to a password manager. I use Authenticator in “Full UI customization” -mode so it should be a very straight forward job to integrate with autofill but for some reason I have not succeeded in this. Basically I have been able to implement a Password change screen in my app (for signed in users) that does integrate nicely with Autofill I.e. I can save credentials to password manager while changing the password but I can’t access those credential in my SignInScreen implementation. Based on these findings I think that when a screen is shown in Authenticator() context there is something that prevents Autofill to work.

Reproduction steps (if applicable)

No response

Code Snippet

// Put your code below this line.
val userName = state.form.fields[FieldKey.Username]!!
val password = state.form.fields[FieldKey.Password]!!
var currentUsrNameValue by rememberSaveable { mutableStateOf("") }
OutlinedTextField(
    value = currentUsrNameValue,
    onValueChange = { currentUsrNameValue = it },
    label = { Text("Username (Test)") },
    modifier = Modifier
        .fillMaxWidth()
        .semantics { contentType = ContentType.Username }
)

var currentPwValue by rememberSaveable { mutableStateOf("") }
OutlinedTextField(
    value = currentPwValue,
    onValueChange = { currentPwValue = it },
    label = { Text("Password (Test)") },
    visualTransformation = PasswordVisualTransformation(),
    modifier = Modifier
        .fillMaxWidth()
        .semantics { contentType = ContentType.Password }
)

AuthenticatorButton(
    onClick = {
        scope.launch {
            userName.state.content = currentUsrNameValue
            password.state.content = currentPwValue
            state.signIn()
        }
    },
    loading = !state.form.enabled,
    label = stringResource(R.string.amplify_ui_authenticator_button_signin),
)

Log output

// Put your logs below this line

Configuration File

No response

Additional information and screenshots

No response

[mattcreaser]

Thanks @pmellaaho, this is a great suggestion. I'll look into autofill to see if it can work. Please update this issue if you make any progress in the meantime.

[mattcreaser]

@pmellaaho have you been able to get autofilling of the credentials to work outside of Authenticator? I tried out autofill (in a trivial test app) and got credentials to save to the password manager immediately, but I could not seem to get the app to autofill using those credentials afterwards.

[pmellaaho]

Yes I have, I didn't try this before but now I just placed something like this in one of my screens and both fields work:

Column {
        Text(text = "Input your username below.")
        BasicTextField(
            state = remember { TextFieldState() },
            modifier = modifier
                .fillMaxWidth()
                .semantics { contentType = ContentType.Username }
        )
 }

var currentPwValue by rememberSaveable { mutableStateOf("") }
    OutlinedTextField(
        value = currentPwValue,
        onValueChange = { currentPwValue = it },
        label = { Text("Password (Test)") },
        modifier = modifier
            .fillMaxWidth()
            .semantics { contentType = ContentType.Password }
)

At first try it didn't work but then started working, at least make sure that you import these:

import androidx.compose.ui.autofill.ContentType
import androidx.compose.ui.semantics.contentType
import androidx.compose.ui.semantics.semantics

Check also these references:
https://github.com/android/snippets/blob/cfeb99f00017b6166c7c2467b050ba58dd6d9cca/compose/snippets/src/main/java/com/example/compose/snippets/text/AutofillSnippets.kt#L82-L98

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/ui/ui/integration-tests/ui-demos/src/main/java/androidx/compose/ui/demos/autofill/TextFieldAutofillDemo.kt;drc=8e2e6368a5c20346d75e909379c2d1045ea74111;l=94

[mattcreaser]

Thanks for the confirmation. I actually ran the snippets repository directly and it still did not work 😩 It appears that the issue was device specific however as my secondary test device doesn't have a problem.

That let me verify that my in-progress branch for Authenticator works with autofill for the SignUp + SignIn. I have some more work to do to get it ready for release but this is something we should be able to get out soon.

[mattcreaser]

The PR I am working on will add autofill support for the out-of-the-box fields and UIs.

For your custom SignIn UI however I'm not sure where the issue is - things should "just work" if autofill is working. I used the following as a replacement for Authenticator's signInContent and I was able to autofill and successfully sign in using the stored credentials.

@Composable
fun CustomSignIn(state: SignInState) {
    val scope = rememberCoroutineScope()

    val userName = state.form.fields[FieldKey.Username]!!
    val password = state.form.fields[FieldKey.Password]!!

    OutlinedTextField(
        value = userName.state.content,
        onValueChange = { userName.state.content = it },
        label = { Text("Username (Test)") },
        modifier = Modifier
            .fillMaxWidth()
            .semantics { contentType = ContentType.Username }
    )

    OutlinedTextField(
        value = password.state.content,
        onValueChange = { password.state.content = it },
        label = { Text("Password (Test)") },
        visualTransformation = PasswordVisualTransformation(),
        modifier = Modifier
            .fillMaxWidth()
            .semantics { contentType = ContentType.Password }
    )

    Button (
        onClick = {
            scope.launch {
                state.signIn()
            }
        }
    ) {
        Text("Sign In")
    }
}

[pmellaaho]

This is very puzzling indeed, I really don't get why autofill won't work on my SignInScreen. I know it's not device specific at least because it works in a couple of other screens. Maybe I'll wait for your PR to be released and then try once more. I checked the open issues for autofill but could not find anything related either.