amplify-js: Unhandled TypeError with Auth.currentAuthenticatedUser()
Before opening, please confirm:
- I have searched for duplicate or closed issues and discussions.
- I have read the guide for submitting bug reports.
- I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
JavaScript Framework
Next.js
Amplify APIs
Authentication
Amplify Categories
auth
Environment information
System:
OS: macOS 13.5
CPU: (8) arm64 Apple M2
Memory: 81.22 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.5.0 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 9.8.0 - /usr/local/bin/npm
Browsers:
Chrome: 119.0.6045.159
Edge: 119.0.2151.72
Safari: 16.6
npmGlobalPackages:
corepack: 0.19.0
npm: 9.8.0
yarn: 1.22.19
Describe the bug
TypeError with Auth from AWS Amplify Across Different Components
I am experiencing a persistent TypeError related to the AWS Amplify Auth module in my React application. The error message Module ‘“aws-amplify”’ has no exported member ‘Auth’.ts(2305) occurs whenever I attempt to use Auth from @aws-amplify/auth. This issue is not isolated to a specific component but appears across different components where Auth is utilized.
Expected behavior
The expected behavior is that the Auth module from AWS Amplify should be recognized and utilized correctly for authentication purposes throughout the application, without throwing any TypeErrors.
Reproduction steps
Import Auth from @aws-amplify/auth in any component. Use any method from Auth, such as Auth.signOut() or Auth.currentAuthenticatedUser(). Observe that the application throws a TypeError stating that the Auth module is not exported from aws-amplify.
Code Snippet
// Put your code below this line.
import React, { useState } from 'react';
import { useRouter } from 'next/router';
import { useUser } from '../contexts/UserContext';
import { Auth } from '@aws-amplify/auth';
const Navigation = () => {
// ... other component logic ...
const handleLogout = async () => {
try {
await Auth.signOut(); // AWS Cognito sign out
// ... additional logout logic ...
} catch (error) {
console.error('Error signing out: ', error);
}
};
// ... remaining component code ...
};
export default Navigation;
Log output
// Put your logs below this line
Uncaught TypeError: Cannot read properties of undefined (reading 'currentAuthenticatedUser')
at eval (HomePage.tsx:42:10)
at commitHookEffectListMount (react-dom.development.js:23150:1)
at commitPassiveMountOnFiber (react-dom.development.js:24926:1)
at commitPassiveMountEffects_complete (react-dom.development.js:24891:1)
at commitPassiveMountEffects_begin (react-dom.development.js:24878:1)
at commitPassiveMountEffects (react-dom.development.js:24866:1)
at flushPassiveEffectsImpl (react-dom.development.js:27039:1)
at flushPassiveEffects (react-dom.development.js:26984:1)
at eval (react-dom.development.js:26769:1)
at workLoop (scheduler.development.js:266:1)
at flushWork (scheduler.development.js:239:1)
at MessagePort.performWorkUntilDeadline (scheduler.development.js:533:1)
eval @ HomePage.tsx:42
commitHookEffectListMount @ react-dom.development.js:23150
commitPassiveMountOnFiber @ react-dom.development.js:24926
commitPassiveMountEffects_complete @ react-dom.development.js:24891
commitPassiveMountEffects_begin @ react-dom.development.js:24878
commitPassiveMountEffects @ react-dom.development.js:24866
flushPassiveEffectsImpl @ react-dom.development.js:27039
flushPassiveEffects @ react-dom.development.js:26984
eval @ react-dom.development.js:26769
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
client.js:1 The above error occurred in the <HomePage> component:
at HomePage (webpack-internal:///./components/HomePage.tsx:41:80)
at Chat
at div
at MotionComponent (webpack-internal:///./node_modules/framer-motion/dist/es/motion/index.mjs:49:65)
at ToastProvider (webpack-internal:///./contexts/ToastContext.tsx:25:23)
at UserProvider (webpack-internal:///./contexts/UserContext.tsx:40:23)
at PresenceChild (webpack-internal:///./node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs:15:26)
at AnimatePresence (webpack-internal:///./node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs:72:28)
at MyApp (webpack-internal:///./pages/_app.tsx:30:24)
at _PathnameContextProviderAdapter (webpack-internal:///./node_modules/next/dist/shared/lib/router/adapters.js:106:24)
at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:2:5389)
at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:2:7785)
at Container (webpack-internal:///./node_modules/next/dist/client/index.js:153:5)
at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:323:24)
at Root (webpack-internal:///./node_modules/next/dist/client/index.js:582:25)
React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
console.error @ client.js:1
window.console.error @ setup-hydration-warning.js:18
overrideMethod @ console.js:213
logCapturedError @ react-dom.development.js:18687
callback @ react-dom.development.js:18755
callCallback @ react-dom.development.js:13923
commitUpdateQueue @ react-dom.development.js:13944
commitLayoutEffectOnFiber @ react-dom.development.js:23364
commitLayoutMountEffects_complete @ react-dom.development.js:24688
commitLayoutEffects_begin @ react-dom.development.js:24674
commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot @ react-dom.development.js:26682
performSyncWorkOnRoot @ react-dom.development.js:26117
flushSyncCallbacks @ react-dom.development.js:12042
flushPassiveEffectsImpl @ react-dom.development.js:27060
flushPassiveEffects @ react-dom.development.js:26984
eval @ react-dom.development.js:26769
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 1 more frame
Show less
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-2”, “aws_cognito_region”: “us-east-2”, // The region your Cognito service is hosted in “aws_user_pools_id”: “us-east-2_9S9WFq6Gx”, // Your Cognito User Pool ID “aws_user_pools_web_client_id”: “40ev1t07p25s89s6ru95314t87”, // Your Cognito User Pool App Client ID “oauth”: { “domain”: “carthaai.auth.us-east-2.amazoncognito.com”, // Your Amazon Cognito domain “scope”: [“email”, “openid”, “phone”], // The scopes for the OAuth flow “redirectSignIn”: “https://cartha.ai”, // The callback URL after sign-in “redirectSignOut”: “”, // Since sign out URL is optional, it’s left empty “responseType”: “code” // The OAuth response type you want to use }, Analytics: { disabled: false, }, };
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
Additional Context:
The error occurs in various components where Auth is imported and used. AWS Amplify is configured correctly in _app.tsx. The application was working fine prior to the recent changes. No conditional rendering or other major logic changes seem to affect this issue.
About this issue
- Original URL
- State: closed
- Created 7 months ago
- Comments: 19 (9 by maintainers)
Hi @zackseyun thank you for opening this issue.
Can you verify what version of
aws-amplifyyour project is installed with? It looks like you may haveaws-amplify@>6installed based on the error message. We recently released V6 of the library and the imports have changed. What this means is if your project is using V6, then the error you see (Module '"aws-amplify"' has no exported member 'Auth'.ts) is expected as we no longer exportAuthbut instead export the specific methods.For example:
signUpdocumentationsignUpdocumentationAlso note that when migrating to V6, a few other changes include the name of the methods - for example v6 no longer has
currentAuthenticatedUserbut has the equivalentgetCurrentUser.I also recommend taking a look at the migration guide for further details - https://docs.amplify.aws/javascript/build-a-backend/troubleshooting/migrate-from-javascript-v5-to-v6/#4-upgrade-category-usage
Let me know if you have any more questions.
@nadetastic is there a full list of equivalents to methods from v5 to v6? We are going to migrate to new version, and it’s really painful, as there is no info about that. For example, there was found nothing about
currentAuthenticatedUserreplacement in the docs, thanks.got it, yes that would be super helpful (and code examples help a TON).
yes I am still facing the issue, the new question is posted here:
https://github.com/aws-amplify/amplify-ui/issues/4788
@HurYur we are working on expanding the migration guide to show a list of equivalent methods between v5 and v6, will provide an update once it is published.
@zackseyun just to confirm, are you still facing an issue?
@zackseyun sure thing! So the
federatedSignIn()method has been renamed tosignInWithRedirect()since the behavior of this method is to redirect you to a different Social provider - also, you can use it to sign in a regular user through a redirect via the Cognito Hosted UI. Here’s a link to the documentation that explains a bit more: