AmplifySignUpForm.js

App.js

import React, { useState } from "react";
import Auth from "@aws-amplify/auth";

import config from "./aws-exports";

Auth.configure(config);

const signUpUser = async ({
  password,
  setSuccessOrErrorMessage,
  phoneNumber: phone_number,
  email
}) => {
  const signUpParams = {
    username: `+1${phone_number}`,
    password,
    attributes: {email}
  };
  console.log({signUpParams})
  try {
    const userSignUp = await Auth.signUp(signUpParams);
    if (userSignUp) {
      console.log({userSignUp});
      setSuccessOrErrorMessage({
        success: `Wooohoooo, Succcessfully signed up user with username ${userSignUp.user.username}`
      });
    }
  } catch (error) {
    console.log({error});
    setSuccessOrErrorMessage({ error: error.message });
  }
};

const App = () => {
  const [successOrError, setSuccessOrErrorMessage] = useState(false);

  return (
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "flex-end",
          justifyContent: "center",
          width: "100vw",
          height: "100vh"
        }}
      >
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            backgroundColor: "black",
            height: "50%",
            width: 300,
            marginRight: 50
          }}
        >
    
          <div style={{ margin: "10%", width: "80%" }}>
            <div
              style={{
                display: "flex",
                flexDirection: "column",
                marginTop: 20
              }}
            >
              <span style={{ color: "white" }}>Phone Number</span>
              <input
                type="text"
                id="phoneNumber"
                name="phoneOrEmail"
                style={styles.authInput}
                placeholder="XXX  XXX  XXXX"
                placeholderTextColor="#999999"
              />
            </div>
  
            <div
              style={{
                display: "flex",
                flexDirection: "column",
                marginTop: 20
              }}
            >
              <span style={{ color: "white" }}>Email</span>
              <input
                type="text"
                id="email"
                name="phoneOrEmail"
                style={styles.authInput}
                placeholder="example@gmail.com"
              />
              
            </div>

            <div
              style={{
                display: "flex",
                flexDirection: "column",
                marginTop: 20
              }}
            >
              <span style={{ color: "white" }}>Password</span>
              <input
                type="text"
                id="password"
                name="phoneOrEmail"
                style={styles.authInput}
                placeholder="*********"
                placeholderTextColor="#999999"
              />
            </div>

            <button
              onClick={e => {
                const userParams = {};
                document.querySelectorAll("input").forEach(x => {
                  if (x.type === "radio") {
                    if (x.checked) userParams.phoneOrEmail = x.value;
                  } else {
                    userParams[x.id] = x.value;
                  }
                });
                signUpUser({...userParams, setSuccessOrErrorMessage});
              }}
              style={{
                height: 30,
                marginTop: 40,
                width: "100%",
                borderRadius: 10,
                marginBottom: 20
              }}
            >
              Submit
            </button>

            {
              <div style={{ color: "white", fontSize: 13}}>
                {successOrError.success}
              </div>
            }
            {<div style={{ color: "red" }}>{successOrError.error}</div>}
          </div>
        </div>
      </div>
  );
};

const styles = {
  authInput: {
    display: "flex",
    flexDirection: "row",
    flex: 1,
    minHeight: 30,
    backgroundColor: "#fff",
    paddingLeft: 16,
    marginTop: 10,
    borderRadius: 100
  }
};

export default App;