Android's CookieJar (JavaNetCookieJar) makes it impossible to use cookies during development

[rishabhpoddar]

Description

During development, quite often, the API server is running on a local IP like 192.168.1.2. This means that any cookies (for authentication or otherwise) being sent to the react native app would also have a cookie domain like 192.168.1.2. While it's common to prefix cookie domains with a ., these "development" friendly domains cannot have a prefix of . in front of them (.192.168.1.2 doesn't make any sense - the cookies won't get sent).

Android's NetworkingModule uses JavaNetCookieJar to store cookies:

  @Override
  public void initialize() {
    mCookieJarContainer.setCookieJar(new JavaNetCookieJar(mCookieHandler));
  }

JavaNetCookieJar class, in the saveFromResponse function, always adds a . to all cookie domains, making using cookies in development impossible.

React Native version:

System:
    OS: macOS 10.15.3
    CPU: (4) x64 Intel(R) Core(TM) i7-4578U CPU @ 3.00GHz
    Memory: 228.93 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.11.0 - /usr/local/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.13.7 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6241897
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  Languages:
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0
    react-native: 0.62.0 => 0.62.0
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

1. Start any API process on 0.0.0.0:8080
2. This process should have a /login API that sets cookies for the domain 192.168.1.2 (your local IP address) and an /info API that uses the incoming cookies to return some logged in specific info.
3. Send a request to the login API from an android app
4. After successful login, send a request to the /info API and see that no cookies are sent.

Expected Results

We expect standard cookie management behaviour. If we do not add the leading . in the cookie domain, everything works fine. This can be achieved by:

• Not using JavaNetCookieJar and building our own CookieJar.
• Raising an issue in the OkHttp repo and waiting for them to fix it.
• Implementing the hack shown below

Temporary fix:

Basically, we use Java reflection (not at all ideal, but seemed to have no other choice here) to reimplement the saveFromResponse function in our custom cookie jar that uses JavaNetCookieJar.

MainApplication.java

public class MainApplication extends Application implements ReactApplication {

@Override
  public void onCreate() {
    super.onCreate();

      // FUNCTION CALL USED TO FIX THE ISSUE OF DOMAIN NAME DURING DEVELOPMENT.
    fixCookieDomainIssue();

    // ...
  }

private void fixCookieDomainIssue() {
      // we modify the OkHttpClient that React Native will use.
      OkHttpClientProvider.setOkHttpClientFactory(() -> {
          OkHttpClient.Builder builder = OkHttpClientProvider.createClientBuilder(
                  mReactNativeHost.getReactInstanceManager().getCurrentReactContext());
          builder.cookieJar(new ReactCookieJarContainer() {

              @Override
              public void setCookieJar(CookieJar cookieJar) {
                  if (cookieJar instanceof JavaNetCookieJar) {
                      super.setCookieJar(new CustomJavaNetCookieJar((JavaNetCookieJar) cookieJar));
                  } else {
                      // user has probably set their own CookieJar.
                      super.setCookieJar(cookieJar);
                  }
              }
          });
          return builder.build();
      });
  }

  private class CustomJavaNetCookieJar implements CookieJar {

      private final JavaNetCookieJar existing;

      public CustomJavaNetCookieJar(JavaNetCookieJar cookieJar) {
          existing = cookieJar;
      }

      @Override
      public void saveFromResponse(HttpUrl url, List<Cookie> cookies) {
          // some of the variables and functions that we need to use are private. So we use Java reflections to access them.
          try {
              List<String> cookieStrings = new ArrayList<>();
              for (Cookie cookie : cookies) {
                  Method toStr = Cookie.class.getDeclaredMethod("toString"); // calling toString with no arguments does not add a leading dot.
                  toStr.setAccessible(true);
                  cookieStrings.add((String) toStr.invoke(cookie));
              }
              Map<String, List<String>> multimap = Collections.singletonMap("Set-Cookie", cookieStrings);

              Field field = existing.getClass().getDeclaredField("cookieHandler");
              field.setAccessible(true);
              CookieHandler cookieHandler = (CookieHandler) field.get(existing);
              cookieHandler.put(url.uri(), multimap);
              return;
          } catch (NoSuchMethodException e) {
          } catch (IllegalAccessException e) {
          } catch (InvocationTargetException e) {
          } catch (IllegalArgumentException e) {
          } catch (SecurityException e) {
          } catch (IOException e) {
          } catch (NoSuchFieldException e) {
          } catch (Throwable e) {}

          existing.saveFromResponse(url, cookies);
      }

      @Override
      public List<Cookie> loadForRequest(HttpUrl url) {
          return existing.loadForRequest(url);
      }
  }
}

[safaiyeh]

Hi @rishabhpoddar we have a community module that allows you to manually manage your cookies here: https://github.com/react-native-community/cookies

Would this solve your use case?

[rishabhpoddar]

Technically, I think react-native-community/cookies would help. However, it is really annoying to manage cookies manually, especially given that the OS is capable of taking care of this for you.

So I do not consider using that as a solution to this issue.

[stephanoparaskeva]

Technically, I think react-native-community/cookies would help. However, it is really annoying to manage cookies manually, especially given that the OS is capable of taking care of this for you.

So I do not consider using that as a solution to this issue.

Hi @rishabhpoddar we have a community module that allows you to manually manage your cookies here: https://github.com/react-native-community/cookies

Would this solve your use case?

I think @rishabhpoddar is correct as this is a big issue, this should in itself be handled and work naturally for Android in react-native.

[chrisglein]

Technically, I think react-native-community/cookies would help. However, it is really annoying to manage cookies manually, especially given that the OS is capable of taking care of this for you.

So I do not consider using that as a solution to this issue.

Is this a criticism of how the existing module works? Because if so that could be potentially be fixed by the module or implemented by a different one. The reality is that React Native core is intentionally light and that apps are expected to pull in non-essential functionality through community modules. Most things are moving out of core, not in. So there'd need to be strong justification to solve this in core when there's already a solution (and options for other competing solutions if that doesn't meet your needs).

Am I understanding correctly in that the ask here is to move that type of functionality into core? Apologies if I'm misreading this.

[rishabhpoddar]

@chrisglein the existing module to handle cookies on android has a bug where it appends a "." to the cookie domain, even if the domain is localhost or an IP address like 127.0.0.1. So either we fix that, or remove that module entirely and replace it with a community provided cookie module that doesn't have that bug!

[safaiyeh]

@rishabhpoddar theres an open PR for that bug. Comment on it, to provide more urgency for it.

Discussion on this issue should be about if React Native core will have better cookie support.

[alwaysloseall]

Description

During development, quite often, the API server is running on a local IP like 192.168.1.2. This means that any cookies (for authentication or otherwise) being sent to the react native app would also have a cookie domain like 192.168.1.2. While it's common to prefix cookie domains with a ., these "development" friendly domains cannot have a prefix of . in front of them (.192.168.1.2 doesn't make any sense - the cookies won't get sent).

Android's NetworkingModule uses JavaNetCookieJar to store cookies:

  @Override
  public void initialize() {
    mCookieJarContainer.setCookieJar(new JavaNetCookieJar(mCookieHandler));
  }

JavaNetCookieJar class, in the saveFromResponse function, always adds a . to all cookie domains, making using cookies in development impossible.

React Native version:

System:
    OS: macOS 10.15.3
    CPU: (4) x64 Intel(R) Core(TM) i7-4578U CPU @ 3.00GHz
    Memory: 228.93 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.11.0 - /usr/local/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.13.7 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6241897
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  Languages:
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0
    react-native: 0.62.0 => 0.62.0
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

1. Start any API process on 0.0.0.0:8080
2. This process should have a /login API that sets cookies for the domain 192.168.1.2 (your local IP address) and an /info API that uses the incoming cookies to return some logged in specific info.
3. Send a request to the login API from an android app
4. After successful login, send a request to the /info API and see that no cookies are sent.

Expected Results

We expect standard cookie management behaviour. If we do not add the leading . in the cookie domain, everything works fine. This can be achieved by:

• Not using JavaNetCookieJar and building our own CookieJar.
• Raising an issue in the OkHttp repo and waiting for them to fix it.
• Implementing the hack shown below

Temporary fix:

Basically, we use Java reflection (not at all ideal, but seemed to have no other choice here) to reimplement the saveFromResponse function in our custom cookie jar that uses JavaNetCookieJar.

MainApplication.java

public class MainApplication extends Application implements ReactApplication {

@Override
  public void onCreate() {
    super.onCreate();

      // FUNCTION CALL USED TO FIX THE ISSUE OF DOMAIN NAME DURING DEVELOPMENT.
    fixCookieDomainIssue();

    // ...
  }

private void fixCookieDomainIssue() {
      // we modify the OkHttpClient that React Native will use.
      OkHttpClientProvider.setOkHttpClientFactory(() -> {
          OkHttpClient.Builder builder = OkHttpClientProvider.createClientBuilder(
                  mReactNativeHost.getReactInstanceManager().getCurrentReactContext());
          builder.cookieJar(new ReactCookieJarContainer() {

              @Override
              public void setCookieJar(CookieJar cookieJar) {
                  if (cookieJar instanceof JavaNetCookieJar) {
                      super.setCookieJar(new CustomJavaNetCookieJar((JavaNetCookieJar) cookieJar));
                  } else {
                      // user has probably set their own CookieJar.
                      super.setCookieJar(cookieJar);
                  }
              }
          });
          return builder.build();
      });
  }

  private class CustomJavaNetCookieJar implements CookieJar {

      private final JavaNetCookieJar existing;

      public CustomJavaNetCookieJar(JavaNetCookieJar cookieJar) {
          existing = cookieJar;
      }

      @Override
      public void saveFromResponse(HttpUrl url, List<Cookie> cookies) {
          // some of the variables and functions that we need to use are private. So we use Java reflections to access them.
          try {
              List<String> cookieStrings = new ArrayList<>();
              for (Cookie cookie : cookies) {
                  Method toStr = Cookie.class.getDeclaredMethod("toString"); // calling toString with no arguments does not add a leading dot.
                  toStr.setAccessible(true);
                  cookieStrings.add((String) toStr.invoke(cookie));
              }
              Map<String, List<String>> multimap = Collections.singletonMap("Set-Cookie", cookieStrings);

              Field field = existing.getClass().getDeclaredField("cookieHandler");
              field.setAccessible(true);
              CookieHandler cookieHandler = (CookieHandler) field.get(existing);
              cookieHandler.put(url.uri(), multimap);
              return;
          } catch (NoSuchMethodException e) {
          } catch (IllegalAccessException e) {
          } catch (InvocationTargetException e) {
          } catch (IllegalArgumentException e) {
          } catch (SecurityException e) {
          } catch (IOException e) {
          } catch (NoSuchFieldException e) {
          } catch (Throwable e) {}

          existing.saveFromResponse(url, cookies);
      }

      @Override
      public List<Cookie> loadForRequest(HttpUrl url) {
          return existing.loadForRequest(url);
      }
  }
}

i did it,but useless,can u tell me what should i do, i need take cookies when fetch api

[github-actions]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[github-actions]

This issue was closed because the author hasn't provided the requested feedback after 7 days.