Error: Amplify has not been configured correctly.

[Frankjunyulin]

Before opening, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have read the guide for submitting bug reports.
• [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

In my package.json:

# Put output below this line
  "dependencies": {
    "@aws-amplify/core": "^5.0.15",
    "@aws-amplify/ui-react": "^4.3.8",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@headlessui/react": "^1.7.3",
    "@heroicons/react": "^2.0.12",
    "@mui/material": "^5.10.16",
    "@prisma/client": "^4.10.1",
    "aws-amplify": "^5.0.15",
    "next": "^12.3.1",
    "openai": "^3.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "reactflow": "^11.0.0"
  },

My app.tsx

function MyApp({Component, pageProps}: AppProps) {
  useEffect(() => {
    Amplify.configure({
      ...awsExports,
      ssr: true,
    });
    // >>New - Configuring Auth Module
    Auth.configure(awsExports);
  }, []);
  return <Component {...pageProps} />;
}

export default withAuthenticator(MyApp);

Describe the bug

I add login-signup feature to my app with "Amplify".

It keep saying that:

I have tried many ways suggested in the previous discussions or stackoverflow. But none of any works for me. It has made me stuck for a few days.

Can anyone help?

Expected behavior

Able to login and signup without error.

Reproduction steps

1. npm install based on below fill My whole package.json file:

   {
   "name": "dear",
   "version": "0.1.0",
   "private": true,
   "scripts": {
   "dev": "next dev",
   "build": "next build",
   "start": "next start",
   "lint": "next lint"
   },
   "dependencies": {
   "@aws-amplify/core": "^5.0.15",
   "@aws-amplify/ui-react": "^4.3.8",
   "@emotion/react": "^11.10.5",
   "@emotion/styled": "^11.10.5",
   "@headlessui/react": "^1.7.3",
   "@heroicons/react": "^2.0.12",
   "@mui/material": "^5.10.16",
   "@prisma/client": "^4.10.1",
   "aws-amplify": "^5.0.15",
   "next": "^12.3.1",
   "openai": "^3.1.0",
   "react": "^18.2.0",
   "react-dom": "^18.2.0",
   "reactflow": "^11.0.0"
   },
   "devDependencies": {
   "@types/node": "18.8.2",
   "@types/react": "^18.0.21",
   "@types/react-dom": "^18.0.6",
   "autoprefixer": "^10.4.12",
   "eslint": "8.24.0",
   "eslint-config-next": "12.3.1",
   "postcss": "^8.4.17",
   "prisma": "^4.10.1",
   "tailwindcss": "^3.1.8",
   "typescript": "4.8.4"
   }
   }

2. Add _app.tsx file like below:

   
   import "../styles/globals.css";
   import type {AppProps} from "next/app";

import {Amplify} from "@aws-amplify/core"; import {Auth} from "aws-amplify";

import {withAuthenticator} from "@aws-amplify/ui-react"; import "@aws-amplify/ui-react/styles.css";

import awsExports from "../src/aws-exports"; import {useEffect} from "react";

function MyApp({Component, pageProps}: AppProps) { useEffect(() => { Amplify.configure({ ...awsExports, ssr: true, }); // >>New - Configuring Auth Module Auth.configure(awsExports); }, []); return <Component {...pageProps} />; }

export default withAuthenticator(MyApp);

3. Deploy to production. And try to login or signup.

### Code Snippet

```javascript
// Put your code below this line.

Log output

``` // Put your logs below this line ```

aws-exports.js

/* eslint-disable */
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "us-east-1",
    "aws_cognito_identity_pool_id": "us-east-1:e1b23467-b561-4511-8c7a-91cda3bbc0cc",
    "aws_cognito_region": "us-east-1",
    "aws_user_pools_id": "us-east-1_hHUKoCPHp",
    "aws_user_pools_web_client_id": "57fh330o1c8lalef69g6i6h6dc",
    "oauth": {
        "domain": "dear3683324a-3683324a-dev.auth.us-east-1.amazoncognito.com",
        "scope": [
            "phone",
            "email",
            "openid",
            "profile",
            "aws.cognito.signin.user.admin"
        ],
        "redirectSignIn": "https://www.dearai.online/",
        "redirectSignOut": "https://www.dearai.online/",
        "responseType": "code"
    },
    "federationTarget": "COGNITO_USER_POOLS",
    "aws_cognito_username_attributes": [],
    "aws_cognito_social_providers": [],
    "aws_cognito_signup_attributes": [
        "EMAIL"
    ],
    "aws_cognito_mfa_configuration": "OFF",
    "aws_cognito_mfa_types": [
        "SMS"
    ],
    "aws_cognito_password_protection_settings": {
        "passwordPolicyMinLength": 8,
        "passwordPolicyCharacters": []
    },
    "aws_cognito_verification_mechanisms": [
        "EMAIL"
    ]
};

export default awsmobile;

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[cwomack]

Hello, @Frankjunyulin. There might be a few things going on to cause this, so lets try doing the following:

1. It appears you have both @aws-amplify/core and @aws-amplify dependencies which has been known to sometimes cause multiple instances of Amplify to be created. Can you see if removing the@aws-amplify/core from your package.json resolves this? Once you remove that from your package.json file, delete both your node_modules folder and package-lock.json file and run npm install again.

2. With the @aws-amplify/core package now gone, you'll need to import the Amplify package from "aws-amplify" like so:

   import { Amplify, Auth } from "aws-amplify";

3. The way you're calling Amplify.configure() within useEffect() might cause issues, but for now you should be able to remove the Auth.configure(awsExports);. Just calling Amplify.configure should take care of Auth as well.

Finally, can you share if you followed any guide or documentation to set your app up this way? Some of these configurations seem outdated despite you being on v5.X of Amplify.

[cwomack]

Closing this as we have not heard back from you. If you're still running into the error described in this issue, please attempt the above steps and reply back with the information requested.

Thank you!

[sharjeel619]

@cwomack getting similar error when deploying to vercel or netlify. Any Ideas?

[cwomack]

@sharjeel619, are you able to describe what you're experiencing in a little more detail before we reopen this issue? Is it just the exact same "Amplify has not been configured correctly"?

[sharjeel619]

@cwomack Yep, here is a screenshot from both netlify and vercel

[cwomack]

@sharjeel619, thanks for sharing. Can you also share you package.json? And was there any particular part of the docs you were following to set up the app (if new) or was this an older project?

[sharjeel619]

@cwomack

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@aws-amplify/ui-react": "^4.3.6",
    "@emotion/react": "^11.11.0",
    "@emotion/styled": "^11.11.0",
    "@fortawesome/fontawesome-svg-core": "^6.2.1",
    "@fortawesome/free-regular-svg-icons": "^6.2.1",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@headlessui/react": "^1.7.13",
    "@material-tailwind/react": "^1.2.5",
    "@reduxjs/toolkit": "^1.9.3",
    "@szhsin/react-menu": "^3.4.1",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/googlemaps": "^3.43.3",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.11",
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@types/react-fontawesome": "^1.6.5",
    "antd": "^5.5.0",
    "autoprefixer": "^10.4.13",
    "aws-amplify": "^5.1.1",
    "aws-appsync-codegen": "^0.17.5",
    "cookies-next": "^2.1.1",
    "graphql-tag": "^2.12.6",
    "jose": "^4.13.1",
    "next": "^13.1.6",
    "next-redux-cookie-wrapper": "^2.2.1",
    "next-redux-wrapper": "^8.1.0",
    "next-seo": "^5.15.0",
    "rc-collapse": "^3.5.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.43.9",
    "react-icons": "^4.7.1",
    "react-lazy-load-image-component": "^1.5.6",
    "react-redux": "^8.0.5",
    "react-slick": "^0.29.0",
    "react-use-websocket": "^4.3.1",
    "slick-carousel": "^1.8.1",
    "tw-elements": "^1.0.0-alpha13",
    "tw-to-css": "^0.0.11",
    "typescript": "^4.9.4",
    "uuid": "^9.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "dev": "next dev",
    "start": "next start",
    "build": "next build",
    "lint": "eslint --fix \"**/*.{ts,tsx}\"",
    "codegen": "aws-appsync-codegen generate src/graphql/operations/*.ts --schema backend/lib/appsync/build/schema.json --target typescript --output src/graphql/types/types.ts"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/react-lazy-load-image-component": "^1.5.2",
    "@types/react-slick": "^0.23.10",
    "@types/uuid": "^9.0.1",
    "eslint": "^8.33.0",
    "eslint-config-next": "13.0.4",
    "sass": "^1.62.1",
    "tailwindcss": "^3.2.4"
  }
}

Everything is working locally, even tested it on an ngrok url. I didn't follow any docs, it's sort of an already built project. Just having issues with deployment

[sharjeel619]

@cwomack Using this

import aws_exports from "./aws-exports";
Amplify.configure(aws_exports);

[cwomack]

@sharjeel619, are you doing a scoped configuration for Auth or a top level configuration? Can you see if having the Auth module load the config directly as seen below helps resolve the issue?

import { Amplify, Auth } from '@aws-amplify'
import aws_exports from './aws-exports'

Amplify.configure(aws_exports)
Auth.configure(aws_exports)

Given that this is an already built project, it may also help to delete your node-modules folder and package-lock.json file and then reinstalling dependencies with npm install.

[BatesJernigan]

I'm getting the same error as the above commenters. I've tried removing node_modules/package-lock.json and reinstalling and I'm still getting the error when I try to call signUp on my app.

I've also tried adding the Amplify.configure and Auth.configure to various parts of the app to no avail. My app is a nextjs app using amplify. I'm not using scoped config, rather top level.

=== package.json ===

{
  "name": "foo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@aws-amplify/ui-react": "^5.0.7",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.14.0",
    "@mui/material": "^5.14.0",
    "@mui/system": "^5.14.0",
    "@sendgrid/mail": "^7.7.0",
    "@types/aws-sdk": "^2.7.0",
    "@types/material-ui": "^0.21.12",
    "@types/node": "20.4.1",
    "@types/react": "18.2.14",
    "@types/react-dom": "18.2.6",
    "@types/react-select": "^5.0.1",
    "autoprefixer": "10.4.14",
    "aws-amplify": "^5.3.6",
    "aws-crt": "^1.17.0",
    "encoding": "^0.1.13",
    "eslint": "8.44.0",
    "eslint-config-next": "13.4.9",
    "next": "13.4.9",
    "postcss": "8.4.25",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.2",
    "typescript": "5.1.6"
  }
}

[BatesJernigan]

I finally got my own personal setup working. I feel dumb for not thinking of it earlier but here was the solve. Contrary to the docs, what you need to do if you're handling your signIn/Login logic manually, is to call Amplify.configure in the same flow as the login. Do not leave these lines in your top level page.tsx code. So instead of dropping these lines into your app/page.tsx (or whatever is your root page)

import { Amplify } from '@aws-amplify'
import aws_exports from './aws-exports'

Amplify.configure(aws_exports)

You need to drop them into your login handler. Taken from the signup AWS docs.

import { Amplify } from '@aws-amplify'
import aws_exports from './aws-exports'
import { Auth } from 'aws-amplify';

type SignUpParameters = {
  username: string;
  password: string;
  email: string;
  phoneNumber: string;
};

export async function signUp({ username, password, email, phoneNumber }: SignUpParameters) {

  //////////////////////////////// NEW code ////////////////////////////////
  Amplify.configure(aws_exports)
  //////////////////////////////// NEW code ////////////////////////////////

  try {
    const { user } = await Auth.signUp({
      username,
      password,
      attributes: {
        email, // optional
        phoneNumber, // optional - E.164 number convention
        // other custom attributes
      },
      autoSignIn: {
        // optional - enables auto sign in after user is confirmed
        enabled: true,
      },
    });
    console.log(user);
  } catch (error) {
    console.log('error signing up:', error);
  }
}

[cwomack]

Hello, @BatesJernigan 👋. I think there's some confusion here on where to call/place Amplify.configure() within your code. It should only be called once during the initialization of your app, but it looks like you've placed it within your signUp function. This means that every time a user tries to sign up with your app, Amplify is trying to reconfigure with the same settings. You can also import Auth from 'aws-amplify' (along with Amplify).

Can you try to see if the following changes to your code resolves the issues you're experiencing?

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

Amplify.configure(aws_exports);

type SignUpParameters = {
  username: string;
  password: string;
  email: string;
  phoneNumber: string;
};

export async function signUp({ username, password, email, phoneNumber }: SignUpParameters) {

  try {
    const { user } = await Auth.signUp({
      username,
      password,
      attributes: {
        email, // optional
        phoneNumber, // optional - E.164 number convention
        // other custom attributes
      },
      autoSignIn: {
        // optional - enables auto sign in after user is confirmed
        enabled: true,
      },
    });
    console.log(user);
  } catch (error) {
    console.log('error signing up:', error);
  }
}

[wjes]

I just had the very same issue with a vanilla NextJS app. I solved it by moving the Auth configuration from a Server Component into a Client Component.

[BatesJernigan]

@cwomack The code you sent worked! I guess my Amplify.configure(aws_exports) line wasn't called close enough to where I needed to call signUp/signIn logic. Thanks for helping me out with this!