Nós iremos em “components” criar uma pasta chamada “homeAuth”, e aqui iremos colocar todos os components da nossa home, agora autenticada.

Iremos então em “pages”, aqui, nós iremos criar um arquivo chamado “home.tsx”, e não iremos criar um “.scss” para essa home, tudo vai vir dos components.

const HomeAuth = function () {
  return (
    <>
			<Head>
        <title>Onebitflix - Home</title>
        <link rel="shortcut icon" href="/favicon.svg" type="image/x-icon" />
      </Head>
      <main></main>
    </>
  );
};

export default HomeAuth;

Nós iremos então fazer a criação de um parágrafo, apenas para configurar a parte de autenticação.

const HomeAuth = function () {
  return (
    <>
			<Head>
        <title>Onebitflix - Home</title>
        <link rel="shortcut icon" href="/favicon.svg" type="image/x-icon" />
      </Head>
      <main>
        <p>Você está logado!</p>
      </main>
    </>
  );
};

export default HomeAuth;

Agora, nós iremos fazer uma verificação de autenticação. Nós iremos verificar se a pessoa tem um token na página de login e na de registro, se ela tiver, vamos mandar ela para home, nós vamos colocar esse useEffect logo abaixo dos useState, acima de todas as outras coisas.
```
useEffect(() => {
	if (sessionStorage.getItem("onebitflix-token")) {
	  router.push("/home");
  }
}, []);
```

Agora faremos a mesma coisa em registro, colocando acima de todas as coisas.

useEffect(() => {
	if (sessionStorage.getItem("onebitflix-token")) {
	  router.push("/home");
  }
}, []);

Agora, se a pessoa chegar nessa página estando autenticada, nós vamos redirecionar ela de forma automática para a página home.

Header

Criação do header logado (Elementos e estilo)

Nós iremos na pasta “common”, nela nós iremos criar uma pasta chamada “headerAuth”, pois o header autenticado vai fazer parte de várias páginas ao mesmo tempo.
```
import styles from "./styles.module.scss";

const HeaderAuth = function () {
  return <></>;
};

export default HeaderAuth;
```

Vamos então montar a nossa estrutura. Nós iremos primeiro fazer a parte da logo. Nós iremos fazer com que a pessoa clicando na logo, seja mandada para a página home.

<>
	<Container className={styles.nav}>
		<Link href="/home">
		  <img src="/logoOnebitflix.svg" alt="logoOnebitflix" className={styles.imgLogoNav}/>
	  </Link>
	</Container>
</>

Agora nós iremos separar por div o nosso input, a imagem para o search e também as letras do perfil da pessoa.

<>
	<Container className={styles.nav}>
	  <Link href="/home">
	    <img src="/logoOnebitflix.svg" alt="logoOnebitflix" className={styles.imgLogoNav}/>
    </Link>
	  <div className="d-flex align-items-center">
    <Form>
		    <Input
		      name="search"
	        type="search"
	        placeholder="Pesquisar"
	        className={styles.input}
	      />
	     </Form>
		   <img
		     src="/iconSearch.svg"
	       alt="lupaHeader"
	       className={styles.searchImg}
	     />
	     <p className={styles.userProfile}>AB</p>
     </div>
	</Container>
</>

Nós vamos agora ter o retorno visual desse header, vamos em “home.tsx”
```
<>
	<main>
	  <HeaderAuth />
  </main>
</>
```

Nós vamos agora verificar que está tudo certo visualmente, faltando apenas colocarmos as suas configurações visuais.

@import "../../../../styles/colors.module.scss";
.imgLogoNav{
  width: 160px;
	cursor: pointer;
}
.nav{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 24px 14px;
}
.userProfile{
  font-weight: bold;
  font-size: 24px;
  background-color: white;
	text-transform: uppercase;
  color: black;
	min-width: 45px;
  min-height: 45px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
	margin: 0px 14px;
}

Podemos ver que o resultado já está bem melhor, faltando alguns poucos ajustes.

.input {
  background-color: transparent;
  color: white;
  border-color: $lightGray;
  &:focus {
    background-color: transparent;
    color: white;
    border-color: $mediumGray;
    box-shadow: none;
  }

  &::placeholder {
    color: white;
  }
}
.searchImg {
  width: 26px;
  margin: 0px 10px;
  cursor: pointer;
}

Criação do modal

Agora, nós iremos fazer a criação de um modal. Esse modal ele terá a função de mandar o usuário para a página de dados e também dar a opção de sair, para ele sair da conta dele quando quiser.
Nós iremos utilizar o “react-modal”. ⇒ https://reactcommunity.org/react-modal/. Vamos então fazer a instalação dele.
```
npm install react-modal
```
```
npm i --save-dev @types/react-modal
```