amplify-auth-nextjs-email-only.js

// src/pages/_app.js
import { Amplify, Auth } from 'aws-amplify'
import {
  AmplifyAuthenticator,
  AmplifySignUp,
  AmplifySignIn,
  AmplifySignOut,
} from '@aws-amplify/ui-react'
import config from '../aws-exports.js'

Amplify.configure(config)

const handleSignUp = async formData => {
  const overrides = {
    username: String(Date.now()),
  }
  const data = await Auth.signUp(Object.assign(formData, overrides))
  return data
}

export default function App({ Component, pageProps }) {
  return (
    <AmplifyAuthenticator usernameAlias="email">
      <AmplifySignUp
        slot="sign-up"
        usernameAlias="email"
        formFields={[
          {
            type: 'email',
            label: 'email',
            placeholder: '[email protected]',
            inputProps: { required: true, autocomplete: 'username' },
          },
          {
            type: 'password',
            label: 'password',
            placeholder: 'hunter2',
            inputProps: { required: true, autocomplete: 'new-password' },
          },
        ]}
        handleSignUp={handleSignUp}
      />
      <AmplifySignIn
        slot="sign-in"
        usernameAlias="email"
        formFields={[
          {
            type: 'email',
            label: 'email',
            placeholder: '[email protected]',
            inputProps: { required: true, autocomplete: 'username' },
          },
          {
            type: 'password',
            label: 'password',
            placeholder: 'password',
            inputProps: { required: true, autocomplete: 'new-password' },
          },
        ]}
      />
      <AmplifySignOut />
      <Component {...pageProps} />
    </AmplifyAuthenticator>
  )
}