Skydda sida med Next 13 med AppRoutes, Typescript och Firebase

Jag använder Next 13 med Typescript och Firebase och jag behöver skydda mina rutter. I princip vill jag bara att användaren som inte är inloggad ska omdirigeras till /login och inte få åtkomst till någon annan rutt. Medan användaren som är inloggad inte ser /login, men kan åtkomst till de andra rutterna. Jag kan göra detta med PageRoutes eller React, men jag har mycket svårt att göra detta med Next AppRoutes, kan någon hjälpa mig?

Min projektstruktur är:

Jag skapade en komponent ProtectedRoutes.tsx:

"use client"

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/hooks/useAuth';

const ProtectedRoutes = ({ children }: { children: React.ReactNode }) => {
  const { isLoggedIn, isLoading } = useAuth();
  const router = useRouter();

  useEffect(() => {
    if (!isLoading && !isLoggedIn) {
      router.push('/login');
    }
  }, [isLoggedIn, isLoading, router]);

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

export default ProtectedRoutes;

och min src/app/layout.tsx:

import { AuthProvider } from '@/hooks/useAuth';
import '../styles/globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'

import { ToastContainer } from "react-toastify";

import "react-toastify/dist/ReactToastify.css";
import ProtectedRoutes from '@/components/ProtectedRoutes';

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Proposals Mayara Dev',
  description: 'Proposals System Mayara Becker Dev',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  
  return (
    <html lang="en">
      <body suppressHydrationWarning={true} className={inter.className}>
        <ProtectedRoutes>
          <AuthProvider>
            {children}
            <ToastContainer position='bottom-right' />
          </AuthProvider>
        </ProtectedRoutes>
      </body>
    </html>
  )
}

Mitt projekt är här: https://proposals-mayarabecker-dev.vercel.app/

Du kan testa, användare: [email lösenord: 12345678

Min källkod är: https://bitbucket.org/eltin182/proposals-mayarabecker-dev/src/main/frontend/

Problemet är: när jag skriver /login medan jag inte är inloggad, visar det snabbt min startsida och sedan omdirigerar till /login, vilket inte är korrekt. Men om användaren är inloggad och skriver /login visas inloggningsformuläret även om de redan är inloggade, vilket inte är korrekt.

Jag skapade ProtectRoutes.tsx och inkluderade det i applikationens huvudlayout, det fungerar nästan, men det skyddar fortfarande inte sidan helt, eftersom när användaren inte är inloggad och försöker gå till /, kommer han att kunna se startsidan en liten stund. Och även när man är inloggad kommer det att komma åt /login, vilket inte verkar logiskt för mig.