Name:
interface
Value:
Amplify has re-imagined the way frontend developers build fullstack applications. Develop and deploy without the hassle.

Page updated May 3, 2024

Troubleshoot configuration errors

If you are running into a missing configuration or NoCredentials error message and have called Amplify.configure in your project, your Amplify API is most likely being called before Amplify.configure. This can happen in a few different ways. Below are three possibilities you can check to troubleshoot this issue.

Check 1: Validate that Amplify.configure is called in the root of your project

Make sure you are calling Amplify.configure in the root file of your project. The root file of your app may be different depending on your frontend framework. The current default for some common frameworks are listed below (if you are not using TypeScript the ts and tsx extensions would be js and jsx):

  • Vue.js: src/main.ts
  • React: src/main.tsx
  • Angular: src/main.ts
  • Next.js Page Router: pages/_app.tsx or src/pages/_app.tsx
  • Nuxt: app.vue (Or in a plugins file, as recommended here.)

If you are using the Next.js App Router, you can follow the suggestions in our Next.js documentation for root-level configuration. Keep in mind that if you are calling any APIs at the module-level (i.e. at the top of your file) in any of the Child components, you may still run into this issue. Continue on the Check 2 if this is the case.

Check 2: Move module-level Amplify API invocations

When Amplify APIs are used outside of your application lifecycle, there is a risk that a JavaScript bundler may place that API call before Amplify.configure. Module-level function calls (calls at the top-level of a file), are generally evaluated in the order that they are imported.

Below is an example of code that will likely result in a missing configuration or NoCredentials error message:

index.ts
import { Amplify } from 'aws-amplify';
import ComponentX from 'module-fetch-auth';
// fetchAuthSession() in ComponentX executed on import
Amplify.configure();
export default function App() {
return (
<div>
<ComponentX />
</div>
);
}
module-fetch-auth.tsx
import { fetchAuthSession } from 'aws-amplify/auth';
fetchAuthSession(); // Will throw "AuthUserPoolException: Auth UserPool not configured."
export default function ComponentX() {
return (
<div className="box">
...
</div>
);
}

This error can also happen when using Next.js Layouts and calling Amplify APIs in child components at the module-level (at the top of your file/module). See below for an example of this issue:

layout.tsx
import ConfigureAmplifyClientSide from '@/ConfigureAmplifyClientSide';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className="container py-6">
<>
<ConfigureAmplifyClientSide />
{children}
</>
</body>
</html>
);
}
ConfigureAmplifyClientSide.tsx
import { Amplify } from "aws-amplify";
Amplify.configure(config, { ssr: true });
export default function ConfigureAmplifyClientSide() {
return null;
}
page.tsx
import { fetchAuthSession } from "aws-amplify/auth";
// The layout calls configure, but fetchAuthSession ends up executing first
// Will throw "AuthUserPoolException: Auth UserPool not configured."
fetchAuthSession().then((session) => {
console.log(session);
});
export default function HomePage() {
return (
<div className="box">
...
</div>
);
}

To fix this, we suggest moving all Amplify API calls to within the application lifecycle. For instance, if you are using React, you can use the useEffect hook for functions that should run before the app is loaded:

index.ts
import { Amplify } from 'aws-amplify';
import ComponentX from 'module-fetch-auth';
Amplify.configure();
export default function App() {
return (
<div>
<ComponentX />
</div>
);
}
module-fetch-auth.tsx
import { type AuthSession, fetchAuthSession } from 'aws-amplify/auth';
import { useEffect, useState } from 'react';
export default function ComponentX() {
const [session, setSession] = useState<AuthSession|undefined>();
const getSession = async () => {
try {
const currentSession = await fetchAuthSession();
setSession(currentSession);
} catch (error: unknown) {
console.log(error);
}
};
useEffect(() => {
getSession();
}, []);
return (
<div className="box">
...
</div>
);
}

Check 3: Configure Amplify on each page of a multi-page app

If you are working in a multi-page app, you need to call Amplify.configure() for each page/route of your application. We recommend calling Amplify.configure in a common source file and importing it into each page.