Federated SignIn, configuration without AWS

[Mskalba]

Describe the bug I am trying to connect React app to existing Cognito pool with usage of aws-amplify. The configuration works fine in terms of new Cognito users. But I am unable to have federated SignIn works with both Facebook and Google.

To Reproduce

1. Configure AWS-amplify manually:

Amplify.configure({
  Auth: {
    identityPoolId: IDENTITY_POOL_ID,
    region: COGNITO_REGION,
    userPoolId: COGNITO_POOL_ID,
    userPoolWebClientId: COGNITO_USER_POOL_WEB_CLIENT_ID,
    // oauth: {. <--- Multiple different attempts.
    //   domain: COGNITO_DOMAIN,
    //   scope: ['email'],
    //   redirectSignIn: 'http://localhost:3000/',
    //   redirectSignOut: 'http://localhost:3000/',
    //   responseType: 'code',
    //   options: {
    //     AdvancedSecurityDataCollectionFlag: false
    //   }
    // }
  },

  API: {
    endpoints: [
      ...
    ],
  },
});

2. Both registering and Login works fine:

await Auth.signUp({...
.
.
.
await Auth.signIn(values.username, values.password);

3. Try to SignIn with federated SignIn

Auth.federatedSignIn({ provider: "Google" });

4. See error. Depending on different configuration different errors occurred.

Expected behavior I got redirected to Google.

5. Google federated SignIn is configured on Cognito and all App Ids are added.

[sammartinez]

Hello @Mskalba,

Can you provide your package.json along with your environment settings?

Please use the follow command:

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

Thanks ahead of time!

[Mskalba]

@hello @sammartinez

 System:
    OS: macOS Mojave 10.14.5
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 1.01 GB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
    Yarn: 1.22.5 - ~/.yvm/shim/yarn
    npm: 6.11.2 - ~/.nvm/versions/node/v10.16.3/bin/npm
  Browsers:
    Brave Browser: 86.1.15.75
    Chrome: 87.0.4280.67
    Safari: 13.1.1
  npmPackages:
    @date-io/date-fns: 1.x => 1.3.13 
    @material-ui/core: ^4.11.0 => 4.11.0 
    @material-ui/icons: ^4.9.1 => 4.9.1 
    @material-ui/lab: ^4.0.0-alpha.56 => 4.0.0-alpha.56 
    @material-ui/pickers: ^3.2.10 => 3.2.10 
    @testing-library/jest-dom: ^4.2.4 => 4.2.4 
    @testing-library/react: ^9.5.0 => 9.5.0 
    @testing-library/user-event: ^7.2.1 => 7.2.1 
    @types/array-move: ^2.0.0 => 2.0.0 
    @types/axios: ^0.14.0 => 0.14.0 
    @types/google-map-react: ^2.1.0 => 2.1.0 
    @types/hookrouter: ^2.2.3 => 2.2.3 
    @types/immutability-helper: ^2.6.3 => 2.6.3 
    @types/jest: ^24.9.1 => 24.9.1 
    @types/lodash-es: ^4.17.3 => 4.17.3 
    @types/node: ^12.12.54 => 12.12.54 
    @types/react: ^16.9.49 => 16.9.49 
    @types/react-beautiful-dnd: ^13.0.0 => 13.0.0 
    @types/react-dnd: ^3.0.2 => 3.0.2 
    @types/react-dnd-html5-backend: ^3.0.2 => 3.0.2 
    @types/react-dnd-touch-backend: ^0.5.0 => 0.5.0 
    @types/react-dom: ^16.9.8 => 16.9.8 
    @types/react-dropzone: ^5.1.0 => 5.1.0 
    @types/react-easy-crop: ^2.0.0 => 2.0.0 
    @types/react-places-autocomplete: ^7.2.6 => 7.2.6 
    @types/react-router-dom: ^5.1.6 => 5.1.6 
    @types/react-sortable-hoc: ^0.7.1 => 0.7.1 
    array-move: ^3.0.1 => 3.0.1 
    autosuggest-highlight: ^3.1.1 => 3.1.1 
    aws-amplify: ^3.2.0 => 3.2.0 
    axios: ^0.21.0 => 0.21.0 
    date-fns: ^2.16.1 => 2.16.1 
    google-map-react: ^2.1.9 => 2.1.9 
    i18next: ^19.7.0 => 19.7.0 
    i18next-browser-languagedetector: ^6.0.1 => 6.0.1 
    i18next-http-backend: ^1.0.18 => 1.0.18 
    immutability-helper: ^3.1.1 => 3.1.1 
    lodash-es: ^4.17.15 => 4.17.15 
    prettier: ^2.1.1 => 2.1.1 
    pullstate: ^1.16.2 => 1.16.2 
    qs: ^6.9.4 => 6.9.4 
    react: ^16.13.1 => 16.13.1 
    react-beautiful-dnd: ^13.0.0 => 13.0.0 
    react-dnd: ^11.1.3 => 11.1.3 
    react-dnd-html5-backend: ^11.1.3 => 11.1.3 
    react-dnd-preview: ^6.0.2 => 6.0.2 
    react-dnd-touch-backend: ^11.1.3 => 11.1.3 
    react-dom: ^16.13.1 => 16.13.1 
    react-dropzone: ^11.2.4 => 11.2.4 
    react-easy-crop: ^3.3.0 => 3.3.0 
    react-google-maps: ^9.4.5 => 9.4.5 
    react-hook-form: ^6.7.0 => 6.7.0 
    react-i18next: ^11.7.2 => 11.7.2 
    react-places-autocomplete: ^7.3.0 => 7.3.0 
    react-router-dom: ^5.2.0 => 5.2.0 
    react-scripts: 3.4.3 => 3.4.3 
    react-sortable-hoc: ^1.11.0 => 1.11.0 
    react-sticky-box: ^0.9.3 => 0.9.3 
    swr: ^0.3.2 => 0.3.2 
    tslint: ^6.1.3 => 6.1.3 
    tslint-react: ^5.0.0 => 5.0.0 
    tslint-react-hooks: ^2.2.2 => 2.2.2 
    typescript: ^3.7.5 => 3.9.7 
    uuid: ^8.3.1 => 8.3.1 
  npmGlobalPackages:
    @aws-amplify/cli: 4.30.0
    npm: 6.11.2
    snyk: 1.406.0

[harrysolovay]

Hi @Mskalba –– can you please describe how you configured the service-side––that is, how you configured an identity pool with Google and Facebook OAuth2 credentials? Did you do so with the Amplify CLI, the Cognito Console, ...? An error would be expected if you'd only configured the User Pool. More context would be greatly appreciated! Otherwise, it'll be difficult to diagnose.

[Mskalba]

@harrysolovay @sammartinez More detail information about server side configuration will be provided by our BE and Devops. Hope it will happen today. Looking forward to hearing from you soon.

[harrysolovay]

Hi @Mskalba I wanted to follow up and ask the status of this issue? More than happy to help. Just in need of more info.

[stale[bot]]

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.

[github-actions[bot]]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.