1. A nossa conexão vai ser bem similar a que tivemos no registro. Mas antes, nós vamos configurar o toast de sucesso para quando o usuário vier da página de registro.

   1. Nós vamos usar o router novamente e também fazer 3 useState, agora nós teremos 1 para cor também.

   const router = useRouter();
   const [toastColor, setToastColor] = useState("");
   const [toastIsOpen, setToastIsOpen] = useState(false);
   const [toastMessage, setToastMessage] = useState("");
   

2. Nós iremos fazer um if para verificar se a mensagem está vindo como verdadeira. Para isso nós usaremos um useEffect e colocaremos como dependência o método “router.query”. Dessa forma o useEffect só será processado quando tivermos uma mudança na rota. (Caso isso não seja feito, o if entrará em um loop de verificação, causando erro ao next)

   1. Nós podemos fazer um teste, colocando a url de forma manual, apenas para ver se está funcionando ou não. “localhost:3001/login?sucess=true”

   const registerSucess = router.query.registred;
   useEffect(() => {
   	if (registerSucess === "true") {
   	  alert("Sucesso")
     }
   }, [router.query]);
   

3. Agora que está funcionando, nós podemos configurar as props do nosso toast.

   if (registerSucess === "true") {
   	setToastColor("bg-success");
     setToastIsOpen(true);
   	setTimeout(() => {
   	  setToastIsOpen(false);
     }, 1000 * 3);
     setToastMessage("Cadatro feito com sucesso!");
   }
   

4. Agora vamos passar tudo isso para o nosso toast

   <ToastComponent color={toastColor} isOpen={toastIsOpen} message={toastMessage}/>
   

5. Agora, nós podemos testar novamente de forma manual e verificar se está sendo retornada a mensagem. (http://localhost:3001/login?sucess=true)

Criando o método de login

1. Nós iremos agora no arquivo “authService.ts” para criar parâmetros para o login. Esse parâmetros serão apenas os inputs de email e senha, que é o que usamos.

   interface LoginParams {
     email: string;
     password: string;
   }
   

2. Agora iremos começar criando um método de login, muito parecido com o de registro

   login: async (params: LoginParams) => {},
   

3. Vamos colocar agora um “res”, que vai ter um método post para a url de login, pegando dessa vez o erro 400 e 401.

   login: async (params: LoginParams) => {
   	const res = await api.post("/auth/login", params).catch((error) => {
     if (error.response.status === 400 || error.response.status === 401) {
   	  return error.response;
     }
     return error;
    });
   },
   

4. agora faremos uma verificação, se tiver sucesso, retorna 200, então se for 200, iremos colocar no sessionStorage o token que vem do login.

   login: async (params: LoginParams) => {
   	const res = await api.post("/auth/login", params).catch((error) => {
     if (error.response.status === 400 || error.response.status === 401) {
   	  return error.response;
     }
     return error;
     });
   
   	if (res.status === 200) {
   	  sessionStorage.setItem("onebitflix-token", res.data.token);
     }
   
     return res;
   },
   

5. Agora abaixo do useState de registro, nós iremos criar um handle de login, que vamos colocar no formulário, parecido com o de registro.

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

6. Agora iremos pegar as informações usando o “formData”

   const handleLogin = async (event: FormEvent<HTMLFormElement>) => {
   	event.preventDefault();
   
   	const formData = new FormData(event.currentTarget);
   	const email = formData.get("email")!.toString();
   	const password = formData.get("password")!.toString();
   	const params = { email, password };
   }
   

7. Nós iremos agora colocar o método de login, iremos pegar apenas o status, pois as mesagens de erro que vão vir, nós vamos colocar juntas em uma só.

   const { status } = await authService.login(params);
   

8. Agora vamo verificar se o status é 200, se for, vamos mandar ele para home, se não for, vamos dizer que ou o email ou a senha estão incorretos.

   if (status === 200) {
   	router.push("/home");
   } else {
     setToastColor("bg-danger");
     setToastIsOpen(true);
     setTimeout(() => {
   	  setToastIsOpen(false);
     }, 1000 * 3);
     setToastMessage("Email ou senha incorretos!");
   }
   

9. Nós vamos conseguir verificar se a pessoa está autenticada através do “sessision-storage” nas páginas, quando a pessoa é logada o “authService” vai colocar o token no “session”.