2

I am using Routing recipe for users to be able to view/redirect between pages depending if user is logged in or not (https://github.com/prescottprue/react-redux-firebase/blob/next/docs/recipes/routing.md-react-routerv4+redux-auth-wrapperv2).

When I log out it does redirect to a Login page but stays blank and I got the error: 

"Uncaught Error: Supplied prop/s "dispatch" are reserved for internal firebaseConnect() usage."

My Login.js component is using firebaseConnect(). Is there an issue if one component is using firebase and it is used on another component that is using firebase too?

In tutorial I am following, versions of firebase, react-redux-firebase do differ but I did set up everything according to docs and trying to use most up to date versions. I do not know if that has anything to do with the issue.

From App.js:

<Route
   exact
   path="/login"
   component={UserIsNotAuthenticated(Login)}
/>

from Login.js:

onSubmit = e => {
    e.preventDefault();

    const { firebase } = this.props;
    const { email, password } = this.state;

    firebase
      .login({
        email,
        password
      })
      .catch(err => alert('Invalid Login Credentials'));
  };

export default firebaseConnect()(Login);

package.json:

"dependencies": {
    "classnames": "^2.2.6",
    "firebase": "^6.0.2",
    "history": "^4.9.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-redux": "^7.0.3",
    "react-redux-firebase": "^3.0.0-alpha.12",
    "react-router-dom": "^5.0.0",
    "react-scripts": "3.0.0",
    "redux": "^4.0.1",
    "redux-auth-wrapper": "^2.1.0",
    "redux-firestore": "^0.7.4"
  },
Omkar
  • 3,253
  • 3
  • 20
  • 36
domidevelop
  • 91
  • 1
  • 5

1 Answers1

1

I managed to fix the issue. As going through Docs (http://docs.react-redux-firebase.com/history/v3.0.0/docs/recipes/routing.html), UserIsNotAuthenticated is used directly in component, not on the route level, and along with withFirebase.

So it looks like this: App.js - remove UserIsNotAuthenticated on Login route:

<Route exact path="/login" component={Login} />

Login.js:

import { compose } from 'redux';
import { withFirebase } from 'react-redux-firebase';
import { UserIsNotAuthenticated } from '../../helpers/auth';

...

export default compose(
  UserIsNotAuthenticated,
  withFirebase
)(Login);

Now everything works. Once logged in, you are redirected from login page to home page and when you log out you are redirected to login page.

domidevelop
  • 91
  • 1
  • 5