title: Customize AWS Amplify Authentication UI for React
body: <p>I'm trying to create a customized UI for all the pages related to the authentication on a React app. I need a big form with various fields to be inserted when the user is signing up.</p>
  
  <p>I was following this tutorial (<a href="https://github.com/richardzcode/Journal-AWS-Amplify-Tutorial" rel="noreferrer">https://github.com/richardzcode/Journal-AWS-Amplify-Tutorial</a>) until a realize the versions for <code>aws-amplify</code> and <code>aws-amplify-react</code> were different.</p>
  
  <p>I tried to read the documentation about it but is too superficial, I can't get it. <a href="https://aws-amplify.github.io/amplify-js/media/authentication_guide#create-your-own-ui" rel="noreferrer">https://aws-amplify.github.io/amplify-js/media/authentication_guide#create-your-own-ui</a></p>
  
  <p>I tried to look up directly in the code and reproduce the same pattern that I found there, no success.</p>
  
  <p>Here my <code>Auth</code> component:</p>
  
  <pre><code>  import { Authenticator } from 'aws-amplify-react'
  
    import {
      LoginForm,
      RegisterForm,
      ConfirmRegisterForm,
      VerifyContactForm,
      ForgotPasswordForm
    } from '../components'
  
    export default class Login extends Component {
      render () {
        return (
          &lt;Authenticator hideDefault&gt;
            &lt;LoginForm /&gt;
            &lt;RegisterForm /&gt;
            &lt;ConfirmRegisterForm /&gt;
            &lt;VerifyContactForm /&gt;
            &lt;ForgotPasswordForm /&gt;
          &lt;/Authenticator&gt;
        )
      }
    }
  </code></pre>
  
  <p>And here my <code>LoginForm</code>:</p>
  
  <pre><code>    import React from 'react'
      import { Button, Form, Grid, Header, Image, Message, Segment } from 'semantic-ui-react'
      import Auth from '@aws-amplify/auth'
      import { ConsoleLogger as Logger } from '@aws-amplify/core'
      import { AuthPiece } from 'aws-amplify-react'
  
      const logger = new Logger('LoginForm')
  
      class LoginForm extends AuthPiece {
        constructor (props) {
          super(props)
          this.signIn = this.signIn.bind(this)
          this._validAuthStates = ['signIn', 'signedOut', 'signedUp']
          this.state = {}
          console.log('this.props-&gt;', JSON.stringify(this.props))
        }
  
        signIn () {
          const { username, password } = this.inputs
          logger.debug(`username: ${username}`)
  
          Auth.signIn(username, password)
          .then(user =&gt; this.changeState('signedIn', user))
          .catch(err =&gt; this.error(err))
        }
  
        showComponent (theme) {        
          const { hide = [] } = this.props
  
         if (hide &amp;&amp; hide.includes(LoginForm)) {
          return null
         }
  
         return (
           ...
         )
      }
    }
    export default LoginForm
  </code></pre>
  
  <p>When I go to the login form the <code>authState</code> is always as <code>loading</code>. I can't make them work properly because of this.</p>
  
  <p>Any help is welcome.</p>