React对接Amazon Cognito认证时遇Cannot set properties of undefined错误求助

版本信息 #

• React: 18.2.0
• amazon-cognito-identity-js: 6.3.1

触发的错误 #

Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'validationData')
    at AuthenticationDetails (AuthenticationDetails.js:22:1)
    at cognito.js:11:1
    ...

引发错误的库代码（AuthenticationDetails.js） #

/**
   * Constructs a new AuthenticationDetails object
   * @param {object=} data Creation options.
   * @param {string} data.Username User being authenticated.
   * @param {string} data.Password Plain-text password to authenticate with.
   * @param {(AttributeArg[])?} data.ValidationData Application extra metadata.
   * @param {(AttributeArg[])?} data.AuthParamaters Authentication paramaters for custom auth.
   */
  function AuthenticationDetails(data) {
    var _ref = data || {},
      ValidationData = _ref.ValidationData,
      Username = _ref.Username,
      Password = _ref.Password,
      AuthParameters = _ref.AuthParameters,
      ClientMetadata = _ref.ClientMetadata;
    this.validationData = ValidationData || {};
    this.authParameters = AuthParameters || {};
    this.clientMetadata = ClientMetadata || {};
    this.username = Username;
    this.password = Password;
  }

我的代码 #

import { CognitoUserPool, CognitoUser, AuthenticationDetails } from 'amazon-cognito-identity-js';
import { cognitoConfig } from './cognitoConfig.js'

const userPool = new CognitoUserPool({
    UserPoolId: cognitoConfig.UserPoolId,
    ClientId: cognitoConfig.ClientId
});

export const signIn = async (username, password) => {
    return new Promise((resolve, reject) => {
        const authDetails = AuthenticationDetails({
            Username: username,
            Password: password
        })
        const cognitoUser = CognitoUser({
            Username: username,
            Pool: userPool
        });

        cognitoUser.authenticateUser(authDetails, {
            onSuccess: (result) => {
                resolve(result);
            },
            onFailure: (err) => {
                reject(err);
            }
        });
    });
};

问题原因与解决方法 #

问题核心是实例化AuthenticationDetails和CognitoUser时未使用new关键字。这两个都是构造函数，直接调用会导致函数内部的this在严格模式下指向undefined，执行this.validationData = ...时自然触发"Cannot set properties of undefined"错误。

修正后的代码：

export const signIn = async (username, password) => {
    return new Promise((resolve, reject) => {
        // 为构造函数添加new关键字
        const authDetails = new AuthenticationDetails({
            Username: username,
            Password: password
        })
        // 为构造函数添加new关键字
        const cognitoUser = new CognitoUser({
            Username: username,
            Pool: userPool
        });

        cognitoUser.authenticateUser(authDetails, {
            onSuccess: (result) => {
                resolve(result);
            },
            onFailure: (err) => {
                reject(err);
            }
        });
    });
};

内容的提问来源于stack exchange，提问作者Skepi