Document.cookies set from inside my webview are undefined

Why document.cookie is “empty” in WebView

A few important points:

1. Separate cookie jars

   • Chrome/Safari on the device have one cookie store.

   • react-native-webview uses its own cookie store. They do not magically share cookies.

   • So if you log in in the device browser, the WebView won’t see those cookies.

2. Even inside WebView, cookies may be blocked or dropped
   On Android especially, there are long-standing issues where:

   • document.cookie access can be denied in some situations (mixed content, http vs https, etc.).

   • Cookies with Secure, SameSite=None, or mismatched domain/path attributes simply never get stored.

3. Your check is running from React Native, but executes inside the WebView
   Your CHECK_COOKIE string is correct in that it runs in page context, but it will only show cookies stored for that origin in the WebView’s own jar. It will not show:

   • Cookies from the system browser, or

   • HttpOnly cookies (they never appear in document.cookie), or

   • Cookies never stored because of security attributes.

So, if:

• The user logged in in the normal browser, and

• You then open the same URL in WebView,

you will not see those cookies. The web app inside WebView must perform its own login flow, or you must manually inject tokens.

What you can actually do

You have three realistic approaches, depending on how much you can modify the web app.

Option 1 - Inject tokens into cookies from React Native

If you already have tokens in React Native (e.g., from a native login flow or SecureStore), you can inject them into the WebView as cookies so the React app (with js-cookie) just works.

React Native:

const injectTokens = (accessToken: string, refreshToken: string) => `
  (function() {
    // Adjust domain/path as needed
    document.cookie = "accessToken=${accessToken}; path=/";
    document.cookie = "refreshToken=${refreshToken}; path=/";
  })();
  true;
`;

<WebView
  ref={webviewRef}
  source={{ uri: accessUrl }}
  onLoadEnd={() => {
    if (webviewRef.current && accessToken && refreshToken) {
      webviewRef.current.injectJavaScript(
        injectTokens(accessToken, refreshToken)
      );
    }
  }}
  sharedCookiesEnabled
  thirdPartyCookiesEnabled
  javaScriptEnabled
/>

Now inside the web app, your existing js-cookie calls should work exactly as in the browser.

Option 2 - Let the web app send tokens out to React Native

If the login happens inside the web app running in WebView, add code in the React app to post the tokens via the WebView bridge:

// In your React web app, where you already have loginTokens
import Cookies from 'js-cookie';

export const saveTokensToCookies = (loginTokens: LoginTokens) => {
  Cookies.set('accessToken', loginTokens.accessToken, { expires: expiresAt });
  Cookies.set('refreshToken', loginTokens.refreshToken, { expires: expiresAt });

  // If running inside React Native WebView, also send them out:
  if ((window as any).ReactNativeWebView) {
    (window as any).ReactNativeWebView.postMessage(
      JSON.stringify({
        type: 'AUTH_TOKENS',
        accessToken: loginTokens.accessToken,
        refreshToken: loginTokens.refreshToken,
      }),
    );
  }
};

Then in React Native:

const onMessage = (event) => {
  try {
    const data = JSON.parse(event.nativeEvent.data);

    if (data.type === 'AUTH_TOKENS') {
      const { accessToken, refreshToken } = data;
      // store in SecureStore/AsyncStorage and use in native API calls
    } else {
      console.log('WebView message:', data);
    }
  } catch {
    console.log('Raw WebView message:', event.nativeEvent.data);
  }
};

This way your native side has the same auth context as the web app, without relying on document.cookie at all.

Option 3 - Stop using cookies for tokens inside the web app

Since you control the React web app, consider abstracting token storage:

// tokenStorage.ts (web)
const TOKEN_KEYS = {
  access: 'accessToken',
  refresh: 'refreshToken',
};

export const setTokens = (tokens: LoginTokens) => {
  localStorage.setItem(TOKEN_KEYS.access, tokens.accessToken);
  localStorage.setItem(TOKEN_KEYS.refresh, tokens.refreshToken);
};

export const getTokens = (): LoginTokens | null => {
  const accessToken = localStorage.getItem(TOKEN_KEYS.access);
  const refreshToken = localStorage.getItem(TOKEN_KEYS.refresh);
  if (!accessToken || !refreshToken) return null;
  return { accessToken, refreshToken };
};

Then, from React Native, you can use the WebView bridge:

const GET_TOKENS = `
  (function() {
    try {
      var tokens = window.localStorage.getItem('accessToken') 
        ? {
            accessToken: window.localStorage.getItem('accessToken'),
            refreshToken: window.localStorage.getItem('refreshToken'),
          }
        : null;
      window.ReactNativeWebView.postMessage(JSON.stringify({
        type: 'TOKENS_FROM_WEB',
        tokens: tokens,
      }));
    } catch (e) {
      window.ReactNativeWebView.postMessage(JSON.stringify({
        type: 'TOKENS_ERROR',
        error: e && e.message,
      }));
    }
  })();
  true;
`;

domStorageEnabled is on by default, but you can be explicit:

<WebView
  domStorageEnabled
  javaScriptEnabled
  ...
/>