Why is the async/await portion of my callback getting skipped?

Question

My callback function "login" gets called correctly when onSubmit is invoked in my LoginForm component, but the async/await portion of the code is skipped. Console.log 1 and 2 get invoked and I see them in the console, but console.log 3, which is inside the async/await portion of the code never runs. It gets skipped and then console.log 4 gets invoked. Any help would be greatly appreciated.

import React from 'react';
import { Form, Segment, Button, Label } from 'semantic-ui-react';
import { connect } from 'react-redux'
import { withFirebase } from 'react-redux-firebase'
import { Field, reduxForm, SubmissionError } from 'redux-form';
// import { login } from '../authActions'


class LoginForm extends React.Component {

render(){
   const { handleSubmit, error, firebase} = this.props
   console.log('4: LoginForm->render->firebase:',firebase)

   const myLogin = (credentials) => {
       console.log('1: myLogin fired',credentials)
       const {firebase} = this.props;
       console.log('2: myLogin -> firebase',firebase)

       return async (firebase)=> {
         console.log('3: async -> myLogin -> firebase: ', firebase)
        try {
          await firebase.auth().signInWithEmailAndPassword(credentials.email, 
credentials.password);
          console.log('try fired')
        } catch (error) {
          console.log(error);
          throw new SubmissionError({
        _error: 'Login failed'
          })
        }
      }

}
    return (
    <Form size="large" onSubmit={handleSubmit(myLogin)}>
  <Segment>
    <Field
      name="email"
      component={Form.Input}
      type="text"
      placeholder="Email Address"
    />
    <Field
      name="password"
      component={Form.Input}
      type="password"
      placeholder="password"
      />
             {error && <Label basic color='red'>{error}</Label>}
            <Button fluid size="large" color="teal">
          Login
        </Button>

      </Segment>
    </Form>
  );
};
};

const mapState = (state) => ({
firebase: state.firebase
})

//Attempted to use an action creator to log use in, but couldn't get it to work so I moved the auth call inside the component and called it myLogin
// const actions = {
//   login
// }

export default withFirebase(
connect(mapState, null)(reduxForm({form: 'loginForm'})(LoginForm))
  )

Konstantin Dobler · Answer 1 · 2019-01-30T23:04:51.163

0

Your myLogin is a function with a parameter credentials which returns another async function with a parameter firebase in which you await the promise firebase.auth()...

handleSubmit will call your myLogin function and pass it the form data. see here

So in your myLogin function you need to do everything you want, not return a function which will never get called. Try something like:

const myLogin = (credentials) => {
    console.log('1: myLogin fired',credentials)
    const {firebase} = this.props;
    console.log('2: myLogin -> firebase',firebase)

    try {
        console.log('3: async -> myLogin -> firebase: ', firebase)
        await firebase.auth().signInWithEmailAndPassword(credentials.email, 
            credentials.password);
        console.log('try fired')
    } catch (error) {
        console.log(error);
        throw new SubmissionError({
            _error: 'Login failed'
        })
    }
}

edited Jan 30 '19 at 23:04

answered Jan 30 '19 at 22:30

Konstantin Dobler

196
2
14

Sorry, I should have added more detail about that. I am using redux-form, which has a method called handleSubmit, which passes the values of the form (email and password) as an argument to whatever callback you pass in as an argument. At least that's my understanding. – user3735816 Jan 30 '19 at 22:46
Alright, so there's your problem. Your myLogin function gets passed the credentials and returns another async function *in which* you await a promise. But this returned function will never get called. – Konstantin Dobler Jan 30 '19 at 22:52

Why is the async/await portion of my callback getting skipped?

1 Answers1