Подтвердите форму, используя поставщика ReactJS - PullRequest
Новая
       7

Подтвердите форму, используя поставщика ReactJS

0 голосов
/ 17 марта 2020

Я делаю систему аутентификации, и у меня есть проблема с проверкой ввода ...

У меня есть провайдер, у которого есть функции входа в систему, регистрации и выхода из системы, которые общаются с firebase .. Здесь вход в систему функция внутри провайдера. js

    login(email,password){
        try{
            app.auth().signInWithEmailAndPassword(email,password) //effettuo il login, se va tutto bene... then =>
            .then(() =>{
                var user = app.auth().currentUser; //prendo l'utente corrente
                user.getIdToken().then((idToken) => { //prendo l'id_token dell'utente corrente
                    this.setState({ //aggiorno lo stato
                        isAuth : true,
                        currentUser: user,
                        currentUserToken: idToken,
                        userPassword: password
                    })
                    console.log("Login: id_token corrente: ",this.state.currentUserToken)
                    localStorage.setItem('password', password)
                })

                localStorage.setItem('userLogged', JSON.stringify(user)) //aggiorno il localstorage con l'utente corrente
            })
            .catch(error => {
                if(error.code === 'auth/wrong-password' || error.code === 'auth/invalid-email') {
                    console.error("Errore nell'authenticazione: ", error.code)

                 }
            })

        }catch(e){
            alert(e)
        }
}

Затем у меня есть компонент с именем LoginModal, который осуществляет доступ к функции входа в систему с помощью API CONTEXT 

<AuthConsumer>
{({login}) => (
    <Modal open={this.state.open} toggle={this.toggle}>
    <ModalHeader>Accedi</ModalHeader>
    <ModalBody>
    <Form>
        <FormGroup>
            <label htmlFor="email">Email</label>
            <FormInput placeholder = "mariorossi@splitlabs.it" id="email" value = {this.state.LogEmail} onChange = {(e) => this.setState({logEmail: e.target.value})}/>
        </FormGroup>
        <FormGroup>
            <label htmlFor="password">Password</label>
            <FormInput placeholder = "******" type = "password" id="password" value = {this.state.LogPassword} onChange = {(e) => this.setState({logPassword: e.target.value})}/>
        </FormGroup>
    </Form>
    <Button onClick ={() => {
        login(this.state.logEmail, this.state.logPassword)


    }} outline>Accedi</Button>
    </ModalBody>
 )}
</AuthConsumer>

Мой вопрос: как получить сообщение об ошибке в провайдере входа и отобразить ошибку при входе в систему?

1 Ответ

0 голосов
/ 17 марта 2020

Вы захотите установить ошибку, полученную из Firebase, в состояние, а затем использовать ее при рендеринге.

Итак 

try{
    app.auth().signInWithEmailAndPassword(email,password)
    ...
    .catch(error => {
        if(error.code === 'auth/wrong-password' || error.code === 'auth/invalid-email') {
            console.error("Errore nell'authenticazione: ", error.code)
        }
        this.setState({ signinError: error });
    })

И затем: 

<AuthConsumer>
{({login}) => (
    <Modal open={this.state.open} toggle={this.toggle}>
    <ModalHeader>Accedi</ModalHeader>
    <ModalBody>
    (this.state.signinError ? <div>{this.state.signinError}</div? : "")
    <Form>
        <FormGroup>

В последнем фрагменте могут быть некоторые синтаксические ошибки, но я надеюсь, что вы поняли.

...