prescottprue / react-redux-firebase

Redux bindings for Firebase. Includes React Hooks and Higher Order Components.
https://react-redux-firebase.com
MIT License
2.55k stars 559 forks source link

(bug) Private Route documentation example produces a bug #1032

Open alexiz10 opened 3 years ago

alexiz10 commented 3 years ago

Do you want to request a feature or report a bug?
bug

What is the current behavior? Following the example in [http://react-redux-firebase.com/docs/recipes/auth.html#private-route](Private Route example), there seems to be a bug that will always redirect you to login, even if you are logged in.

Here is my code at the moment:

import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom';
import { CssBaseline } from '@material-ui/core';
import { useSelector } from 'react-redux';
import { isLoaded, isEmpty } from 'react-redux-firebase';

import Home from './pages/Home';
import Dashboard from './pages/Dashboard';
import Register from './pages/Register';

import './styles/app.scss';

const PrivateRoute = ({ children, ...rest }) => {
    const auth = useSelector(state => state.firebase.auth);
    return (
        <Route
            {...rest}
            render={({ location }) =>
                isLoaded(auth) && !isEmpty(auth) ? (
                    children
                ) : (
                    <Redirect to={{ pathname: '/register', state: { from: location } }} />
                )
            }
        />
    );
};

const App = () => {
    return (
        <>
            <CssBaseline />
            <BrowserRouter>
                <Switch>
                    <Route path="/" exact component={Home} />
                    <Route path="/register" component={Register} />
                    <PrivateRoute path="/dashboard">
                        <Dashboard />
                    </PrivateRoute>
                </Switch>
            </BrowserRouter>
        </>
    );
};

export default App;

Whenever I go to /dashboard, the firebase state has not yet loaded and this causes isLoaded(auth) to be false and immediately redirects me to /register. If I look at the firebase state once I am in the register page, I can clearly see isEmpty set to false and my user profile loaded in state.

What is the expected behavior? Expected behavior is that it should not be redirecting me to /register if I am clearly logged into firebase.

Which versions of dependencies, and which browser and OS are affected by this issue? Did this work in previous versions or setups? Currently using firebase v8.1.1/rrf v3.8.1 on Mozilla/MacOS Catailna