Recommended way to implement application that requires login?

[tethridge]

Can someone give an example of how to use voyager with an authentication flow? This is such a common pattern that it should probably be in the documentation. I've struggled to get this to work with transitions. It works, but as soon as you add transitions the user starts to see extra recompositions that look bad. What is the recommended pattern? This is basically what I'm doing now.

@Composable
fun App() {
    MyAppTheme {
        Navigator(MainScreen()) { navigator ->
            val rootScreenModel = navigator.getNavigatorScreenModel<RootScreenModel>()
            val state by rootScreenModel.state.collectAsState()

            when (state) {
                is RootScreenModel.State.Authenticated -> {
                    println("Authenticated")
                }

                is RootScreenModel.State.Unauthenticated -> {
                    println("Unauthenticated: pushing login screen")
                    navigator.push(StartLoginScreen())
                }
            }

            CurrentScreen()

            // Adding transitions causes issues with reloading of content
            //SlideTransition(navigator)
        }
    }
}

[thennothinghappened]

This is also something I'd like to see in voyager's docs. I think a login example would show a great example for multiple things:

1. Logic flow for navigation where some screens expect authentication to have taken place when they are accessed - Voyager currently doesn't provide any examples for anything like this.
2. It'd give a more in-depth example of using screen models.
3. It'd give a real-world example of where coroutines fit in.

I don't feel that voyager currently explains itself much - it gives you brief showcases of the tools in basic examples but makes no recommendation on how these tools can be used together. I've come across a few different voyager-using apps that all handled these things in different ways and the impression it gives off is that voyager provides quite a structured way to write your composables, but doesn't explain how you can use these things together in a real example.

I'm still not sure how to go about this with voyager!

My current quick idea was using composition locals but it feels kinda dirty, or something similar to your example.

In summary though I'd really just like to see better docs that don't just tell you what, but how you might use it. Voyager provides very little of this in my opinion.

[AlbRoehm]

Hey, i struggled with a kind of similar transition case. For me this came from the need to have a reference of the navigator for a navDrawer. I ended up with something like this which now works okay.

@Composable
fun MyApp() {
    MyTheme {
        Surface {
            val context = LocalContext.current
            val appState = rememberAppState()
            val drawerState: DrawerState = rememberDrawerState(initialValue = DrawerValue.Closed)

            CompositionLocalProvider(LocalDrawerState provides drawerState) {
                Navigator(SplashScreen()) { navigator ->

                    ModalNavigationDrawer(
                        drawerState = drawerState,
                        drawerContent = {
                            AppDrawerContent(
                                drawerState = drawerState,
                                menuItems = drawerParams(AppText),
                            ) { pickedOption ->
                                when (pickedOption) {
                                    MainNavOption.SettingsScreen -> navigator push SettingsScreen()
                                    MainNavOption.ChangeLogScreen -> navigator push ChangeLogScreen()
                                    }
                                }
                            }
                        },
                        content = {
                            Scaffold()
                               { innerPaddingModifier ->
                                // Have either CurrentScreen() or FadeTransition()
                                FadeTransition(
                                    navigator,
                                    modifier = Modifier.padding(innerPaddingModifier),
                                )
                            }
                        },
                    )
                }
            }
        }
    }
}

It took me a while to understand that you need to remove CurrentScreen() and replace it with your Transition() since in the Transition the Content of the current Screen is called. If you add both this leads to errors and weird behavior for me.

@Composable
public fun FadeTransition(
    navigator: Navigator,
    modifier: Modifier = Modifier,
    animationSpec: FiniteAnimationSpec<Float> = spring(stiffness = Spring.StiffnessMediumLow),
    content: ScreenTransitionContent = { it.Content() } <-- 
) {

About your login issue: for me it works well to navigate to a SplashScreen and from there decide where to go according to user logged in or not. If you look at it from my point of view this is not really a issue for Voyager. But I guess one could also argue differently. Maybe this helps, in any case your post helped me to get on the right track. Thanks

[tethridge]

Thanks for the example! This is a helpful insight.