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.)
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:
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> );}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:
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> );}import { Amplify } from "aws-amplify";
Amplify.configure(config, { ssr: true });
export default function ConfigureAmplifyClientSide() { return null;}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:
import { Amplify } from 'aws-amplify';import ComponentX from 'module-fetch-auth';
Amplify.configure();
export default function App() { return ( <div> <ComponentX /> </div> );}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.