Introdução

1. Nós iremos aqui colocar autenticação em todas as páginas, para a pessoa que não estiver autenticada, não possa entrar nas páginas.

Criação da autenticação

1. Nós iremos começar pela nossa “home.tsx”. Vamos começar criando um router e criando um estado de loading, que vai começar como verdadeiro.

   const router = useRouter();
   const [loading, setLoading] = useState(true);
   

2. Em seguida iremos criar um useEffect, que vai verificar se o usuário tem o token, se ele não tiver, vai ser redirecionado para login, e se tiver, nós vamos deixar o loading como falso.

   	useEffect(() => {
       if (!sessionStorage.getItem("onebitflix-token")) {
         router.push("/login");
       } else {
         setLoading(false);
       }
     }, []);
   

3. Agora iremos fazer uma verificação: Se o loading for verdadeiro, nós iremos retornar a página do spinner, e com isso não vai aparecer nada da nossa página normal.

   if (loading) {
   	return <PageSpinner />;
   }
   

4. Dessa forma, você pode logar e tentar acessar a “/home”, verá que vai carregar esse spinner e você será enviado para login.

5. Agora podemos copiar tudo isso e colocar em todas as páginas. Só que, você sempre tem que colocar o if antes do return e colocar esse useEffect logo depois dos useState.

   const router = useRouter();
   const [loading, setLoading] = useState(true);
   
   useEffect(() => {
   	if (!isAuthenticated) {
   	  router.push("/login");
   	} else {
   	  setLoading(false);
   	}
   }, []);
   
   if (loading) {
   	return <PageSpinner />;
   }
   

6. Vamos agora em “search.tsx”

   const router = useRouter();
   const [loading, setLoading] = useState(true);
   
   useEffect(() => {
   	if (!isAuthenticated) {
   	  router.push("/login");
   	} else {
   	  setLoading(false);
   	}
   }, []);
   
   if (loading) {
   	return <PageSpinner />;
   }
   

7. Por último, vamos em “courses” e em seguida no arquivo de “episodes” colocar isso também.

   const router = useRouter();
   const [loading, setLoading] = useState(true);
   
   useEffect(() => {
   	if (!isAuthenticated) {
   	  router.push("/login");
   	} else {
   	  setLoading(false);
   	}
   }, []);
   
   if (loading) {
   	return <PageSpinner />;
   }
   

8. Agora, apenas pessoas logadas podem ver toda a nossa aplicação.