[Android] Multiple Navigator and Auth

[MaxenceLvl]

Hello there,

I have a question about a thing, I have an application with a auth.
On this view you can go on reset password and other view.
Once connected you have a tab navigation and nested navigation on each tab.
You can also logout and go to login view.

There is a way to do this with voyager ?

Best regards

[Qw4z1]

I'm currently doing this by using two separate Navigators. TabNavigator is a screen that I set as root, and when I need to open the auth flow I call rootNavigator.push(AuthNavigator()) and when I need to exit the auth flow I use rootNavigator.popUntilRoot() (see code below).

I've also experimented a bit with navigator.replaceAll(Screen()), but since I don't the user doesn't need to be logged in to use my app, I've found it best to not replace the whole navigation stack.

Hope that helps!

class AuthNavigator : Screen {

    @Composable
    override fun Content() {
        Navigator(WelcomeScreen()) { navigator ->
            SlideTransition(navigator)
        }
    }
}

class TabsNavigator: Screen {
  @Composable
  override fun Content() {
       BottomSheetNavigator {
                  TabNavigator(
                      HomeScreen(),
                  ) {
                  ...
                  }
            }
       }
}

[atabekm]

Hi @Qw4z1. I have similar setup as you've mentioned above. I have a similar TabsNavigator as yours, with each tab has its own Navigator. And I am adding TabsNavigator as a root to root navigator.

TabsNavigator's first tab's default screen is open for anyone (i.e. doesn't require authentication), however once they tap any item on the screen, if the user is not authenticated, we need to send them to Auth flow first, and once successfully authenticated, we need to navigate to the screen we supposed to go, but went to auth flow instead. I am having problems with implementing such a functionality. On authentication request, I am pushing similar composable as your AuthNavigator to root navigator. And once auth is done, I am calling rootNavigator.popUntilRoot(). Till this place, it is working as expected. The problem I am having is pushing another screen to TabsNavigator's first tab's navigator. From the logs, I am seeing it is being pushed, however, on the UI, nothing is changing, i.e. UI stays the same as new screen not pushed. I've created a sample project to reproduce the issue. Just wondering if you had similar use case in your apps?

[Qw4z1]

@atabekm I'm pretty sure your code doesn't work because that's not how Compose works. What you want to do is to keep track of the logged in state globally and then use that to determine which screen to show.

I created a PR with your code to show you a naive example. In my app I basically do the same thing. But instead of using a global boolean I observe Firebase.auth.authStateChanged as a StateFlow to see if the user is logged in or not.