Amplify-js: RN 0.59 and Cognito federated identity OAuth flow failure

[mkrn]

Describe the bug
With newest version of react-native the OAuth flow with Cognito Federated Identity fails to sign in the user.

To Reproduce
Steps to reproduce the behavior:

1. In a component wrapped with withOAuth HOC use props.facebookSignIn flow.
2. The flow will get the code from FB but will fail to get the tokens

Expected behavior
Expected the flow to work properly

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• iOS
• RN 0.59 +
  
  
  
  • aws-amplify 1.1.26
  
  
  • aws-amplify-react-native 2.1.10
  
  

Smartphone (please complete the following information):

• iPhone 8plus
• iOS 12.2
• RN 0.59 +

Additional context
Add any other context about the problem here.

Sample code

const urlOpener = async (url, redirectUrl) => {
  const { type, url: newUrl } = await WebBrowser.openAuthSessionAsync(url, redirectUrl);

  if (type === 'success') {
    await WebBrowser.dismissBrowser();

    if (Platform.OS === 'ios') {
      return Linking.openURL(newUrl);
    }
  }
};

Amplify.configure({
  Auth: {
     oauth: {
      domain: Config.REACT_APP_COGNITO_DOMAIN,
      scope: ['public_profile', 'email'],
      redirectSignIn: `app://signIn`, 
      redirectSignOut: `app://signOut`,
      responseType: 'code',
      urlOpener,
    }
....

<Button onPress={this.props.facebookSignIn} >

You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = 'DEBUG'; in your app.

[mkrn]

This is due to use of URLSearchParams that has been stripped to non-implemented shim in RN 0.59 +

https://github.com/aws-amplify/amplify-js/blob/master/packages/auth/src/OAuth/OAuth.ts#L144
https://github.com/facebook/react-native/issues/23922

Workaround:

index.js

import { polyfillGlobal } from 'react-native/Libraries/Utilities/PolyfillFunctions';

polyfillGlobal('URLSearchParams', () => undefined);
delete global.URLSearchParams;

[manueliglesias]

Thank you for the work-around @mkrn ! 😄

This will be very helpful for other users

[schellack]

@mkrn thanks for posting that workaround. It looks like deleting the URLSearchParams from global causes other issues, even though it does allow auth to start working again.

After implementing your workaround, did you see errors like the one below? If so, how did you work around it?

Can't find variable: URLSearchParams
_initBody
    AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:27145:61
Response
    AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:27309:21
onload
    AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:27364:31
wrapped
    AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:152134:28
dispatchEvent
    AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:29175:31
setReadyState
    AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:28933:31
__didCompleteResponse
    AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:28755:29
emit
    AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:6664:42
__callFunction
    AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:3120:49
<unknown>
    AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:2877:31
__guard
    AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:3074:15
callFunctionReturnFlushedQueue
    AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:2876:21

[loganwedwards]

@mkrn @schellack I can confirm that updating the code with the polyfill and deleting the global results in the same Can't find variable: URLSearchParams. Is there a 3rd party we could use to polyfill with the same api that was previously used?

[ltankey]

If you monkey patch the _handleCodeFlow method to replace how body is compiled (e.g. just return body: body rather than the version that uses URLSearchParams it'll work fine without any polyfills