Já que o nosso retorno visual não depende do backend, deixamos ele por último dessa vez. Agora nós iremos na pasta “services”, iremos criar um arquivo chamado “authService.ts”. Nesse arquivo nós iremos ter o registro e login.
Nós iremos então importar a api e também iremos criar uma interface. Essa interface terá os dados que vamos receber do registro, parecido com o que fizemos com o “courseType”
```
import api from "./api";

interface RegisterParams {
  firstName: string;
  lastName: string;
  phone: string;
  birth: string;
  email: string;
  password: string;
}
```

Agora nós iremos fazer o serviço de fato e o método de registro

const authService = {
  register: async (params: RegisterParams) => {
    const res = await api.post("/auth/register", params).catch((error) => {
      if (error.response.status === 400) {
        return error.response;
      }

      return error;
    });

    return res;
  },
};

export default authService;

Nós iremos criar um handle para fazer esse registro. Nós iremos utilizar ele de forma assíncrona e também iremos utilizar um event sendo passado como parâmetro. Nós iremos importar o “FormEvent” fazendo um destructuring de react.
```
import { FormEvent } from "react";

const handleRegister = async (event: FormEvent<HTMLFormElement>) => {
	event.preventDefault();
};
```

Agora, nós iremos criar um formData, que é uma maneira de criar formulários em HTML durante a execução de um javascript. Nós vamos então pegar todos os inputs com ele e juntar tudo em parâmetros, similar ao que está acontecendo em “registerParams” no “authService”

Nós estamos usando um exclamação antes do “toString()”, por que nós estamos dando certeza para o typescript que não virá um valor undefined, pois todos os nossos inputs são obrigatórios, então nós temos certeza que sempre teremos um valor sendo retornado.

const handleRegister = async (event: FormEvent<HTMLFormElement>) => {
	event.preventDefault();

  const formData = new FormData(event.currentTarget);
  const firstName = formData.get("firstName")!.toString();
  const lastName = formData.get("lastName")!.toString();
  const phone = formData.get("phone")!.toString();
  const birth = formData.get("birth")!.toString();
  const email = formData.get("email")!.toString();
  const password = formData.get("password")!.toString();
  const confirmPassword = formData.get("confirmPassword")!.toString();
  const params = { firstName, lastName, phone, birth, email, password };
};

Nós vamos agora colocar uma verificação simples para a nossa senha e confirmação de senha, para que se elas forem diferentes, seja retornada uma mensagem travando o registro. Nós iremos logo logo fazer um toast para isso, por enquanto será um alert
1. Nós estamos usando um return para que o código seja travado a partir daqui. Se o if for falso, o código segue perfeitamente.
```
if (password != confirmPassword) {
	alert("A senha e confirmação de senha são diferentes!");

  return;
}
```
Agora, nós iremos fazer o chamado do serviço de registro, usaremos um await, e passaremos os “params” como parâmetro do método de registro.
1. Você precisa ir no topo da página importar o authService do authService, caso ele não apareça para ser importado sozinho.
```
const { data }= await authService.register(params);
```
Agora, nós temos o data que nós dará acesso a todos os retornos de registro. Nós iremos então definir o sucesso ou a falha desse nosso registro com um if/else
```
if (data.status === 201) {
	alert("Sucesso!");
} else {
	alert(data.message);
}
```
Nós iremos agora fazer a criação do router. O router ele será o que nós iremos usar para redirecionar o usuário assim que ele tiver sucesso no seu registro.
```
import { useRouter } from "next/router";

const Register = function () {
const router = useRouter();
```
Nós iremos utilizar do método push, que é um método usado para fazer o redirecionamento para outra página. Nós iremos mandar junto ao usuário com sucesso uma mesagem, para que com essa mensagem a outra página pegue e exiba uma mesagem.
1. Para passarmos coisas para outras páginas através da URL, nós iremos usar uma interrogação, para que não seja interpretada pela url.
```
if (data.status === 201) {
	router.push("/login?registred=true");
} else {
	alert(data.message);
}
```

Agora, nós podemos fazer a conexão do formulário e do botão com essa conexão com o backend que criamos

<Form className={styles.form} onSubmit={handleRegister}>

<Button type="submit" outline className={styles.formBtn}>
	CADASTRAR
</Button>

Agora, você pode fazer testes se quiser, colocando um registro válido e também invalido, como email já cadastro e também “senha” e “confirmação de senha” que não batem. No final, você será redirecionado e verá na URL a mensagem de true sendo retornada.

Criação de um toast

Nós iremos então criar o nosso toast, pois será com ele que iremos retornar mensagens de erro ao longo de toda a nossa aplicação.
Nós vamos então na pasta “common” dentro de “components”. Criaremos nela uma pasta chamada “toast” e iremos criar apenas 1 “index.tsx” e iremos fazer sua função.
```
const ToastComponent = function () {
  return <></>;
};

export default ToastComponent;
```
Vamos então importar para o código o toast e o toastBody de reactstrap.
```
import { Toast, ToastBody } from "reactstrap";
```

Vamos fazer uma interface de props, nós iremos receber de props: Aberto/fechado, mensagem e cor.

interface props {
  isOpen: boolean;
  message: string;
  color: string;
}

const ToastComponent = function ({ isOpen, message, color }: props) {
  return <></>;
};

Agora, nós podemos fazer a criação do toast em si.

<>
	<Toast
	  className={`${color} text-white fixed-top ms-auto mt-3`}
    isOpen={isOpen}
  >
	  <ToastBody className="text-center">{message}</ToastBody>
  </Toast>
</>

Nós iremos fazer a utilização desse toast. Nós iremos fazer antes de tudo dois useState, para sabermos se o toast está aberto ou fechado e também para recebermos a mensagem dele.
1. Nós iremos criar esse useState abaixo do nosso router, ele tem que ser criado acima de tudo, também do handle, já que vamos usar ele no handle.
```
const [toastIsOpen, setToastIsOpen] = useState(false);
const [toastMessage, setToastMessage] = useState("");
```

Nós vamos então colocar ele dentro do nosso primeiro erro, que será o erro de senha e confirmação de senha.

if (password != confirmPassword) {
	setToastIsOpen(true);
  setTimeout(() => {
  setToastIsOpen(false);
}, 1000 * 3);
	setToastMessage("Senha e confirmação diferentes.");
      
  return;
}