Customize AWS Amplify Authentication UI for React

** Which Category is your question related to? ** Auth

** What AWS Services are you utilizing? ** Cognito

** Provide additional details e.g. code snippets ** 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.

I was following this tutorial (https://github.com/richardzcode/Journal-AWS-Amplify-Tutorial) until a realize the versions for aws-amplify and aws-amplify-react were different.

I tried to read the documentation about it but is too superficial, I can’t get it, really. https://aws-amplify.github.io/amplify-js/media/authentication_guide#create-your-own-ui

I tried to look up directly in the aws-amplify-react source code and reproduce the same pattern that I found there, no success.

Here my Auth component:

import { Authenticator } from 'aws-amplify-react'

  import {
    LoginForm,
    RegisterForm,
    ConfirmRegisterForm,
    VerifyContactForm,
    ForgotPasswordForm
  } from '../components'

  export default class Login extends Component {
    render () {
      return (
        <Authenticator hideDefault>
          <LoginForm />
          <RegisterForm />
          <ConfirmRegisterForm />
          <VerifyContactForm />
          <ForgotPasswordForm />
        </Authenticator>
      )
    }
  }

And here my LoginForm:

    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->', JSON.stringify(this.props))
      }

      signIn () {
        const { username, password } = this.inputs
        logger.debug(`username: ${username}`)

        Auth.signIn(username, password)
        .then(user => this.changeState('signedIn', user))
        .catch(err => this.error(err))
      }

      showComponent (theme) {        
        const { hide = [] } = this.props

       if (hide && hide.includes(LoginForm)) {
        return null
       }

       return (
         {/* My Login Form */}
       )
    }
  }
  export default LoginForm

When I go to the login form the authState is always as loading. I can’t make them work properly because of this.

Any help is welcome.

[sophieevnex]

I found this tutorial incredibly useful, it shows you how to customise your sign in component by extending the aws-amplify SignIn component: https://dev.to/kylegalbraith/how-to-easily-customize-the-aws-amplify-authentication-ui-42pl

[ymaghzaz]

I created a lib that help you customise amplify authentication UI, please check https://github.com/ysfmag/aws-amplify-react-custom-ui