Hook for redirecting when user is not logged in (React Router v6)

useUnauthenticatedRedirect.tsx

import { useNavigate } from "react-router-dom";
import useAuth from "./AuthContext";
import React, { useEffect } from "react";

/**
 * Redirects user to another page if not authenticated.
 * @param redirectTo Path to redirect to
 */
export function useUnauthenticatedRedirect(redirectTo: string = "/") {
  const navigate = useNavigate();

  // user = data
  // isValidating from swr
  const { user, isValidating } = useAuth();

  useEffect(() => {
    // redirect if we don't have user data, but also not in the middle of validating data (i.e. attempted once and failed)
    if (!user && !isValidating) {
      navigate(redirectTo, { replace: true });
    }
  }, [navigate, user, isValidating, redirectTo]);
}