Custom authentication flow with Amplify JS

customauthentication.js

import React, { useState, useEffect } from 'react';
import { API, Auth } from 'aws-amplify'
import { listPosts } from './graphql/queries'

const initialState = {
  formState: 'signUp', username: '', password: '', email: '', authCode: ''
}

export default function App() {
  const [posts, setPosts] = useState([])
  const [state, setState] = useState(initialState)
  const { formState, username, password, email, authCode } = state
  const [loaded, setLoaded] = useState(null)
  useEffect(() => {
    fetchPosts();
    checkUser();
  }, []);
  async function checkUser() {
    try {
      const user = await Auth.currentAuthenticatedUser();
      console.log('user: ', user)
      setState(() => ({ ...state, formState: 'signedIn' }))
      setLoaded(true)
    } catch (err) {
      console.log('error: ', err)
      setState(() => ({ ...state, formState: 'signUp' }))
      setLoaded(true)
    }
  }
  async function fetchPosts() {
    try {
      const postData = await API.graphql({ query: listPosts });
      setPosts(postData.data.listPosts.items)
    } catch (err) {
      console.log({ err })
    }
  }
  function onChange(e) {
    e.persist()
    setState(() => ({ ...state, [e.target.name]: e.target.value }))
  }
  async function signUp() {
    try {
      await Auth.signUp({
        username, password, attributes: { email }
      })
      setState(() => ({ ...state, formState: 'confirmSignUp' }))
    } catch (err) {
      console.log({ err })
    }
  }
  async function confirmSignUp() {
    try {
      await Auth.confirmSignUp(username, authCode)
      setState(() => ({ ...state, formState: 'signIn' }))
    } catch (err) {
      console.log({ err })
    }
  }
  async function signIn() {
    try {
      await Auth.signIn(username, password)
      setState(() => ({ ...state, formState: 'signedIn' }))
    } catch (err) {
      console.log({ err })
    }
  }
  if (!loaded) return null
  return (
    <div>
      {
        formState === 'signUp' && (
          <div>
            <input name='username' onChange={onChange} />
            <input name='password' type="password" onChange={onChange} />
            <input name='email' onChange={onChange} />
            <button onClick={signUp}>Sign Up</button>
            <button onClick={() => setState({ ...state, formState: 'signIn'})}>Sign In</button>
          </div>
        )
      }
      {
        formState === 'confirmSignUp' && (
          <div>
            <input name='authCode' onChange={onChange} />
            <button onClick={confirmSignUp}>Confirm Sign Up</button>
          </div>
        )
      }
      {
        formState === 'signIn' && (
          <div>
            <input name='username' onChange={onChange} />
            <input name='password' type="password" onChange={onChange} />
            <button onClick={signIn}>Sign In</button>
          </div>
        )
      }
      {
        formState === 'signedIn' && (
          <div>
            <h1>Hello World</h1>
            {
              posts.map(post => (
                <div key={post.id}>
                  <h3>{post.name}</h3>
                  <p>{post.location}</p>
                </div>
              ))
            }
            <button
              onClick={() => {
                Auth.signOut();
                setState(() => ({ ...state, formState: 'signUp' }))
              }}
            >Sign Out</button>
          </div>
        )
      }
    </div>
  )
}