urgent: Facebook login issue

henobi commented 2 years 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

REST API

Amplify Categories

auth, function, api

Environment information

``` System: OS: macOS 12.0 CPU: (10) x64 Apple M1 Pro Memory: 34.33 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 16.12.0 - /usr/local/Cellar/node@16/16.12.0/bin/node Yarn: 1.22.17 - /usr/local/bin/yarn npm: 8.1.0 - /usr/local/Cellar/node@16/16.12.0/bin/npm Watchman: 2021.10.18.00 - /usr/local/bin/watchman Browsers: Chrome: 96.0.4664.55 Firefox: 94.0.1 Safari: 15.0 npmPackages: @aws-amplify/auth: ^4.3.2 => 4.3.8 @babel/core: ^7.15.0 => 7.15.5 (7.12.3) @babel/eslint-parser: ^7.15.0 => 7.15.4 @emotion/react: ^11.4.1 => 11.4.1 @emotion/styled: ^11.3.0 => 11.3.0 @fullcalendar/common: ^5.6.0 => 5.9.0 @iconify/icons-eva: ^1.1.0 => 1.1.0 @iconify/react: ^3.0.1 => 3.0.1 @material-ui/core: ^5.0.0-beta.4 => 5.0.0-beta.5 @material-ui/icons: ^5.0.0-beta.4 => 5.0.0-beta.5 @material-ui/lab: ^5.0.0-alpha.43 => 5.0.0-alpha.44 @material-ui/styles: ^5.0.0-beta.4 => 5.0.0-beta.5 @material-ui/system: ^5.0.0-beta.4 => 5.0.0-beta.5 @material-ui/utils: ^5.0.0-beta.4 => 5.0.0-beta.5 @mui/icons-material: ^5.0.4 => 5.0.4 @mui/lab: ^5.0.0-alpha.51 => 5.0.0-alpha.51 @mui/material: ^5.1.0 => 5.1.0 @mui/system: ^5.0.4 => 5.0.4 (5.1.0) @reduxjs/toolkit: ^1.6.1 => 1.6.1 @reduxjs/toolkit-query: 1.0.0 @reduxjs/toolkit-query-react: 1.0.0 @testing-library/jest-dom: ^5.11.4 => 5.14.1 @testing-library/react: ^12.0.0 => 12.1.0 @types/autosuggest-highlight: ^3.1.1 => 3.1.1 @types/chroma-js: ^2.1.3 => 2.1.3 @types/d3-array: ^3.0.1 => 3.0.1 @types/d3-scale: ^4.0.1 => 4.0.1 @types/emoji-mart: ^3.0.4 => 3.0.5 @types/gtag.js: ^0.0.7 => 0.0.7 @types/jest: ^27.0.1 => 27.0.1 @types/node: ^16.7.10 => 16.9.1 @types/nprogress: ^0.2.0 => 0.2.0 @types/numeral: ^2.0.1 => 2.0.1 @types/react: ^17.0.0 => 17.0.20 @types/react-copy-to-clipboard: ^5.0.0 => 5.0.1 @types/react-dom: ^17.0.2 => 17.0.9 @types/react-redux: ^7.1.16 => 7.1.18 @types/react-router-dom: ^5.1.8 => 5.1.8 @types/react-scroll: ^1.8.2 => 1.8.3 @types/react-slick: ^0.23.4 => 0.23.5 @types/yup: ^0.29.11 => 0.29.13 @typescript-eslint/eslint-plugin: 4.30.0 => 4.30.0 (4.31.0) @typescript-eslint/parser: 4.30.0 => 4.30.0 (1.13.0, 3.10.1, 4.31.0) amazon-cognito-identity-js: ^5.0.6 => 5.1.0 (5.1.2) apexcharts: ^3.28.1 => 3.28.1 aws-amplify: ^4.2.9 => 4.3.0 axios: ^0.23.0 => 0.23.0 (0.21.4) change-case: ^4.1.2 => 4.1.2 chroma-js: ^2.1.2 => 2.1.2 date-fns: ^2.21.1 => 2.23.0 eslint: ^7.24.0 => 7.32.0 (5.16.0) eslint-config-airbnb: 18.2.1 => 18.2.1 eslint-config-airbnb-typescript: 14.0.0 => 14.0.0 eslint-config-prettier: 8.3.0 => 8.3.0 eslint-config-react-app: 6.0.0 => 6.0.0 eslint-import-resolver-typescript: 2.4.0 => 2.4.0 eslint-loader: 4.0.2 => 4.0.2 eslint-plugin-flowtype: 5.9.2 => 5.9.2 eslint-plugin-import: 2.24.2 => 2.24.2 eslint-plugin-jsx-a11y: 6.4.1 => 6.4.1 eslint-plugin-prettier: 4.0.0 => 4.0.0 eslint-plugin-react: 7.25.1 => 7.25.1 eslint-plugin-react-hooks: 4.2.0 => 4.2.0 feeder-react-feedback: ^0.0.6 => 0.0.6 formik: ^2.2.6 => 2.2.9 framer-motion: ^4.1.4 => 4.1.17 history: ^5.0.1 => 5.0.1 i18next: ^20.0.0 => 20.6.1 i18next-browser-languagedetector: ^6.1.0 => 6.1.2 i18next-http-backend: ^1.3.1 => 1.3.1 i18next-xhr-backend: ^3.2.2 => 3.2.2 lodash: ^4.17.19 => 4.17.21 notistack5: ^1.0.1 => 1.0.1 numeral: ^2.0.6 => 2.0.6 prettier: 2.3.2 => 2.3.2 (1.19.1, 2.4.0) prettier-eslint: 13.0.0 => 13.0.0 (9.0.2) prettier-eslint-cli: 5.0.1 => 5.0.1 react: ^17.0.2 => 17.0.2 react-apexcharts: ^1.3.9 => 1.3.9 react-code-input: ^3.10.1 => 3.10.1 react-dom: ^17.0.2 => 17.0.2 react-helmet-async: ^1.0.9 => 1.1.2 react-i18next: ^11.8.13 => 11.12.0 react-intersection-observer: ^8.31.0 => 8.32.1 react-number-format: ^4.7.3 => 4.7.3 react-redux: ^7.2.3 => 7.2.5 react-router: ^6.0.0-beta.1 => 6.0.0-beta.4 react-router-dom: ^6.0.0-beta.1 => 6.0.0-beta.4 react-scripts: 4.0.3 => 4.0.3 redux: ^4.1.1 => 4.1.1 redux-persist: ^6.0.0 => 6.0.0 redux-persist/integration/react: undefined () reselect: ^4.0.0 => 4.0.0 simplebar: ^5.3.5 => 5.3.5 simplebar-react: ^2.3.0 => 2.3.5 typescript: ^4.4.4 => 4.4.4 (3.9.10) web-vitals: ^2.1.0 => 2.1.0 workbox-core: ^6.2.4 => 6.3.0 (5.1.4) workbox-expiration: ^6.2.4 => 6.3.0 (5.1.4) workbox-precaching: ^6.2.4 => 6.3.0 (5.1.4) workbox-routing: ^6.2.4 => 6.3.0 (5.1.4) workbox-strategies: ^6.2.4 => 6.3.0 (5.1.4) yup: ^0.32.9 => 0.32.9 npmGlobalPackages: @aws-amplify/cli: 0.2.2-multienv.1 corepack: 0.10.0 express-generator: 4.16.1 firebase-tools: 9.10.0 npm: 8.1.0 pnpm: 5.18.9 react-native-cli: 2.0.1 sass: 1.32.11 typescript: 3.9.9 yarn: 1.22.17 ```

Describe the bug

We are using facebook as social provider login. Until a few weeks it worked just fine, but now we are receiving an error after the redirect back to our webpage.

At the moment our users can not login with facebook.

URL: http://localhost:8080/?error_description=Bad+id_token+issuer+https%3A%2F%2Fwww.facebook.com&state=AQeD5afDRRx2ns2mMVM9rWJfNKPhr9U8&error=invalid_request

error_description: Bad id_token issuer https://www.facebook.com
state: AQeD5afDRRx2ns2mMVM9rWJfNKPhr9U8
error: invalid_request

Google login is working just fine.

Expected behavior

The facebook login should work.

Reproduction steps

Configure social login like here: https://docs.amplify.aws/lib/auth/social/q/platform/js/
Run the facebook login in the frontend
After the redirect from FB -> Cognito -> Localhost you will get the error.

Code Snippet

// Put your code below this line.

Log output

``` [ERROR] 14:06.483 OAuth - Error handling auth response. Error: Bad+id_token+issuer+https%3A%2F%2Fwww.facebook.com at OAuth. (OAuth.ts:235) at step (OAuth.ts:12) at Object.next (OAuth.ts:12) at OAuth.ts:12 at new Promise () at push../node_modules/@aws-amplify/auth/lib-esm/OAuth/OAuth.js.__awaiter (OAuth.ts:12) at OAuth.handleAuthResponse (OAuth.ts:217) at AuthClass. (Auth.ts:2059) at step (Auth.ts:12) at Object.next (Auth.ts:12) at Auth.ts:12 at new Promise () at push../node_modules/@aws-amplify/auth/lib-esm/Auth.js.__awaiter (Auth.ts:12) at AuthClass._handleAuthResponse (Auth.ts:2017) at Auth.ts:250 at urlListener.ts:19 at AuthClass.configure (Auth.ts:244) at Amplify.ts:73 at Array.map () at AmplifyClass.configure (Amplify.ts:72) at Module../src/contexts/AwsCognitoContext.tsx (AwsCognitoContext.tsx:31) at __webpack_require__ (bootstrap:853) at fn (bootstrap:150) at Module../src/hooks/useAuth.ts (useAuth.ts:1) at __webpack_require__ (bootstrap:853) at fn (bootstrap:150) at Module../src/App.tsx (user.ts:84) at __webpack_require__ (bootstrap:853) at fn (bootstrap:150) at Module../src/index.tsx (i18n.ts:17) at __webpack_require__ (bootstrap:853) at fn (bootstrap:150) at Object.1 (typography.ts:109) at __webpack_require__ (bootstrap:853) at checkDeferredModules (bootstrap:45) at Array.webpackJsonpCallback [as push] (bootstrap:32) at main.chunk.js:1 ```

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

https://transfer.sh/Hyf0AJ/localhost.har

aws-eddy commented 2 years ago

Hey @henobi, I am reproducing this now. Give me at most 2 days and I will get back to you. Are you running into the issue for a mobile or web app?

aws-eddy commented 2 years ago

I was able to successfully setup my social signin with facebook. What issues are you running to specifically? I was only able to login via web.

henobi commented 2 years ago

Hi @evcodes, thank you for reproducing this issue.

The error I'm running into is

Redirect from hosted ui to localhost: http://localhost:8080/?error_description=Bad+id_token+issuer+https%3A%2F%2Fwww.facebook.com&state=AQeD5afDRRx2ns2mMVM9rWJfNKPhr9U8&error=invalid_request

error_description: Bad id_token issuer https://www.facebook.com
state: AQeD5afDRRx2ns2mMVM9rWJfNKPhr9U8
error: invalid_request

henobi commented 2 years ago

And also here: https://forums.aws.amazon.com/thread.jspa?threadID=347111

aws-eddy commented 2 years ago

Are you running into this issue on the browser, react native, or ios?

henobi commented 2 years ago

In the browser (React)

chrisbonifacio commented 2 years ago

@henobi can you try re-entering your FB App ID and App Secret through the CLI by running amplify update auth?

If you can get a jwt from FB, can you check the token's payload at https://jwt.io and see what the iss (Issuer URL) property might be? Maybe it's changed from Facebook?

Also, can you share the code you're using to login with Facebook? This is to check whether you are using the Identity Pool or User Pool approach.

BigPun86 commented 2 years ago

+1

sammartinez commented 2 years ago

Hey @henobi, did @chrisbonifacio comment above resolve your issue? Please let us know

aws-eddy commented 2 years ago

Closing as there was no response, if the issue was not resolved please feel free to re-open the ticket

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 *-help channels or Discussions for those types of questions.

aws-amplify / amplify-js