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