Amplify error: User is not confirmed

[christianswanepoel]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• 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

 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]

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]

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]

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]

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]

@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