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 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);