SignIn component

The SignIn component will render the sign in form. This component will accept two props, one for updating the form state (updateFormState) and one for calling the signIn function.

import React from 'react'
import Button from './Button'
import { styles } from './Form'

function SignIn({ signIn, updateFormState }) {
  return (
    <div style={styles.container}>
      <input
        name='username'
        onChange={e => {e.persist();updateFormState(e)}}
        style={styles.input}
        placeholder='username'
      />
      <input
        type='password'
        name='password'
        onChange={e => {e.persist();updateFormState(e)}}
        style={styles.input}
        placeholder='password'
      />
      <Button onClick={signIn} title="Sign In" />
    </div>
  )
}

export default SignIn

SignUp component

The SignUp component will render the sign up form. This component will accept two props, one for updating the form state (updateFormState) and one for calling the signUp function.

import React from 'react'
import Button from './Button'
import { styles } from './Form'

function SignUp({ updateFormState, signUp }) {
  return (
    <div style={styles.container}>
      <input
        name='username'
        onChange={e => {e.persist();updateFormState(e)}}
        style={styles.input}
        placeholder='username'
      />
      <input
        type='password'
        name='password'
        onChange={e => {e.persist();updateFormState(e)}}
        style={styles.input}
        placeholder='password'
      />
      <input
        name='email'
        onChange={e => {e.persist();updateFormState(e)}}
        style={styles.input}
        placeholder='email'
      />
      <Button onClick={signUp} title="Sign Up" />
    </div>
  )
}

export default SignUp

ConfirmSignUp component

Once a user has signed up they will receive a confirmation code for multi-factor authentication (MFA). The ConfirmSignUp component holds the form that will handle and submit this MFA code.

This component will accept two props, one for updating the form state (updateFormState) and one for calling the confirmSignUp function.

import React from 'react'
import Button from './Button'
import { styles } from './Form'

function ConfirmSignUp(props) {
  return (
    <div style={styles.container}>
      <input
        name='confirmationCode'
        placeholder='Confirmation Code'
        onChange={e => {e.persist();props.updateFormState(e)}}
        style={styles.input}
      />
      <Button onClick={props.confirmSignUp} title="Confirm Sign Up" />
    </div>
  )
}

export default ConfirmSignUp

The next two forms will be for handling the resetting of a forgotten password. The first form (ForgotPassword) will take the user’s username as an input and send them a confirmation code. They can then use that confirmation code along with a new password to reset the password in the second form (ForgotPasswordSubmit).

The ForgotPassword component will accept two props, one for updating the form state (updateFormState) and one for calling the forgotPassword function.

ForgotPassword component

import React from 'react'
import Button from './Button'
import { styles } from './Form'

function ForgotPassword(props) {
  return (
    <div style={styles.container}>
      <input
        name='username'
        placeholder='Username'
        onChange={e => {e.persist();props.updateFormState(e)}}
        style={styles.input}
      />
      <Button onClick={props.forgotPassword} title="Reset password" />
    </div>
  )
}

export default ForgotPassword

ForgotPasswordSubmit component

The ForgotPasswordSubmit component will accept two props, one for updating the form state (updateFormState) and one for calling the forgotPassword function.

import React from 'react'
import Button from './Button'
import { styles } from './Form'

function ForgotPasswordSubmit(props) {
  return (
    <div style={styles.container}>
      <input
        name='confirmationCode'
        placeholder='Confirmation code'
        onChange={e => {e.persist();props.updateFormState(e)}}
        style={styles.input}
      />
      <input
        name='password'
        placeholder='New password'
        type='password'
        onChange={e => {e.persist();props.updateFormState(e)}}
        style={styles.input}
      />
      <Button onClick={props.forgotPasswordSubmit} title="Save new password" />
    </div>
  )
}

export default ForgotPasswordSubmit

Completing Form.js

Now that all of the individual form components have been created, we can update Form.js to use these new components.

The next thing we will do is open Form.js and create the functions that will interact with the authentication service. These functions, signIn, signUp, confirmSignUp, forgotPassword, and forgotPasswordSubmit, will be passed as props to the individual form components.

Below the last import, add the following code:

async function signIn({ username, password }, setUser) {
  try {
    const user = await Auth.signIn(username, password)
    const userInfo = { username: user.username, ...user.attributes }
    setUser(userInfo)
  } catch (err) {
    console.log('error signing up..', err)
  }
}

async function signUp({ username, password, email }, updateFormType) {
  try {
    await Auth.signUp({
      username, password, attributes: { email }
    })
    console.log('sign up success!')
    updateFormType('confirmSignUp')
  } catch (err) {
    console.log('error signing up..', err)
  }
}

async function confirmSignUp({ username, confirmationCode }, updateFormType) {
  try {
    await Auth.confirmSignUp(username, confirmationCode)
    updateFormType('signIn')
  } catch (err) {
    console.log('error signing up..', err)
  }
}

async function forgotPassword({ username }, updateFormType) {
  try {
    await Auth.forgotPassword(username)
    updateFormType('forgotPasswordSubmit')
  } catch (err) {
    console.log('error submitting username to reset password...', err)
  }
}

async function forgotPasswordSubmit({ username, confirmationCode, password }, updateFormType) {
  try {
    await Auth.forgotPasswordSubmit(username, confirmationCode, password)
    updateFormType('signIn')
  } catch (err) {
    console.log('error updating password... :', err)
  }
}

The signUp, confirmSignUp, forgotPassword, and forgotPasswordSubmit functions all take the same arguments, the form state and the updateFormType function to update the type of form that is displayed.

The signIn function is different than the other functions in that it takes in a setUser function that will be passed down as a prop from the Profile component. This setUser function will allow us to re-render the Profile component in order to show or hide the form once the user has successfully signed in.

In the previous chapter, the Profile.js component used the withAuthenticator component to render the form so we did not need to worry about rendering the proper UI ourselves. Now that we are handling our own form state, we will need to decide whether to render the Profile component or the Form component based on whether the user is authenticated or not.

You’ll notice that in these functions we are using different methods on the Auth class from AWS Amplify. These methods correspond with the naming of the functions we’ve created so that we know exactly what each of these functions are doing.

updateForm helper function

Next, let’s create a helper function for updating the form state. The initial form state variable that we created in Form.js looks like this:

const initialFormState = {
  username: '', password: '', email: '', confirmationCode: ''
}

This state is an object with values for each form that we will be using.

We then used this initialFormState variable to create the component state (as well a function to update the component state) using the useState hook:

const [formState, updateFormState] = useState(initialFormState)

The problem that we have now is that updateFormState is expecting a new object with all of these fields in order to update the form state, but a form handler only gives us the single form event that is being typed. How can we transform this input event into a new object for the state? We’ll do this by creating a helper function that we will use inside of the Form function.

In Form.js below the useState hooks inside of the Form function, add the following code:

function updateForm(event) {
  const newFormState = {
    ...formState, [event.target.name]: event.target.value
  }
  updateFormState(newFormState)
}

The updateForm function will create a new state object using the existing state as well as the new values coming in from the event and then call updateFormState with this new form object. We can then reuse this function across all of our components.

renderForm function

Now that we have all of the form components created, the form state set up, and the authentication functions created, let’s update the renderForm function to render the current form. In Form.js, update renderForm with the following code:

function renderForm() {
  switch(formType) {
    case 'signUp':
      return (
        <SignUp
          signUp={() => signUp(formState, updateFormType)}
          updateFormState={e => updateForm(e)}
        />
      )
    case 'confirmSignUp':
      return (
        <ConfirmSignUp
          confirmSignUp={() => confirmSignUp(formState, updateFormType)}
          updateFormState={e => updateForm(e)}
        />
      )
    case 'signIn':
      return (
        <SignIn
          signIn={() => signIn(formState, props.setUser)}
          updateFormState={e => updateForm(e)}
        />
      )
    case 'forgotPassword':
      return (
        <ForgotPassword
        forgotPassword={() => forgotPassword(formState, updateFormType)}
        updateFormState={e => updateForm(e)}
        />
      )
    case 'forgotPasswordSubmit':
      return (
        <ForgotPasswordSubmit
          forgotPasswordSubmit={() => forgotPasswordSubmit(formState, updateFormType)}
          updateFormState={e => updateForm(e)}
        />
      )
    default:
      return null
  }
}

The renderForm function will check the current formType that is set in the state and render the proper form. As the formType changes, renderForm will be called and subsequently re-render the correct form based on the formType.

Form type toggles

The last thing we will need to do in this component is render the buttons that will allow us to manually toggle between different form states. The three main form states that we will want to toggle between are signIn, signUp, and forgotPassword.

To do this, let’s update the return statement from the Form function to also return some buttons that allow the user to toggle the form type:

return (
  <div>
    {renderForm()}
    {
      formType === 'signUp' && (
        <p style={styles.toggleForm}>
          Already have an account? <span
            style={styles.anchor}
            onClick={() => updateFormType('signIn')}
          >Sign In</span>
        </p>
      )
    }
    {
      formType === 'signIn' && (
        <>
          <p style={styles.toggleForm}>
            Need an account? <span
              style={styles.anchor}
              onClick={() => updateFormType('signUp')}
            >Sign Up</span>
          </p>
          <p style={{ ...styles.toggleForm, ...styles.resetPassword}}>
            Forget your password? <span
              style={styles.anchor}
              onClick={() => updateFormType('forgotPassword')}
            >Reset Password</span>
          </p>
        </>
      )
    }
  </div>
)

The Form component will now different buttons based on the current form type and allow the user to toggle between signing in, signing up, and resetting their password.

Updating the Profile component

We now need to update the Profile component to use the new Form component. The main changes are that we will be that we will be rendering either the Form component or the user profile information based on whether there is a currently signed in user.

Amplify has a local eventing system called Hub. Amplify uses Hub for different categories to communicate with one another when specific events occur, such as authentication events like a user sign-in or notification of a file download.

In this component we will also be setting a Hub listener to listen for the signOut authentication event so that we can remove the user from the state and re-render the Profile component to show the authentication form.

Update Profile.js with the following code:

import React, { useState, useEffect } from 'react'
import { Button } from 'antd'
import { Auth, Hub } from 'aws-amplify'
import Container from './Container'
import Form from './Form'

function Profile() {
  useEffect(() => {
    checkUser()
    Hub.listen('auth', (data) => {
      const { payload } = data
      if (payload.event === 'signOut') {
        setUser(null)
      }
    })
  }, [])
  const [user, setUser] = useState(null)
  async function checkUser() {
    try {
      const data = await Auth.currentUserPoolUser()
      const userInfo = { username: data.username, ...data.attributes, }
      setUser(userInfo)
    } catch (err) { console.log('error: ', err) }
  }
  function signOut() {
    Auth.signOut()
      .catch(err => console.log('error signing out: ', err))
  }
  if (user) {
    return (
      <Container>
        <h1>Profile</h1>
        <h2>Username: {user.username}</h2>
        <h3>Email: {user.email}</h3>
        <h4>Phone: {user.phone_number}</h4>
        <Button onClick={signOut}>Sign Out</Button>
      </Container>
    );
  }
  return <Form setUser={setUser} />
}

export default Profile

In this component we check to see if there is a user, and if so we return the profile information of the user. If there is no user, then we return the authentication form (Form). We pass in setUser as a prop to the Form component so that when a user signs in we can update the form state to re-render the component and show the profile information for that user.

Testing the app

To run the app, we can now run the start command:

npm start