search

aws-amplify / amplify-ui

Amplify UI is a collection of accessible, themeable, performant React (and more!) components that can connect directly to the cloud.
https://ui.docs.amplify.aws
Apache License 2.0
896 stars 285 forks source link

Amplify error: User is not confirmed #4542

Closed christianswanepoel closed 10 months ago

christianswanepoel commented 1 year ago

Before opening, please confirm:

JavaScript Framework

Next.js

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

``` System: OS: macOS 14.0 CPU: (8) arm64 Apple M1 Memory: 141.45 MB / 8.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 20.1.0 - ~/node_modules/.bin/node Yarn: 1.22.19 - /opt/homebrew/bin/yarn npm: 8.19.2 - ~/.nvm/versions/node/v18.12.0/bin/npm Browsers: Brave Browser: 117.1.58.137 Chrome: 117.0.5938.149 Safari: 17.0 npmPackages: @ampproject/toolbox-optimizer: undefined () @aws-amplify/ui-react: ^4.4.1 => 4.6.4 @aws-amplify/ui-react-internal: undefined () @babel/core: undefined () @babel/runtime: 7.15.4 @chakra-ui/icons: ^2.0.19 => 2.0.19 @chakra-ui/react: ^2.6.1 => 2.7.1 @cypress/angular: 0.0.0-development @cypress/mount-utils: 0.0.0-development @cypress/react: 0.0.0-development @cypress/react18: 0.0.0-development @cypress/svelte: 0.0.0-development @cypress/vue: 0.0.0-development @cypress/vue2: 0.0.0-development @edge-runtime/cookies: 3.2.1 @edge-runtime/ponyfill: 2.3.0 @edge-runtime/primitives: 3.0.1 @fontsource/inter: ^4.5.15 => 4.5.15 @hapi/accept: undefined () @napi-rs/triples: undefined () @next/bundle-analyzer: ^13.4.1 => 13.4.8 @next/font: undefined () @next/react-dev-overlay: undefined () @opentelemetry/api: undefined () @segment/ajv-human-errors: undefined () @sumsub/websdk: ^1.3.7 => 1.4.1 @sumsub/websdk-react: ^1.3.7 => 1.4.0 @testing-library/jest-dom: ^5.16.5 => 5.16.5 @testing-library/react: ^14.0.0 => 14.0.0 @types/luxon: ^3.3.0 => 3.3.0 @types/react: ^18.2.0 => 18.2.14 @typescript-eslint/eslint-plugin: ^5.54.0 => 5.61.0 @vercel/nft: undefined () @vercel/og: undefined () acorn: undefined () amphtml-validator: undefined () anser: undefined () arg: undefined () assert: undefined () async-retry: undefined () async-sema: undefined () aws-amplify: ^5.0.22 => 5.3.3 aws-rum-web: ^1.13.7 => 1.13.7 babel-packages: undefined () browserify-zlib: undefined () browserslist: undefined () buffer: undefined () bytes: undefined () chalk: undefined () ci-info: undefined () cli-select: undefined () client-only: 0.0.1 comment-json: undefined () compression: undefined () conf: undefined () constants-browserify: undefined () content-disposition: undefined () content-type: undefined () cookie: undefined () cookies-next: ^2.1.1 => 2.1.2 cross-spawn: undefined () crypto-browserify: undefined () css.escape: undefined () cypress: ^12.13.0 => 12.16.0 data-uri-to-buffer: undefined () debug: undefined () devalue: undefined () domain-browser: undefined () dotenv: ^16.0.3 => 16.3.1 dotenv-cli: ^6.0.0 => 6.0.0 edge-runtime: undefined () eslint: ^8.35.0 => 8.44.0 eslint-config-next: ^13.2.1 => 13.4.8 eslint-config-prettier: ^8.6.0 => 8.8.0 eslint-plugin-jsx-a11y: ^6.7.1 => 6.7.1 eslint-plugin-prettier: ^4.2.1 => 4.2.1 eslint-plugin-react: ^7.32.2 => 7.32.2 eslint-plugin-react-hooks: ^4.6.0 => 4.6.0 eslint-plugin-security: ^1.7.1 => 1.7.1 events: undefined () find-cache-dir: undefined () find-up: undefined () fresh: undefined () get-orientation: undefined () glob: undefined () gzip-size: undefined () http-proxy: undefined () http-proxy-agent: undefined () https-browserify: undefined () https-proxy-agent: undefined () husky: ^8.0.3 => 8.0.3 i18next: ^23.1.0 => 23.2.7 icss-utils: undefined () ignore-loader: undefined () image-size: undefined () is-animated: undefined () is-docker: undefined () is-wsl: undefined () jest: ^29.4.3 => 29.6.0 jest-environment-jsdom: ^29.4.3 => 29.6.0 jest-fetch-mock: ^3.0.3 => 3.0.3 jest-worker: undefined () json5: undefined () jsonwebtoken: undefined () lint-staged: ^13.1.2 => 13.2.3 loader-runner: undefined () loader-utils: undefined () lodash.curry: undefined () lru-cache: undefined () luxon: ^3.2.1 => 3.3.0 micromatch: undefined () mini-css-extract-plugin: undefined () msw: ^1.2.1 => 1.2.2 nanoid: undefined () native-url: undefined () neo-async: undefined () next: ^13.3.2 => 13.4.8 next-i18next: ^14.0.0 => 14.0.0 next-i18next-create-client: undefined () next-pwa: ^5.6.0 => 5.6.0 node-fetch: undefined () node-html-parser: undefined () ora: undefined () os-browserify: undefined () otplib: ^12.0.1 => 12.0.1 p-limit: undefined () path-browserify: undefined () platform: 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 () prettier: ^2.8.4 => 2.8.8 process: undefined () punycode: undefined () querystring-es3: undefined () raw-body: undefined () react: ^18.2.0 => 18.2.0 react-builtin: undefined () react-dom: ^18.2.0 => 18.2.0 react-dom-builtin: undefined () react-dom-experimental-builtin: undefined () react-experimental-builtin: undefined () react-google-recaptcha: ^3.1.0 => 3.1.0 react-hook-form: ^7.43.9 => 7.45.1 react-i18next: ^13.0.0 => 13.0.1 react-icons: ^4.7.1 => 4.10.1 react-idle-timer: ^5.6.2 => 5.7.2 react-is: 18.2.0 react-markdown: ^8.0.7 => 8.0.7 react-refresh: 0.12.0 react-server-dom-webpack-builtin: undefined () react-server-dom-webpack-experimental-builtin: undefined () react-use-cookie: ^1.4.0 => 1.4.0 react-use-intercom: ^5.1.4 => 5.1.4 regenerator-runtime: 0.13.4 sass-loader: undefined () scheduler-builtin: undefined () scheduler-experimental-builtin: undefined () schema-utils: undefined () semver: undefined () send: undefined () server-only: 0.0.1 setimmediate: undefined () shell-quote: undefined () source-map: undefined () stacktrace-parser: undefined () start-server-and-test: ^2.0.0 => 2.0.0 stream-browserify: undefined () stream-http: undefined () string-hash: undefined () string_decoder: undefined () strip-ansi: undefined () swr: ^2.0.4 => 2.2.0 tar: undefined () terser: undefined () text-table: undefined () timers-browserify: undefined () tty-browserify: undefined () ua-parser-js: undefined () undici: undefined () unistore: undefined () util: undefined () vm-browserify: undefined () watchpack: undefined () web-vitals: undefined () webpack: undefined () webpack-sources: undefined () ws: undefined () zod: undefined () npmGlobalPackages: corepack: 0.14.2 npm: 8.19.2 ```

Describe the bug

Should the user refresh or close the browser window before entering their emailed confirmation code, and return to app and logging in: cognito will return a 400 code with body...

 {
 __type: UserNotConfirmedException,
 messge: "User is not confirmed."
 }

Amplify Authenticator displays on screen an incorrect message stating a TEXT message was sent.

Expected behavior

When registering a new user and entering the emailed code everything works as expected and Cognito returns 200 with body...

 { ...UserConfiremd: false }

Amplify Authenticator displays the correct message stating an EMAIL message was sent.

Reproduction steps

Create a user and refresh the browser window, then login using the same details as when registering.

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

To make the issue worse is that both the above examples will return via ConfirmSignUp.

nadetastic commented 1 year ago

Hi @christianswanepoel thank you for opening this issue. It looks like you are using the Authenticator UI component with this issue. I'm transferring this over to the UI repo for better assistance.

esauerbo commented 1 year ago

Hey @christianswanepoel, thanks for bringing this to our attention and sorry for the delay. We have been able to reproduce this issue and will be working on a fix.

reesscot commented 1 year ago

Hi @christianswanepoel, When you refresh the application all client side state will be lost, thus making it impossible for us to know where we sent the message. One possibility would be to make the message more generic if we don't know which method was used (text or email). Does this sound like an acceptable solution?

christianswanepoel commented 1 year ago

Hi @reesscot Yeah thats more or less the workaround we have at moment. But our implementation is supper hacky...

const components = {
    Header: () => <Spacer pt="8" />,
    ConfirmSignUp: {
      Header() {
        if (
          route === "confirmSignUp" &&
          !hasValidationErrors &&
          !codeDeliveryDetails
        ) {
          return (
            <>
              <Heading>{t("common:welcome_back")}</Heading>
              <Text>{t("common:welcome_back_text")}</Text>
              <style>{`.amplify-text.amplify-authenticator__subtitle { display: none;}`}</style>
            </>
          );
        }
        return null;
      },
    },
Note the display none as the "text" is nested in body - `<style>{`.amplify-text.amplify-authenticator__subtitle { display: none;}`}</style>`
calebpollman commented 10 months ago

@christianswanepoel The Authenticator has been updated to send the confirmation code details and render the sign in confirmation UI for an end user that has signed in with unconfirmed credentials in @aws-amplify/ui-react@latest. Closing this issue, please open a new issue if needed as we do not monitor closed issues