React Native WebView on Expo - caching loading issues with jwt #33515
Labels
Component: WebView
Related to the WebView component.
Needs: Triage 🔍
Resolution: Locked
This issue was locked by the bot.
Comments
|
Hi there! This issue is best suited for the react-native-webview, which is a separate library that is managed by a different team than the react-native itself. https://github.com/react-native-webview/react-native-webview |
|
Thanks :) |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Description
I'm using two separate web views on a screen, with html codes that include jwt tokens as source of the webviews.
Expected result: Each web view loads a different authenticated user's profile using different jwt payloads, and shows different Tableau dashboard content based on the authenticated user's profile.
Issue: When the first jwt loads into the first webview on app load, it seems to cache throughout the entire React Native app. All other webviews within the app (same screen and different screens included) would only show the jwt profile of the first jwt that was loaded, and does not correctly load the other user's profile with a different jwt.
Version
0.64.2
Output of
npx react-native infoSystem:
OS: macOS 11.6.5
CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
Memory: 352.02 MB / 32.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.13.0 - /usr/local/bin/node
Yarn: 1.22.11 - ~/.npm-global/bin/yarn
npm: 8.1.0 - /usr/local/bin/npm
Watchman: 2022.03.07.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.10.2 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3
Android SDK: Not Found
IDEs:
Android Studio: 2020.3 AI-203.7717.56.2031.7583922
Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild
Languages:
Java: 16.0.2 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.1 => 17.0.1
react-native: 0.64.2 => 0.64.2
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found
Steps to reproduce
When I load two webview (each has a different jwt token with different profile), both webviews end up loading the same user profiles.
Here's 2 webviews of Customer Analysis.
Expected: Top Dashboard should show Current User: terence.lim, and below dashboard should show (login user: different user). However, the below dashboard is also showing terence.lim as the signed in user despite being given a different jwt token for a different user.
Snack, code example, screenshot, or link to a repository
const payload1 = {
iss: connectedAppClientId,
exp: moment.utc().add(3, "minutes").unix(), //exp: 1647244533,
jti: uuidData,
aud: "tableau",
sub: "user1",
scp: ["tableau:views:embed"],
};
const payload2 = {
iss: connectedAppClientId,
exp: moment.utc().add(3, "minutes").unix(), //exp: 1647244533,
jti: uuidData,
aud: "tableau",
sub: "user2",
scp: ["tableau:views:embed"],
};
let token1 = sign(payload1, connectedAppSecretKey, headers);
let token2 = sign(payload2, connectedAppSecretKey, headers);
let htmlCode1 =
"" +
"<title>Welcome to Eureka Tableau Embeeded Integration Demo</title>" +
'<script type="module" src="https://embedding.tableauusercontent.com/tableau.embedding.3.0.0.min.js"></script>' +
<body><tableau-viz id="tableauViz" src=${customer_dashboard_url} toolbar="false" iframeSizedToWindow="true" token="${token1}"></tableau-viz></body>+"";
let htmlCode2 =
"" +
"<title>Welcome to Eureka Tableau Embeeded Integration Demo</title>" +
'<script type="module" src="https://embedding.tableauusercontent.com/tableau.embedding.3.0.0.min.js"></script>' +
<body><tableau-viz id="tableauViz" src="https://10az.online.tableau.com/t/gsisg/views/Superstore/Customers" toolbar="false" iframeSizedToWindow="true" token="${token2}"></tableau-viz></body>+"";
return (
<WebView
originWhitelist={[""]}
source={{
html: htmlCode1,
}}
useSharedProcessPool={false}
cacheEnabled={false}
cacheMode={"LOAD_NO_CACHE"}
startInLoadingState={true}
/>
<WebView
originWhitelist={[""]}
source={{
html: htmlCode2,
}}
useSharedProcessPool={false}
cacheEnabled={false}
cacheMode={"LOAD_NO_CACHE"}
startInLoadingState={true}
/>
The text was updated successfully, but these errors were encountered: