Search code examples
angularamazon-web-servicesaws-amplifyamplifyjsaws-amplify-sdk-js

AWS Amplify Auth Error in Angular project using pre-existing backend: "Error: Amplify has not been configured correctly."

I'm in the process of trying to update a project I built in 2020 that no longer works but I keep running into this issue.

[ERROR] 04:09.562 AuthError - 
            Error: Amplify has not been configured correctly. 
            The configuration object is missing required auth properties.
            This error is typically caused by one of the following scenarios:

            1. 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

            2. This could also be caused by multiple conflicting versions of amplify packages, see (https://docs.amplify.aws/lib/troubleshooting/upgrading/q/platform/js) for help upgrading Amplify packages.

I created a new angular (Ionic) project to see if I could pin-point the issue and again this issue has returned. I followed the documentation to set up amplify with the exception that we already have a backend so I ran amplify pull --appId XXXXXX --envName XXXX to get the aws-exports.js.

  1. I've done npm i aws-amplify @aws-amplify/ui-angular
  2. I've tried deleting node-modules and package-lock.json, and then running npm i
  3. I've renamed aws-exports.js to aws-exports.ts and added it to my ts-config.app.json
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts",
    "src/aws-exports.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}
  1. In main.ts I've added
import Amplify, { Auth } from 'aws-amplify';
import awsmobile from './aws-exports';

Amplify.configure(awsmobile);
Auth.configure(awsmobile); // I've tried both with and without this line
  1. I've implemented the Authenticator UI Component as per the documentation.

Any information would be greatly appreciated! I've read through multiple threads on the issue and none of the advice has worked.

This is the contents of my aws-exports.ts (with data redacted!)

const awsmobile = {
    "aws_project_region": "eu-west-2",
    "aws_appsync_graphqlEndpoint": "https://XXXXX.appsync-api.eu-west-2.amazonaws.com/graphql",
    "aws_appsync_region": "eu-west-2",
    "aws_appsync_authenticationType": "API_KEY",
    "aws_appsync_apiKey": "XXXXX",
    "aws_cognito_identity_pool_id": "eu-west-2:XXXXX",
    "aws_cognito_region": "eu-west-2",
    "oauth": {},
    "aws_cognito_username_attributes": [],
    "aws_cognito_social_providers": [],
    "aws_cognito_signup_attributes": [],
    "aws_cognito_mfa_types": [],
    "aws_cognito_password_protection_settings": {
        "passwordPolicyCharacters": []
    },
    "aws_cognito_verification_mechanisms": [],
    "aws_mobile_analytics_app_id": "XXXXX",
    "aws_mobile_analytics_app_region": "eu-west-1"
};

export default awsmobile;

Edit: I've also tried running amplify init and creating a new Amplify project but the issue persists. I did run amplify push

Here's my package.json:

{
  "name": "XXXX",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~13.0.0",
    "@angular/core": "~13.0.0",
    "@angular/forms": "~13.0.0",
    "@angular/platform-browser": "~13.0.0",
    "@angular/platform-browser-dynamic": "~13.0.0",
    "@angular/router": "~13.0.0",
    "@aws-amplify/ui-angular": "^2.0.11",
    "@capacitor/app": "1.1.0",
    "@capacitor/core": "3.4.0",
    "@capacitor/haptics": "1.1.4",
    "@capacitor/keyboard": "1.2.1",
    "@capacitor/status-bar": "1.0.7",
    "@ionic/angular": "^6.0.0",
    "aws-amplify": "^4.3.13",
    "rxjs": "~6.6.0",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.0.1",
    "@angular-eslint/builder": "~13.0.1",
    "@angular-eslint/eslint-plugin": "~13.0.1",
    "@angular-eslint/eslint-plugin-template": "~13.0.1",
    "@angular-eslint/template-parser": "~13.0.1",
    "@angular/cli": "~13.0.1",
    "@angular/compiler": "~13.0.0",
    "@angular/compiler-cli": "~13.0.0",
    "@angular/language-service": "~13.0.0",
    "@capacitor/cli": "3.4.0",
    "@ionic/angular-toolkit": "^5.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "5.3.0",
    "@typescript-eslint/parser": "5.3.0",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.4.4"
  },
  "description": "An Ionic project"
}

Edit: As suggested by Juicy-g, I've tried using

"@aws-amplify/auth": "^4.3.14", 
"@aws-amplify/core": "^4.3.14"

with

import { Amplify } from '@aws-amplify/core'; 
import { Auth } from '@aws-amplify/auth'; 
import awsmobile from './aws-exports'; 
Amplify.configure(awsmobile); 
Auth.configure(awsmobile);

and I'm still getting the same result. The latest version of @aws-amplify/auth seems to have an internal issue so I matched the latest version of @aws-amplify/core

Solution

  • So it turns out, this is due to us having to migrate our project over from our old Amplify project due to it ending up in an unrecoverable state. It didn't connect correctly to our cognito user pools and so all the needed information wasn't being provided in aws-exports.js

    I'm not quite sure why it wasn't working with a new project and a new amplify project but it's working now.

    I was missing the aws_user_pools_id and the aws_user_pools_web_client_id fields. Providing them manually resolved the issue.