How to create Private Routes with firebase v9 reactjs

Question

My problem is that the moment i navigate to the homepage and the user is not authenticated the page shows for a split second and then move on to the login page. I want it to redirect to login only and not show the homepage for a split second

I already created a private route in my project but for a split second the protected routes shows when i navigate on to it.

here is my code:

AuthContextProvider

const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
    });

    return () => unsubscribe();
  }, []);

  const value = { user };
  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
};

PrivateRoute.js

const PrivateRoute = ({ children }) => {
  let { user } = useAuth();

  if (user) {
    return <Outlet />;
  } else {
    return <Navigate to="/login" />;
  }
};

App.js

function App() {
  return (
    <Routes>
      <Route path="/login" element={<LoginPage />} />
      <Route path="/" element={<Layout />}>
        <Route element={<PrivateRoute />}>
          <Route path="/" element={<Home />} />
          <Route path="/home" element={<Home />} />
          <Route path="/reminders" element={<Reminders />} />
          <Route path="/archive" element={<Archive />} />
          <Route path="/trash" element={<Trash />} />
        </Route>
      </Route>
    </Routes>
  );
}

Loginpage.js

const LoginPage = () => {
  const { user } = useAuth();
  const navigate = useNavigate();
  const signIn = async () => {
    const provider = new GoogleAuthProvider();
    await signInWithRedirect(auth, provider);
  };

  useEffect(() => {
    onAuthStateChanged(auth, (currentUser) => {
      if (currentUser) {
        navigate("/");
      }
    });
  }, []);

  return (
    <>
      <button
        onClick={signIn}
        className="bg-blue-500 p-3 text-white hover:bg-blue-600"
      >
        Sign In With Google
      </button>
    </>
  );
};

Abdullah Ch · Answer 1 · 2022-06-17T13:34:12.167

4

Code for hindering the Loggedin User to go to the Login Route

I have created a SpecialRoute which will redirect the loggedIn User to the mainpage if the user tries to go the login page.

SpecialRoute.js

import { Login } from '../pages/Login';
import { useAuth } from '../firebase-config';
import React from 'react';
import { Outlet, Navigate } from 'react-router-dom';
// import { useAuth } from '../firebase-config';

export const SpecialRoute = () => {
  const user = useAuth();
  return user ? <Outlet /> : <Navigate to="/" replace />;
};

App.js

 <Route element={<SpecialRoute />}>
    <Route path="/login" element={<Login />} />
  </Route>

In your Private Route Component, do this :-

const PrivateRoute = ({ children }) => {
  let { user } = useAuth();

return typeof user === 'undefined' ? (
    <h1>Loading.....</h1>
  ) : user ? (
    <Outlet />
  ) : (
    <Navigate to="/login" />
  );
};

Below is how I created my private routes (in Firebase v9):-

useAuth Hook

// custom hook
export function useAuth() {
  //
  const [currentUser, setCurrentUser] = useState<any>();
  useEffect(() => {
    const unSubscribe = onAuthStateChanged(auth, (user) =>
      setCurrentUser(user)
    );
    return unSubscribe;
  }, []);
  return currentUser;
}

My PrivateRoute/ProtectedRouted Component

import { Login } from '../pages/Login';
import React from 'react';
import { Outlet } from 'react-router-dom';
import { useAuth } from '../firebase-config';

export const ProtectedRoute = () => {
  const user = useAuth();

  console.log('/////user autheticated', user);

  return typeof user === 'undefined' ? (
    <h1>Loading.....</h1>
  ) : user ? (
    <Outlet />
  ) : (
    <Login />
  );
};

App.js

function App() {
  return (
    <>
      <Router>
        <Routes>
          <Route element={<ProtectedRoute />}>
            <Route path="/" element={<Home />} />
          </Route>
          <Route path="/login" element={<Login />} />
          <Route path="/signup" element={<Signin />} />
        </Routes>
      </Router>
    </>
  );
}

edited Jun 17 '22 at 13:34

answered Jun 17 '22 at 11:19

Abdullah Ch

1,678
1
13
31

Thanks man, i think your solution solved the problem from showing the homepage for a split second however the useAuth is looping in useEffect. What should i do? – Paul Osorio Jun 17 '22 at 12:13
Why are you using `useAuth` in useEffect ? Can you share where exactly are you using it ? – Abdullah Ch Jun 17 '22 at 12:17
no i mean the code that you send on useuth it loops for me – Paul Osorio Jun 17 '22 at 12:19
my bad , i just notice i added a public route on login }> } /> like this and when i remove it, it works how can i do it where the login page will not be accessible when user is authenticated – Paul Osorio Jun 17 '22 at 12:25
If the user is already authenticated then the user should not be able to see the login route ? Is that what you're asking ? – Abdullah Ch Jun 17 '22 at 12:34
Yep, the user should not be able to access the login page – Paul Osorio Jun 17 '22 at 12:49
See the updated Answer – Abdullah Ch Jun 17 '22 at 13:34
it still is looping. its like when i go to homepage it passes it to login then passing it back to homepage over and over again. – Paul Osorio Jun 17 '22 at 15:16
Is your `useAuth` implementation similar to mine ? – Abdullah Ch Jun 17 '22 at 15:40
yes, i think the problem is in the private route code you write – Paul Osorio Jun 17 '22 at 16:00
1

The `if (user === 'undefined')' fixed my problem with routes "flashing" with protected routes by adding a LoaderComponent thank you! – JREAM Jun 20 '22 at 00:16

How to create Private Routes with firebase v9 reactjs

1 Answers1