AmplifyAuthenticator with federated signin error

Describe the bug When the AmplifyAuthenticator Component is used with federated logins, an exception is thrown after successful login with google. Appearently AmplifyAuthenticator expects a CognitoUser, which does not exist when using federated Login.

Expected behavior No Exception, but return of an authenticated Credentials/User

Stacktrace

Auth.ts:1339 Uncaught (in promise) TypeError: user.getSession is not a function
    at Auth.ts:1339
    at new Promise (<anonymous>)
    at AuthClass.userSession (Auth.ts:1337)
    at Auth.ts:1069
    at new Promise (<anonymous>)
    at AuthClass.userAttributes (Auth.ts:1068)
    at AuthClass.verifiedContact (Auth.ts:1083)
    at auth-helpers-2fada98e.js:55
    at step (auth-helpers-2fada98e.js:32)
    at Object.next (auth-helpers-2fada98e.js:13)
    at auth-helpers-2fada98e.js:7
    at new Promise (<anonymous>)
    at push../node_modules/@aws-amplify/ui-components/dist/esm-es5/auth-helpers-2fada98e.js.__awaiter (auth-helpers-2fada98e.js:3)
    at checkContact (auth-helpers-2fada98e.js:44)
    at Object.handleExternalAuthEvent [as callback] (amplify-authenticator.entry.js:62)
    at Hub.ts:176
    at Array.forEach (<anonymous>)
    at HubClass._toListeners (Hub.ts:173)
    at HubClass.dispatch (Hub.ts:120)
    at dispatchAuthEvent (Auth.ts:84)
    at AuthClass.<anonymous> (Auth.ts:1864)
    at step (Auth.ts:1)
    at Object.next (Auth.ts:1)
    at fulfilled (Auth.ts:1)

What is Configured? my amplify configuration looks like this:

Amplify.configure({
Auth: {
 identityPoolId: Config.identityPoolId,
 region: Config.region,
 userPoolId: Config.userPoolId,
 userPoolWebClientId: Config.userPoolWebClientId,
 mandatorySignIn: false,
},
AWSS3: {
 bucket: Config.s3UploadBucket,
 region: Config.region
}
});

Environment

  System:
    OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i5-8350U CPU @ 1.70GHz
    Memory: 1.32 GB / 39.07 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 14.1.0 - ~/.nvm/versions/node/v14.1.0/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v14.1.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Firefox: 81.0
  npmPackages:
    @apollo/client: ^3.2.2 => 3.2.2 
    @aws-amplify/auth: ^3.2.9 => 3.4.6 
    @aws-amplify/core: ^3.2.9 => 3.6.0 
    @aws-amplify/storage: ^3.2.12 => 3.3.6 
    @aws-amplify/ui-react: ^0.2.22 => 0.2.23 
    @commitlint/cli: ^9.1.1 => 9.1.2 
    @commitlint/config-conventional: ^9.1.1 => 9.1.2 
    @graphql-codegen/cli: ^1.15.0 => 1.17.10 
    @graphql-codegen/introspection: ^1.15.0 => 1.18.0 
    @graphql-codegen/typescript: ^1.15.0 => 1.17.10 
    @graphql-codegen/typescript-document-nodes: ^1.15.3 => 1.17.8 
    @graphql-codegen/typescript-operations: ^1.15.0 => 1.17.8 
    @graphql-codegen/typescript-react-apollo: ^2.0.5 => 2.0.7 
    @sentry/react: ^5.22.1 => 5.25.0 
    @stripe/react-stripe-js: ^1.1.2 => 1.1.2 
    @stripe/stripe-js: ^1.7.0 => 1.9.0 
    @testing-library/jest-dom: ^5.11.2 => 5.11.4 
    @testing-library/react: ^11.0.2 => 11.0.4 
    @testing-library/user-event: ^12.0.17 => 12.1.7 
    @types/googlemaps: ^3.39.13 => 3.39.14 
    @types/jest: ^26.0.7 => 26.0.14 
    @types/node: ^14.0.1 => 14.11.5 
    @types/react: ^16.9.25 => 16.9.51 
    @types/react-dom: ^16.9.5 => 16.9.8 
    @types/react-helmet: ^6.0.0 => 6.1.0 
    @types/react-phone-number-input: ^3.0.5 => 3.0.5 
    @types/react-qr-reader: ^2.1.3 => 2.1.3 
    @types/react-router-dom: ^5.1.5 => 5.1.6 
    @types/recoil: ^0.0.1 => 0.0.1 
    @typescript-eslint/eslint-plugin: ^4.0.1 => 4.4.0 
    @typescript-eslint/parser: ^4.0.1 => 4.4.0 
    autoprefixer: ^9.7.6 => 9.8.6 
    aws4fetch: ^1.0.12 => 1.0.12 
    date-fns: ^2.12.0 => 2.16.1 
    eslint-config-prettier: ^6.11.0 => 6.12.0 
    eslint-plugin-prettier: ^3.1.3 => 3.1.4 
    eslint-plugin-react: ^7.20.0 => 7.21.3 
    graphql: ^15.3.0 => 15.3.0 
    graphql-tag: ^2.10.3 => 2.11.0 
    husky: ^4.2.5 => 4.3.0 
    i18next: ^19.5.2 => 19.8.2 
    i18next-browser-languagedetector: ^6.0.0 => 6.0.1 
    i18next-http-backend: ^1.0.16 => 1.0.21 
    lint-staged: ^10.2.7 => 10.4.0 
    postcss-cli: ^7.1.1 => 7.1.2 
    prettier: ^2.0.5 => 2.1.2 
    query-string: ^6.13.1 => 6.13.5 
    react: ^16.13.1 => 16.13.1 
    react-dom: ^16.13.1 => 16.13.1 
    react-ga: ^3.1.2 => 3.1.2 
    react-helmet: ^6.1.0 => 6.1.0 
    react-i18next: ^11.7.0 => 11.7.3 
    react-phone-number-input: ^3.0.25 => 3.1.0 
    react-qr-reader: ^2.2.1 => 2.2.1 
    react-router-dom: ^5.2.0 => 5.2.0 
    react-schemaorg: ^1.1.0 => 1.2.0 
    react-scripts: 3.4.3 => 3.4.3 
    recoil: ^0.0.13 => 0.0.13 
    schema-dts: ^0.7.0 => 0.7.1 
    short-uuid: ^4.1.0 => 4.1.0 
    source-map-explorer: ^2.4.2 => 2.5.0 
    tailwindcss: ^1.8.5 => 1.8.10 
    tweetnacl: ^1.0.3 => 1.0.3 
    typescript: ^4.0.2 => 4.0.3 
  npmGlobalPackages:
    expo-cli: 3.20.1
    npm: 6.14.4

[mllrmat]

Looking through your code, it appears to me that the problem is in the authenticator component. This component listens to the Auth State and then calls handleExternalAuthEvent (https://github.com/aws-amplify/amplify-js/blob/53be43d7a0049e04a47e7fece5dcd726c7a414fe/packages/amplify-ui-components/src/components/amplify-authenticator/amplify-authenticator.tsx#L43). This method then calls checkContact in auth-helpers (https://github.com/aws-amplify/amplify-js/blob/53be43d7a0049e04a47e7fece5dcd726c7a414fe/packages/amplify-ui-components/src/common/auth-helpers.ts#L9) Here its suddenly assumed that the payload is indeed a CognitoUser, which is not the case for federatedSignIn.

[hutchgrant]

@ericclemmons Thank you that’s much better.

We did however notice sporadic login failures, with the error invalid_request, on login, in development. Which has been documented really well in #7364 The only solution being to run a build in production and errors disappear.

This custom federated-buttons slot solution is the approach we’re taking until <AmpliyAuthenticator /> component is fixed.