Skip to main content

Passing data through a Portal

Data can be passed through a Portal and made available before a web app renders using initial context.

In this step, you will set initial context to pass session information to the sample web app.

Exploring the problem​

When the Jobsync superapp is first opened, the current user is requested to sign in. From there, they are sent to a dashboard view containing functions that should be scoped to the current user, such as submitting expenses or tracking time.

Web apps being presented through a Portal are unaware of the fact that the current user has signed in from the native app. You could ask the user to sign in a second time, but that isn't an ideal user experience.

The Portals library allows you to pass data that is immediately available to the presenting web app as part of Portals configuration. In the case of the Jobsync app, the accessToken and refreshToken returned after a user signs in can be passed to web apps and used to authenticate requests.

Formatting for initial context​

After the current user signs in, the accessToken and refreshToken are stored in an instance of CredentialsManager passed around the application code as an environment object. Credentials are stored as a decodable struct, but the initial context of a Portal must be passed in as a JSObject, a type defined by Portal's parent dependency, Capacitor.

Add a conversion method to the Credentials struct in Utilities/CredentialsManager.swift using the code below:

Utilities/CredentialsManager.swift

_19
import Foundation
_19
import Capacitor
_19
_19
struct Credentials: Decodable {
_19
var accessToken: String
_19
var refreshToken: String
_19
_19
private enum CodingKeys: String, CodingKey {
_19
case accessToken = "access_token"
_19
case refreshToken = "refresh_token"
_19
}
_19
_19
func toJSObject() -> JSObject {
_19
return [
_19
"accessToken": self.accessToken,
_19
"refreshToken": self.refreshToken
_19
]
_19
}
_19
}

Configuring initial context​

Once the conversion method has been created, update the Portal configuration in Portals/WebAppView.swift to include the current user's credentials as initial context:

WebAppView.swift

_23
import SwiftUI
_23
import IonicPortals
_23
_23
struct WebAppView: View {
_23
@EnvironmentObject var credentialsManager: CredentialsManager
_23
@Environment(\.dismiss) var dismiss
_23
let metadata: WebAppMetadata
_23
_23
var body: some View {
_23
PortalView(portal: .init(
_23
name: "debug",
_23
startDir: "portals/debug",
_23
initialContext: credentialsManager.credentials!.toJSObject()
_23
))
_23
.ignoresSafeArea()
_23
.navigationBarBackButtonHidden()
_23
}
_23
}
_23
_23
#Preview {
_23
WebAppView(metadata: WebApps.metadata[0])
_23
.environmentObject(CredentialsManager.preview)
_23
}

Build and run the Jobsync app and navigate to one of the features in the dashboard view. The sample web app loads the 'Initial Context' tab, but now in addition to the name of the Portal configured, you will now see a value property printed out, containing the accessToken and refreshToken web apps need to authenticate requests.

What's next​

You established communication through a Portal using initial context to share session information to web apps being presented through a Portal. Initial context is uni-directional communication, from mobile native code to web code. In the next step in this module, you will learn about Portals' pub/sub mechanism to subscribe to messages sent from web code to native mobile code.

Contents