Unable to update value of already set cookie in WebView

[karel-suchomel-ed]

Hello,
I'm using this library to set a session cookie PHPSESSID in WebView. My app has an e-shop on a website which I'm displaying in WebView and to "share" the user session from the app to WebView I'm using an auth token. When I try to set the PHPSESSID cookie in a browser manually it works as expected, but in a WebView the cookie is not getting updated.

I'm settings this cookie on the browser mount in useEffect and before every page load like this.

 const onLoadStart = (event: WebViewNavigationEvent) =>
    if (cookie && isLogged) {
      ;(async () => {
        await CookieManager.set('https://www.example.com/', {
          name: 'PHPSESSID',
          value: cookie.sub,
          domain: 'www.example.com',
          version: '1',
          secure: true,
          httpOnly: true
        })
      })()
    }
    setCurrentUrl(event.nativeEvent.url)
    setIsLoading(true)
  }

When I try to set any random test cookie I can see that it is set correctly the first time, but after it already exists its value cannot be updated.

Has anyone experienced the same issue or does anybody know, whether or not it is possible to update the PHPSESSID cookie in webview?

[budet-b]

hello @karel-suchomel-ed do you have this issue on iOS ? Android ? Both ?

[budet-b]

I found that if you do not specify the domain it works

[karel-suchomel-ed]

Hi, thank you for your response, mainly this is happening on iOS, I have managed to get it working, but I struggle with a different problem. After I set the cookie and load the webview, on the initial page load the session is still not working, but after I redirect it starts working correctly. Do you have any idea, what can be the problem?

Also, it works when I hard-code a webview reload after 500ms after load, but it is not a good solution.

I tried combining it with the headers attribute in source prop, where I also passed the PHPSESSID in Cookie header and it works even strangely. The session is there after the initial page load, but after I redirect it doesn't work and after I redirect again, it works again :D

Any suggestions are welcome.

I call this method after retrieving the access token after app startup if the user is already logged in or after login.

export async function setSessionCookie(token: AccessToken): Promise<Cookie | undefined> {
  const cookie = getCookieFromToken(token)
  if (cookie) {
    const country = getStoredCountry()
    const url = getStoreURL(country)
    await CookieManager.set(
      url,
      {
        name: 'PHPSESSID',
        value: cookie.sub
      },
      useWebKit
    )
    const cookies = await CookieManager.get(url, useWebKit)
    return cookies.PHPSESSID
  }

  return undefined
}

Then this is the webview.

const Example = ({source}: Props) => {
  const [isReady, setIsReady] = useState(false)
  const [currentURI, setCurrentURI] = useState(source.uri)
  const [cookieHeader, setCookieHeader] = useState('')
  const webViewRef = useRef<WebView>(null)
  const newSource = {
    ...source,
    uri: currentURI,
    headers: {
      Cookie: cookieHeader
    }
  }

  useFocusEffect(
    useCallback(() => {
      const getCookieHeader = async () => {
        const token = getUserAccessToken()
        if (token) {
          const cookie = await setSessionCookie(token)
          const cookiesString = cookie ? `${cookie.name}=${cookie.value}` : ''
          setCookieHeader(cookiesString)
        }
        setIsReady(true)
      }
      getCookieHeader()
      webViewRef?.current?.reload()
      return () => {
        setIsReady(false)
      }
    }, [])
  )

  if (!isReady) {
    return false
  }

  return (
    <Browser
      ref={webViewRef}
      source={newSource}
      applicationNameForUserAgent={APPLICATION_NAME}
      allowsBackForwardNavigationGestures
      sharedCookiesEnabled
      pullToRefreshEnabled
      textZoom={100}
      decelerationRate="normal"
      scalesPageToFit={false}
      setBuiltInZoomControls={false}
      autoManageStatusBarEnabled={false}
      {...otherProps}
    />
  )
}

[budet-b]

After I set the cookie and load the webview, on the initial page load the session is still not working, but after I redirect it starts working correctly. Do you have any idea, what can be the problem?

Are you setting the cookie and then load the webview? Maybe you are setting the cookie a little bit too late?
I mean are you calling setSessionCookie and then load webview?

[drweizak]

hello @karel-suchomel-ed do you have this issue on iOS ? Android ? Both ?

Hallo! I am actually having this issue in Android! Cookie value does never update

I call this function on a useEffect to set the first url to a Webview (component will only render when first url is set) and when webview onNavigationStateChange (i might have to change this last one on onShouldStartLoadWithRequest after reading your comments).

But still i was expecting that the cookie value in Android would be replaced on set, but maybe i am wrong? It's been hard to test this since my local builds always replace the cookie value, but not the build in production

export const setBaseCookiesToUrl = async (url: string): Promise<void> => {
  await CookieManager.set(url, {
    name: 'isApp',
    value: 'true',
    expires: getOneYearFromNow(),
  });

  if (nativeApplicationVersion !== null) {
    await CookieManager.set(url, {
      name: 'nativeAppVersion',
      value: nativeApplicationVersion,
      expires: getOneYearFromNow(),
    });
  }

  await CookieManager.set(url, {
    name: 'nativeAppPlatform',
    value: Platform.OS,
    expires: getOneYearFromNow(),
  });

  await CookieManager.set(url, {
    name: 'screenWidth',
    value: Dimensions.get('window').width.toString(),
    expires: getOneYearFromNow(),
  });

  void CookieManager.flush();
};

I am using this cookies agnostic to the domain! Because they can be shared among multiple domains.
Locally i am able to reset the cookies
from:
{"httpOnly":false,"path":null,"value":"1.6.4","secure":false,"domain":null,"name":"nativeAppVersion"}
to:
{"httpOnly":false,"path":null,"value":"1.6.5","secure":false,"domain":null,"name":"nativeAppVersion"}

But that does not reflect in some Android running in production:

Version mismatch before setting cookie, native: 1.6.5, cookie: 

{"httpOnly":false,"path":null,"value":"1.6.1","secure":false,"domain":null,"name":"nativeAppVersion"}