`fetch` polyfill is broken in iOS release builds when `react-query` is installed

[ryanjwessel]

Describe the bug?

fetch does not work on iOS when @okta/okta-react-native is installed in a project that also uses react-query.

Having react-query as a dependency without Okta installed does not break fetch.

Once you install @okta/okta-react-native and import createConfig from @okta/okta-react-native, fetch is defined as false while not in debug mode, and all functions calling it fail to execute as a result.

This repository provides a reproducible example.

Running yarn ios from this commit showcases how fetch is improperly overwritten as soon as react-query is added as a dependency.

There are two solutions.

1. Remove the call to createConfig a. This is obviously not viable if you want to use Okta.
2. Import the whatwg-fetch polyfill a. This is not ideal either as we're using a polyfill that is not meant for React Native, and could interfere with how other libraries intend to interact with fetch.

I don't think this issue is limited to react-query, as we also noticed app crashes for @sentry/react-native that only surfaced after upgrading Okta.

This was working when we were on Okta React Native version 1.11.1, but once we upgraded beyond 1.13.0 we noticed this problem.

What is expected to happen?

Developers should be able to issue network requests using fetch in React Native.

What is the actual behavior?

As described in the above section. fetch is defined as false while not in debug mode on iOS only.

Reproduction Steps?

Open this project's commit.

Run yarn to install dependencies.

Run yarn ios to open the project on an iOS Simulator.

The Simulator should immediately show the following error:

Render Error
fetch is not a function. (In 'fetch("https://mockapi.io/data")', 'fetch' is false)

Additional Information?

No response

SDK Version

"@okta/okta-react-native": "^2.4.0",
"react-native": "0.64.3",
"react-query": "^3.35.0",
"whatwg-fetch": "^3.6.2"
"react": "17.0.1",
"react-dom": "17.0.1",

Build Information

No response

[arvindkrishnakumar-okta]

Thanks for posting!

@jaynewstrom-okta Can you please help take a look?

[ryanjwessel]

Thanks @arvindkrishnakumar-okta. I can't seem to get this reproducible example working with @okta/[email protected], but that is the last known working version I have seen.

Once I upgraded to 1.13.x, this issue surfaced.

I'm working on getting an example commit that shows this as working at that version. Hope to have that available for you soon.

[JayNewstrom]

I had someone from our JS team take a look, and nothing stood out to them as being obviously wrong. I created a story on our backlog to take a deeper look into this. OKTA-493072

[ryanjwessel]

I found something that is a bit more concerning in this commit.

That example only includes @okta/okta-react-native, react, and react-native as dependencies, and this issue is present. So, it seems like this issue doesn't even require a conflicting dependency on later versions of React Native (0.68).

[jaredperreault-okta]

@ryanjwessel Can you provide the output of yarn why @okta/okta-auth-js in this repo?

[ryanjwessel]

Sure thing @jaredperreault-okta , here it is:

oktaFetchTest on  fetch-failure-okta-only via 🤖 v16.13.0 via 💎 v2.7.5 
⚡️yarn why @okta/okta-auth-js
yarn why v1.22.18
[1/4] 🤔  Why do we have the module "@okta/okta-auth-js"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "@okta/[email protected]"
info Reasons this module exists
   - "@okta#okta-react-native" depends on it
   - Hoisted from "@okta#okta-react-native#@okta#okta-auth-js"
info Disk size without dependencies: "8.79MB"
info Disk size with unique dependencies: "24.25MB"
info Disk size with transitive dependencies: "46.82MB"
info Number of shared dependencies: 26
=> Found "@okta/configuration-validation#@okta/[email protected]"
info This module exists because "@okta#okta-react-native#@okta#configuration-validation" depends on it.
info Disk size without dependencies: "8.98MB"
info Disk size with unique dependencies: "27.55MB"
info Disk size with transitive dependencies: "50.13MB"
info Number of shared dependencies: 32
✨  Done in 0.52s.

[ryanjwessel]

Have there been any developments on this Issue? We are still running into this behavior. It is pretty difficult to debug and impacts our other dependencies' functionality.

[salorsino]

Seeing this as well in my project - any suggestions or solutions being worked on?

This is the only way I can figure to get an accessToken after obtaining a sessionToken from the authn API. I really need this solution to work

[shuowu-okta]

@ryanjwessel @salorsino you can try pass custom httpClient implementation as an option via oktaAuthConfig

Refs:

• https://github.com/okta/okta-auth-js#httprequestclient
• https://github.com/okta/okta-react-native/blob/master/index.js#L69

[salorsino]

@shuowu-okta in my project, just having @okta/okta-react-native in my dependencies makes fetch unusable. API calls made before ever using the Okta SDK are failing due to this issue.

[brycnguyen]

Facing this same issue as well. Simply including the library is causing fetch to not work with android and crashes the app.

[brycnguyen]

I am using @sentry/react-native along with using @okta/okta-react-native

[jdcataldo]

We are also seeing this when upgrading to any version greater than 1.10.0. This is blocking our ability to upgrade our version of react native.

[brycnguyen]

@ryanjwessel @salorsino you can try pass custom httpClient implementation as an option via oktaAuthConfig

Refs:

• https://github.com/okta/okta-auth-js#httprequestclient
• https://github.com/okta/okta-react-native/blob/master/index.js#L69

@shuowu-okta I did try passing in a different http client such as axios.

On Android the app still will not load while including this library with @sentry/react-native. It still crashes with the error undefined is not a function

Sentry React Native also relies on the fetch api, but seems to work fine with okta-react-native on iOS with axios as the http client.

[vincecoleman]

I'm currently seeing this as well.

[brycnguyen]

any update from the okta team on this? @JayNewstrom

[brycnguyen]

I was able to resolve this by using whatwg-fetch and importing it at the top of my app.

// index.ts
import { fetch as fetchPolyfill } from 'whatwg-fetch'
global.fetch = fetchPolyfill

iOS and Android no longer crash on release or debug mode.

[ryanjwessel]

The solution @brycnguyen mentioned is what we had to use to get this to work.

[TiKevin83]

Logging for discovery, I believe this also affects users of the main graphql client @apollo/client. I get error: ApolloError: false is not a function in a react native application; tried to implement the call outside apollo with plain fetch which threw the same error and realized fetch itself was broken.

Has anyone bisected to confirm what version this starts happening? There was ostensibly some work done in cross-fetch which okta-auth-js uses to fix this, but when forcing okta-auth-js onto the latest version in overrides and in turn using the latest version of cross-fetch we're still seeing this. https://github.com/lquixada/cross-fetch/pull/39

[TiKevin83]

It looks like something is causing the import of cross-fetch in okta-auth-js to pull the browser-ponyfill instead of react-native-ponyfill, you can see the setting of fetch to false here in the version intended for the browser, line 4 in dist/browser-ponyfill.js

https://www.npmjs.com/package/cross-fetch/v/3.1.5?activeTab=explore

[TiKevin83]

I removed cross-fetch in okta-auth-js and React Native's Fetch works fine in the build with the polyfill removed.

https://github.com/okta/okta-auth-js/compare/master...TiKevin83:okta-auth-js:remove-fetch-polyfill

I've created the above mentioned issue now since it's clearly a bug in the underlying okta-auth-js library.

[TiKevin83]

fixed in #360