Question

我正在尝试为我的React网站构建一个登录表单。我遇到的问题是登录。创建新帐户或手动登录后，登录无法正常工作。我使用signInWithEmailAndPassword()方法。 alert()确实会触发，但是Firebase不允许我登录。这很奇怪，因为在Firebase控制台中说我已登录，但我的应用程序未登录。

身份验证控制台： Console of Firebase Auth

创建帐户时，我保存以下字段：

（*为必填项）

名字*
姓氏
电子邮件*
地址*
邮政编码*
城市*
电话

创建帐户时将包含密码，密码将不会单独保存。

我的代码可能有点混乱，因为我一直在尝试一些实现/修复登录名的方法。我将react-router-dom用于重定向。这包括Redirect组件。登录成功后，我想重定向到“欢迎路线”。到目前为止，事情并没有如我所愿。

Account.js：

import React from 'react';
import { FaSignInAlt } from "react-icons/fa";
import Button from '../../button/button';
import Input from '../../input/input';
import firebase from "firebase";
import { Redirect } from 'react-router-dom';
import ROUTES from "../../../ROUTES.js";

import StyleVars from "../../../_vars.scss";
import "./account_styles.scss";

function checkIfValid(obj: Object) {
  for (let val in obj) {
    if (!obj[val]) return false;
  }

  return true;
}

const LOGIN_INITIAL_STATE = {
  email: '',
  password: ''
};

class Login extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isValid: {
        email: true,
        password: true
      },
      ...LOGIN_INITIAL_STATE
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  };

  handleChange(event) {
    if (event.target.value === "") {
      this.setState({
        isValid: {
          ...this.state.isValid,
          [event.target.name]: false
        },
        [event.target.name]: event.target.value
      });
    } else {
      this.setState({
        isValid: {
          ...this.state.isValid,
          [event.target.name]: true
        },
        [event.target.name]: event.target.value
      });
    };
  };

  handleSubmit(event) {
    event.preventDefault();

    const fieldStatesLogin = {};
    fieldStatesLogin.email = !! this.state.email && this.state.email.includes("@");
    fieldStatesLogin.pass = !! this.state.password;

    this.setState({
      ...this.state.isValid,
      ...fieldStatesLogin
    });

    if (checkIfValid(fieldStatesLogin)) {
      firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password).then(() => {
        alert("Success!");
        return <Redirect to={ ROUTES.WELCOME } />;
      }).catch(err => {
        this.setState({
          isValid: {
            email: false,
            password: false
          }
        });
      });
    };

    return false;
  }

  render() {
    return (
      <form className="login" onSubmit={ this.handleSubmit }>
        <Input onInput={ this.handleChange } wrapperclassnames="login__input" type="email"
        color={ this.state.isValid.email ? "black" : "not-valid" } name="email" labelbackground={ StyleVars.light }
    label="email" isrequired="95" />

    <Input onInput={ this.handleChange } wrapperclassnames="login__input" type="password"
    color={ this.state.isValid.email ? "black" : "not-valid" } name="password" labelbackground={ StyleVars.light }
    label="Password" isrequired="95" />

        <Button wrapperclasses="login__submit" type="submit">Submit</Button>
      </form>
    );
  };
};

const REGISTER_INITIAL_STATE = {
  first_name: '',
  last_name: '',
  email: '',
  address: '',
  postal_code: '',
  city: '',
  phone: '',
  password1: '',
  password2: ''
};

class Register extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isValid: {
        first_name: true,
        email: true,
        address: true,
        postal_code: true,
        city: true,
        password1: true,
        password2: true
      },
      ...REGISTER_INITIAL_STATE
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  };

  handleChange(event) {
    if (event.target.value === "") {
      this.setState({
        isValid: {
          ...this.state.isValid,
          [event.target.name]: false
        },
        [event.target.name]: event.target.value
      });
    } else {
      this.setState({
        isValid: {
          ...this.state.isValid,
          [event.target.name]: true
        },
        [event.target.name]: event.target.value
      });
    };
  };

  handleSubmit(event) {
    event.preventDefault();

    const fieldStates = {};

    fieldStates.first_name = !! this.state.first_name;
    fieldStates.email = !! this.state.email;
    fieldStates.address = !! this.state.address;
    fieldStates.postal_code = !! this.state.postal_code;
    fieldStates.city = !! this.state.city;
    fieldStates.password1 = !! this.state.password1 && this.state.password1 === this.state.password2;
    fieldStates.password2 = !! this.state.password2 && this.state.password1 === this.state.password2;

    this.setState({
      isValid: {
        ...this.state.isValid,
        ...fieldStates
      }
    });

    if (checkIfValid(fieldStates)) {
      firebase.auth().createUserWithEmailAndPassword(this.state.email, this.state.password1).then(() => {
        firebase.firestore().collection("users").doc(`${this.state.email}`).set({
          first_name: this.state.first_name,
          last_name: this.state.last_name,
          email: this.state.email,
          address: this.state.address,
          postal_code: this.state.postal_code,
          city: this.state.city,
          role: "user"
        }).then(() => {
          return <Redirect to={ ROUTES.WELCOME } />;
        }).catch(console.error);
      }).catch(console.error);
    }

    return false;
  }

  render() {
    const {
      first_name,
      last_name,
      email,
      address,
      postal_code,
      city,
      phone,
      password1,
      password2
    } = this.state;

    return (
      <form className="register" onSubmit={ this.handleSubmit }>
        <Input onInput={ this.handleChange } value={ first_name } name="first_name" labelbackground={ StyleVars.light }
    wrapperclassnames="register__input" type="text"
    color={ this.state.isValid.first_name ? "black" : "not-valid" } label="First name" isrequired="85" />

    <Input onInput={ this.handleChange } value={ last_name } name="last_name" labelbackground={ StyleVars.light }
    wrapperclassnames="register__input" type="text" color="black" label="Last name" />

    <Input onInput={ this.handleChange } value={ email } name="email" labelbackground={ StyleVars.light }
    wrapperclassnames="register__input" type="email"
    color={ this.state.isValid.email ? "black" : "not-valid" } label="Email" isrequired="85" />

    <Input onInput={ this.handleChange } value={ address } name="address" labelbackground={ StyleVars.light }
    wrapperclassnames="register__input" type="text"
    color={ this.state.isValid.address ? "black" : "not-valid" } label="Address" isrequired="85" />

    <Input onInput={ this.handleChange } value={ postal_code } name="postal_code" labelbackground={ StyleVars.light }
    wrapperclassnames="register__input" type="text"
    color={ this.state.isValid.postal_code ? "black" : "not-valid" } label="Postal code" isrequired="85" />

    <Input onInput={ this.handleChange } value={ city } name="city" labelbackground={ StyleVars.light }
    wrapperclassnames="register__input" type="text"
    color={ this.state.isValid.city ? "black" : "not-valid" } label="City" isrequired="85" />

    <Input onInput={ this.handleChange } value={ phone } name="phone" labelbackground={ StyleVars.light }
    wrapperclassnames="register__input" type="tel" color="black" label="Phone" />

    <Input onInput={ this.handleChange } value={ password1 } name="password1" labelbackground={ StyleVars.light }
    wrapperclassnames="register__input" type="password"
    color={ this.state.isValid.password1 ? "black" : "not-valid" } label="Password" isrequired="85" />

    <Input onInput={ this.handleChange } value={ password2 } name="password2" labelbackground={ StyleVars.light }
    wrapperclassnames="register__input" type="password"
    color={ this.state.isValid.password2 ? "black" : "not-valid" } label="Repeat Password" isrequired="85" />

    <Button wrapperclasses="register__submit" type="submit">Submit</Button>
  </form>
    );
  };
};

class Account extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      loginShown: true
    };

this.showRegister = this.showRegister.bind(this);
this.showLogin = this.showLogin.bind(this);
  };

  showRegister() {
    this.setState({
      loginShown: false
    });
  };

  showLogin() {
    this.setState({
      loginShown: true
    });
  };

  render() {
    return (
      <section className="account">
        <h2 className="account__title">
          {
            this.state.loginShown ?
            (
              "Account | Login"
            ) : (
              "Account | Register"
            )
          }
        </h2>
        <FaSignInAlt className="account__icon" />
        <div className="account__switch-wrapper">
          <div className="account__button-switch-wrapper">
        <Button className="account__login-switch account__button-wrapper"
        buttonprops={ { className: "account__button" } } onClick={ this.showLogin }>Login</Button>
        <Button className="account__register-switch account__button-wrapper account__button-wrapper--relative"
        buttonprops={ { className: "account__button" } } onClick={ this.showRegister }>Register</Button>
      </div>
      {
        this.state.loginShown ?
        (
          <Login />
        ) : (
          <Register />
        )
          }
        </div>
      </section>
    );
  };
};

export default Account;

先谢谢您

桑德

反应-Firebase Auth登录无法正确正常运行且没有错误

0 个答案: