46

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, AuthError - Error: Amplify has not been configured correctly.

Sahan Amarsha
  • 2,176
  • 2
  • 14
  • 23

9 Answers9

59

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);
Sahan Amarsha
  • 2,176
  • 2
  • 14
  • 23
  • Awesome! That fixed the issue for me as well. Possible that this is new in an updated version of amplify as I had amplify auth working flawlessly before and the issue arose after upgrading aws-amplify. – the_smart_home_maker Sep 25 '20 at 16:20
  • spent hours on identifying it. This one worked awesomly. – yokks Dec 08 '20 at 11:04
  • 3
    In my case I had to reinstall the dependencies for it to work (`npm un aws-amplify @aws-amplify/ui-react` / `npm i aws-amplify @aws-amplify/ui-react`) – Ignacio Dec 12 '20 at 10:27
  • what awsconfig equals to? – Arsenius Dec 29 '20 at 09:50
  • Awesome, this saved me! – Vergil C. Mar 18 '22 at 23:27
  • This saved my Vue 3 + Vite project, too! Thanks! Here's my code in progress. I will still be adding data storage, etc from a PluralSight tutorial. https://github.com/dolthead/aws-amplify-vue-vite – Todd Hale May 06 '22 at 17:10
17
  • npm un aws-amplify @aws-amplify/ui-react
  • npm i aws-amplify @aws-amplify/ui-react

This worked for me. Thanks @Ignacio

Chanuga Jayathilaka
  • 167
  • 1
  • 3
15

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.

DariusP
  • 448
  • 4
  • 9
Untamables
  • 151
  • 1
  • 5
4

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'
Furquan
  • 1,542
  • 16
  • 20
3

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

NanoCat
  • 559
  • 7
  • 12
2

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

Coni
  • 45
  • 2
0

I am dealing with this error right now without having @aws-amplify/ui-react installed. I believe there were changes made to Auth from version 3 to 4 that is causing the issue

Tom Dixon
  • 96
  • 1
  • 9
0
If you are following a tutorial here are some precautions that might be helpful to you and save you same headache.
Use modules and dependencies that the tutor of the tutorial is using. Do not assume anything.

in package.json file write the dependencies and version as guided by the tutorial and at the end dont run npm install.
why? npm install pops up ERR errors that are headaches. Use yarn install and it will fix your errors.

e.g
in my project's package.json file i have the following::
{

"version": "0.1.0",
  "private": true,
  "dependencies": {
    "@aws-amplify/ui-react": "^0.2.9-unstable.12",
    "@stripe/react-stripe-js": "^1.9.0",
    "@stripe/stripe-js": "^1.32.0",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "aws-amplify": "^4.3.26",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^3.8.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "react-stripe-elements": "^6.0.1",
    "stripe": "^9.10.0",
    "uuid": "^7.0.0",
    "web-vitals": "^2.1.4"
  },
}


from the guide of the tutorial.But from react all these dependencies are old some obsolete. What do i do? I dont install each individual to bring confusion in modules by just running yarn install to align them and erradicet errors.
Michael Akoolo
  • 1
  • 1
0

This error can appear due to a misconfiguration of the Amplify CLI. That was the case for me.

Run amplify configure and follow the instructions.

Kemisis
  • 1
  • 1