React, Firebase - signInWithEmailAndPassword - cannot use the user variable outside .then() block - reactjs

Question

I am trying to set up a react-app which uses firebase authentication only with email and password.
When you have a look at googles documentation for signing in with email and password, you find the following code:
firebase.auth().createUserWithEmailAndPassword(email, password)
.then((userCredential) => {
// Signed in
var user = userCredential.user;
// ...
})
.catch((error) => {
var errorCode = error.code;
var errorMessage = error.message;
// ..
});
In my application, I get auth and the submitted email / password via action.formState.values.email / action.formState.values.password.
initialState is the default user object, which I am then trying to modify and return for the function sessionReducer.
I have implemented it the following way:
import * as actionTypes from 'actions';
import { auth } from '../firebase';
const initialState = {
loggedIn: false,
user: {
first_name: 'First Name',
last_name: 'Second Name',
email: 'email#email.com',
avatar: '/images/avatars/avatar_11.png',
bio: 'Titel/Bio',
role: 'ADMIN'
}
};
const sessionReducer = (state = initialState, action) => {
switch (action.type) {
case actionTypes.SESSION_LOGIN: {
auth.signInWithEmailAndPassword(action.formState.values.email, action.formState.values.password)
.then((userCredential) => {
// Signed in
var user = userCredential.user;
return user;
})
.catch((error) => {
// Print error message
});
// ------ Cannot access user object from firebase here ------ //
return {
loggedIn: true,
user: {
...initialState.user,
email: user.email // <- Here I need the Email out of the user object from firebase
}
};
}
}
};
export default sessionReducer;
When I print the user object from firebase directly in the .then() block, I get everything I need but as soon as I want to use this user variable outside, after the the then block block, I don't have access to it.
I think the problem is, that the return statement runs too early... The firebase-call has not yet finished but the return statement already tries to access the user variable from firebase.
If you need any more information, just ask as I am not sure how much I have to provide...
Thanks for your help!

Answer 1

As Doug mentioned in the comment you can't use async code in a pure redux. To make your code work try to use something like redux-thunk or redux-saga. This example should explain a little bit how it works:
function makeASandwich(forPerson, secretSauce) {
return {
type: 'MAKE_SANDWICH',
forPerson,
secretSauce,
};
}
function apologize(fromPerson, toPerson, error) {
return {
type: 'APOLOGIZE',
fromPerson,
toPerson,
error,
};
}
function withdrawMoney(amount) {
return {
type: 'WITHDRAW',
amount,
};
}
// Even without middleware, you can dispatch an action:
store.dispatch(withdrawMoney(100));
// But what do you do when you need to start an asynchronous action,
// such as an API call, or a router transition?
// Meet thunks.
// A thunk in this context is a function that can be dispatched to perform async
// activity and can dispatch actions and read state.
// This is an action creator that returns a thunk:
function makeASandwichWithSecretSauce(forPerson) {
// We can invert control here by returning a function - the "thunk".
// When this function is passed to `dispatch`, the thunk middleware will intercept it,
// and call it with `dispatch` and `getState` as arguments.
// This gives the thunk function the ability to run some logic, and still interact with the store.
return function(dispatch) {
return fetchSecretSauce().then(
(sauce) => dispatch(makeASandwich(forPerson, sauce)),
(error) => dispatch(apologize('The Sandwich Shop', forPerson, error)),
);
};
}
What we are doing here is just enabling redux to handle async code.