search

aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.44k stars 2.13k forks source link

OAuth - Error handling auth response. Error: Google+Error+-+401+invalid_client #10026

Closed kylekirkby closed 2 years ago

kylekirkby commented 2 years ago

Before opening, please confirm:

JavaScript Framework

React, Next.js

Amplify APIs

Authentication

Amplify Categories

No response

Environment information

``` System: OS: Linux 5.13 Ubuntu 20.04.4 LTS (Focal Fossa) CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 1.43 GB / 31.00 GB Container: Yes Shell: 5.8 - /usr/bin/zsh Binaries: Node: 14.17.5 - ~/.nvm/versions/node/v14.17.5/bin/node Yarn: 1.22.17 - ~/.nvm/versions/node/v14.17.5/bin/yarn npm: 7.24.2 - ~/Git/xxxxxxxxxxxxxxxxx/node_modules/.bin/npm Browsers: Brave Browser: 103.1.40.105 Chrome: 101.0.4951.64 Chromium: 103.0.5060.53 Firefox: 101.0.1 npmPackages: @ampproject/toolbox-optimizer: undefined () @babel/core: ^7.13.10 => undefined (7.18.2, 7.12.9, ) @babel/runtime: 7.15.4 @badrap/bar-of-progress: ^0.1.2 => 0.1.2 @date-io/date-fns: 1 => 1.3.13 (2.14.0) @emotion/react: ^11.9.0 => 11.9.0 @emotion/server: ^11.4.0 => 11.4.0 @emotion/styled: ^11.8.1 => 11.8.1 @fullhuman/postcss-purgecss: ^3.0.0 => 3.1.3 @hapi/accept: undefined () @material-ui/core: ^4.11.3 => 4.12.4 @material-ui/icons: ^4.11.2 => 4.11.3 @mui/icons-material: ^5.8.2 => 5.8.2 @mui/lab: ^5.0.0-alpha.83 => 5.0.0-alpha.84 @mui/material: ^5.8.1 => 5.8.2 @mui/styles: ^5.8.0 => 5.8.0 @mui/x-data-grid: ^5.12.0 => 5.12.0 @mui/x-date-pickers: ^5.0.0-alpha.4 => 5.0.0-alpha.5 (5.0.0-alpha.1) @napi-rs/triples: undefined () @next/react-dev-overlay: undefined () @next/react-refresh-utils: 12.1.6 @peculiar/webcrypto: undefined () @sentry/browser: ^6.19.6 => 6.19.7 @sentry/cli: ^1.71.0 => 1.74.4 @sentry/webpack-plugin: ^1.18.3 => 1.18.9 @vercel/nft: undefined () @videojs/http-streaming: ^2.10.0 => 2.14.2 abort-controller: undefined () ace-builds: ^1.4.12 => 1.5.3 acorn: undefined () amphtml-validator: undefined () amplify-category-video: ^3.9.1 => 3.9.2 arg: undefined () assert: undefined () async-retry: undefined () async-sema: undefined () autoprefixer: ^10.0.4 => 10.4.7 aws-amplify: ^4.3.14 => 4.3.24 aws-sdk: ^2.970.0 => 2.1149.0 axios: ^0.24.0 => 0.24.0 (0.21.4) babel-eslint: ^10.1.0 => 10.1.0 babel-loader: ^8.2.2 => 8.2.5 babel-packages: undefined () babel-plugin-styled-components: ^1.12.0 => 1.13.3 (2.0.7) babel-plugin-transform-remove-console: ^6.9.4 => 6.9.4 better-docs: ^2.3.2 => 2.7.2 browserify-zlib: undefined () browserslist: undefined () buffer: undefined () bytes: undefined () chalk: undefined () chart.js: ^3.7.1 => 3.8.0 chart.js-auto: undefined () chart.js-helpers: undefined () ci-info: undefined () cli-select: undefined () comment-json: undefined () compression: undefined () conf: undefined () constants-browserify: undefined () content-disposition: undefined () content-type: undefined () cookie: undefined () copy-webpack-plugin: ^10.2.4 => 10.2.4 (6.4.1) cross-spawn: undefined () crypto-browserify: undefined () cssnano-simple: undefined () date-fns: ^2.22.1 => 2.28.0 debug: undefined () devalue: undefined () domain-browser: undefined () dotenv: ^8.2.0 => 8.6.0 eslint: ^7.21.0 => 7.32.0 eslint-config-airbnb: ^18.2.1 => 18.2.1 eslint-config-next: ^11.1.0 => 11.1.4 eslint-config-prettier: ^8.3.0 => 8.5.0 eslint-plugin-import: ^2.22.1 => 2.26.0 eslint-plugin-jsx-a11y: ^6.4.1 => 6.5.1 eslint-plugin-react: ^7.22.0 => 7.30.0 eslint-plugin-react-hooks: ^4.2.0 => 4.5.0 etag: undefined () events: undefined () find-cache-dir: undefined () find-up: undefined () formdata-node: undefined () formik: ^2.2.9 => 2.2.9 fresh: undefined () fs: ^0.0.1-security => 0.0.1-security fs-extra: ^9.0.1 => 9.1.0 (7.0.1, 0.26.7) get-orientation: undefined () glob: undefined () gray-matter: ^4.0.2 => 4.0.3 gzip-size: undefined () http-proxy: undefined () https-browserify: undefined () i18next: ^19.8.4 => 19.9.2 i18next-browser-languagedetector: ^6.0.1 => 6.1.4 icss-utils: undefined () ignore-loader: undefined () image-size: undefined () install: ^0.13.0 => 0.13.0 is-animated: undefined () is-docker: undefined () is-wsl: undefined () isbot: ^3.4.5 => 3.5.0 jest-worker: undefined () jsdoc: ^3.6.6 => 3.6.10 json5: undefined () jsonwebtoken: undefined () jwt-decode: ^3.1.2 => 3.1.2 loader-utils: undefined () lodash: ^4.17.21 => 4.17.21 lodash.curry: undefined () lru-cache: undefined () material-ui-dropzone: ^3.5.0 => 3.5.0 md5: ^2.3.0 => 2.3.0 mediainfo.js: ^0.1.7 => 0.1.7 micromatch: undefined () mini-css-extract-plugin: undefined () nanoid: undefined () native-url: undefined () neo-async: undefined () next: ^12.1.6 => 12.1.6 next-mdx-remote: ^3.0.8 => 3.0.8 next-seo: ^5.4.0 => 5.4.0 nextjs-sitemap-generator: ^1.1.3 => 1.3.1 node-fetch: undefined () node-html-parser: undefined () notistack: ^1.0.3 => 1.0.10 npm: ^7.5.2 => 7.24.2 ora: undefined () os-browserify: undefined () p-limit: undefined () path-browserify: undefined () postcss-flexbugs-fixes: undefined () postcss-modules-extract-imports: undefined () postcss-modules-local-by-default: undefined () postcss-modules-scope: undefined () postcss-modules-values: undefined () postcss-preset-env: undefined () postcss-safe-parser: undefined () postcss-scss: undefined () postcss-value-parser: undefined () process: undefined () punycode: undefined () querystring-es3: undefined () raw-body: undefined () react: ^17.0.2 => 17.0.2 react-chartjs-2: ^4.1.0 => 4.2.0 react-content-loader: ^6.0.1 => 6.2.0 react-content-loader/native: undefined () react-docgen-typescript: ^1.20.5 => 1.22.0 react-dom: ^17.0.2 => 17.0.2 react-dropzone: ^11.4.2 => 11.7.1 (10.2.2) react-i18next: ^11.8.0 => 11.17.0 react-icons: ^4.1.0 => 4.4.0 (3.11.0) react-image-crop: ^8.6.12 => 8.6.12 react-indiana-drag-scroll: ^2.1.0 => 2.1.0 react-infinite-scroll-component: ^6.1.0 => 6.1.0 react-infinite-scroll-hook: ^4.0.1 => 4.0.3 react-is: 17.0.2 react-markdown: ^7.0.1 => 7.1.2 react-refresh: 0.12.0 react-server-dom-webpack: undefined () react-spinners: ^0.10.6 => 0.10.6 react-styleguidist: ^11.1.5 => 11.2.0 react-syntax-highlighter: ^15.4.4 => 15.5.0 regenerator-runtime: 0.13.4 rehype-document: ^6.0.0 => 6.0.1 rehype-format: ^4.0.0 => 4.0.1 rehype-react: ^7.0.3 => 7.1.1 rehype-stringify: ^9.0.2 => 9.0.3 remark: ^13.0.0 => 13.0.0 remark-html: ^13.0.1 => 13.0.2 sass-loader: undefined () schema-utils: undefined () semver: undefined () send: undefined () setimmediate: undefined () slugify: ^1.4.6 => 1.6.5 source-map: undefined () stream-browserify: undefined () stream-http: undefined () string-hash: undefined () string_decoder: undefined () strip-ansi: undefined () styled-components: ^5.2.1 => 5.3.5 styled-components/macro: undefined () styled-components/native: undefined () styled-components/primitives: undefined () terser: undefined () text-table: undefined () timers-browserify: undefined () tty-browserify: undefined () typescript: ^4.1.2 => 4.7.3 (3.9.10) ua-parser-js: undefined () unistore: undefined () use-dark-mode: ^2.3.1 => 2.3.1 use-subscription: undefined () util: undefined () uuid: ^8.3.2 => 8.3.2 (3.4.0, 3.3.2, 8.0.0, , 7.0.3) video.js: ^7.14.3 => 7.19.2 videojs-contrib-quality-levels: ^2.1.0 => 2.1.0 videojs-hls-quality-selector: ^1.1.4 => 1.1.4 vm-browserify: undefined () watchpack: undefined () web-streams-polyfill: undefined () web-vitals: undefined () webpack: 5 => 5.73.0 () webpack-sources: undefined () ws: undefined () yup: ^0.32.11 => 0.32.11 npmGlobalPackages: @aws-amplify/cli: 9.0.0 amplify-category-video: 3.9.1 attranslate: 1.6.1 cognito-backup: 2.1.1 eslint: 8.8.0 i18next-scanner: 3.0.0 ngrok: 4.2.2 node-gyp: 9.0.0 npm: 6.14.14 serverless: 2.69.1 uglify-js: 3.14.1 yarn: 1.22.17 ```

Describe the bug

I've recently tested the Amplify Hosting product with our development environment. However, since testing, our authentication setup has broken. Firstly, we lost our custom SSO provider details. I'm now getting the following error when trying to authenticate via Google.

[ERROR] 26:58.148 OAuth - Error handling auth response. Error: Google+Error+-+401+invalid_client
    at OAuth.eval (OAuth.js?3329:244:1)
    at step (OAuth.js?3329:55:1)
    at Object.eval [as next] (OAuth.js?3329:36:46)
    at eval (OAuth.js?3329:30:1)
    at new Promise (<anonymous>)
    at __awaiter (OAuth.js?3329:26:1)
    at OAuth.handleAuthResponse (OAuth.js?3329:220:1)
    at AuthClass.eval (Auth.js?782d:2156:1)
    at step (Auth.js?782d:55:1)
    at Object.eval [as next] (Auth.js?782d:36:46)
    at eval (Auth.js?782d:30:1)
    at new Promise (<anonymous>)
    at __awaiter (Auth.js?782d:26:1)
    at AuthClass._handleAuthResponse (Auth.js?782d:2118:1)
    at eval (Auth.js?782d:227:1)
    at eval (urlListener.js?0f6f:17:1)
    at AuthClass.configure (Auth.js?782d:221:24)
    at eval (Amplify.js?fdce:84:1)
    at Array.map (<anonymous>)
    at AmplifyClass.configure (Amplify.js?fdce:83:1)
    at eval (_app.jsx?4c77:39:1)
    at Module../src/pages/_app.jsx (_app.js?ts=1656325616374:31473:1)
    at Module.options.factory (webpack.js?ts=1656325616374:670:31)
    at __webpack_require__ (webpack.js?ts=1656325616374:37:33)
    at fn (webpack.js?ts=1656325616374:325:21)
    at eval (?6782:5:16)
    at eval (route-loader.js?ea34:235:51)

This suggests to me that something has changed that means the correct Google Client ID is no longer being provided to the Amplify JS authentication functions. This was working absolutely fine until we recently tested CI/CD via Amplify Hosting.

As I'm writing this, I'm thinking this might be more of an Amplify CLI issue than Amplify JS. Please advise.

Expected behavior

When clicking the "Sign in with Google button", the correct Google Client ID should be provided to the Amplify JS authentication methods.

Reproduction steps

  1. We're using the Authentication API's directly instead of using the Amplify-ui-react Authentication components.

Code Snippet

// Put your code below this line.

Log output

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

aws-exports.js

No response

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

kylekirkby commented 2 years ago

It looks like this issue was due to a space being appended to the Google Client secret... 🤦🏼‍♂️

github-actions[bot] commented 1 year ago

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 amplify-help forum.