Creating a component to protect routes

Hi, i created this component to protect the routes

function ProtectedRoute({ children }: { children: JSX.Element }) {
  const { data: user } = useUser();
  const { data: profiles } = useProfiles();
  const router = useRouter();

  if (!user || !profiles) {
    router.push("/");
    return <div></div>;
  }

  return <div>{children}</div>;
}

export default ProtectedRoute;

function ProtectedRoute({ children }: { children: JSX.Element }) {
  const { data: user } = useUser();
  const { data: profiles } = useProfiles();
  const router = useRouter();

  if (!user || !profiles) {
    router.push("/");
    return <div></div>;
  }

  return <div>{children}</div>;
}

export default ProtectedRoute;

And i'm wrapping my components inside this ProtectedRoute component. But it's not working. If i'm at let's say localhost:3000/profiles and i reload the page, it throws an error when it tries to filter profiles. I expect that error since it's not defined, so i redirect to '/' so it can fetch the data. What am i doing wrong here?

Supabase•4y ago

Talajax

Creating a component to protect routes

Hi, i created this component to protect the routes

function ProtectedRoute({ children }: { children: JSX.Element }) {
  const { data: user } = useUser();
  const { data: profiles } = useProfiles();
  const router = useRouter();

  if (!user || !profiles) {
    router.push("/");
    return <div></div>;
  }

  return <div>{children}</div>;
}

export default ProtectedRoute;

function ProtectedRoute({ children }: { children: JSX.Element }) {
  const { data: user } = useUser();
  const { data: profiles } = useProfiles();
  const router = useRouter();

  if (!user || !profiles) {
    router.push("/");
    return <div></div>;
  }

  return <div>{children}</div>;
}

export default ProtectedRoute;

Creating a component to protect routes

Similar Threads

Creating a component to protect routes

Similar Threads

Similar Threads

Similar Threads