AuthError - Error: Amplify has not been configured correctly

Question

First I have successfully completed configuring my react application using amplify configure. I did that with the help of AWS Amplify docs. Then I have successfully added authentication to my amplify project, using amplify add auth and amplify push. I followed all the steps in the AWS - Authentication with Amplify Doc

My App.js looks like this,

import React from 'react';
import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';
import Amplify, { Auth } from 'aws-amplify';
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);


const App = () => (
    <div>
        <AmplifySignOut />
        My App
    </div>
);

export default withAuthenticator(App);

But when I try npm start, it shows the following error,

Answer 1

I found the solution to this problem in this github-issue

The fix was simple. Amplify docs do not tell you to load configs of aws-exports to Auth module.

Adding this simple line of code in App.js, solved the issue for me.

import Amplify, { Auth } from 'aws-amplify';
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

// >>New - Configuring Auth Module
Auth.configure(awsconfig);

Answer 2

I think this problem occurs under various Amplify module versions due to inconsistencies between installed Amplify modules. In my cases, reinstalling as the below solved it many times.

npm uninstall --save aws-amplify @aws-amplify/ui-react @aws-amplify/ui-components

npm install --save aws-amplify @aws-amplify/ui-react @aws-amplify/ui-components

There is a case that needs reinstalling @aws-amplify/ui-components if you use it.

Answer 3

• npm un aws-amplify @aws-amplify/ui-react
• npm i aws-amplify @aws-amplify/ui-react

This worked for me. Thanks @Ignacio

Answer 4

If you are using Yarn, this issue can arise from a package manager conflict based on how they manage the dependency tree and version updates.

If you are seeing this issue repeatedly; In some scenarios you should try using Npm.

If you are using Yarn -You should first delete Yarn.lock and your node_modules directory. npm install

Also, see the answer above too Untamables Answer

Answer 5

run amplify update auth

choose Walkthrough all the auth configurations.

enable unauthenticated logins along the walkthrough and leave other settings.

Source: https://docs.amplify.aws/lib/graphqlapi/authz/q/platform/js/#using-amplify-graphql-client

When using AWS_IAM for public API access, unauthenticated logins must be enabled. To enable unauthenticated logins, run amplify update auth from the command line and choose Walkthrough all the auth configurations.

this solved my problem in combination with graphQL API

Answer 6

I was doing todo app in Expo,and faced same issue. I had to add right path for config file. Path is different for aws-exports and it is not mentioned in Docs. My example code is below

import awsconfig from './src/aws-exports'

Amplify.configure(awsconfig);
Auth.configure(awsconfig);

import { createTodo } from './src/graphql/mutations'
import { listTodos } from './src/graphql/queries'
import { withAuthenticator } from 'aws-amplify-react-native'