Amplify-js: Calling Token Endpoint Twice

[ghariosk]

Describe the bug
Using react-native I am wrapping my App component with with0Auth exactly like the example provided in the documentation. I am getting an error of invalid request. Upon inspecting the debug log it seems the token endpoint is being called twice, the first time with the code verifier and the second time without and the second time is is returning invalid request. I am using expo. I know I could use Implicit grant and response_type = token but aws strongly recommends against it on mobile.
Note:
I am able to get the response with postman using the first token endpoint call.

To Reproduce
Steps to reproduce the behavior:

• configure aws amplify with social provider.
• copy my code
• Sign in with facebook using button
• inspect the the debug log

Expected behavior
Token Id and refresh token being returned

Screenshots

Smartphone (please complete the following information):

• Device: iPhone 6
• OS: iOS 12.3.1
• Browser: Safari
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Sample code

import { StyleSheet, Text, ScrollView, SafeAreaView, StatusBar, Button, Image } from 'react-native';

import { withOAuth } from "aws-amplify-react-native";
import { default as awsConfig } from "./aws-exports";
import { CognitoUserPool, CognitoUserAttribute, CognitoUser } from 'amazon-cognito-identity-js';

Amplify.configure(awsConfig);




class App extends React.Component {
  constructor(props) {
    super(props);

    // let the Hub module listen on Auth events
    // Hub.listen('auth', (data) => {
    //     switch (data.payload.event) {
    //         case 'signIn':
    //             this.setState({authState: 'signedIn'});
    //             this.setState({authData: data.payload.data});
    //             console.log('test')
    //             console.log(JSON.stringify(this.state.authData))
    //             break;
    //         case 'signIn_failure':
    //             this.setState({authState: 'signIn'});
    //             this.setState({authData: null});
    //             this.setState({authError: data.payload.data});
    //             console.log('test2')
    //             break;
    //         default:
    //             break;
    //     }
    // });
    this.state = {
      authState: 'loading',
      authData: null,
      authError: null
    }
  }






  render() {
    const {
      oAuthUser: user,
      oAuthError: error,
      hostedUISignIn,
      facebookSignIn,
      googleSignIn,
      amazonSignIn,
      customProviderSignIn,
      signOut,
    } = this.props;



    return (
      <SafeAreaView style={styles.safeArea}>

      <Image style={{width:50, height:50}} source={{uri: "https://platform-lookaside.fbsbx.com/platform/profilepic/?asid=10162093254815441&height=250&width=250&ext=1565516276&hash=AeTbiMwfzv6SHnkK"}}/>
     {user && <Button title="Sign Out" onPress={signOut} icon='logout' />}
        <ScrollView contentContainerStyle={styles.scrollViewContainer}>
        <Text>{JSON.stringify({ user, error, }, null, 2)}</Text>

          {!user && <React.Fragment>
            {/* Go to the Cognito Hosted UI */}
            <Button title="Cognito" onPress={hostedUISignIn} />


            {/* Go directly to a configured identity provider */}
            <Button title="Facebook" onPress={facebookSignIn} />
            <Button title="Google" onPress={googleSignIn}  />
            <Button title="Amazon" onPress={amazonSignIn} />


            {/* e.g. for OIDC providers */}
            <Button title="Yahoo" onPress={() => customProviderSignIn('Yahoo')} />
          </React.Fragment>}
        </ScrollView>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  safeArea: {
    flexGrow: 1,
    paddingTop: StatusBar.currentHeight,
    backgroundColor: '#FFFFFF',
  },
  scrollViewContainer: {
    flexGrow: 1,
    alignItems: 'center',
    justifyContent: 'center',
  }
});

window.LOG_LEVEL = 'DEBUG'

export default withOAuth(App);

my aws-config :

// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "eu-central-1",
    "aws_cognito_identity_pool_id": "xxx-aadc-2deefc909628",
    "aws_cognito_region": "eu-central-1",
    "aws_user_pools_id": "eu-central-1_xxxx",
    "aws_user_pools_web_client_id": "xxxx",
    "oauth": {
        "domain": "userpool2-dev.auth.eu-central-1.amazoncognito.com",
        "scope": [
            "phone",
            "email",
            "openid",
            "profile",
            "aws.cognito.signin.user.admin"
        ],
        "redirectSignIn": "exp://48-6yaxxxx.userpool.exp.direct:80",
        "redirectSignOut": "exp://48-6yaxxxx.userpool.exp.direct:80",
        "responseType": "code"
    },
    "federationTarget": "COGNITO_USER_POOLS"
};


export default awsmobile;

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

[haverchuck]

@ghariosk - We merged a PR last week into our unstable branch which I think might address this issue. Could you try it with npm i aws-amplify@unstable?

[ghariosk]

Just tried it and works perfectly now! Thanks 👍

[martrik]

I'm on version 2.1.0 and still experiencing this issue. I'm using the withOAuth HOC from aws-amplify-react in web React though.

[PeterLAxakon]

I'm also having this problem endpoint seems to be called twice. Following examples from here. https://docs.amplify.aws/ui/auth/authenticator/q/framework/react#hiding-form-fields