amplify-js: V6 Federated sign in with Google returns OAuthSignInException

Before opening, please confirm:

JavaScript Framework

React

Amplify APIs

Authentication

Amplify Version

v6

Amplify Categories

auth

Backend

None

Environment information

# Put output below this line
 System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz
    Memory: 1013.43 MB / 15.37 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 19.7.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.8.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 114.0.5735.106
  npmPackages:
    @babel/core: ^7.22.9 => 7.22.11 
    @babel/plugin-proposal-class-properties: ^7.18.6 => 7.18.6 
    @babel/plugin-transform-runtime: ^7.22.9 => 7.22.10 
    @babel/preset-env: ^7.22.9 => 7.22.10 
    @babel/preset-react: ^7.22.5 => 7.22.5 
    @emotion/react: ^11.11.1 => 11.11.1 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/icons-material: ^5.14.3 => 5.14.9 
    @mui/lab: ^5.0.0-alpha.136 => 5.0.0-alpha.141 
    @mui/material: ^5.14.0 => 5.14.6 
    @mui/styles: ^5.14.0 => 5.14.6 
    @reduxjs/toolkit: ^1.9.5 => 1.9.5 
    @reduxjs/toolkit-query:  1.0.0 
    @reduxjs/toolkit-query-react:  1.0.0 
    @stripe/react-stripe-js: ^2.1.1 => 2.3.0 
    @stripe/stripe-js: ^1.54.1 => 1.54.2 
    @testing-library/jest-dom: ^5.16.5 => 5.17.0 
    @testing-library/react: ^14.0.0 => 14.0.0 
    @testing-library/react-hooks: ^8.0.1 => 8.0.1 
    @testing-library/user-event: ^14.4.3 => 14.4.3 
    ace-builds: ^1.23.4 => 1.25.0 
    apexcharts: ^3.41.0 => 3.42.0 
    aws-amplify: ^6.0.15 => 6.0.15 
    aws-amplify/adapter-core:  undefined ()
    aws-amplify/analytics:  undefined ()
    aws-amplify/analytics/kinesis:  undefined ()
    aws-amplify/analytics/kinesis-firehose:  undefined ()
    aws-amplify/analytics/personalize:  undefined ()
    aws-amplify/analytics/pinpoint:  undefined ()
    aws-amplify/api:  undefined ()
    aws-amplify/api/server:  undefined ()
    aws-amplify/auth:  undefined ()
    aws-amplify/auth/cognito:  undefined ()
    aws-amplify/auth/cognito/server:  undefined ()
    aws-amplify/auth/enable-oauth-listener:  undefined ()
    aws-amplify/auth/server:  undefined ()
    aws-amplify/datastore:  undefined ()
    aws-amplify/in-app-messaging:  undefined ()
    aws-amplify/in-app-messaging/pinpoint:  undefined ()
    aws-amplify/push-notifications:  undefined ()
    aws-amplify/push-notifications/pinpoint:  undefined ()
    aws-amplify/storage:  undefined ()
    aws-amplify/storage/s3:  undefined ()
    aws-amplify/storage/s3/server:  undefined ()
    aws-amplify/storage/server:  undefined ()
    aws-amplify/utils:  undefined ()
    axios: ^1.4.0 => 1.4.0 
    babel-jest: ^29.6.1 => 29.7.0 
    babel-loader: ^9.1.3 => 9.1.3 
    cjs-loader: ^0.1.0 => 0.1.0 
    compression-webpack-plugin: ^10.0.0 => 10.0.0 
    copy-to-clipboard: ^3.3.3 => 3.3.3 
    css-loader: ^6.8.1 => 6.8.1 
    date-fns: ^2.30.0 => 2.30.0 
    dotenv-webpack: ^8.0.1 => 8.0.1 
    draft-js: ^0.11.7 => 0.11.7 
    draftjs-to-html: ^0.9.1 => 0.9.1 
    elkjs: ^0.8.2 => 0.8.2 
    env-cmd: ^10.1.0 => 10.1.0 
    eslint: ^8.45.0 => 8.47.0 
    eslint-config-airbnb: ^19.0.4 => 19.0.4 
    eslint-config-prettier: ^8.8.0 => 8.10.0 
    eslint-config-react-app: ^7.0.1 => 7.0.1 
    eslint-plugin-import: ^2.27.5 => 2.28.1 
    eslint-plugin-jsx-a11y: ^6.7.1 => 6.7.1 
    eslint-plugin-prettier: ^5.0.0 => 5.0.0 
    eslint-plugin-react: ^7.32.2 => 7.33.2 
    eslint-plugin-react-hooks: ^4.6.0 => 4.6.0 
    file-loader: ^6.2.0 => 6.2.0 
    framer-motion: ^10.16.4 => 10.18.0 
    html-loader: ^4.2.0 => 4.2.0 
    html-to-draftjs: ^1.5.0 => 1.5.0 
    html-webpack-plugin: ^5.5.3 => 5.5.3 
    html2canvas: ^1.4.1 => 1.4.1 
    humanize-duration: ^3.29.0 => 3.29.0 
    husky: ^8.0.3 => 8.0.3 
    image-minimizer-webpack-plugin: ^3.8.3 => 3.8.3 
    image-webpack-loader: ^8.1.0 => 8.1.0 
    imagemin: ^8.0.1 => 8.0.1 (7.0.1)
    imagemin-optipng: ^8.0.0 => 8.0.0 
    imagemin-svgo: ^10.0.1 => 10.0.1 (9.0.0)
    immutable: ^4.3.2 => 4.3.4 (3.7.6)
    iso-3166-1-alpha-2: ^1.0.1 => 1.0.1 
    jest: ^29.6.1 => 29.7.0 
    js-yaml: ^4.1.0 => 4.1.0 (3.14.1)
    json-loader: ^0.5.7 => 0.5.7 
    lint-staged: ^13.2.3 => 13.3.0 
    mini-css-extract-plugin: ^2.7.6 => 2.7.6 
    moment: ^2.29.4 => 2.29.4 
    prettier: ^3.0.0 => 3.0.2 
    react: ^18.2.0 => 18.2.0 
    react-ace: ^10.1.0 => 10.1.0 
    react-apexcharts: ^1.4.0 => 1.4.1 
    react-beautiful-dnd: ^13.1.1 => 13.1.1 
    react-datepicker: ^4.16.0 => 4.16.0 
    react-dom: ^18.2.0 => 18.2.0 
    react-draft-wysiwyg: ^1.15.0 => 1.15.0 
    react-file-reader: ^1.1.4 => 1.1.4 
    react-google-recaptcha: ^3.1.0 => 3.1.0 
    react-infinite-scroll-component: ^6.1.0 => 6.1.0 
    react-joyride: ^2.5.4 => 2.5.5 
    react-json-view: ^1.21.3 => 1.21.3 
    react-redux: ^8.1.1 => 8.1.2 (7.2.9)
    react-router-dom: ^6.14.1 => 6.15.0 
    react-slick: ^0.29.0 => 0.29.0 
    react-syntax-highlighter: ^15.5.0 => 15.5.0 
    react-test-renderer: ^18.2.0 => 18.2.0 
    react-use: ^17.4.0 => 17.4.0 
    react-virtualized: ^9.22.5 => 9.22.5 
    react-virtuoso: ^4.6.2 => 4.6.3 
    react18-json-view: ^0.2.6 => 0.2.7 
    reactflow: ^11.7.4 => 11.8.3 
    redux: ^4.2.1 => 4.2.1 
    rimraf: ^5.0.1 => 5.0.1 (2.7.1, 3.0.2)
    sass-loader: ^13.3.2 => 13.3.2 
    slick-carousel: ^1.8.1 => 1.8.1 
    style-loader: ^3.3.3 => 3.3.3 
    svg-url-loader: ^8.0.0 => 8.0.0 
    url-loader: ^4.1.1 => 4.1.1 
    use-debounce: ^9.0.4 => 9.0.4 
    use-react-screenshot: ^3.0.0 => 3.0.0 
    use-react-screenshot-example:  0.0.0 
    webpack: ^5.88.1 => 5.88.2 
    webpack-cli: ^5.1.4 => 5.1.4 
    webpack-dev-server: ^4.15.1 => 4.15.1 
    yaml: ^2.3.1 => 2.3.1 (1.10.2)
    yaml-loader: ^0.8.0 => 0.8.0 
    yarn-upgrade-all: ^0.7.2 => 0.7.2 
  npmGlobalPackages:
    @aws-amplify/cli: 12.10.1
    corepack: 0.16.0
    js-yaml: 4.1.0
    n: 9.0.1
    npm: 9.8.1
    serve: 14.2.0
    sonarqube-scanner: 3.0.1
    wscat: 5.2.0
    yaml-to-json: 0.3.0
    yarn: 1.22.19

Describe the bug

  • We migrated our react application from amplify v5.3.4 to v6.0.15

  • Federated Sign In with google returns the required code and state values post sign in as seen in the below image image

  • But the Hub event returns a signInWithRedirect_failure image

  • We also added a debugger to capture the error in console which returns the following exception oauth1

  • Note : The federated login for the user works fine using v5.3.4

Expected behavior

  • Post successful sign in using federated sign in, corresponding tokens will be retrieved and the user will be navigated to the landing page of the app.

Reproduction steps

  1. Upgraded amplify to v6.0.15: npm install aws-amplify@6.0.15
  2. Ran the amplify pull command which generated the amplifyconfiguration.json file
  3. Ran yarn start and clicked on the Sign in with Google button to trigger the sign in.
  4. Sign in redirects to the page of google accounts, and the required account is selected
  5. The page navigates back to the app’s login page with the above exception instead of logging in and redirecting to the landing page of the app

Code Snippet

// Put your code below this line.

// The federated sign in is called from the code as follows:
	async function googleLoginCode() {
		await signInWithRedirect({ provider: 'Google' });
	}

// Hub is configured as follows:
useEffect(() => {
		const unsubscribe = Hub.listen('auth', ({ payload: { event, data } }) => {
			// eslint-disable-next-line default-case
			switch (event) {
				case 'signIn_failure':
				case 'signInWithRedirect_failure':
				case 'cognitoHostedUI_failure':
				case 'customState_failure':
					window.localStorage.setItem('isFederatedError', 'true');
					if (
						data?.error?.message === 'User+is+not+enabled' ||
						data?.error?.message === 'User+is+disabled.+' ||
						location?.search?.includes('User+is+not+enabled') ||
						location?.search?.includes('User+is+disabled.+')
					) {
						window.localStorage.setItem(
							'federatedError',
							'Sign up successful.You are yet to be activated. Please contact the administrator.'
						);
					} else if (
						data?.error?.message ===
						'PreSignUp+failed+with+error+Sorry%2C+User+already+exist+with+same+email.+'
					) {
						window.localStorage.setItem('federatedError', 'User already exist with same email.');
					} else {
						window.localStorage.setItem('federatedError', data?.error?.message);
					}
					break;
				case 'signInWithRedirect':
					triggerHub();
					break;
			}
		});

		// fetchAuthSession().
		// 	then(user => {
		// 		if (user && user?.tokens && user?.tokens?.idToken?.payload) {
		// 		}
		// 		else navigate('/login');
		// 	})
		// 	.catch(() => {
		// 		navigate('/login');
		// 	});
		// eslint-disable-next-line no-use-before-define
		getUser();

		return unsubscribe;
	}, []);

	const getUser = async () => {
		try {
			// eslint-disable-next-line no-unused-vars
			const currentUser = await getCurrentUser();
		} catch (error) {
			navigate('/login');
		}
	};

Log output

// Put your logs below this line

{
    "event": "signInWithRedirect_failure",
    "data": {
        "error": {
            "name": "OAuthSignInException",
            "recoverySuggestion": "Make sure Cognito Hosted UI has been configured correctly"
        }
    }
}

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": "us-east-1",
    "aws_cognito_region": "us-east-1",
    "aws_user_pools_id": "us-east-1_******",
    "aws_user_pools_web_client_id": "**********",
    "oauth": {
        "domain": "auth.int.covalent.xyz.auth.us-east-1.amazoncognito.com",
        "scope": [
            "aws.cognito.signin.user.admin",
            "email",
            "openid",
            "phone",
            "profile"
        ],
        "redirectSignIn": "http://localhost:8080/",
        "redirectSignOut": "http://localhost:8080/login/",
        "responseType": "code"
    },
    "federationTarget": "COGNITO_USER_POOLS",
    "aws_cognito_username_attributes": [],
    "aws_cognito_social_providers": [
        "GOOGLE"
    ],
    "aws_cognito_signup_attributes": [
        "GIVEN_NAME",
        "FAMILY_NAME",
        "EMAIL"
    ],
    "aws_cognito_mfa_configuration": "OFF",
    "aws_cognito_mfa_types": [],
    "aws_cognito_password_protection_settings": {
        "passwordPolicyMinLength": 6,
        "passwordPolicyCharacters": []
    },
    "aws_cognito_verification_mechanisms": [
        "EMAIL"
    ]
};


export default awsmobile;

Manual configuration

{
	"aws_project_region": "us-east-1",
	"aws_cognito_region": "us-east-1",
	"aws_user_pools_id": "us-east-1_******",
	"aws_user_pools_web_client_id": "********",
	"oauth": {
		"domain": "auth.int.covalent.xyz.auth.us-east-1.amazoncognito.com",
		"scope": ["aws.cognito.signin.user.admin", "email", "openid", "phone", "profile"],
		"redirectSignIn": "http://localhost:8080/",
		"redirectSignOut": "http://localhost:8080/login/",
		"responseType": "code"
	},
	"federationTarget": "COGNITO_USER_POOLS",
	"aws_cognito_username_attributes": [],
	"aws_cognito_social_providers": ["GOOGLE"],
	"aws_cognito_signup_attributes": ["GIVEN_NAME", "FAMILY_NAME", "EMAIL"],
	"aws_cognito_mfa_configuration": "OFF",
	"aws_cognito_mfa_types": [],
	"aws_cognito_password_protection_settings": {
		"passwordPolicyMinLength": 6,
		"passwordPolicyCharacters": []
	},
	"aws_cognito_verification_mechanisms": ["EMAIL"]
}

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

About this issue

  • Original URL
  • State: closed
  • Created 5 months ago
  • Comments: 15 (7 by maintainers)

Most upvoted comments

I am facing the same issue in the same situation.

{
    "event": "signInWithRedirect_failure",
    "data": {
        "error": {
            "name": "OAuthSignInException",
            "recoverySuggestion": "Make sure Cognito Hosted UI has been configured correctly"
        }
    }
}

This is the returned URL params after login with Google

http://localhost:3000/clients/login?code=f8467056-8f9e-420c-b577-0198657a3e9f&state=94fhRV9INPzYguOZAENR4qpTp9RZmDbn

I got a 400 Bad Request at this request https://hairqueue-web.auth.us-east-1.amazoncognito.com/oauth2/token

Response:

{
    "error": "invalid_client"
}

Payload:

grant_type: authorization_code
code: f8467056-8f9e-420c-b577-0198657a3e9f
client_id: 6on8j0kq741oqmv5qaok9a3h09
redirect_uri: http://localhost:3000/clients/login
code_verifier: gerq4mrMS0buUHEdEDIKPPd8Te0569XzMCtCFyxNIPfNWubjm8Gx3CM6QfsGcl8V9sYHgiUDijz2pHRgB9OihoLPrP5gwyFjS7RnnIwQtytRE42wy6bqRrLOaHH7Apxl

I keep trying to solve this problem, if I have news I share it here.

Looking at this documentation, AWS said that provably the client_id|client_secret is nonexistent at authorization header. But looking at request headers, I could not see any authorization presented there.

Request header detailed :authority: hairqueue-web.auth.us-east-1.amazoncognito.com :method: POST :path: /oauth2/token :scheme: https Accept: */* Accept-Encoding: gzip, deflate, br, zstd Accept-Language: en-US,en;q=0.9,pt-BR;q=0.8,pt;q=0.7 Content-Length: 312 Content-Type: application/x-www-form-URL-encoded Origin: http://localhost:3000 Referer: http://localhost:3000/ Sec-Ch-Ua: "Chromium";v="122", "Not(A:Brand";v="24", "Google Chrome";v="122" Sec-Ch-Ua-Mobile: ?1 Sec-Ch-Ua-Platform: "Android" Sec-Fetch-Dest: empty Sec-Fetch-Mode: cors Sec-Fetch-Site: cross-site User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Mobile Safari/537.36 X-Amz-User-Agent: aws-amplify/6.0.18 auth/36 framework/2

invalid_client Client authentication failed. For example, when the client includes client_id and client_secret in the authorization header, but there’s no such client with that client_id and client_secret.

Should it be a problem?

I am not having this error anymore. In my case, it was happening because I was using OAuth Google credentials that were automatically created by Firebase authentication. (I don’t know exactly the reason for not working with AWS Cognito.

The solution for me: I created another credential from scratch (very simple) on the Google Cloud Platform and configured that in AWS Cognito.

Result: Now I can sign in using Google Provider and it is correctly generating tokens for the user authenticated.

+2
pedroSoaresll on Mar 5, 2024

hello @nadetastic @israx Thanks for your patience:) Yeah I tried setting up the breakpoint in both the Hub function and the preceding Amplify.mjs file and I am getting '‘http://localhost:8080/login’ though I can see the code and state in the top as shown in below image googleHref

Tried with chrome and firefox, the issue seems to persist in both.

It looks that after the login flow, it is not redirecting to the /login page but to the / page. Does it correct? I am supposing it because of the URL that the devtools window is showing at the top window bar.

if the Hub.listener logic is on the /login page but the redirect is moving the client to the / page, it probably is a problem to correctly complete the sign in flow.

+1
pedroSoaresll on Mar 19, 2024
Read more comments on GitHub
← amplify-js: v6 - ID Token as Authorization header not working with DataStore/App Sync any more (was working with v5, solution proposed)
amplify-js: V6 upgrade causes AuthUserPoolException →