Javascript RMUIF反应、材料ui、firebase-验证流

我正在努力使模板正常工作

目前，我一直在尝试让auth流执行

在本地环境中，有时我实际上可以登录。但是，在代码没有更改的情况下，在其他情况下，我会得到一个错误，该错误表示：

未处理的拒绝（TypeError）：无法读取的属性“code” 未定义（匿名函数） src/components/SignInDialog/SignInDialog.js:197

该代码块具有：

.catch((reason) => {
              const code = reason.code;
              const message = reason.message;

              switch (code) {
                case "auth/invalid-email":
                case "auth/user-disabled":
                case "auth/user-not-found":
                case "auth/wrong-password":
                  this.props.openSnackbar(message);
                  return;

                default:
                  this.props.openSnackbar(message);
                  return;
              }
            })

当我尝试注释该块时，我没有收到任何错误，但控制台日志显示：

未兑现的（承诺中的）未定义的

在生产环境中，我不能使用任何登录流。每个使用密码登录、发送登录链接和重置密码流都只是挂起-表单不提交。控制台日志显示：

未捕获（承诺中）类型错误：e未定义

我知道这个项目的创建者忙于其他项目而没有维护这个项目-但是在我放弃尝试如何使用它之前，有人能够解决身份验证问题吗

是否有人设法使此模板中的身份验证流正常工作

注册的完整代码为：

import React, { Component } from "react";

import PropTypes from "prop-types";

import validate from "validate.js";

import { withStyles } from "@material-ui/core/styles";

import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Typography,
  Tooltip,
  IconButton,
  Hidden,
  Grid,
  Button,
  Divider,
  TextField,
} from "@material-ui/core";

import { Close as CloseIcon } from "@material-ui/icons";

import AuthProviderList from "../AuthProviderList";

import constraints from "../../data/constraints";
import authentication from "../../services/authentication";

const styles = (theme) => ({
  closeButton: {
    position: "absolute",
    right: theme.spacing(1),
    top: theme.spacing(1),
  },

  icon: {
    marginRight: theme.spacing(0.5),
  },

  divider: {
    margin: "auto",
  },

  grid: {
    marginBottom: theme.spacing(2),
  },
});

const initialState = {
  performingAction: false,
  emailAddress: "",
  password: "",
  errors: null,
};

class SignInDialog extends Component {
  constructor(props) {
    super(props);

    this.state = initialState;
  }

  getSignInButton = () => {
    const { emailAddress, password, performingAction } = this.state;

    if (emailAddress && !password) {
      return (
        <Button
          color="primary"
          disabled={!emailAddress || performingAction}
          variant="contained"
          onClick={() => this.sendSignInLinkToEmail()}
        >
          Send sign-in link
        </Button>
      );
    }

    return (
      <Button
        color="primary"
        disabled={!emailAddress || performingAction}
        variant="contained"
        onClick={() => this.signIn()}
      >
        Sign in
      </Button>
    );
  };

  resetPassword = () => {
    const { emailAddress } = this.state;

    const errors = validate(
      {
        emailAddress: emailAddress,
      },
      {
        emailAddress: constraints.emailAddress,
      }
    );

    if (errors) {
      this.setState({
        errors: errors,
      });
    } else {
      this.setState(
        {
          errors: null,
        },
        () => {
          this.setState(
            {
              performingAction: true,
            },
            () => {
              authentication
                .resetPassword(emailAddress)
                .then((value) => {
                  this.props.openSnackbar(
                    `Sent password reset e-mail to ${emailAddress}`
                  );
                })
                .catch((reason) => {
                  const code = reason.code;
                  const message = reason.message;

                  switch (code) {
                    case "auth/invalid-email":
                    case "auth/missing-android-pkg-name":
                    case "auth/missing-continue-uri":
                    case "auth/missing-ios-bundle-id":
                    case "auth/invalid-continue-uri":
                    case "auth/unauthorized-continue-uri":
                    case "auth/user-not-found":
                      this.props.openSnackbar(message);
                      return;

                    default:
                      this.props.openSnackbar(message);
                      return;
                  }
                })
                .finally(() => {
                  this.setState({
                    performingAction: false,
                  });
                });
            }
          );
        }
      );
    }
  };

  signIn = () => {
    const { emailAddress, password } = this.state;

    const errors = validate(
      {
        emailAddress: emailAddress,
        password: password,
      },
      {
        emailAddress: constraints.emailAddress,
        password: constraints.password,
      }
    );

    if (errors) {
      this.setState({
        errors: errors,
      });
    } else {
      this.setState(
        {
          performingAction: true,
          errors: null,
        },
        () => {
          authentication
            .signIn(emailAddress, password)
            .then((user) => {
              this.props.dialogProps.onClose(() => {
                const displayName = user.displayName;
                const emailAddress = user.email;

                this.props.openSnackbar(
                  `Signed in as ${displayName || emailAddress}`
                );
              });
            })
            .catch((reason) => {
              const code = reason.code;
              const message = reason.message;

              switch (code) {
                case "auth/invalid-email":
                case "auth/user-disabled":
                case "auth/user-not-found":
                case "auth/wrong-password":
                  this.props.openSnackbar(message);
                  return;

                default:
                  this.props.openSnackbar(message);
                  return;
              }
            })
            .finally(() => {
              this.setState({
                performingAction: false,
              });
            });
        }
      );
    }
  };

  sendSignInLinkToEmail = () => {
    const { emailAddress } = this.state;

    const errors = validate(
      {
        emailAddress: emailAddress,
      },
      {
        emailAddress: constraints.emailAddress,
      }
    );

    if (errors) {
      this.setState({
        errors: errors,
      });

      return;
    }

    this.setState(
      {
        performingAction: true,
        errors: null,
      },
      () => {
        authentication
          .sendSignInLinkToEmail(emailAddress)
          .then(() => {
            this.props.dialogProps.onClose(() => {
              this.props.openSnackbar(`Sent sign-in e-mail to ${emailAddress}`);
            });
          })
          .catch((reason) => {
            const code = reason.code;
            const message = reason.message;

            switch (code) {
              case "auth/argument-error":
              case "auth/invalid-email":
              case "auth/missing-android-pkg-name":
              case "auth/missing-continue-uri":
              case "auth/missing-ios-bundle-id":
              case "auth/invalid-continue-uri":
              case "auth/unauthorized-continue-uri":
                this.props.openSnackbar(message);
                return;

              default:
                this.props.openSnackbar(message);
                return;
            }
          })
          .finally(() => {
            this.setState({
              performingAction: false,
            });
          });
      }
    );
  };

  
  signInWithAuthProvider = (provider) => {
    this.setState(
      {
        performingAction: true,
      },
      () => {
        authentication
          .signInWithAuthProvider(provider)
          .then((user) => {
            this.props.dialogProps.onClose(() => {
              const displayName = user.displayName;
              const emailAddress = user.email;

              this.props.openSnackbar(
                `Signed in as ${displayName || emailAddress}`
              );
            });
          })
          .catch((reason) => {
            const code = reason.code;
            const message = reason.message;

            switch (code) {
              case "auth/account-exists-with-different-credential":
              case "auth/auth-domain-config-required":
              case "auth/cancelled-popup-request":
              case "auth/operation-not-allowed":
              case "auth/operation-not-supported-in-this-environment":
              case "auth/popup-blocked":
              case "auth/popup-closed-by-user":
              case "auth/unauthorized-domain":
                this.props.openSnackbar(message);
                return;

              default:
                this.props.openSnackbar(message);
                return;
            }
          })
          .finally(() => {
            this.setState({
              performingAction: false,
            });
          });
      }
    );
  };
  

  handleKeyPress = (event) => {
    const { emailAddress, password } = this.state;

    if (!emailAddress && !password) {
      return;
    }

    const key = event.key;

    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
      return;
    }

    if (key === "Enter") {
      if (emailAddress && !password) {
        this.sendSignInLinkToEmail();
      } else {
        this.signIn();
      }
    }
  };

  handleExited = () => {
    this.setState(initialState);
  };

  handleEmailAddressChange = (event) => {
    const emailAddress = event.target.value;

    this.setState({
      emailAddress: emailAddress,
    });
  };

  handlePasswordChange = (event) => {
    const password = event.target.value;

    this.setState({
      password: password,
    });
  };

  render() {
    // Styling
    const { classes } = this.props;

    // Dialog Properties
    const { dialogProps } = this.props;

    const { performingAction, emailAddress, password, errors } = this.state;

    return (
      <Dialog
        fullWidth
        maxWidth="sm"
        disableBackdropClick={performingAction}
        disableEscapeKeyDown={performingAction}
        {...dialogProps}
        onKeyPress={this.handleKeyPress}
        onExited={this.handleExited}
      >
        <DialogTitle disableTypography>
          <Typography variant="h6">Welcome back</Typography>

          <Tooltip title="Close">
            <IconButton
              className={classes.closeButton}
              disabled={performingAction}
              onClick={dialogProps.onClose}
            >
              <CloseIcon />
            </IconButton>
          </Tooltip>
        </DialogTitle>

        <DialogContent>
          <Hidden xsDown>
            <Grid container direction="row">
            {/* 
              <Grid item xs={4}>
                <AuthProviderList
                  performingAction={performingAction}
                  onAuthProviderClick={this.signInWithAuthProvider}
                />
              </Grid>
            
              <Grid item xs={1}>
                <Divider className={classes.divider} orientation="vertical" />
              </Grid>
            */}
              <Grid item xs={12}>
                <Grid container direction="column" spacing={2}>
                  <Grid item xs>
                    <TextField
                      autoComplete="email"
                      disabled={performingAction}
                      error={!!(errors && errors.emailAddress)}
                      fullWidth
                      helperText={
                        errors && errors.emailAddress
                          ? errors.emailAddress[0]
                          : ""
                      }
                      label="Email address"
                      placeholder="john@clark.com"
                      required
                      type="email"
                      value={emailAddress}
                      variant="outlined"
                      InputLabelProps={{ required: false }}
                      onChange={this.handleEmailAddressChange}
                    />
                  </Grid>

                  <Grid item xs>
                    <TextField
                      autoComplete="current-password"
                      disabled={performingAction}
                      error={!!(errors && errors.password)}
                      fullWidth
                      helperText={
                        errors && errors.password ? errors.password[0] : ""
                      }
                      label="Password"
                      placeholder="&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;"
                      required
                      type="password"
                      value={password}
                      variant="outlined"
                      InputLabelProps={{ required: false }}
                      onChange={this.handlePasswordChange}
                    />
                  </Grid>
                </Grid>
              </Grid>
            </Grid>
          </Hidden>

          <Hidden smUp>
          {/* 
            <AuthProviderList
              gutterBottom
              performingAction={performingAction}
              onAuthProviderClick={this.signInWithAuthProvider}
            />
          */}
            <Grid container direction="column" spacing={2}>
              <Grid item xs>
                <TextField
                  autoComplete="email"
                  disabled={performingAction}
                  error={!!(errors && errors.emailAddress)}
                  fullWidth
                  helperText={
                    errors && errors.emailAddress ? errors.emailAddress[0] : ""
                  }
                  label="E-mail address"
                  placeholder="john@clark.com"
                  required
                  type="email"
                  value={emailAddress}
                  variant="outlined"
                  InputLabelProps={{ required: false }}
                  onChange={this.handleEmailAddressChange}
                />
              </Grid>

              <Grid item xs>
                <TextField
                  autoComplete="current-password"
                  disabled={performingAction}
                  error={!!(errors && errors.password)}
                  fullWidth
                  helperText={
                    errors && errors.password ? errors.password[0] : ""
                  }
                  label="Password"
                  placeholder="&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;"
                  required
                  type="password"
                  value={password}
                  variant="outlined"
                  InputLabelProps={{ required: false }}
                  onChange={this.handlePasswordChange}
                />
              </Grid>
            </Grid>
          </Hidden>
        </DialogContent>

        <DialogActions>
          <Button
            color="primary"
            disabled={!emailAddress || performingAction}
            variant="outlined"
            onClick={this.resetPassword}
          >
            Reset password
          </Button>

          {this.getSignInButton()}
        </DialogActions>
      </Dialog>
    );
  }
}

SignInDialog.propTypes = {
  // Styling
  classes: PropTypes.object.isRequired,

  // Dialog Properties
  dialogProps: PropTypes.object.isRequired,

  // Custom Functions
  openSnackbar: PropTypes.func.isRequired,
};

export default withStyles(styles)(SignInDialog);

import React，{Component}来自“React”；
从“道具类型”导入道具类型；
从“validate.js”导入validate；
从“@material ui/core/styles”导入{withStyles}”；
进口{
对话
对话标题，
对话内容，
对话行动，
排版，
工具提示，
IconButton，
隐藏的，
网格，
按钮
分隔器，
TextField，
}来自“@材料界面/核心”；
从“@material ui/icons”导入{Close as CloseIcon}”；
从“./AuthProviderList”导入AuthProviderList；
从“../../data/constraints”导入约束；
从“../../services/authentication”导入身份验证；
常量样式=（主题）=>({
关闭按钮：{
位置：“绝对”，
右：主题。间距（1），
顶部：主题。间距（1），
},
图标：{
边缘光：主题。间距（0.5），
},
分隔器：{
页边空白：“自动”，
},
网格：{
marginBottom：主题。间距（2），
},
});
常量初始状态={
表演动作：假，
电子邮件地址：“，
密码：“”，
错误：null，
};
类SignInDialog扩展组件{
建造师（道具）{
超级（道具）；
this.state=初始状态；
}
getSignInButton=（）=>{
const{emailAddress，password，performingAction}=this.state；
如果（电子邮件地址和密码）{
返回(
this.sendSignInLinkToEmail（）}
>
发送登录链接
);
}
返回(
this.sign（）}
>
登录
);
};
重置密码=（）=>{
const{emailAddress}=this.state；
常量错误=验证(
{
emailAddress:emailAddress，
},
{
emailAddress:constraints.emailAddress，
}
);
如果（错误）{
这是我的国家({
错误：错误，
});
}否则{
这是我的国家(
{
错误：null，
},
() => {
这是我的国家(
{
表演动作：对，
},
() => {
认证
.resetPassword（电子邮件地址）
。然后（（值）=>{
this.props.openSnackbar(
`已将密码重置电子邮件发送到${emailAddress}`
);
})
.catch（（原因）=>{
常量代码=原因代码；
const message=reason.message；
开关（代码）{
案例“验证/无效电子邮件”：
案例“身份验证/缺少android软件包名称”：
案例“身份验证/缺少继续uri”：
案例“身份验证/缺少ios捆绑包id”：
案例“auth/invalid continue uri”：
案例“身份验证/未授权继续uri”：
案例“未找到身份验证/用户”：
this.props.openSnackbar（消息）；
返回；
违约：
this.props.openSnackbar（消息）；
返回；
}
})
.最后（（）=>{
这是我的国家({
表演动作：假，
});
});
}
);
}
);
}
};
签名=（）=>{
const{emailAddress，password}=this.state；
常量错误=验证(
{
emailAddress:emailAddress，
密码：密码，
},
{
emailAddress:constraints.emailAddress，
密码：constraints.password，
}
);
如果（错误）{
这是我的国家({
错误：错误，
});
}否则{
这是我的国家(
{
表演动作：对，
错误：null，
},
() => {
认证
.sign（电子邮件地址、密码）
。然后（（用户）=>{
this.props.dialogProps.onClose（（）=>{
const displayName=user.displayName；
const emailAddress=user.email；
this.props.openSnackbar(
`以${displayName | | emailAddress}身份登录`
);
});
})
.catch（（原因）=>{
常量代码=原因代码；
const message=reason.message；
开关（代码）{
案例“验证/无效电子邮件”：
案例“授权/用户禁用”：
案例“未找到身份验证/用户”：
案例“身份验证/密码错误”：
this.props.openSnackbar（消息）；
返回；
违约：
this.props.openSnackbar（消息）；
返回；
}
})
.最后（（）=>{
这是我的国家({
表演动作：假，
});
});
}
);
}
};
sendSignInLinkToEmail=（）