amplify-js: 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

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 8
Comments: 16 (5 by maintainers)

Most upvoted comments

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.

mllrmat on Oct 8, 2020

@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.

hutchgrant on Jan 7, 2021

@hutchgrant We need to look into the <AmplifyAuthenticator federated={...}> issue described above in more detail.

However, if Auth.federatedSignIn is working as expected (with Google setup with Cognito User Pools), then you can customize the federated-slots with your own buttons that call Auth.federatedSignIn directly:

https://codesandbox.io/s/amplify-ui-federated-buttons-48x56?file=/src/App.js:528-715

ericclemmons on Jan 6, 2021

any news? having the same issue

alissaVrk on Nov 25, 2020

I’m also having the same issue. It seems to work when using the UI Hosted (configuring the social sign in through Cognito) but not through AmplifyAuthenticator. The returned payload when signing in through Facebook for example only returns some fields meaning that it’s not creating the External Provider Cognito User in the Cognito user pool.

Payload returned from regular sign in using Amplify Authenticator:

CognitoUser {username: "xxxxxxx", pool: CognitoUserPool, Session: null, client: Client, signInUserSession: CognitoUserSession, …}Session: nullattributes: {sub: "xxxxxxx", email_verified: true, phone_number_verified: false, phone_number: "+xxxxxxx", email: "xxxxxx@xxxxx"}email: "xxxxxxx@xxxxx"email_verified: truephone_number: "+xxxxxx"phone_number_verified: falsesub: "xxxxxxxx"__proto__: ObjectauthenticationFlowType: "USER_SRP_AUTH"client: Client {endpoint: "xxxxxxxx", fetchOptions: {…}}keyPrefix: "CognitoIdentityServiceProviderxxxxxx"pool: CognitoUserPool {userPoolId: "xxxxxxx", clientId: "xxxxxxx", client: Client, advancedSecurityDataCollectionFlag: true, storage: Storage}preferredMFA: "NOMFA"signInUserSession: CognitoUserSession {idToken: CognitoIdToken, refreshToken: CognitoRefreshToken, accessToken: CognitoAccessToken, clockDrift: 0}storage: Storage {amplify-auth-source: "{"provider":"facebook"}", amplify-signin-with-hostedUI: "false", CognitoIdentityServiceProvider.xxxxxxxx.accessToken: "xxxxxxx", CognitoIdentityServiceProvider.xxxxxxx.clockDrift: "0", CognitoIdentityServiceProvider.xxxxxxxxc.userData: "{"UserAttributes":[{"Name":"sub","Value":"xxxxx…Username":"xxxxxxxx"}", …}userDataKey: "CognitoIdentityServiceProvider.xxxxxxxc.userData"username: "xxxxxxx"__proto__: Object

Payload returned from Facebook sign in using Amplify Authenticator:

{id: "xxxxxxx", name: "xxxxxx", email: "xxxxxxxxx", token: "xxxxxxx"}

Causing the error:

Uncaught (in promise) TypeError: user.getSession is not a function at new Promise (<anonymous>) at AuthClass.userSession at new Promise (<anonymous>) at AuthClass.userAttributes at AuthClass.verifiedContact at step at Object.next at new Promise (<anonymous>) at push../node_modules/@aws-amplify/ui-components/dist/esm-es5/auth-helpers-56e74f02.js.__awaiter at checkContact at Object.handleExternalAuthEvent [as callback] at Array.forEach (<anonymous>) at HubClass._toListeners at HubClass.dispatch at dispatchAuthEvent at AuthClass.<anonymous> at step at Object.next at fulfilled

I’m using a similar implementation to @mllrmat

nicholaspuglia on Oct 15, 2020