AWS Amplify + Google SignIn + Cognito 400 error

edbrix-school commented 1 year ago

Before opening, please confirm:

[X] I have searched for duplicate or closed issues and discussions.
[X] I have read the guide for submitting bug reports.
[X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

Authentication

Amplify Categories

No response

Environment information

``` # Put output below this line System: OS: macOS 12.6.1 CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz Memory: 1.27 GB / 16.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 18.16.0 - /usr/local/bin/node Yarn: 1.22.18 - /usr/local/bin/yarn npm: 9.5.1 - /usr/local/bin/npm Browsers: Chrome: 115.0.5790.170 Safari: 15.6.1 npmPackages: @aws-amplify/api-graphql: ^3.1.13 => 3.4.6 @aws-amplify/api-graphql/internals: undefined () @aws-amplify/auth: ^5.4.0 => 5.6.0 @aws-amplify/datastore: ^4.2.0 => 4.7.0 @aws-amplify/storage: ^4.5.8 => 4.5.17 (5.9.0) @aws-amplify/storage/internals: undefined () @aws-amplify/ui-react: ^4.6.0 => 4.6.0 @aws-amplify/ui-react-internal: undefined () @aws-amplify/ui-react-storage: ^1.1.0 => 1.1.0 @azure/msal-browser: ^2.37.0 => 2.37.0 @azure/msal-react: ^1.5.7 => 1.5.7 @emotion/react: ^11.10.4 => 11.10.8 @emotion/styled: ^11.10.4 => 11.10.8 @fullcalendar/daygrid: ^5.11.3 => 5.11.4 @fullcalendar/interaction: ^5.11.3 => 5.11.4 @fullcalendar/react: ^5.11.2 => 5.11.4 @fullcalendar/timegrid: ^5.11.3 => 5.11.4 @graphql-tools/schema: ^9.0.19 => 9.0.19 @headlessui/react: ^1.7.3 => 1.7.14 @heroicons/react: ^2.0.11 => 2.0.17 @mui/material: ^5.10.7 => 5.12.3 @nivo/bar: ^0.80.0 => 0.80.0 @nivo/core: ^0.80.0 => 0.80.0 @reduxjs/toolkit: ^1.9.5 => 1.9.5 @reduxjs/toolkit-query: 1.0.0 @reduxjs/toolkit-query-react: 1.0.0 @testing-library/jest-dom: ^5.16.5 => 5.16.5 @testing-library/react: ^13.4.0 => 13.4.0 @testing-library/user-event: ^13.5.0 => 13.5.0 @types/quill: ^2.0.10 => 2.0.10 alertifyjs: ^1.13.1 => 1.13.1 amazon-cognito-identity-js: ^5.2.14 => 5.2.14 (6.3.1) amazon-cognito-identity-js/internals: undefined () aos: ^2.3.4 => 2.3.4 autoprefixer: ^10.4.12 => 10.4.14 aws-amplify: ^5.3.6 => 5.3.6 aws-jwt-verify: ^3.1.0 => 3.4.0 aws-sdk: ^2.1370.0 => 2.1370.0 axios: ^0.27.2 => 0.27.2 (0.26.0, 0.21.4) babel-loader: ^8.2.5 => 8.3.0 chart.js: ^4.3.3 => 4.3.3 chart.js-auto: undefined () chart.js-helpers: undefined () echarts: ^5.4.2 => 5.4.2 echarts-for-react: ^3.0.2 => 3.0.2 echarts-gl: ^2.0.9 => 2.0.9 evergreen-ui: ^6.12.0 => 6.13.3 evergreen-ui-codemods: 5.0.0 formik: ^2.4.2 => 2.4.2 head: ^1.0.0 => 1.0.0 html-to-image: ^1.11.11 => 1.11.11 install: ^0.13.0 => 0.13.0 jspdf: ^2.5.1 => 2.5.1 jspdf-autotable: ^3.5.25 => 3.5.28 jszip: ^3.10.1 => 3.10.1 moment: ^2.29.4 => 2.29.4 nextjs-google-fonts: ^3.4.0 => 3.4.0 no-internet: ^1.6.1 => 1.6.1 postcss: ^8.4.23 => 8.4.23 (7.0.39) primeicons: ^6.0.1 => 6.0.1 primereact: ^9.3.1 => 9.3.1 quill: ^1.3.7 => 1.3.7 react: ^18.2.0 => 18.2.0 (16.14.0, 17.0.2) react-country-region-selector: ^3.6.1 => 3.6.1 react-data-table-component: ^7.5.3 => 7.5.3 react-datepicker: ^4.8.0 => 4.11.0 react-dom: ^18.2.0 => 18.2.0 (17.0.2) react-easyfullscreen: ^1.1.2 => 1.1.2 react-excel-renderer: ^1.1.0 => 1.1.0 react-google-autocomplete: ^2.7.0 => 2.7.3 react-loading-spin: ^2.1.9 => 2.1.9 react-modal: ^3.16.1 => 3.16.1 react-paginate: ^8.1.3 => 8.2.0 react-pdf: ^7.1.2 => 7.1.2 react-phone-input-2: ^2.15.1 => 2.15.1 react-redux: ^8.0.5 => 8.0.5 react-router: ^6.11.0 => 6.11.0 react-router-dom: ^6.11.0 => 6.11.0 react-scripts: 5.0.1 => 5.0.1 react-select: ^5.4.0 => 5.7.3 react-table: ^7.8.0 => 7.8.0 react-tabs: ^6.0.2 => 6.0.2 react-to-print: ^2.14.13 => 2.14.13 react-toastify: ^9.1.2 => 9.1.2 reactjs-localstorage: ^1.0.1 => 1.0.1 styled-components: ^5.3.6 => 5.3.10 styled-components/macro: undefined () styled-components/native: undefined () styled-components/primitives: undefined () tailwindcss: ^3.3.2 => 3.3.2 text-to-image: ^5.2.0 => 5.2.0 web-vitals: ^2.1.4 => 2.1.4 npmGlobalPackages: @aws-amplify/cli: 10.7.1 appcelerator: 4.2.15 bower: 1.8.2 corepack: 0.17.0 electron-screen-recorder: 0.0.3 expo-cli: 3.13.1 express-generator: 4.16.1 ffmpeg: 0.0.4 gdc-catalog-export: 3.0.3 n: 9.1.0 node-lambda: 1.2.0 nodemon: 2.0.16 npm: 9.5.1 react-native-tab-view: 2.13.0 serve: 14.0.1 yarn: 1.22.18 ```

Describe the bug

{"__type":"ValidationException","message":"1 validation error detected: Value '{cognito-idp.ap-south-1.amazonaws.com/ap-south-XXXXX}' 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]"}

Expected behavior

Google Sign In need to work

Reproduction steps

NPM Install

Code Snippet

// Put your code below this line.

Log output

``` // Put your logs below this line ```

aws-exports.js

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

const awsmobile = {
    "aws_project_region": "ap-south-1",
    "aws_appsync_graphqlEndpoint": "https://XXXX.amazonaws.com/graphql",
    "aws_appsync_region": "ap-south-1",
    "aws_appsync_authenticationType": "API_KEY",
    "aws_appsync_apiKey": "XXXX",
    "aws_cognito_identity_pool_id": "ap-south-XXXX",
    "aws_cognito_region": "ap-south-1",
    "aws_user_pools_id": "ap-XXXX",
    "aws_user_pools_web_client_id": "XXXXX",
    "oauth": {
        "domain": "XXXX.auth.ap-south-1.amazoncognito.com",
        "scope": [
            "phone",
            "email",
            "openid",
            "profile",
            "aws.cognito.signin.user.admin"
        ],
        "redirectSignIn": "http://localhost:3000/,https://XXX.amplifyapp.com/",
        "redirectSignOut": "http://localhost:3000/,https://XXX.amplifyapp.com/",
        "responseType": "code"
    },
    "federationTarget": "COGNITO_USER_POOLS",
    "aws_cognito_username_attributes": [
        "EMAIL"
    ],
    "aws_cognito_social_providers": [
        "GOOGLE"
    ],
    "aws_cognito_signup_attributes": [
        "EMAIL"
    ],
    "aws_cognito_mfa_configuration": "OFF",
    "aws_cognito_mfa_types": [
        "SMS"
    ],
    "aws_cognito_password_protection_settings": {
        "passwordPolicyMinLength": 8,
        "passwordPolicyCharacters": []
    },
    "aws_cognito_verification_mechanisms": [
        "EMAIL"
    ],
    "aws_dynamodb_all_tables_region": "ap-south-1",
    "aws_dynamodb_table_schemas": [
        {
            "tableName": "dynamobgusdapps-main",
            "region": "ap-south-1"
        }
    ],
    "aws_user_files_s3_bucket": "XXXX",
    "aws_user_files_s3_bucket_region": "ap-south-1"
};

export default awsmobile;

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

nadetastic commented 1 year ago

Based on error 'logins' failed to satisfy constraint , this maybe related to this issue/comment

cwomack commented 1 year ago

Hello, @edbrix-school. To the point of @nadetastic's comment above, are you calling Amplify.configure() more than once or updating the redirect URLS's for sign in/sign out?

cwomack commented 1 year ago

@edbrix-school, a few more questions to help understand what's happening better and unblock you.

Could you possibly share a screenshot of your attribute mappings for Google within the Cognito console?
Are you calling Amplify.configure() within a useEffect hook by chance?
Is this only experienced when in dev mode and not happening in prod by chance?

Any code that you're willing to share that's related to the Sign-in flow or Amplify.configure() would be helpful! Thank you.

jerocosio commented 1 year ago

Hello, I started receiving similar 400 errors on my app when using Google Sign In after updating to aws-amplify@5.3.7, I did some testing and this errors are not happening on version 5.3.6.

I'm using the Authenticator from @aws-amplify/ui-react, when I click on the button to log-in with Google it looks like it's trying to sign-in, then I see the form again (as if nothing has happened) and get the 400 error on the console. Sometimes it logs in after seeing the form again and clicking again on the button, and others I get the error but it does log-in.

When adding Hub.listen('auth'... here's the error I'm seeing on data.payload.event === 'signIn_failure':

{
    "channel": "auth",
    "payload": {
        "event": "signIn_failure",
        "data": {},
        "message": "The OAuth response flow failed"
    },
    "source": "Auth",
    "patternInfo": []
}

When looking at the console this are the errors I see:

POST https://***.auth.us-west-1.amazoncognito.com/oauth2/token 400

1 - Here's my attribute mapping

2 - As I'm using Next.js with the app directory I'm calling Amplify.configure() in a server and a client component on a layout for it to be accessible across my whole app:

//app/layout.js
import AmplifyProviderServer from '@/hooks/AmplifyProviderServer';
import AmplifyProviderClient from '../hooks/AmplifyProviderClient';

export default function RootLayout({ children }) {
...
        <AmplifyProviderServer>
          <AmplifyProviderClient>
            {children}
          </AmplifyProviderClient>
        </AmplifyProviderServer>
...
}

//hooks/AmplifyProviderServer.js
import { Amplify, Hub } from 'aws-amplify';
import awsmobile from '@/src/aws-exports';

let isLocalhost;

if (typeof window !== 'undefined') {
  isLocalhost = Boolean(
    window.location.hostname === 'localhost' ||
      // [::1] is the IPv6 localhost address.
      window.location.hostname === '[::1]' ||
      // 127.0.0.1/8 is considered localhost for IPv4.
      window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
  );
}

const [localRedirectSignIn, productionRedirectSignIn] = awsmobile.oauth.redirectSignIn.split(',');

const [localRedirectSignOut, productionRedirectSignOut] =
  awsmobile.oauth.redirectSignOut.split(',');

Amplify.configure({
  ...awsmobile,
  oauth: {
    ...awsmobile.oauth,
    redirectSignIn: isLocalhost ? localRedirectSignIn : productionRedirectSignIn,
    redirectSignOut: isLocalhost ? localRedirectSignOut : productionRedirectSignOut
  },
  ssr: true
});

Hub.listen('auth', (data) => {
  console.log('Whats going on here', data)
});

export default function AmplifyProviderServer({ children }) {
  return <>{children}</>;
}

//hooks/AmplifyProviderClient.js
'use client';
import { Amplify, Hub } from 'aws-amplify';
import awsmobile from '@/src/aws-exports';
import { Authenticator } from '@aws-amplify/ui-react';

let isLocalhost;

if (typeof window !== 'undefined') {
  isLocalhost = Boolean(
    window.location.hostname === 'localhost' ||
      // [::1] is the IPv6 localhost address.
      window.location.hostname === '[::1]' ||
      // 127.0.0.1/8 is considered localhost for IPv4.
      window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
  );
}

const [localRedirectSignIn, productionRedirectSignIn] = awsmobile.oauth.redirectSignIn.split(',');
const [localRedirectSignOut, productionRedirectSignOut] =
  awsmobile.oauth.redirectSignOut.split(',');
Amplify.configure({
  ...awsmobile,
  oauth: {
    ...awsmobile.oauth,
    redirectSignIn: isLocalhost ? localRedirectSignIn : productionRedirectSignIn,
    redirectSignOut: isLocalhost ? localRedirectSignOut : productionRedirectSignOut
  },
  ssr: true
});

Hub.listen('auth', (data) => {
  console.log('Whats going on here', data)
  if (data.payload.event === 'signIn_failure') {
    console.log('Algo anda mal', data);
  }
});

export default function AmplifyProviderClient({ children }) {
  return <Authenticator.Provider>{children}</Authenticator.Provider>;
}

3 - I made the tests and I see the error in dev as well as production.

4 - Also not sure if relevant but I'm doing some account linking with preSignup and postAuth functions following this thread.

an-nguyen-codeleap commented 1 year ago

I encountered a very similar issue when upgrading the package to the latest version 5.3.7 using npm update aws-amplify. In the DevTools Network tab, I noticed that 2 POST requests were made to **.amazoncognito.com/oauth2/token

cwomack commented 1 year ago

@an-nguyen-codeleap, this sounds related to what's described in issue #11808. Can you confirm that rolling back to v5.3.6 of Amplify resolves the errors you experience?

@edbrix-school as you stated in your comment above, this only seems to be happening in the most recent version. We are investigating the root cause of this and will update this issue along with #11808 soon with any findings or recommendations.

cwomack commented 1 year ago

@an-nguyen-codeleap and @edbrix-school, the PR mentioned above was included in yesterday's release of v5.3.8 of Amplify. Can you see if upgrading to the most recent version resolves the issue please? Thanks!

jerocosio commented 1 year ago

@cwomack The lates update solved the issue for me, and it's now working great again, thanks.

cwomack commented 1 year ago

@jerocosio, thank you for the confirmation!

@edbrix-school or @an-nguyen-codeleap, can you verify if upgrading to v5.3.8 resolves the errors for you as well?

cwomack commented 1 year ago

@edbrix-school and @an-nguyen-codeleap, we've actually had 2 more releases since my last comment and are now on v5.3.10 for the latest version of Amplify. I believe the issues described in this issue should be resolved with the latest version, but want to see if we can get your confirmation before closing this issue. Thanks!

sky4git commented 1 year ago

@cwomack I have the same setup and followed instruction given in this comment https://github.com/aws-amplify/amplify-js/issues/11786#issuecomment-1676031695 with amplify version v5.3.6 and 5.3.10 but I cannot resolve the error described in this issue.

an-nguyen-codeleap commented 1 year ago

@cwomack the latest version solved my issue. Thank you and the team for great work!

cwomack commented 1 year ago

@an-nguyen-codeleap, appreciate the confirmation and happy to hear it!

cwomack commented 1 year ago

@sky4git, interesting that the same setup wouldn't fix it for you but it did for @jerocosio. Can you share what you have in your package.json please? Also, if you've upgraded to v5.3.10 already... can you try deleting your node_modules as well as your package-lock.json then reinstalling dependencies with npm install results in the same errors?

cwomack commented 1 year ago

Closing this issue as it appears to be resolved with multiple confirmations. If anyone is still experiencing this, please review the comments above and upgrade to v5.3.10 of Amplify or later.

Thank you!

aws-amplify / amplify-js