score:0

Accepted answer

after some time, i just figured out how to do what i needed to do, so i post it here just in case someone also encounters this problem and seeks help.

if you don't use redux or context api and still want to implement this kind of feature, here's how i do:

so what i needed to do? i want authenticate through firebase, what you need to do -at least what i found- implement a app/level/state in order to check if user logged in or not and update the app level rendering, that renders the whole app and enforces behaviour accordingly.

so:

function app() {
  const [user, setuser] = usestate(null);
  const [isloading, setisloading] = usestate(true);

  useeffect(() => {
    const unsubscribe = onauthstatechanged(auth, (user) => {
      setisloading(true);

      if (user) {
        setuser(user);
      } else {
        setuser(null);
      }

      setisloading(false);
    });

    return unsubscribe;
  }, []);

  if (isloading) return <spinner />;

  return (
    <>
      <router>
        <routes>
          <route path='/' element={<privateroute user={user} />}>
            <route index element={<explore />} />
            <route path='/offers' element={<offers />} />
            <route path='/profile' element={<profile />} />
            <route path='/create-listing' element={<createlisting />} />
            <route path='/category/:categoryname' element={<category />} />
          </route>
          <route
            path='/sign-in'
            element={!user ? <signin /> : <navigate to='/' />}
          />
          <route
            path='/sign-up'
            element={!user ? <signup /> : <navigate to='/' />}
          />
          <route
            path='/forgot-password'
            element={!user ? <forgotpassword /> : <navigate to='/' />}
          />
        </routes>
        <navbar />
      </router>

      <toastcontainer autoclose={1000} />
    </>
  );
}

export default app;

here, basically after component mounts, we want useeffect to only execute once and set up listener for auth state changing, whenever auth state changes like sign-in or log-out, the code block of onauthstatechanged runs and when it runs, every time it sets the user if there's one or not, therefore re-renders the component which is app itself, and below the routing works accordingly. if you have a private route as i do, you can just pass the user as a prop, then:

import { navigate, outlet } from 'react-router-dom';

function privateroute({ user }) {
  return user ? <outlet /> : <navigate to='/sign-in' />;
}

export default privateroute;

Related Query

More Query from same tag