getFirebase is not a function error using firebase auth create user

Question

Tried to search how to fix my problem but still can't figure it out.

I used Formik for signup and I want to pass the value to my firebase.

i want to get something like this (check image) firebase auth credentials

tutorial I'd following. https://www.youtube.com/watch?v=J_SEMZKFxtw 6:06 timeframe.

authActions.js

export const signUp = data => async (
   dispatch, 
   getState, 
   {getFirebase}
   ) => {
      const firebase = getFirebase()
   try {
      const res = await firebase
      .auth()
      .createUserWithEmailAndPassword(data.email, data.password);
      console.log(res);
 } catch(err) {}
};

signUp.js

import React from 'react';
import { connect } from 'react-redux';
import { Formik, Field } from 'formik';
import * as Yup from 'yup';

import { FormWrapper, StyledForm } from '../../../hoc/layout/elements';
import Input from '../../../components/UI/Forms/Input/Input';
import Button from '../../../components/UI/Forms/Button/Button';
import Heading from '../../../components/UI/Headings/Heading';

import * as actions from '../../../store/actions';

const SignUpSchema = Yup.object().shape({
    firstName: Yup.string()
    .required('Your first name is required')
    .min(3, 'Too short.')
    .max(25, 'Too long.'),
    lastName: Yup.string()
    .required('Your last name is required')
    .min(3, 'Too short.')
    .max(25, 'Too long.'),
    email: Yup.string()
    .email('Invalid email.')
    .required('The email is required.'),
    password: Yup.string().required('The password is required.').min(8, 'The password is too short'),
    confirmPassword: Yup.string()
    .oneOf([Yup.ref('password'), null], `Password doesn't match`)
    .required('You need to confirm your password.'),
})

const SignUp = ({ signUp }) => {
    return (
           <Formik 
            initialValues={{
                firstName: '',
                lastName: '',
                email: '',
                password: '',
                confirmPassword: ''
           }}
           validationSchema={SignUpSchema}
           onSubmit={(values, { setSubmitting }) => {
               console.log(values);
               signUp(values)
               setSubmitting(false)
           }}
           >
            {({isSubmitting, isValid}) => (
                <FormWrapper>
                    <Heading size="h1" color="white" noMargin>Sign up for an account</Heading>
                    <Heading size="h4" color="white">Fill in your details to register your new account</Heading>
                    <StyledForm>
                        <Field type='text' name='firstName' placeholder="Your first name" component={Input} />
                        <Field type='text' name='lastName' placeholder="Your last name" component={Input} />
                        <Field type='email' name='email' placeholder="Your email..." component={Input} />
                        <Field
                        type='password'
                        name='password'
                        placeholder="Your password..."
                        component={Input}
                        />
                        <Field
                        type='password'
                        name='confirmPassword'
                        placeholder="Re-type your password..."
                        component={Input}
                        />
                        <Button disabled={!isValid} type="submit">Sign up</Button>
                    </StyledForm>
                </FormWrapper>
            )}
           </Formik>
    );
};

const mapStateToProps = (state) => ({

})

const mapDispatchToProps = {
    signUp: actions.signUp,
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(SignUp);

./actions/index.js

export { signUp } from './authActions';

Answer 1

You need to use react-redux-firebase package and configure it with middleware thunk to be able to use getFirebase in redux action

 import thunk from 'redux-thunk';
 import { getFirebase } from 'react-redux-firebase';

 const store = createStore(
  rootReducer,
  initialState,
  compose(
    applyMiddleware([
      // Pass getFirebase function as extra argument
      thunk.withExtraArgument(getFirebase)
    ])
  )
);

Check the documentation for more information

Also in your action creator you don't need to destructure getFirebase from the third argument. It is actually a third argument

export const signUp = data => async (
   dispatch, 
   getState, 
   getFirebase
   ) => {
      const firebase = getFirebase()
   try {
      const res = await firebase
      .auth()
      .createUserWithEmailAndPassword(data.email, data.password);
      console.log(res);
 } catch(err) {}
};