I implement route protection by creating a protection page, whenever the user is not logged in, I wrap it in the page to be protected, but if the user is logged in, he/she is returned to the login page, I Wondering what my protected page is missing. Here's what I implemented in Protect.js:

import { useRouter } from 'next/router' import React, { useEffect,useState } from 'react' import {useUser} from "src/contexts/useUser" import { supabase } from 'src/db/supabase' const Protect = ({children}) => { // const {user,isLoading} = useUser() const {auth,isauth}=supabase.auth.getSession() const{user,isLoading}=supabase.auth.getUser() const [authenticatedState, setAuthenticatedState] = useState('not-authenticated') const Router = useRouter() useEffect(()=>{ if(!isLoading && !user){ Router.replace('/auth/login') } },[isLoading,user,Router,auth,isauth]) return ( <> {children} ) } export default Protect

The following is my protected page:

import Head from 'next/head'; import { subDays, subHours } from 'date-fns'; import { Box, Container, Unstable_Grid2 as Grid } from '@mui/material'; import { Layout as DashboardLayout } from 'src/layouts/dashboard/layout'; import { OverviewBudget } from 'src/sections/overview/overview-budget'; import { OverviewLatestOrders } from 'src/sections/overview/overview-latest-orders'; import { OverviewLatestProducts } from 'src/sections/overview/overview-latest-products'; import { OverviewSales } from 'src/sections/overview/overview-sales'; import { OverviewTasksProgress } from 'src/sections/overview/overview-tasks-progress'; import { OverviewTotalCustomers } from 'src/sections/overview/overview-total-customers'; import { OverviewTotalProfit } from 'src/sections/overview/overview-total-profit'; import { OverviewTraffic } from 'src/sections/overview/overview-traffic'; // import {useUser} from 'src/contexts/user' import { useRouter } from 'next/router'; import { useEffect } from 'react'; import Protect from 'src/contexts/Protect'; import { supabase } from 'src/db/supabase'; const now = new Date(); const Page = () => { const router = useRouter() // const user = useUser() useEffect(()=>{ const user = supabase.auth.getUser() if(!user){ router.push('/auth/login') } }) return(  <>                                 ) }; Page.getLayout = (page) => (  {page}  ); export default Page;

I tried to get the user from supabase using getUser() hook in supabase but it doesn't work