Authentication: Error: Hydration failed because the initial UI does not match what was render

Unanswered

Northeast Congo Lion posted this in #help-forum

Northeast Congo LionOP

2023-07-03T13:10:32.000Z

hey i seem to get hydration errors when trying to protect certain routes.

My Component is very simple:

export default function AuthCheck({ children }: any) {
  const userD = useUserData();
  // console.log(userD, "HELLO");

  return userD?.user ? children : <Login />;
}

if i visit the page for the first time everything is fine. However if i refresh i get Error: Hydration failed because the initial UI does not match what was render. I assume that the state is lost on the server, so it doesnt prerender the authenticated route, but on my browser I dont have to log in again. Is there a way to fix this?

3 Replies

Northeast Congo LionOP

2023-07-03T13:59:08.000Z

it happens with a component as simple as this :

export default function AuthProvider({ children }: any) {
  const userD = useUserData();

  if (userD.user)
    return (
      <button
        onClick={() => {
          db.authStore.clear();
        }}
      >
        Logout
      </button>
    );

  return (
    <div>
      <button
        className="mx-10"
        onClick={async () => {
          await db
            .collection("users")
            .authWithPassword("email", "12345678");
        }}
      >
        Login
      </button>
      <button
        onClick={() => {
          db.authStore.clear();
        }}
      >
        Logout
      </button>
    </div>
  );

i assume the login state on the client is different than the server?