AWS Amplify Auth is not configured correctly

Question

I have an react-app on AWS and recently made two changes: implemented Amplify Auth and copied /src and /public from another project over my current. The project starts fine but logging in fails. The top of the page shows:

And in the browsers console log:

[ERROR] 04:07.792 AuthError - 
            Error: Amplify has not been configured correctly. 
            The configuration object is missing required auth properties. 
            Did you run `amplify push` after adding auth via `amplify add auth`?
            See https://aws-amplify.github.io/docs/js/authentication#amplify-project-setup for more information
        index.js:1
    e index.js:1
    _log ConsoleLogger.ts:91
    error ConsoleLogger.ts:142
    AuthError Errors.ts:34
    NoUserPoolError Errors.ts:39
    rejectNoUserPool Auth.ts:2188
    currentUserPoolUser Auth.ts:1194
    currentAuthenticatedUser Auth.ts:1360
    step 3.chunk.js:61574
    verb 3.chunk.js:61505
    fulfilled 3

How to solve this.

I tried to repair it by removing and re-adding the Auth "amplify auth remove", "amplify auth add", followed by "amplify update api" and "amplify push", but that has made no difference.

In "C:\myproject\amplify\backend\auth" the directory of the auth-bucket contains parameters.json, which looks fine to me.

    {
    "identityPoolName": "myprojecte1066c9_identitypool_fe1066c9",
    "allowUnauthenticatedIdentities": false,
    "resourceNameTruncated": "myprojectfe1066c9",
    "userPoolName": "myprojectfe1066c9_userpool_fe1066c9",
    "autoVerifiedAttributes": [
        "email"
    ],
    "mfaConfiguration": "OFF",
    "mfaTypes": [
        "SMS Text Message"
    ],
    "smsAuthenticationMessage": "Your authentication code is {####}",
    "smsVerificationMessage": "Your verification code is {####}",
    "emailVerificationSubject": "Your verification code",
    "emailVerificationMessage": "Your verification code is {####}",
    "defaultPasswordPolicy": false,
    "passwordPolicyMinLength": 8,
    "passwordPolicyCharacters": [],
    "requiredAttributes": [
        "email"
    ],
    "userpoolClientGenerateSecret": false,
    "userpoolClientRefreshTokenValidity": 30,
    "userpoolClientWriteAttributes": [
        "email"
    ],
    "userpoolClientReadAttributes": [
        "email"
    ],
    "userpoolClientLambdaRole": "myprojectfe1066c9_userpoolclient_lambda_role",
    "userpoolClientSetAttributes": false,
    "sharedId": "fe1066c9",
    "resourceName": "myprojectfe1066c9",
    "authSelections": "identityPoolAndUserPool",
    "authRoleArn": {
        "Fn::GetAtt": [
            "AuthRole",
            "Arn"
        ]
    },
    "unauthRoleArn": {
        "Fn::GetAtt": [
            "UnauthRole",
            "Arn"
        ]
    },
    "useDefault": "default",
    "userPoolGroupList": [],
    "serviceName": "Cognito",
    "dependsOn": []
}

Any ideas?

Answer 1

I've had the same problem, this is the solution.

First, you need to install Amplify : npm install aws-amplify.

Then put this in your index.tsx

import aws_exports from './aws-exports'; //This file is created when you configure the environment, the file is located in root of "src"
import { withAuthenticator } from 'aws-amplify-react';
Amplify.configure(aws_exports); 

Your code should look like:

import { Amplify } from 'aws-amplify';
import React from 'react';
import awsExports from '../aws-exports'; //In my case, I have the file one folder behind

Amplify.configure(awsExports);
export default function App() {
  return (
     <MyComponent />
  );
}

reference: https://docs.amplify.aws/start/getting-started/setup/q/integration/react/#set-up-frontend

Answer 2

I've had this exact same problem, and it occurs when you don't configure amplify in your index.js

You need to ensure that you call the code below, before your app attempts to use Amplify.

import awsExports from './aws-exports';
Amplify.configure(awsExports);