I want to redirect the logged-out users immediately to the login page when they try to access the protected page. This means, it doesn't display the protected page as in the video but redirects the user to the login page right away with the protected path on the link. Can anyone help to figure out how to do this or give some tips to follow to achieve this?
This is my code:
import React from 'react';
import Footer from '@layout/Footer';
import Header from '@layout//Header';
import useUserStore from '@store/user';
import { useRouter } from 'next/router';
import Dashboard from '@layout/Dashboard/Dashboard';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import ShowNotification from '@components/dashboard/profile/ShowNotification';

const queryClient = new QueryClient();

const Main: React.FC<MainProps> = (props: any) => {
const { children } = props;
const router = useRouter();
const { loggedIn } = useUserStore();

React.useEffect(() => {
if (router.pathname.startsWith('/login') router.pathname.startsWith('/register')) return;

if (!loggedIn && router.asPath.startsWith('/dashboard')) {
router.push(/login?destination=${encodeURIComponent(${router.asPath})}, undefined, { shallow: true });
}
}, [router.pathname, loggedIn]);

if (
router.pathname.startsWith('/login')
router.pathname.startsWith('/register')
router.pathname.startsWith('/reset-password')
router.pathname.startsWith('/request-reset-password') ||
router.pathname.startsWith('/oauth-redirect')
) {
return (
<QueryClientProvider client={queryClient}>
<ShowNotification />
<main>{children}</main>
</QueryClientProvider>
);
}

return (
<QueryClientProvider client={queryClient}>
<ShowNotification />
<Header />
<div className="mx-auto max-w-screen-lg">{children}</div>
<Footer />
</QueryClientProvider>
);
};

export default Main;