AmplifyAuthenticator example

amplify-authentication.js

import React from 'react'
import Amplify from 'aws-amplify'
import {
  AmplifyAuthenticator,
  AmplifySignOut,
  AmplifySignUp,
} from '@aws-amplify/ui-react'
import { AuthState, onAuthUIStateChange } from '@aws-amplify/ui-components'
import config from '../aws-exports'

Amplify.configure(config)

const authReducer = (state, action) => {
  switch (action.type) {
    case 'authStateChange':
      return { authStage: action.authStage, user: action.user }
    default:
      throw Error(`action ${action.type} not found.`)
  }
}

const initialState = {}
function MyApp({ Component, pageProps }) {
  const [state, dispatch] = React.useReducer(authReducer, initialState)

  React.useEffect(() => {
    //this will fire anytime a user switches auth scenarios
    // https://docs.amplify.aws/ui/auth/authenticator/q/framework/react#methods--enums
    onAuthUIStateChange((nextAuthState, data) => {
      dispatch({
        type: 'authStateChange',
        authStage: nextAuthState,
        user: data,
      })
    })
  }, [])

  return state.authStage === AuthState.SignedIn && state.user ? (
    <>
      <AmplifySignOut />
      <Component {...pageProps} />
    </>
  ) : (
    <>
      <h1>I have the flexibility to be include a header</h1>
      <AmplifyAuthenticator>
        {/* don't include phone number for signup */}
        <AmplifySignUp
          slot="sign-up"
          formFields={[
            { type: 'username' },
            { type: 'email' },
            { type: 'password' },
          ]}
        />
      </AmplifyAuthenticator>
      <footer>I have the flexibility to be a custom footer</footer>
    </>
  )
}

export default MyApp

Yea, unfortunately it looks like it's still persistent. Thanks for the heads up since I wasn't aware of this issue. I'll go ahead and post my thoughts on the ticket.

@jamessouth looks like the issue is now resolved: aws-amplify/amplify-js#8227

Thanks Michael 👍