Amplify-js: Auth Error: Amplify has not been configured correctly using Nuxt.js

[nelsynelz]

Describe the bug
The developer console is stating the below error, however this is NOT impacting any functionality. I am able to Sign In, Sign Up, Confirm Code, Fetch Current Authed User with no errors or issues.

[ERROR] 06:02.945 AuthError - 
            Error: Amplify has not been configured correctly.
            This error is typically caused by one of the following scenarios:

            1. Make sure you're passing the awsconfig object to Amplify.configure() in your app's entry point
                See https://aws-amplify.github.io/docs/js/authentication#configure-your-app for more information

            2. There might be multiple conflicting versions of aws-amplify or amplify packages in your node_modules.
                Try deleting your node_modules folder and reinstalling the dependencies with `yarn install`

Here is the output when enabling LOG_LEVEL = 'DEBUG':

[DEBUG] 06:04.890 AuthClass - getting current authenticated user
ConsoleLogger.js?36de:84 [DEBUG] 06:04.916 AuthClass - getting current authenticated user
ConsoleLogger.js?36de:84 [DEBUG] 06:04.917 AuthClass - getting current authenticated user
ConsoleLogger.js?36de:84 [DEBUG] 06:04.927 AuthClass - cannot load federated user from auth storage
ConsoleLogger.js?36de:84 [DEBUG] 06:04.927 AuthClass - get current authenticated userpool user
ConsoleLogger.js?36de:84 [DEBUG] 06:04.930 AuthClass - cannot load federated user from auth storage
ConsoleLogger.js?36de:84 [DEBUG] 06:04.931 AuthClass - get current authenticated userpool user
ConsoleLogger.js?36de:84 [DEBUG] 06:04.931 AuthClass - cannot load federated user from auth storage
ConsoleLogger.js?36de:84 [DEBUG] 06:04.931 AuthClass - get current authenticated userpool user
ConsoleLogger.js?36de:84 [DEBUG] 06:04.969 AuthClass - getting current authenticated user
ConsoleLogger.js?36de:84 [DEBUG] 06:04.998 AuthClass - cannot load federated user from auth storage
ConsoleLogger.js?36de:84 [DEBUG] 06:05.1 AuthClass - get current authenticated userpool user

To Reproduce
Steps to reproduce the behavior:

1. Create Nuxt.js project
2. Install and Manually Configure Amplify
3. Error occurs on every page reload

Expected behavior
I am hoping to not have an error message in the console if there are no actual errors with the functionality.

Environment

  System:
    OS: Linux 5.0 Ubuntu 18.04.2 LTS (Bionic Beaver)
    CPU: (4) x64 Intel(R) Core(TM) i5-6402P CPU @ 2.80GHz
    Memory: 1.45 GB / 15.63 GB
    Container: Yes
    Shell: 4.4.20 - /bin/bash
  Binaries:
    Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
  Browsers:
    Chrome: 77.0.3865.90
    Firefox: 70.0
  npmPackages:
    @nuxtjs/axios: ^5.3.6 => 5.8.0 
    @nuxtjs/vuetify: ^1.0.0 => 1.9.0 
    aws-amplify: ^1.2.4 => 1.2.4 
    aws-amplify-vue: ^0.3.3 => 0.3.3 
    nuxt: ^2.0.0 => 2.10.2 
    vue-google-autocomplete: ^1.1.0 => 1.1.0 
  npmGlobalPackages:
    @aws-amplify/cli: 1.8.5
    @vue/cli: 3.9.3
    npm: 6.9.0
    serverless: 1.50.1

Sample code
Here is my amplify config, obviously removed the actual values and replaced with x's.

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

Amplify.configure({
    Auth: {
        identityPoolId: 'xxxxxxxxxxxxxxxxxxxxxxxx',
        region: 'us-east-2',
        userPoolId: 'xxxxxxxxxxxxxxxxxxxxxxxxxx',
        userPoolWebClientId: 'xxxxxxxxxxxxxxxxxxx'
    }
});

Amplify.Logger.LOG_LEVEL = 'DEBUG';

[harmohan-a]

i updated amplify today and it's completely messed up the auth.

config:

const awsmobile: AWS_CONFIG = {
  "aws_project_region": "ap-southeast-2",
  "aws_appsync_graphqlEndpoint": "XXXXXXXXXXXXXXXXXXX",
  "aws_appsync_region": "ap-southeast-2",
  "aws_appsync_authenticationType": "AMAZON_COGNITO_USER_POOLS",
  "userPoolId": "XXXXXXXXXXXXXXXXXX",
  "userPoolWebClientId": "XXXXXXXXXXXXXXXXX"
};

Amplify.configure(config);

it was working fine with 1.1.4

[harmohan-a]

this is soooo shit.....
amplify never registers auth. it will register everything that i dont need except auth. Because when auth initialises it's using a different instance of amplify ! brilliant.

 Amplify.configure = function (config) {
        var _this = this;
        if (!config)
            return this._config;
        this._config = Object.assign(this._config, config);
        logger.debug('amplify config', this._config);
        this._components.map(function (comp) {
            comp.configure(_this._config);
        });
        return this._config;

So, even though i am passing auth config, because its not a registered component. it never gets configured.

[NikitaPanteleev]

Updating to "aws-amplify": "^2.2.0" solved the issue for me.

[sammartinez]

Resolving as above statement that the resolution is to upgrade to `"aws-amplify: "^2.2.0"

[AravindTReddy]

Still having the same issue. Any help ?
Thanks

[midimurphdesigns]

I'm having this issue... aws-amplify v2.2.6

[zsedefian]

Same issue here, aws-amplify 2.2.6

[nelsynelz]

I have not solved this issue, however I'm using nuxt in Generate mode when deployed so I'm not actually worrying about it.

The error is being thrown by Nuxt SSR, so if you're not using SSR then it shouldn't actually be a problem when deployed.

Even in SSR mode you can accomplish everything client side, you can then store the JWT token as a cookie so that you have access to it server side.

The annoying part is constantly seeing the error in dev tools anytime you refresh (only in SSR mode, error goes away in Generated or SPA mode).

[preethamsridhar]

May I know where are you implementing the Amplify.configure(config) line.

[nelsynelz]

@preethamsridhar it's created as a plugin in a plain JS file in Nuxt and then referenced in the "nuxt.config.js" file. I don't have deeper knowledge of nuxt to explain to you how it works from there though.

[michaeljcalkins]

Also having this issue in 2.2.6, using all the defaults from the docs I get this error.

[riznob]

The solution for me was to to add mode: "spa", to my nuxt.config.js file.

[nelsynelz]

The solution for me was to to add mode: "spa", to my nuxt.config.js file.

Using Nuxt in SPA mode generally defeats the purpose of using Nuxt for 99% of people.

[pks90]

Well, I am using ionic (angular) with amplify and this bugged me too. Therefore, I had to update my main.ts file with the following,

import Amplify from 'aws-amplify';
import aws_exports from './aws-exports';

Amplify.configure(aws_exports);

The above code does what the error asks for. Unfortunately there are a lot of issues with the Amplify Framework and I don't think this is production ready at all.

[Johnniexson]

Well, I am using ionic (angular) with amplify and this bugged me too. Therefore, I had to update my main.ts file with the following,

import Amplify from 'aws-amplify';
import aws_exports from './aws-exports';

Amplify.configure(aws_exports);

The above code does what the error asks for. Unfortunately there are a lot of issues with the Amplify Framework and I don't think this is production ready at all.

Hello @pks90 were you able to resolve this? I'm stuck here also.

[veproza]

@Johnniexson Check #5671 , when you don't import aws-amplify.Auth, you may also get this error. Solution is to import it anywhere inside the project

import {Auth} from 'aws-amplify';

[SafaTinaztepe]

@Johnniexson Check #5671 , when you don't import aws-amplify.Auth, you may also get this error. Solution is to import it anywhere inside the project

import {Auth} from 'aws-amplify';

Importing Auth from aws-amplify worked, but I had to import the Amplify object itself from @aws-amplify/core like:

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

Otherwise, I was getting the same issue as everyone else. So +1 for the above stated solution.

[sigitp-git]

I tried above solution:

import Amplify from '@aws-amplify/core'
import { Auth } from '@aws-amplify/auth'

The same issue still happens, error:

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

version:

"aws-amplify": "^3.0.11"

[bantak]

I 'm having the same issue in "aws-amplify": "^3.0.11"

I found out Auth module didn't load configs of aws-exports,
so my solution for this issue is:

import Amplify from '@aws-amplify/core'
import { Auth } from '@aws-amplify/auth'
import awsconfig from './aws-exports'

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

Auth module can load awsconfig directly by Auth.configure(awsconfig)

I don't understand why Auth module didn't load aws-export from Amplify.configure, but I resolve this issue by this solution for now.

[thomasklein-winemaker]

I found out Auth module didn't load configs of aws-exports,
so my solution for this issue is:

Still didn't fix the error display for me (the actual authentication process works). I'm including only the aws-exports file following the instructions on Multiple frontends.

Same "aws-amplify": "^3.0.11".

Same happens using the slightly different re-use-existing-authentication-resource approach.

[gHashTag]

yarn remove aws-amplify

and after

yarn add aws-amplify@latest

helped me

[aldwyn-acn]

I was looking for this same issue, but in React.js, not Nuxt.js. The following has resolved this issue on my end, given that you use hook-based functional components in React with "aws-amplify": "^3.0.10" and "@aws-amplify/ui-react": "^0.2.9".

TL;DR: Load Amplify.configure where your app initializes.

// App.tsx
import Amplify from "aws-amplify";
import { withAuthenticator } from "@aws-amplify/ui-react";

function App() {

  useEffect(() => {
    Amplify.configure({
      Auth: {
        region: process.env.REACT_APP_AWS_PROJECT_REGION,
        identityPoolId: process.env.REACT_APP_AWS_COGNITO_IDENTITY_POOL_ID,
        identityPoolRegion: process.env.REACT_APP_AWS_COGNITO_REGION,
        userPoolId: process.env.REACT_APP_AWS_USER_POOLS_ID,
        userPoolWebClientId: process.env.REACT_APP_AWS_USER_POOLS_WEB_CLIENT_ID,
      },
    });
  }, []);

  return <div/>;
}

export default withAuthenticator(App);

# .env
REACT_APP_AWS_PROJECT_REGION=<value_here>
REACT_APP_AWS_COGNITO_IDENTITY_POOL_ID=<value_here>
REACT_APP_AWS_COGNITO_REGION=<value_here>
REACT_APP_AWS_USER_POOLS_ID=<value_here>
REACT_APP_AWS_USER_POOLS_WEB_CLIENT_ID=<value_here>

[desyatnik]

Having exactly the same issue with Nuxt in Universal mode and latest amplify version: 4.25.0
Everything seems to work fine, but the error still appears.
I've tried all solutions/workarounds proposed here to no avail.
Any ideas please?

[tkwong94]

Having exactly the same issue with Nuxt in Universal mode and latest amplify version: 4.25.0
Everything seems to work fine, but the error still appears.
I've tried all solutions/workarounds proposed here to no avail.
Any ideas please?

FYI, my website is in universal mode too and turns out the problem is I was using client mode for the registration of the amplify.js in nuxt.config

[desyatnik]

Having exactly the same issue with Nuxt in Universal mode and latest amplify version: 4.25.0
Everything seems to work fine, but the error still appears.
I've tried all solutions/workarounds proposed here to no avail.
Any ideas please?

FYI, my website is in universal mode too and turns out the problem is I was using client mode for the registration of the amplify.js in nuxt.config

Well, afaik amplify works in client mode only, so I'm not sure how it will behave in your case.
However, it got me thinking and I've changed my authentication plugin to run in client mode as well (not sure why I set otherwise to begin with), which resolved the issue completely.
To sum it up, I currently have both amplify.js and my custom auth plugin registered in nuxt.config.js in client mode and the error is finally gone.

[tkwong94]

Having exactly the same issue with Nuxt in Universal mode and latest amplify version: 4.25.0
Everything seems to work fine, but the error still appears.
I've tried all solutions/workarounds proposed here to no avail.
Any ideas please?

FYI, my website is in universal mode too and turns out the problem is I was using client mode for the registration of the amplify.js in nuxt.config

Well, afaik amplify works in client mode only, so I'm not sure how it will behave in your case.
However, it got me thinking and I've changed my authentication plugin to run in client mode as well (not sure why I set otherwise to begin with), which resolved the issue completely.
To sum it up, I currently have both amplify.js and my custom auth plugin registered in nuxt.config.js in client mode and the error is finally gone.

I think I started with amplify.js in client mode and not specifying mode in auth.js... so maybe the key is to sync both.

[benalexb]

I 'm having the same issue in "aws-amplify": "^3.0.11"

I found out Auth module didn't load configs of aws-exports,
so my solution for this issue is:

import Amplify from '@aws-amplify/core'
import { Auth } from '@aws-amplify/auth'
import awsconfig from './aws-exports'

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

Auth module can load awsconfig directly by Auth.configure(awsconfig)

I don't understand why Auth module didn't load aws-export from Amplify.configure, but I resolve this issue by this solution for now.

solved my problem, in Aug 2020 👍

[fireflysemantics]

I had the same thing just now with Angular 10's production build. The ahead of time build works fine. I'm going to try the above fix. This is the error I am getting. I'm not configuring Auth specifically, as Amplify.configure(awsconfig); has been enough in the past to configure everything.

[ERROR] 30:49.214 AuthError - 
            Error: Amplify has not been configured correctly.
            This error is typically caused by one of the following scenarios:

            1. Make sure you're passing the awsconfig object to Amplify.configure() in your app's entry point
                See https://aws-amplify.github.io/docs/js/authentication#configure-your-app for more information

            2. There might be multiple conflicting versions of aws-amplify or amplify packages in your node_modules.
                Try deleting your node_modules folder and reinstalling the dependencies with `yarn install`

t._log @ main.6fcdfbb350397e78d52f.js:1
Promise.then (async)
k @ polyfills.0bf894b4fb950da0c828.js:1
scheduleTask @ polyfills.0bf894b4fb950da0c828.js:1
scheduleTask @ polyfills.0bf894b4fb950da0c828.js:1
scheduleMicroTask @ polyfills.0bf894b4fb950da0c828.js:1
Z @ polyfills.0bf894b4fb950da0c828.js:1
then @ polyfills.0bf894b4fb950da0c828.js:1
bootstrapModule @ main.6fcdfbb350397e78d52f.js:1
zUnb @ main.6fcdfbb350397e78d52f.js:1
l @ runtime.e227d1a0e31cbccbf8ec.js:1
0 @ main.6fcdfbb350397e78d52f.js:1
l @ runtime.e227d1a0e31cbccbf8ec.js:1
t @ runtime.e227d1a0e31cbccbf8ec.js:1
r @ runtime.e227d1a0e31cbccbf8ec.js:1
(anonymous) @ main.6fcdfbb350397e78d52f.js:1
main.6fcdfbb350397e78d52f.js:1 [ERROR] 30:49.220 AuthError - 
            Error: Amplify has not been configured correctly.
            This error is typically caused by one of the following scenarios:

            1. Make sure you're passing the awsconfig object to Amplify.configure() in your app's entry point
                See https://aws-amplify.github.io/docs/js/authentication#configure-your-app for more information

            2. There might be multiple conflicting versions of aws-amplify or amplify packages in your node_modules.
                Try deleting your node_modules folder and reinstalling the dependencies with `yarn install`

[fireflysemantics]

https://stackoverflow.com/questions/63838978/moving-aws-exports-js-to-another-angular-project/63848309#63848309

[cybercussion]

So is it safe to say @aws-amplify works but aws-amplify has issues? I think I've had this in use now for 7 months and just started having issues. I don't know the difference between node_modules but I was seeing a lot of extra files get created on builds. I guess I need to look if its a legacy vs new thing or a case where its a 'owned' package and prior it wasn't? Should we even be installing the aws-amplify vs @aws-amplify?

I previously had:

Amplify.configure(awsconfig);
// now I have to also
Auth.configure(awsconfig);
// made the error go way

[ivorscott]

I'm using federatedSignIn with auth0 and aws cognito identity pool. My application is working fine but I still see this error message in my console. So I just removed the error missingAuthConfig and patched that bad boy.
https://www.npmjs.com/package/patch-package

[switch120]

I 'm having the same issue in "aws-amplify": "^3.0.11"

I found out Auth module didn't load configs of aws-exports,
so my solution for this issue is:

import Amplify from '@aws-amplify/core'
import { Auth } from '@aws-amplify/auth'
import awsconfig from './aws-exports'

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

Auth module can load awsconfig directly by Auth.configure(awsconfig)

I don't understand why Auth module didn't load aws-export from Amplify.configure, but I resolve this issue by this solution for now.

Resolved my issue also that cropped up out of nowhere after an update to [email protected]. Thanks!

[jcardus]

@cybercussion that worked for me too, thanks for sharing. Why do we have to spend so much time with this? Why didn't I choose firebase???

[AUser000]

3.3.8 making same problem again. I fixed it by downgrading to 3.3.7

[cybercussion]

3.3.8 making same problem again. I fixed it by downgrading to 3.3.7

I bumped mine just now and did not have an issue. Due to running a lot of 3rd party packages I had to hand roll my update to Angular 11, nuke my node_modules and npm install to find joy.

And I opted to not use the stock aws UI components either, so I'm mainly using:

"aws-amplify": "^3.3.9",
"aws-amplify-angular": "^5.0.38",

I had to use a combo of npm outdated and make my own decisions about what I could update as ng update wasn't letting it roll on its own.

[jebarco1]

i had to do 'amplify push' . fixed my issue

[mgarabedian]

I had been having similar issues. I had mistakenly downloaded aws-exports.js from AWS AppSync console, and not taken it from src/aws-exports.js in Amplify. After that, it was solved.

[matiangul]

Be aware that version 3.3.12 is also bugged, but it's already fixed in version 3.3.13

[krikork]

Be aware that version 3.3.12 is also bugged, but it's already fixed in version 3.3.13

3.3.11 was working ok but upgrading to 3.3.13 seemed to introduce the issue again.

[Deiiv]

Having this issue with 3.3.14, amazing stuff! Loving the consistency

It seems more so related to changing versions, not a specific version tbh, but not sure on the root cause

Edit:

I ended up adding the below as per above, in addition to having Amplify.configure already setup:

import { Auth } from '@aws-amplify/auth'
Auth.configure(awsconfig)

I also had to do the same with other modules, eg. with Api:
import { API } from "aws-amplify";
API.configure(aws_exports);

Why is this all of a sudden required? Why is doing Amplify configure insufficient?

[pnewhook]

Just ran into this with aws-amplify 3.3.14 and @aws-amplify/ui-react 0.2.34. Updated a functioning app from 3.3.13 and 0.2.33 and suddenly this error is popping up on the withAuthenticator login page.

[seanim0920]

Running into this issue still after upgrading my amplify version. @Deliv 's solution seems to work but this is more cumbersome than the previous version.

[24601]

The code quality on AWS Amplify (or lack thereof) blows me away. How AWS sells this is beyond me.

Amplify's whole purpose is to ease integration of a suite of services and improve productivity. When our teams fight the framework's quality on basics like this, it not only erases any efficiency, speed, and cost benefit for us, it hampers our ability to execute and costs us more.

If we had back in developer time what we have spent in wasted time fighting the framework's atrocious quality and reliability it'd be more than our entire AWS bill.

Nothing is perfect nor should it be or can it be, but this was the worst architectural decision I've made in a long time to have our teams on this. The promise was there, the idea is great, but the execution is of the utmost worst quality with a fragmented universe of packages, deps, and inconsistencies that are bad enough without all the random bugs, but are even worse when they don't work well together because the UI frameworks don't jive with the core, etc, etc.

How in the world do builds that are so badly broken in relatively common environments make it to release so often and consistently with Amplify? I don't mean to sound harsh, but we all know the world's supposed cloud leader and largest provider in the world can easily do better, and Amplify isn't a particularly bleeding edge product, but it is pretty important for developer productivity & customer productivity, and any quality issue in it cascades into applications built upon and with it. And these elementary issues have been going on for years now, why can't AWS get control of the quality here on releases?

In what world is this acceptable?

And it's been this way for years, and it doesn't have to be this bad! It's not like it's a new area of medicine we're needing to make discoveries in for decades to come and we're gonna crawl before we walk, this is a collection/glue offering of other production-grade services in highly established languages with very well-defined interfaces in an ecosystem AWS completely controls on its own, 100%, and we can't even keep the most basic level of functionality from suffering regressions, let alone stopping new bugs that always crop up!

@swaminator - can you give us and/or our support rep some resources to address this, but more importantly, discuss and share what the quality plan here is. We all know Amplify doesn't need to be this bad, why is it? And what are you doing to change that? When will this happen? I have to say (esp also being a Google Cloud, Firebase, and Azure Mobile Apps [etc] customer), Amplify ranks as the biggest mistake I've made as a technology executive in choosing a platform. Any possible value add from the product vision (which is GREAT) is completely destroyed and orders of magnitude dumped into the negative with the myriad of issues. If we didn't already have so much invested in it we would be GONE, but we are quickly reaching the point where it is becoming such an impediment to productivity, it will actually make more sense in schedule and finance to bite the bullet and migrate a different framework that actually makes good on its developer productivity and management productivity story rather than adding a whole other layer of madness, expense, delay, unpredictability, and risk.

And don't miss the party over at #7555, either!

[24601]

Exact same code with
"@aws-amplify/auth": "^3.4.7", "@aws-amplify/ui-react": "^0.2.24",
works no problem, Hub auth messages, auth works, everything is great (verified that these are the versions in package-lock.json and actually in node_modules in their package.json, these are the version strings, it is not as if they resolved to different versions, it is actually 3.4.7 and 0.2.24 respectively.
"@aws-amplify/auth": "^3.4.17", "@aws-amplify/ui-react": "^0.2.34",
nothing works.

The problem, amongst others, is that 3.4.17 and 0.2.34 include deps updates that allow us to run higher versions of other dependencies that have fixes for critical security issues in them. This isn't a "convenience" thing, this is a security issue that is driving the upgrade. "Stay on old code" isn't an acceptable answer.

[24601]

@sammartinez - can we get this re-opened as this appears to be a regression or should I open a new issue for this (I don't want to pollute with a new issue if reopening is going to be more appropriate but also don't want to sit here yammering on a closed issue/just talking to myself)?

We have an AWS Support ticket open against this that's been forwarded to the service team, so is this redundant or helpful to also have the issue open in GH?

[sammartinez]

@sammartinez - can we get this re-opened as this appears to be a regression or should I open a new issue for this (I don't want to pollute with a new issue if reopening is going to be more appropriate but also don't want to sit here yammering on a closed issue/just talking to myself)?

We have an AWS Support ticket open against this that's been forwarded to the service team, so is this redundant or helpful to also have the issue open in GH?

@24601, Can you look to reopen a new issue with your above callout, I want to be able to track this as a new issue. Thanks ahead of time!

[24601]

@sammartinez - can we get this re-opened as this appears to be a regression or should I open a new issue for this (I don't want to pollute with a new issue if reopening is going to be more appropriate but also don't want to sit here yammering on a closed issue/just talking to myself)?
We have an AWS Support ticket open against this that's been forwarded to the service team, so is this redundant or helpful to also have the issue open in GH?

@24601, Can you look to reopen a new issue with your above callout, I want to be able to track this as a new issue. Thanks ahead of time!

Thank you, sir, I appreciate your help and advice in getting this issue tracked to resolution. I have opened #7619 and AWS Support Case ID 7895928411 to track this issue.

[24601]

Our issues here were related that some change in 3.4.7 -> 3.4.17 brought up an issue related to duplication with the aws-amplify library that existed from before modularization was used: removing the modularized auth library resolved the issue. Thank you @elorzafe