0

I am using firebase v9 and react-router-dom v6 in my React app. I can detect the onauthstatechanged event but I am unable to route to the private route. Here are my components: Auth:

export const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    onAuthStateChanged(auth, user => {
        setCurrentUser(user);
        setLoading(false);
        console.log("un auth",user);
    })
  }, []);

  if(loading) return null;

  return (
    <AuthContext.Provider
      value={{
        currentUser
      }}
    >
      {children}
    </AuthContext.Provider>
  );
};

App:

<AuthProvider>
            <Router>
                <Header />

                <Routes>            
                <Route path="/" element={<Login/>} />
                <Route path="/home" element={
                            <PrivateRoute>
                                <Home />
                            </PrivateRoute>
                        }/>
                </Routes>
            </Router>
    </AuthProvider>

So far, the onauthstatechanged event is triggering. But how can I route to private route?

Nithur
  • 111
  • 2
  • 10

2 Answers2

0

Are you trying to navigate to a different route when the authstate has changed?

If that's the case, you can use

import {useNavigate} from 'react-router'

const navigate = useNavigate()
onAuthStateChanged = () => {
   ...your code
      navigate('your_private_route')
}

useNavigate is a react hook given by react-router

Arjis Chakraborty
  • 536
  • 2
  • 10
  • is it a good solution to directly roue the user? – Nithur Jan 23 '22 at 08:23
  • If I have assumed correctly your use case, I think it's a good way to navigate the user. Give it a try. Let me know if this works for you. Also, make sure in whatever component you use the ```useNavigate``` hook, that component is wrapped around ```Router``` from react-router-dom – Arjis Chakraborty Jan 23 '22 at 08:26
  • I've already used this method when a user signs in. But now I want to use the private route and automatically redirect the user to the home page whenever he loads the app. – Nithur Jan 23 '22 at 09:10
  • As per your answer I don't even need an auth provider right? – Nithur Jan 23 '22 at 09:16
  • You would need the auth provider to authenticate users. You wouldn't need the `````` thingy if all you are doing is redirecting the user to the ```home``` page. You can just use ```navigate('/home')``` for that. – Arjis Chakraborty Jan 23 '22 at 10:29
  • So in what cases would I need ``? – Nithur Jan 23 '22 at 15:04
  • Hopefully, [this](https://stackoverflow.com/questions/54594220/privateroute-not-working-in-reactjs-react-router-dom) gives you some answers – Arjis Chakraborty Jan 23 '22 at 16:42
0

The router starts working before the first auth check happens. So, render <Routers>...</Routers> conditionally: only if the first auth check was happened, something like this:

 { !loading ?     
            <Routes>
              ...   
            </Routes>     
    : <div>Loading...</div>}
Alexander
  • 1
  • 2