Refreshing tabs after sign in

[mark-kraemer]

I really appreciate the improvements the team has been putting out. Tabs are so much easier now that the HotwireTabBarController exists. I followed the video that @joemasilotti just posted. My app uses devise and the HotwireTabBarController will visit each of the tabs so that they are preloaded when a user clicks on a tab. But all the tabs require authentication to access. Since the tab bar controller loads them immediately all tabs are redirected to the devise sign in page. Is there a way to refresh them after the user signs into one of the tabs?

One idea I had was to use a routing decision handler with a simple query param (?login=success) and then trigger a refresh of the tabs. But the navigator.rootViewController is a UINavigationController and not the HotwireTabBarController. Is there a better way to go about this?

import Foundation
import HotwireNative

public final class ReloadTabsDecisionHandler: RouteDecisionHandler {
  public let name: String = "reload-tabs"
  private var login: String?

  public init() {}
  
  public func matches(location: URL,
                      configuration: Navigator.Configuration) -> Bool {
    guard let components = URLComponents(url: location, resolvingAgainstBaseURL: false),
      let queryItems = components.queryItems else {
      return false
    }
    
    login = queryItems.first { $0.name == "login" }?.value

    return login != "success"
  }
  
  public func handle(location: URL,
                     configuration: Navigator.Configuration,
                     navigator: Navigator) -> Router.Decision {
    // navigator.rootViewController.reloadTabs or something like that

    return .navigate
  }
}

[williamkennedy]

Perhaps you can do something like this in the SceneController, similar to the Demo app.

extension SceneController: NavigatorDelegate {
    func handle(proposal: VisitProposal, from navigator: Navigator) -> ProposalResult {
        switch proposal.viewController {
        case RefreshViewController.pathConfigurationIdentifier:
            tabBarController.load(HotwireTab.all)
            return .accept
        default:
            return .accept
        }
    }
}

[mark-kraemer]

I'll give this a try, thanks!

[jspooner]

I encountered the same issue last week and had similar thoughts. I was trying to present the Sign In/Up screens in a modal view, with the success path set to the root path, which caused various issues. I tried your idea of refreshing each tab, but my solution wasn’t as elegant as yours, and I didn’t want hacky code in my project. Instead, I considered solving this in the browser by updating HTML fragments with sign-in content.

One thing Hotwire Native needs is examples of authentication.

[joemasilotti]

One approach I'm experimenting with is configuring tabs dynamically via a bridge a bridge component. I don't have anything abstract to share just yet. But until then, @williamkennedy's solution works really well - especially because there's already a 90% complete working version in the demo app.

[joemasilotti]

Ruby Friends doesn't have dynamic tabs (yet?), they are shown/hidden based on if the user is signed in or not. I needed a bit more than the path configuration so I went with an authentication bridge component.

I fire the bridge component that sends the user's authentication state on every page load - if they are signed in I swap out the window?.rootViewController with a HotwireTabBarController. Then, on sign out, I swap it back to a single navigator.rootViewController.

I went into more detail, and showed most of the code, on YouTube. I'm planning on writing up a lengthier blog post when I have Android working, too.

[weizheheng]

Hi @joemasilotti went through your live video and also your book (great intro book btw!).

I am now in the same situation where I don't want to render the tab before the user sign in.

It seems doable now for ios with the similar approach you did in your YouTube live, I am wondering if you already have Android working? If you have, do you mind pointing me to a direction that I could further explore?

Thank you so much!

[joemasilotti]

Thanks @weizheheng!

For Android you'll need to restart MainActivity. That way you can have an if/else statement in the navigatorConfigurations() function to check if the tabs should be shown (or not).

All that said… I'm currently experimenting with a more straightforward solution. I'm still documenting all the workarounds and such but hope to post about it soon!

[mark-kraemer]

@weizheheng I implemented it in Android with the following. There might be gotchas I missed or a more simplified approach that @joemasilotti is documenting, but this seemed to work for me.

class AuthenticatedTabsComponent(
    name: String, private val delegate: BridgeDelegate<HotwireDestination>
) : BridgeComponent<HotwireDestination>(name, delegate) {

    private val fragment: Fragment
        get() = delegate.destination.fragment

    override fun onReceive(message: Message) {
        val data = message.data<MessageData>() ?: return
        val activity = fragment.activity as? MainActivity
        activity?.loadTabs(data.authenticated, data.reload)
    }

    @Serializable
    data class MessageData(
        val authenticated: Boolean,
        val reload: Boolean
    )
}

  // In MainActivity

  fun loadTabs(authenticated: Boolean = false, reload: Boolean = false) {
    if (authenticated && !reload && bottomNavigationController.tabs.size == mainTabs.size) {
      return
    } else if (authenticated) {
      bottomNavigationView.visibility = View.VISIBLE
      delegate.resetNavigators()
      bottomNavigationController.load(mainTabs, 0)
    } else if (!authenticated && bottomNavigationController.tabs.size != 1) {
      bottomNavigationView.visibility = View.GONE
      bottomNavigationController.load(unauthenticatedTabs, 0)
    }
  }

mainTabs and unauthenticatedTabs are just a listOf HotwireBottomTabs

[weizheheng]

Thanks for the ideas @joemasilotti and @mark-kraemer ! Gonna explore around with them.

[n-studio]

What if we made navigatorsByTab public?

We could write something like:

tabBarController.navigatorsByTab.values.forEach { navigator in
  navigator.reload()
}

[williamkennedy]

Hotwire Android has a resetNavigators() function which does this. Probably worth implementing

[joshfester]

@mark-kraemer did you ever come up with a solution for this? I'm facing the exact same issue. This is my first time working with Swift, so I have no idea how to implement @williamkennedy 's suggestion

[joshfester]

@williamkennedy Thanks so much for the help. I can't quite get this to work though. Here's what I ended up with in my SceneDelegate file:

extension SceneDelegate: NavigatorDelegate {
    func handle(proposal: VisitProposal, from navigator: Navigator) -> ProposalResult {
        print("Hotwire visit proposal --- \(proposal.url.absoluteString)")

        if proposal.url == baseUrl {
            tabBarController.load(HotwireTab.all)
        }

        return .accept
    }
}

The handle function only seems to fire when the app boots up, not after login (form submission), redirect, or pull-to-refresh. So the tabs can never get reloaded. Is SceneDelegate the wrong place to do it?

[williamkennedy]

I explain it in this video, but I'm going to try to outline it here for everyone as much as possible.

Essentially, when your server navigates to a specific route, you want to trigger the tab refresh.

In your path configuration,

{
 patterns: [ refresh_app_path ],
 properties: {presentation: "refresh", view_controller: "refresh_app"}
 }

Then in our iOS app, you create a new view controller

import UIKit
import HotwireNative

class RefreshAppViewController: UIViewController, PathConfigurationIdentifiable {
   static var pathConfigurationIdentifier: String { "refresh_app" }
}

Then in your scene delegate, you can do the following:

extension SceneController: NavigatorDelegate {
    func handle(proposal: VisitProposal, from navigator: Navigator) -> ProposalResult {
        switch proposal.viewController {
        case RefreshAppController.pathConfigurationIdentifier:
            tabBarController.load(HotwireTab.all)
            return .reject
              .....
        }
    }
}

Hope that helps. It's what I have been doing for my apps because my tabs are the same after you sign in or sign out.

[joshfester]

Thanks so much @williamkennedy !! I will work on this 🙏

[pbohea]

@williamkennedy Hey William, is there anything about Devise that might interfere with this fix? My code is identical to your video with the exception of the after_authentication_url (mine is after_sign_in_path), but when i hit the /refresh_app path, iOS is not routing to the RefreshAppViewController at all.

[williamkennedy]

I would need to see more details to be honest. A few things come to mind.

What exactly is happening?

[chancancode]

A little late to the party, sharing our implementation of the general idea: http://github.com/tildeio/hotwire-native-dynamic-tab-bar/

[aar0nr]

The Navigator instances used in the HotwireTabBarController should be public. You can already access them by setting the selectedIndex property and then get it with activeNavigator, but I would like to access them without changing the selected tab in the UI. Maybe just make navigatorsByTab public as @n-studio suggested.

[joemasilotti]

Would this change help get this working?

[aar0nr]

Thanks Joe, I didn't realize there was already a navigator() func on main branch. Using navigatorsByIdentifier() works too. Either way solves the issue!