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 within the CredentialsManager.credentials property. The network request returns the property names using snake case, and they need to be converted to camel case for the web application.

Map the credential values to set the correct key-value-pairs using the code below:

util/CredentialsManager.kt

_53
package io.ionic.cs.portals.jobsync.util
_53
_53
import androidx.annotation.Keep
_53
import kotlinx.coroutines.CoroutineScope
_53
import kotlinx.coroutines.Dispatchers
_53
import kotlinx.coroutines.launch
_53
import kotlinx.coroutines.withContext
_53
import retrofit2.http.Body
_53
import retrofit2.http.POST
_53
import com.google.gson.annotations.SerializedName
_53
_53
@Keep
_53
data class LoginBody(val username: String, val password: String)
_53
@Keep
_53
data class Credentials(
_53
@SerializedName("access_token") val accessToken: String,
_53
@SerializedName("refresh_token") val refreshToken: String
_53
) {

Configuring initial context​

Once the mapping has been performed, update the Portal configuration in portals/WebAppScreen.kt to include the current user's credentials as initial context:

portals/WebAppScreen.kt

_37
package io.ionic.cs.portals.jobsync.portals
_37
_37
import androidx.compose.foundation.layout.Arrangement
_37
import androidx.compose.foundation.layout.Column
_37
.setInitialContext(CredentialsManager.credentials!!.toMap())

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 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 code.

Contents