Sign-Up issue with AWS-Amplify

Question

I did the configuration for aws-amplify in my react application for the following required properties.

mandatorySignIn, region, uerPoolId, userPoolWebClientId

import Amplify from "aws-amplify";
import config from "./config";

Amplify.configure({
  Auth: {
    mandatorySignIn: true,
    region: config.cognito.REGION,
    uerPoolId: config.cognito.USER_POOL_ID,
    userPoolWebClientId: config.cognito.APP_CLIENT_ID
  }
});

Sign-Up has been done using an async function as in the following react component.

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

function Registration() {
  const [firstName, setFirstName] = useState("");
  const [lastName, setLasttName] = useState("");
  const [email, setEmail] = useState("");
  const [username, setusername] = useState("");
  const [password, setPassword] = useState("");
  const currentConfig = Auth.configure();
  console.log("current", currentConfig);
  const handleRegister = async event => {
    event.preventDefault();
    console.log(firstName, lastName, username, password);
    try {
      const signUpResponse = await Auth.signUp({
        username,
        password,
        attributes: {
          email
        }
      });
      console.log(signUpResponse);
    } catch (err) {
      console.log("ERROR", err);
    }
  };
  return (
    <React.Fragment>
      <form onSubmit={handleRegister}>
        <label>
          First Name
          <input
            type="text"
            id="firstname"
            onChange={({ target: { value } }) => setFirstName(value)}
          />
        </label>
        <br />
        <label>
          Last Name
          <input
            type="text"
            id="lastname"
            onChange={({ target: { value } }) => setLasttName(value)}
          />
        </label>
        <br />
        <label>
          Email
          <input
            type="email"
            id="email"
            onChange={({ target: { value } }) => setEmail(value)}
          />
        </label>
        <br />
        <label>
          User Name
          <input
            type="text"
            id="username"
            onChange={({ target: { value } }) => setusername(value)}
          />
        </label>
        <br />
        <label>
          Password
          <input
            type="password"
            id="password"
            onChange={({ target: { value } }) => setPassword(value)}
          />
        </label>
        <br />
        <input type="submit" value="Submit" />
      </form>
    </React.Fragment>
  );
}

export default Registration;

But when I tried to sign Up, I get the following error in console. But when I check for the Auth configuration by Auth.configure(), I can see the configuration object with the properties, I have given.

What are the additional required properties of aws-amplify congfiguration that I need to add ?

Answer 1

As @Alexander answered, you should pass awsconfig to Amplify.configure.as a result, you can remove the unnecessary assigned parameters.

import awsconfig from './aws-exports';

Amplify.configure({
    ...awsconfig,
    Auth: {
        mandatorySignIn: true,
    }
})

Answer 2

You need to import awsconfig from '../aws-exports' to Amplify.configure:

Amplify.configure({
    ...awsconfig,
    Auth: {
        mandatorySignIn: true,
        region: config.cognito.REGION,
        uerPoolId: config.cognito.USER_POOL_ID,
        userPoolWebClientId: config.cognito.APP_CLIENT_ID
    }
})

This file will appear after run amplify init in root directory. More info: Amplify Getting Started