Adding middleware to an API Client dependency 🤔

Fogmeister · November 4, 2022, 3:53pm

Hey,

I'm looking for some advice/inspiration on how to add some sort of middleware to our apiClient @Dependency within the TCA app.

We use a token/secret auth system for authenticating our endpoints. If the token and secret become out of sync we need to boot the user out of the app and get them to sign in again.

Because of this I'd like to watch the api requests and be able to push the user out to the login screen if a 403 (or something is received).

Initially I was thinking about having some sort of AsyncStream that I can listen to but that won't as I can't return anything to the request if it fails. It's a one way stream of data.

I was wondering if anyone had implemented anything like this before?

My initial intention was for a top level reducer to be able to subscribe to these updates and switch the app state over if things go wrong.

Hmm... maybe that is still possible?

Fogmeister · November 7, 2022, 4:00pm

OK... ignore this...

The error that was occurring was not due to what I was doing. It was due to what I believe is a SwiftUI bug (detailed below).

Fogmeister · November 7, 2022, 5:14pm

OK... my approach to the status code 403 stuff works... But I've uncovered what I think is a bug in SwiftUI.

I've created a gist here... SwiftUI bug with TabBars and switching them out for other views · GitHub

Code here...

import SwiftUI

struct ContentView: View {
	@State var loggedIn: Bool = false

	var body: some View {
		switch loggedIn {
		case false:
			Button("Login") {
				loggedIn = true
			}
		case true:
			TabView {
				NavigationView {
					Text("Home")
						.navigationBarTitle("Home")
						.onAppear {
							print("🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏")
							print("Home on appear")
							print("🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏")
						}
						.toolbar {
							ToolbarItem(placement: .navigationBarTrailing) {
								Button("Logout") {
									loggedIn = false
								}
							}
						}
				}
				.tabItem {
					Image(systemName: "house")
					Text("Home")
				}

				NavigationView {
					Text("Savings")
						.navigationBarTitle("Savings")
						.onAppear {
							print("🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏")
							print("Savings tab on appear")
							print("🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏")
						}
						.toolbar {
							ToolbarItem(placement: .navigationBarTrailing) {
								Button("Logout") {
									loggedIn = false
								}
							}
						}
				}
				.tabItem {
					Image(systemName: "dollarsign.circle")
					Text("Savings")
				}

				NavigationView {
					Text("Profile")
						.navigationBarTitle("Profile")
						.onAppear {
							print("🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏")
							print("Profile tab on appear")
							print("🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏🍏")
						}
						.toolbar {
							ToolbarItem(placement: .navigationBarTrailing) {
								Button("Logout") {
									loggedIn = false
								}
							}
						}
				}
				.tabItem {
					Image(systemName: "person")
					Text("Profile")
				}
			}
		}
	}
}

And a little video here... SwiftUI bug with TabView and .onAppear - YouTube

If you put this code into a brand new SwiftUI project and run it.

What you should see is when you tap "Login" you should see "Home on appear" in the console.
And then you move to the Profile tab and you should see "Profile tab on appear" in the console.

Then, when you tap "Logout" you should not expect to see anything in the console.

BUT... we see "Home on appear" in the console again as the TabView is being removed from the stack.

What it looks like is happening is...

When a TabView is removed from the stack like this. Every tab that you have visited in that session that is not the current tab will have the onAppear triggered again.

Fogmeister · November 8, 2022, 12:04am

It's actually worse than I thought. It also triggers the .task for the tabs too...

With this code...

import SwiftUI

struct ContentView: View {
	@State var loggedIn: Bool = false

	var body: some View {
		switch loggedIn {
		case false:
			Button("Login") {
				loggedIn = true
			}
			.onAppear {
				print("🍏 Login on appear")
			}
			.onDisappear {
				print("🍎 Login on disappear")
			}
			.task {
				print("🍌 Login task")
			}
		case true:
			TabView {
				NavigationView {
					Text("Home")
						.navigationBarTitle("Home")
						.onAppear {
							print("🍏 Home on appear")
						}
						.onDisappear {
							print("🍎 Home on disappear")
						}
						.task {
							print("🍌 Home task")
						}
						.toolbar {
							ToolbarItem(placement: .navigationBarTrailing) {
								Button("Logout") {
									loggedIn = false
								}
							}
						}
				}
				.tabItem {
					Image(systemName: "house")
					Text("Home")
				}

				NavigationView {
					Text("Savings")
						.navigationBarTitle("Savings")
						.onAppear {
							print("🍏 Savings on appear")
						}
						.onDisappear {
							print("🍎 Savings on disappear")
						}
						.task {
							print("🍌 Savings task")
						}
						.toolbar {
							ToolbarItem(placement: .navigationBarTrailing) {
								Button("Logout") {
									loggedIn = false
								}
							}
						}
				}
				.tabItem {
					Image(systemName: "dollarsign.circle")
					Text("Savings")
				}

				NavigationView {
					Text("Profile")
						.navigationBarTitle("Profile")
						.onAppear {
							print("🍏 Profile on appear")
						}
						.onDisappear {
							print("🍎 Profile on disappear")
						}
						.task {
							print("🍌 Profile task")
						}
						.toolbar {
							ToolbarItem(placement: .navigationBarTrailing) {
								Button("Logout") {
									loggedIn = false
								}
							}
						}
				}
				.tabItem {
					Image(systemName: "person")
					Text("Profile")
				}
			}
			.onAppear {
				print("🍏 Tabview on appear")
			}
			.onDisappear {
				print("🍎 Tabview on disappear")
			}
			.task {
				print("🍌 Tabview task")
			}
		}
	}
}

With the steps...

Launch
Tap Login
Tap the Savings tab
Tap logout

You get these logs...

Login on appear
Login task
Tabview on appear
Home on appear
Tabview task
Home task
Login on disappear
Savings on appear
Savings task
Home on disappear
Login on appear
Home on appear
Home on disappear
Savings on disappear
Tabview on disappear
Login task
Home task

In the logs above... 12, 13, and 17 just shouldn't be there at all.

Dan_Thorpe · December 21, 2022, 4:27pm

Did you make any progress on the TCA / Authentication Delegate / APIClient dependency problem? I'm sort of trying to wrap my head around this too.

Seems like I need to be able to inject into my dependency some kind of delegate (or, at a minimum a closure) which in turn, can trigger the Login flow of the app (which is all setup in TCA), and return the credentials, and have the dependency added to the Reducer using .dependency()....

tera · December 21, 2022, 10:01pm

As a workaround: remove "task", trigger any work on "appear" but only if it wasn't followed by an immediate "disappear": in other words on appear spawn a one-shot timer with some 0.1 second timeout and shut this timer down on disappear.

Fogmeister · January 8, 2023, 8:59pm

Hey, yes we did.

On the ApiClient I added an addMiddleware function. Middleware has a request and a response function on it. Each of which is called before the request and after the response respectively.

So for instance, our AuthHeaders middleware is defined like...

public extension Middleware {
	static func authHeaders(
		credentialsStore: CredentialsStore,
		date: @escaping () -> Date,
		device: UIDevice,
		appVersion: String
	) -> Middleware {
		let headerStorage = HeaderStorage(
			credentialsStore: credentialsStore,
			date: date,
			device: device,
			appVersion: appVersion
		)

		return .init(
			request: { request in
				await headerStorage.process(request: &request)
			},
			response: { response, request in
				await headerStorage.process(response: &response, request: request)
			}
		)
	}
}

The apiclient then stores the middleware added to it and runs them each time a request happens...

Our ApiClient request looks like this...

func request(route: ServerRoute) async throws -> (Data, URLResponse) {
	var urlRequestData = URLRequestData()

	try router
		.baseURL(baseUrlString)
		.print(route, into: &urlRequestData)

	guard var request = URLRequest(data: urlRequestData) else {
		fatalError()
	}

	for m in middleware {
		await m.request(&request)
	}

	var (data, response) = try await URLSession.shared.data(for: request)

	for m in middleware {
		try await m.response(&response, request)
	}

	return (data, response)
}

Then during start up we add the middleware to the ApiClient...

let apiClient = ApiClient.live(baseUrlString: baseURLString)

apiClient.addMiddleware(.authHeaders(
	credentialsStore: credentialsStore,
	date: Date.init,
	device: .current,
	appVersion: AppVersionInfo.live.fullVersionString()
))
apiClient.addMiddleware(.statusCodes)
apiClient.addMiddleware(.errorCodes)

And then set the dependency on the store... .dependency(\.apiClient, apiClient)

Dan_Thorpe · January 9, 2023, 3:35pm

Thanks for getting back to me @Fogmeister,

I have done something similar to this, except that our "credential store" might need to actually show some UI to the user so that they can authenticate. That UI-flow is controlled via a TCA reducer. So I was having some issues getting something in a `@Dependency() be able to talk back to a TCA reducer.

If anyone else is wondering, I solved this problem by making use of an AsyncChannel from swift-async-algorithms. Using a .task { } view modifier, I set my Reducer listening to events from the channel. And my auth delegate sends an event to the channel when it requires login credentials. It then listens on the channel for when the credentials come back.

Fogmeister · January 9, 2023, 3:41pm

Oh nice, I haven't heard of AsyncChannel before. But from the name it sounds like it's something we're kind of doing with an AsyncStream. I might take a look at that.