Unhandled Rejection (TypeError): this._oAuthHandler is undefined

Question

I am trying to run Amplify Authentication within my TypeScript/React web application. I've had it working for weeks, but am now getting errors within the source code of amplify-auth.

Within my index.tsx file, I configure the Auth object like so:

Amplify.configure({
   Auth: {
      identityPoolId: <identitypoolid>,
      region: <region>,
      userPoolId: <poolid>,
      userPoolWebClientId: <clientid>,
      oauth: {
         domain: <domain>,
         scope: ['phone', 'email', 'profile', 'openid', 'aws.cognito.signin.user.admin'],
         redirectSignIn: environment.redirectSignIn,
         redirectSignOut: environment.redirectSignout,
         responseType: 'token',
      },
   },
});

Within my App.tsx file, I wrap my application with Amplify's provided withAuthenticator HOC like so:

export default withAuthenticator(App)

in addition to relying on useEffect to listen to authentication events.

useEffect(() => {
      Hub.listen('auth', ({ payload: { event, data } }) => {
         switch (event) {
            case 'signIn':
            case 'cognitoHostedUI':
               storeToken();
               break;
            case 'signOut':
               setUser(null);
               break;
            case 'signIn_failure':
            case 'cognitoHostedUI_failure':
               console.log('Sign in failure', data);
               break;
            default:
               break;
         }
      });

I feel as if I don't have any configuration issues. The project has been working for weeks and this is a shared repo between a team (I'm the only one with this issue). I have had recent issues due to the use of an M1 Macbook with an ARM processor for development, but have used the same device for months. I have tried upgrading the amplify version, downgrading it, running the project through Rosetta, but all to no avail.

Answer 1

My guess is that something changed in your aws-exports.js file, which is why you had the problem but no one else on the team did. That file is not source-controlled, so it could be changed or deleted on your local machine but not others. You could try amplify pull, or in a real pinch, just ask another developer for their copy of aws-exports.js and/or the amplify directory, though I would caution against jumping to using the whole amplify directory.