Amplify cognito signin function is not working on production but works on local

abdeleo17 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

Next.js

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

Describe the bug

Auth.signIn() function is not even getting triggered on production but works perfectly on local env. I am using @aws-amplify/auth and @aws-amplify/core packages and updated the latest version but still throwing the same error.

chrisbonifacio commented 2 years ago

Hi @abdeleo17 👋 thanks for raising this issue. I might need some more information to figure out why you're experiencing this issue.

Can you please share the contents of your package.json file?
Can you please share any instances of Amplify.configure or Auth.configure in your code?
Please also add this line where you are configuring Amplify and/or Auth and share the logs, might show us some useful info as to why the login is failing.

Amplify.Logger.LOG_LEVEL = "DEBUG";

Otherwise, if you can, please provide some minimal steps to reproduce the issue or a sample repository.

kgoyal98 commented 2 years ago

I am facing the same issue too.

kgoyal98 commented 2 years ago

package.json

{
    "name": "ui",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@aws-amplify/auth": "^4.4.4",
        "@aws-amplify/ui-react": "^2.10.4",
        "@babel/preset-typescript": "^7.16.7",
        "@emotion/react": "^11.8.2",
        "@emotion/styled": "^11.8.1",
        "@mui/core": "^5.0.0-alpha.54",
        "@mui/icons-material": "^5.5.1",
        "@mui/lab": "^5.0.0-alpha.74",
        "@mui/material": "^5.5.2",
        "@sentry/react": "^6.19.1",
        "@sentry/tracing": "^6.19.1",
        "@testing-library/jest-dom": "^5.16.2",
        "@testing-library/react": "^12.1.4",
        "@testing-library/user-event": "^13.5.0",
        "@types/jest": "^27.4.1",
        "@types/node": "^17.0.22",
        "@types/react": "^17.0.42",
        "@types/react-dom": "^17.0.14",
        "@types/react-router-dom": "^5.3.3",
        "assert": "^2.0.0",
        "aws-amplify": "^4.3.17",
        "aws-sdk": "^2.1098.0",
        "bootstrap": "^5.1.3",
        "browser-image-compression": "^1.0.17",
        "core-js": "^3.21.1",
        "i18next-browser-languagedetector": "^6.1.3",
        "i18next-http-backend": "^1.4.0",
        "query-string": "^7.1.1",
        "quill": "^1.3.7",
        "react": "^17.0.2",
        "react-bootstrap": "^2.2.1",
        "react-dom": "^17.0.2",
        "react-easy-crop": "^4.1.4",
        "react-hook-form": "^7.28.1",
        "react-i18next": "^11.16.1",
        "react-icons": "^4.3.1",
        "react-infinite-scroll-component": "^6.1.0",
        "react-router-dom": "^6.2.2",
        "react-scripts": "^5.0.0",
        "react-toastify": "^8.2.0",
        "resize-img": "^2.0.0",
        "sass": "^1.49.9",
        "styled-components": "^5.3.3",
        "typescript": "^4.6.2",
        "web-vitals": "^2.1.4"
    },
    "scripts": {
        "start": "PORT=3000 HTTPS=true react-scripts --max_old_space_size=8128 start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "lint": "eslint --ignore-path .eslintignore --ext .js,.ts .",
        "updateAppsyncOperations": "amplify api gql-compile && amplify codegen && babel src/graphql --config-file ./babel.config.json --extensions '.ts' -d ./amplify/backend/function/telebuffappsyncOperations/opt/graphql/"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "devDependencies": {
        "@babel/cli": "^7.17.6",
        "@babel/core": "^7.17.8",
        "@babel/preset-env": "^7.16.11",
        "@types/styled-components": "^5.1.24",
        "@typescript-eslint/eslint-plugin": "^5.16.0",
        "@typescript-eslint/parser": "^5.16.0",
        "eslint": "^8.11.0",
        "eslint-plugin-react": "^7.29.4"
    }
}

Instances of Amplify.configure


const 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}$/
  )
);

// Assuming you have two redirect URIs, and the first is for localhost and second is for production
const [
  localRedirectSignIn,
  productionRedirectSignIn,
] = awsconfig.oauth.redirectSignIn.split(",");

const [
  localRedirectSignOut,
  productionRedirectSignOut,
] = awsconfig.oauth.redirectSignOut.split(",");

const updatedAwsConfig = {
  ...awsconfig,
  oauth: {
    ...awsconfig.oauth,
    redirectSignIn: !isLocalhost ? productionRedirectSignIn : localRedirectSignIn,
    redirectSignOut: !isLocalhost ? productionRedirectSignOut : localRedirectSignOut,
  }
}

Amplify.configure(updatedAwsConfig);

No instances of Auth.configure

kgoyal98 commented 2 years ago

@chrisbonifacio any updates on this?

chrisbonifacio commented 2 years ago

@kgoyal98 can you add the line of code I mentioned in my previous comment to your app (right before Amplify.configure) and share the console logs? Might be able to tell us why the signin isn't working.

Looks like you are using an OAuth flow. Are both logging in through a social provider and username/password not working?

Also, by "production" do we mean a live hosted app (if so, if you can provide a link it might be helpful as well) or just another amplify environment called "production" and you're seeing the same behavior locally when switching between envs via amplify checkout env <envName>?

kgoyal98 commented 2 years ago

On localhost, both Facebook and username/password are working. On production (i.e. live hosted app) Facebook is not working but username/password is working.

kgoyal98 commented 2 years ago

@chrisbonifacio should I add the log line and deploy to aws? On localhost won't help because FB login is working on localhost.

PGuimarais commented 2 years ago

@chrisbonifacio Getting the same error over here with Nextjs in a production build using Google OAuth.

I'm successfully routed to the Google signin page, and on the redirect, Amplify Hub does not appear to be receiving any auth events on the frontend - although the user is created in Cognito and all the auth triggers are called and work fine. Logging in with username/password is also working fine.

After setting LOG_LEVEL Amplify.Logger.LOG_LEVEL = "DEBUG"; I'm getting the following logs repeating.

[DEBUG] 16:26.877 AuthClass - Getting current session
_app-0e8cd9095f5c42fc.js:1 [DEBUG] 16:26.878 AuthClass - Failed to get user from user pool
_app-0e8cd9095f5c42fc.js:1 [DEBUG] 16:26.878 AuthClass - Failed to get the current user No current user

This is working in my development environment. It seems there are no events coming into the following code in production:

Hub.listen("auth", ({payload: {event, data}}) => {
      console.log('event: ', event)
      console.log('data: ', data)

      switch (event) {
        case "signIn":
          router.push('/dashboard')
          break;
        case "cognitoHostedUI":
        case "signOut":
        case "signIn_failure":
        case "cognitoHostedUI_failure":
          break;
      }
    });

chrisbonifacio commented 2 years ago

could you run amplify env list and share the output?

Also, have you added the hosted url to your social provider's allowed callback urls? you should have two entry points to your app, one for localhost and one for the hosted site.

kgoyal98 commented 2 years ago

$ amplify env list

| Environments |
| ------------ |
| *staging     |

These are my FB login settings -

kgoyal98 commented 2 years ago

@chrisbonifacio Any updates on this?

chrisbonifacio commented 2 years ago

Hi @kgoyal98 it looks like your production Allowed Domain might be incorrect. It should be the same URI to your Cognito Hosted UI but without the /oauth2/idpresponse path.

For example, these are my settings on a similar project with Facebook Login.

Try adjusting your Allowed Domains to the Cognito Hosted UI link without the /oauth2/idpresponse path and let me know if the issue persists.

kgoyal98 commented 2 years ago

@chrisbonifacio If this was the issue, it would not work locally too.

Still I did what you suggested and getting the same issue.

chrisbonifacio commented 2 years ago

An update here. For @kgoyal98, the issue had to do with their rewrite and redirect rules.

{
    "source": "https://telebuff.in",
    "target": "https://www.telebuff.in",
-   "status": "302",
+   "status: "200",
    "condition": null
}

Changing status from 302 to 200 fixed the issue.

Closing this as we have not heard back from the original commenter. If anyone else is experiencing this issue and the solution mentioned above does not work, please create a new issue with the details of your Amplify configuration, Auth code usage, and environment information. Thank you!

sachsom95 commented 2 years ago

This seems to have solved my issue as well. I am using google with web application. This might needed to be noted down in amplify docs somewhere as a gotcha for people developing SPA. However I will not push this to production without analysing the full implications or issues arising from using a 200 instead of 302 redirect

kmallari commented 1 year ago

An update here. For @kgoyal98, the issue had to do with their rewrite and redirect rules.
{
    "source": "https://telebuff.in",
    "target": "https://www.telebuff.in",
-   "status": "302",
+   "status: "200",
    "condition": null
}
Changing status from 302 to 200 fixed the issue.

Closing this as we have not heard back from the original commenter. If anyone else is experiencing this issue and the solution mentioned above does not work, please create a new issue with the details of your Amplify configuration, Auth code usage, and environment information. Thank you!

Hello, I'm current experiencing this issue and am very new to Amplify. I'm confused where there rewrite and redirect rules were configured since OP did not mention these in any of their posts?

tannerabread commented 1 year ago

Hi @kmallari this issue has a few different things going on, can you explain what exactly is the issue you are experiencing?

kmallari commented 1 year ago

I found how you change the redirect rules in the Amplify management console and fixed the issue. However, I'm curious why changing the status from 302 to 200 fixes this issue?

tannerabread commented 1 year ago

@kmallari I wasn't the one that worked on this issue originally so this is my best guess, but the 302 code is a temporary redirect which might break the oauth flow. Cognito redirects back to the app once with a code to exchange for credentials but another redirect (302) changes the request location and then that code is lost

gstaykov commented 7 months ago

I'm experiencing the same problem with the latest version "aws-amplify": "^6.0.13". How did you resolve this ?

nadetastic commented 7 months ago

Hi @gstaykov do you mind opening a new bug report to better investigate your issue?

https://github.com/aws-amplify/amplify-js/issues/new/choose

gstaykov commented 7 months ago

@nadetastic done: https://github.com/aws-amplify/amplify-js/issues/12927

aws-amplify / amplify-js