create-rivas-react/templates/nextjs/javascript/src/layout/PublicRoute.jsx

Boilerplate for create react with atomic design

import {useEffect, useState} from 'react';
import { useRouter } from 'next/router';

import ROUTES from 'config/routes';
import { useAuth } from 'context/AuthContext';

const PublicRoute = ({ children }) => {
  const router = useRouter();
  const [notAuth, setNotAuth] = useState(false);
  const { isAuthenticated, loadingAuth } = useAuth();

  useEffect(() => {
    if (isAuthenticated && !loadingAuth) {
      setNotAuth(false);
      router?.push(ROUTES.DASHBOARD.path);
    } else {
      setNotAuth(true);
    }
  }, [isAuthenticated, loadingAuth])


  if (loadingAuth || isAuthenticated) return null;

  if (notAuth) return <>{children}</>;

  return null;
};

export default PublicRoute;