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
910 stars 290 forks source link

withAuthenticator Hub event does not recognize a user not already signed up #297

Closed choetech160 closed 3 years ago

choetech160 commented 3 years ago

Before opening, please confirm:

JavaScript Framework

React

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

``` # Put output below this line System: OS: Linux 5.11 Pop!_OS 21.04 CPU: (32) x64 AMD Ryzen 9 5950X 16-Core Processor Memory: 5.36 GB / 62.81 GB Container: Yes Shell: 5.8 - /usr/bin/zsh Binaries: Node: 14.17.3 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 7.20.3 - /usr/local/bin/npm Browsers: Chrome: 92.0.4515.107 Firefox: 90.0.2 npmPackages: @aws-amplify/cli: ^4.50.2 => 4.50.2 @aws-amplify/ui-react: ^1.2.0 => 1.2.0 @iconify-icons/fa-brands: ^1.1.0 => 1.1.0 @iconify/react: ^1.1.4 => 1.1.4 @material-ui/core: ^4.11.4 => 4.11.4 @material-ui/icons: ^4.11.2 => 4.11.2 @material-ui/lab: ^4.0.0-alpha.58 => 4.0.0-alpha.58 @stripe/react-stripe-js: ^1.4.0 => 1.4.1 @stripe/stripe-js: ^1.15.0 => 1.15.0 @stripe/stripe-react-native: ^0.1.4 => 0.1.4 @testing-library/jest-dom: ^5.12.0 => 5.12.0 @testing-library/react: ^11.2.6 => 11.2.6 @testing-library/user-event: ^12.8.3 => 12.8.3 aws-amplify: ^3.4.0 => 3.4.0 aws-amplify-react: ^4.2.32 => 4.2.32 axios: ^0.21.1 => 0.21.1 bootstrap: ^5.0.0 => 5.0.0 new-plugin-package: 1.0.0 node-sass: ^5.0.0 => 5.0.0 react: ^17.0.2 => 17.0.2 (16.14.0) react-advanced-news-ticker: ^1.0.1 => 1.0.1 react-bootstrap: ^1.5.2 => 1.5.2 react-bootstrap/AbstractNav: undefined () react-bootstrap/AbstractNavItem: undefined () react-bootstrap/Accordion: undefined () react-bootstrap/AccordionCollapse: undefined () react-bootstrap/AccordionContext: undefined () react-bootstrap/AccordionToggle: undefined () react-bootstrap/Alert: undefined () react-bootstrap/Badge: undefined () react-bootstrap/BootstrapModalManager: undefined () react-bootstrap/Breadcrumb: undefined () react-bootstrap/BreadcrumbItem: undefined () react-bootstrap/Button: undefined () react-bootstrap/ButtonGroup: undefined () react-bootstrap/ButtonToolbar: undefined () react-bootstrap/Card: undefined () react-bootstrap/CardColumns: undefined () react-bootstrap/CardContext: undefined () react-bootstrap/CardDeck: undefined () react-bootstrap/CardGroup: undefined () react-bootstrap/CardImg: undefined () react-bootstrap/Carousel: undefined () react-bootstrap/CarouselCaption: undefined () react-bootstrap/CarouselItem: undefined () react-bootstrap/CloseButton: undefined () react-bootstrap/Col: undefined () react-bootstrap/Collapse: undefined () react-bootstrap/Container: undefined () react-bootstrap/Dropdown: undefined () react-bootstrap/DropdownButton: undefined () react-bootstrap/DropdownItem: undefined () react-bootstrap/DropdownMenu: undefined () react-bootstrap/DropdownToggle: undefined () react-bootstrap/ElementChildren: undefined () react-bootstrap/Fade: undefined () react-bootstrap/Feedback: undefined () react-bootstrap/Figure: undefined () react-bootstrap/FigureCaption: undefined () react-bootstrap/FigureImage: undefined () react-bootstrap/Form: undefined () react-bootstrap/FormCheck: undefined () react-bootstrap/FormCheckInput: undefined () react-bootstrap/FormCheckLabel: undefined () react-bootstrap/FormContext: undefined () react-bootstrap/FormControl: undefined () react-bootstrap/FormFile: undefined () react-bootstrap/FormFileInput: undefined () react-bootstrap/FormFileLabel: undefined () react-bootstrap/FormGroup: undefined () react-bootstrap/FormLabel: undefined () react-bootstrap/FormText: undefined () react-bootstrap/Image: undefined () react-bootstrap/InputGroup: undefined () react-bootstrap/Jumbotron: undefined () react-bootstrap/ListGroup: undefined () react-bootstrap/ListGroupItem: undefined () react-bootstrap/Media: undefined () react-bootstrap/Modal: undefined () react-bootstrap/ModalBody: undefined () react-bootstrap/ModalContext: undefined () react-bootstrap/ModalDialog: undefined () react-bootstrap/ModalFooter: undefined () react-bootstrap/ModalHeader: undefined () react-bootstrap/ModalTitle: undefined () react-bootstrap/Nav: undefined () react-bootstrap/NavContext: undefined () react-bootstrap/NavDropdown: undefined () react-bootstrap/NavItem: undefined () react-bootstrap/NavLink: undefined () react-bootstrap/Navbar: undefined () react-bootstrap/NavbarBrand: undefined () react-bootstrap/NavbarCollapse: undefined () react-bootstrap/NavbarContext: undefined () react-bootstrap/NavbarToggle: undefined () react-bootstrap/Overlay: undefined () react-bootstrap/OverlayTrigger: undefined () react-bootstrap/PageItem: undefined () react-bootstrap/Pagination: undefined () react-bootstrap/Popover: undefined () react-bootstrap/PopoverContent: undefined () react-bootstrap/PopoverTitle: undefined () react-bootstrap/ProgressBar: undefined () react-bootstrap/ResponsiveEmbed: undefined () react-bootstrap/Row: undefined () react-bootstrap/SafeAnchor: undefined () react-bootstrap/SelectableContext: undefined () react-bootstrap/Spinner: undefined () react-bootstrap/SplitButton: undefined () react-bootstrap/Switch: undefined () react-bootstrap/Tab: undefined () react-bootstrap/TabContainer: undefined () react-bootstrap/TabContent: undefined () react-bootstrap/TabContext: undefined () react-bootstrap/TabPane: undefined () react-bootstrap/Table: undefined () react-bootstrap/Tabs: undefined () react-bootstrap/ThemeProvider: undefined () react-bootstrap/Toast: undefined () react-bootstrap/ToastBody: undefined () react-bootstrap/ToastContext: undefined () react-bootstrap/ToastHeader: undefined () react-bootstrap/ToggleButton: undefined () react-bootstrap/ToggleButtonGroup: undefined () react-bootstrap/Tooltip: undefined () react-bootstrap/createChainedFunction: undefined () react-bootstrap/createWithBsPrefix: undefined () react-bootstrap/divWithClassName: undefined () react-bootstrap/helpers: undefined () react-bootstrap/transitionEndListener: undefined () react-bootstrap/triggerBrowserReflow: undefined () react-bootstrap/types: undefined () react-bootstrap/usePopperMarginModifiers: undefined () react-bootstrap/useWrappedRefWithWarning: undefined () react-copy-to-clipboard: ^5.0.3 => 5.0.3 react-dom: ^17.0.2 => 17.0.2 react-icons: ^4.2.0 => 4.2.0 react-loadingg: ^1.7.2 => 1.7.2 react-router-dom: ^5.2.0 => 5.2.0 react-scripts: 4.0.3 => 4.0.3 react-simple-animate: ^3.3.12 => 3.3.12 react-spring: ^9.0.0-rc.3 => 9.0.0-rc.3 react-toast-notifications: ^2.4.4 => 2.4.4 react-toastify: ^7.0.4 => 7.0.4 react-transition-group: ^4.4.1 => 4.4.1 react-transition-group/CSSTransition: undefined () react-transition-group/ReplaceTransition: undefined () react-transition-group/SwitchTransition: undefined () react-transition-group/Transition: undefined () react-transition-group/TransitionGroup: undefined () react-transition-group/TransitionGroupContext: undefined () react-transition-group/config: undefined () semantic-ui-css: ^2.4.1 => 2.4.1 semantic-ui-react: ^2.0.3 => 2.0.3 stripe: ^8.149.0 => 8.149.0 style-components: ^0.1.0 => 0.1.0 styled-components: ^5.3.0 => 5.3.0 (4.4.1) styled-components/macro: undefined () styled-components/native: undefined () styled-components/primitives: undefined () web-vitals: ^1.1.1 => 1.1.1 npmGlobalPackages: 12: 1.0.2 @aws-amplify/cli: 5.3.0 add: 2.0.6 aws-amplify: 4.0.0 browserify: 17.0.0 create-react-app: 4.0.3 expo-cli: 4.7.2 ionic: 5.4.16 n: 7.3.0 npm: 7.20.3 update: 0.7.4 yarn: 1.22.10 ```

Describe the bug

When using HoC and listening on auth event using Hub in a parent component and using withAuthenticator to sign up a new user, I get an error saying the user already exists, but it doesn't. In fact, the user get created. Here is the response object from Hub auth event : 

{
   "channel":"auth",
   "payload":{
      "event":"signUp_failure",
      "data":{
         "code":"UsernameExistsException",
         "name":"UsernameExistsException",
         "message":"User already exists"
      },
      "message":"random_user_test_52 failed to signup"
   },
   "source":"Auth",
   "patternInfo":[]
}

Expected behavior

Create a user with a success message or at least not an error message

Reproduction steps

create a simple react app with a withAuthenticator component. I updated amplify to the latest version (5.3.0)

Code Snippet

Component Dashboard is exported as such

export default withAuthenticator(Dashboard, { theme: authTheme });

authTheme is as following:

const authTheme = {
    ...AmplifyTheme,
    sectionHeader:{
      ...AmplifyTheme.sectionHeader,
      color:'#000',
      backgroundColor: '#fff',
      fontSize: '18px',
      border: '0px solid #C4C4C4',
    //   fontFamily: `"PT Sans", sans-serif`,
      fontFamily: `"Amazon Ember", Arial`,
    },
    formSection: {
      ...AmplifyTheme.formSection,
      color: '#000',
      backgroundColor: '#fff',
      color: '#fff',
      fontSize: '16px',
      border: '0px solid #C4C4C4',
    },
    input: {
        ...AmplifyTheme.input,
        color: '#595959',
        fontSize: '16px',
        border: '0px solid #C4C4C4',
    },
    sectionFooter: {
      ...AmplifyTheme.sectionFooter,
      color: '#000',
      backgroundColor: '#fff',
      fontSize: '18px',
      border: '0px solid #C4C4C4',
    },
    button: {
        ...AmplifyTheme.button,
        width: '80%',
        height: '50px',
        marginTop: '10px',
        borderRadius: '2px',
        background: '#276afb',//"linear-gradient(90deg,rgb(39, 176, 255) 0%,rgb(0, 232, 236) 100%)",
        outline: 'none',
        border: 'none',
        color: '#fff',
        fontSize: '18px',
        width: '100%'
    }
  }

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

Before we check that the user doesn't exist before

Then we proceed to use the withAuthenticator HoC on a component. In my case, I had some custom styling. https://user-images.githubusercontent.com/59520706/128574461-6d7a39fe-46d0-4e37-b885-39f8329294d1.mov

Here is the result. In the video, we can see the error thrown by Hub

Hub.listen('auth', res => {
        console.warn("Auth event: ", res)

...

after

choetech160 commented 3 years ago

Right, so after looking into this, I figured that the Domain name was not configured. The confirmation email was never sent.
The error provided is a bit misleading.
Closing the issue.