Amplify-js: Federated facebook login in react native requires two login attempts to work on IOS

[erikgaas]

Describe the bug
I am working through the tutorial for federated login here: https://docs.amplify.aws/lib/auth/social/q/platform/js#deploying-to-amplify-console

I am using the "In-App Browser Setup (optional, but recommended)" section to federate login into facebook from cognito.

This works fine on android with no trouble. The problem is testing it on the simulator for IOS. Following the tutorial based on auth command actually doesn't work. Auth.federatedSignIn() is the command the docs say to use. (Again this works fine in Android) If I use federatedSignIn without arguments it leads to this error every time I try to sign in.

Sign in failure [ValidationException: 1 validation error detected: Value '{cognito-idp.us-west-2.amazonaws.com/us-west-2_rBVomGdCO=}' at 'logins' failed to satisfy constraint: Map value must satisfy constraint: [Member must have length less than or equal to 50000, Member must have length greater than or equal to 1]]

Now if I change this to Auth.federatedSignIn({provider: 'Facebook'}) then if I try signing in the first time, it will log the error above, but if I sign in again then everything works fine.

I'm pretty sure this is due to some weird mismatch in authentication state. It seems as though the first attempt to login initializes something important on the frontend that is able to send the correct request on the second auth call.

I have tried to hunt down the problem, presumably there is something I could to do inspect the auth state over time, but for now I've been looking at the requests through urlOpener. The only thing that is different is the newUrl returned by the InAppBrowser.openAuth call.

First call it is: appname:///?code=&state=#_=_
and second call is
appname://?code=&state=

So I guess the only difference is that #_=_ at the very end which makes zero sense to me. Given that the requests are the same to the backend and only the responses change it makes me think there is actually a backend state being mismanaged...???

To Reproduce
Steps to reproduce the behavior:

1. Try federated login with facebook using the recommended but changing federated login code to specify facebook as provider
2. Login once and observe error while being returned back to login screen
3. Try logging in again and have it succeed showing user information

Alternatively try not specifying provider and always see it fail

Expected behavior
I expect to be successfully authenticated such that Hub is able to listen for a successful authentication

Code Snippet
This is the crux of where the command is flaky. In federatedSignIn

  return (
    <View>
      <Text>User: {user ? JSON.stringify(user.attributes) : 'None'}</Text>
      {user ? (
        <Button title="Sign Out" onPress={() => Auth.signOut()} />
      ) : (
        <Button title="Federated Sign In" onPress={() => Auth.federatedSignIn({provider: 'Facebook'})} />
      )}
    </View>
  );
}```

**Screenshots**
![image](https://user-images.githubusercontent.com/2773725/103375100-82816500-4a96-11eb-8057-a6fbd024db11.png)
Clicking on this once goes back to login page without populating user. Clicking on it twice populates user.

<details>
  <summary><strong>Environment</strong></summary>

<!-- Please run the following command inside your project and copy/paste the output into the codeblock: -->

npx envinfo --system --binaries --browsers --npmPackages --npmGlobalPackages
```

System:
OS: macOS 10.15.5
CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
Memory: 28.13 MB / 32.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 14.15.1 - ~/.nvm/versions/node/v14.15.1/bin/node
Yarn: 1.17.0 - /usr/local/bin/yarn
npm: 6.14.8 - ~/.nvm/versions/node/v14.15.1/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Browsers:
Chrome: 87.0.4280.88
Safari: 13.1.1
npmPackages:
@babel/core: ^7.8.4 => 7.12.10
@babel/runtime: ^7.8.4 => 7.12.5
@react-native-community/eslint-config: ^1.1.0 => 1.1.0
@react-native-community/netinfo: ^5.9.9 => 5.9.9
amazon-cognito-identity-js: ^4.5.6 => 4.5.6
aws-amplify: ^3.3.13 => 3.3.13
aws-amplify-react-native: ^4.2.10 => 4.2.10
babel-jest: ^25.1.0 => 25.5.1
eslint: ^6.5.1 => 6.8.0
jest: ^25.1.0 => 25.5.4
metro-react-native-babel-preset: ^0.59.0 => 0.59.0
react: 16.13.1 => 16.13.1
react-native: 0.63.4 => 0.63.4
react-native-inappbrowser-reborn: ^3.5.1 => 3.5.1
react-native-maps: 0.27.1 => 0.27.1
react-native-navigation: ^7.7.0 => 7.7.0
react-test-renderer: 16.13.1 => 16.13.1
npmGlobalPackages:
@aws-amplify/cli: 4.36.2
npm: 6.14.8

Smartphone (please complete the following information):

• Device: iPhone 11 Simulator
• Version 14.3

[erikgaas]

After some more digging I have found that the problem appears to be with whether or not there are cookies present in the browser.

If the browser has already been signed into facebook then authentication proceeds as normal. If facebook is signed out then federatedSignIn successfully signs the browser into facebook but does not successfully authenticate, therefore requiring a second attempt.

I discovered this when trying using the in app browser in ephemeral mode. Ephemeral mode causes the above error every time.

[dipeshdulal]

I have also come across similar issue in iOS only (don't know if it is same as this one).
Looks like;
myapp:///?code=<code>&state=<state>#_=_
Removing #_=_ and making triple slashes double slashes // will authenticate. i.e.
myapp://?code=<code>&state=<state>

Don't know whats happening. :cry:

[dipeshdulal]

Found a hacky solution to solve the issue to convert given url into required form using InAppBrowser as suggested https://github.com/aws-amplify/amplify-js/issues/5228 .

Amplify.configure({
    ...config, oauth: {
        ...config.oauth,
        urlOpener: async function urlOpener(url, redirectUrl) {
            await InAppBrowser.isAvailable();
            const { type, url: newUrl } = await InAppBrowser.openAuth(url, redirectUrl, {
                showTitle: false,
                enableUrlBarHiding: true,
                enableDefaultShare: false,
                ephemeralWebSession: false,
            });

            const splitUrl = `myapp://?${newUrl.split("#_=_")[0].split("?")[1] || ''}`;
            if (type === 'success') {
                Linking.openURL(splitUrl);
            }
        }

    }
})