mattcreaser
commented
3 months ago Hey @pmellaaho thanks for filing your question!
Authenticator is not overly opinionated about how it is integrated into your application, so there is no single recommended approach, as it will be different for different use cases.
Option 1 is certainly the easiest way. I'm not sure I fully understand your issue (colors should be read from the theme without issue) but if there are wrappers that you need that are only applied at screen level then I would agree this isn't quite what you want to do.
One thing to note is that you don't really need to pass around the SignedInState. That object holds the AuthUser and provides a convenience method for signing out. You can get these where you need them without requiring the state object by talking directly to Amplify. The specific calls are Amplify.Auth.getCurrentUser() and Amplify.Auth.signOut(), respectively.
If you do want to access the SignedInState from outside the Authenticator's content composable then I would recommend hoisting the AuthenticatorState and reading it from there. This is a more conventional Compose way to get the current state elsewhere in your hierarchy. Here's a simple example:
@Composable
fun MyApplication() {
val authenticatorState = rememberAuthenticatorState()
val stepState = authenticatorState.stepState
if (stepState is SignedInState) {
MyApplicationContent(stepState)
} else {
AuthenticatorScreen(authenticatorState)
}
}
@Composable
fun AuthenticatorScreen(authenticatorState: AuthenticatorState) {
Authenticator(state = authenticatorState) {
// no need to show content here, Authenticator only visible when stepState != SignedInState
}
}Hope that helps!
pmellaaho
Before creating a new issue, please confirm:
Which UI component?
Authenticator
Gradle script dependencies
Environment information
Please include any relevant guides or documentation you're referencing
https://ui.docs.amplify.aws/android/connected-components/authenticator https://ui.docs.amplify.aws/android/connected-components/authenticator/customization#theming https://github.com/aws-amplify/amplify-ui-android/blob/main/samples/authenticator/app/src/main/java/com/amplifyframework/ui/sample/authenticator/MainActivity.kt https://developer.android.com/develop/ui/compose/navigation
Describe the bug
What is the correct way to add Authenticator if you working on a Compose Android App that uses Jetpack Compose Navigation component?
It seems to me that there is conflicting and misleading documentation and code samples in the referred sources. There are basically two approaches that one can take:
Follow the sample code in the Theming documentation In this case the whole application would be wrapped inside Authenticator and the MainActivity code would look something like this:
MyApplicationTheme { Authenticator( signInContent = { signInState -> SignInScreen(signInState) } ) { state -> val navController: NavHostController = rememberNavController() MyAppNavHost( authenticatorState = state, navController = navController ) } }Follow the Authenticator sample code in GitHub In this case we would use the mechanisms available in Compose navigation component and define e.g. AuthenticatorScreen() as a startDestination (= Authenticator.route) in NavHost. AuthenticatorScreen() would look something like this: `@Composable fun AuthenticatorScreen( onShowSignedInContent: () -> Unit ) { Scaffold { padding -> Column( modifier = Modifier .fillMaxSize() .padding(padding) ) { Authenticator( modifier = Modifier.fillMaxWidth(), signInContent = { signInState -> SignInScreen(signInState) } ) { state -> val activity = (LocalContext.current as? Activity) (activity as MainActivity).signedInState = state onShowSignedInContent() } } } }
And passed onShowSignedInContent lambda would do the navigating: onShowSignedInContent = { navController.navigate(Main.route) }
In this case we have store signedInState somewhere because it can’t be passed as navigation argument. Also, the screen containing the SignOut -action would receive the following lambda as parameter: onSignOutClick = { (activity as MainActivity).signedInState?.signOut() navController.navigateSingleTopTo(Authenticator.route) }`
I started experimenting with the 1) but noticed that there is a problem because Authenticator is not placed inside e.g. Scaffold that applies the correct colours from theme and I can’t really do that when using Compose navigation i.e. it’s included in Screen level composables. I then moved to 2) approach which seems to work but are there caveats in the way that you’re aware of? Also, there should be an API (e.g. Amplify.Auth.fetchCurrentState()) to fetch the current state to avoid need to store it in way shown above code.
So, the question is, which approach is the recommended one?
Reproduction steps (if applicable)
No response
Code Snippet
Log output
amplifyconfiguration.json
No response
Additional information and screenshots
No response